user_mobile_front/src/pages/express.vue

<template>
	<div class="content">
		<!--运单号-->
		<div v-show="wayShow" class="sm" style="padding-top: 10px;height: 50px;">
			<div>
				<van-field maxlength="50" v-model="waybillNo" name="运单号" label="运单号" placeholder="运单号" />
				<img @click="wxScanCode(1)" src="../assets/images/sm.png" alt="">
			</div>
		</div>
		<!-- 寄件地址 -->
		<div class="jjinfo">
			<div>
				<div class="jj">
					<div class="jjaddress" style="width: 100vw;">
						<p style="flex: none;">寄</p>
						<div>
							<van-field class="font-heigth" v-model="SendInfoValue.name" label="姓名" name="pattern"
								placeholder="自动填充" />
							<van-field class="font-heigth" v-model="SendInfoValue.phone" label="手机号" name="pattern"
								placeholder="自动填充" />
							<div class="address font-heigth">
								<div class="address_label">地址</div>
								<div class="address_text">{{ SendInfoValue.address }}</div>
							</div>
						</div>
					</div>
					<!-- <div class="dzb" @click="link(1)">
						<img src="../assets/images/addlist.png" alt="">
						<p>地址簿</p>
					</div> -->
				</div>
				<div class="jj" style="border-top:.01rem solid #ededed">
					<div class="jjaddress">
						<p style="background: #fa9c22; flex:none;">收</p>
						<div>
							<van-field class="font-heigth" @click="changeAdderInfo"
								v-model="transmitMessageVlaue.addresseeName" name="" label="姓名" placeholder="自动填充" />
							<van-field class="font-heigth" @click="changeAdderInfo"
								v-model="transmitMessageVlaue.addresseePhone" label="手机号" name="pattern"
								placeholder="自动填充" />
							<div class="address font-heigth" @click="changeAdderInfo">
								<div class="address_label">地址</div>
								<div class="address_label" style="color: #ccc;"
									v-if="transmitMessageVlaue.addresseeProvince == undefined">自动填充
								</div>
								<div class="address_text" v-else>{{ transmitMessageVlaue.addresseeProvince }}{{
									transmitMessageVlaue.addresseeCity }}{{ transmitMessageVlaue.addresseeCounty }}{{
										transmitMessageVlaue.addresseeTown }}{{
										transmitMessageVlaue.addresseeAddrInfo }}
								</div>
							</div>
						</div>
					</div>
					<div class="dzb" @click="link(2)">
						<img src="../assets/images/addlist.png" alt="">
						<p>地址簿</p>
					</div>
				</div>
			</div>
		</div>

		<!-- 快递公司 -->
		<div class="kdshow">
			<van-field readonly clickable name="picker" :value="expressInfoShow" label="快递公司" placeholder="请选择快递公司"
				@click="showPicker = true" />
			<van-popup v-model="showPicker" position="bottom">
				<van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false">
					<template v-slot:option="slotProps">
						{{ slotProps.expresCompanyName }}
					</template>
				</van-picker>
			</van-popup>
		</div>

		<!-- 寄件属性 -->
		<div class="choose">
			<div>
				<div class="type_wp">
					<div>
						<p>物品类型</p>
						<p v-if="wptype == ''" @click="wpshow = true">请选择</p>
						<p v-else @click="wpshow = true">{{ wptype }}</p>
					</div>
					<div>
						<p>
							<template>重量(公斤)</template>
						</p>
						<p>
							<van-field name="Kilogram" style="padding: 0px;">
								<template #input>
									<van-stepper v-model="Kilogram" max="100"></van-stepper>
								</template>
							</van-field>
						</p>
					</div>
					<div>
						<p>
							<template>数量(件数)</template>
						</p>
						<p>
							<van-field name="stepper" style="padding: 0px;">
								<template #input>
									<van-stepper v-model="stepper" max="100"></van-stepper>
								</template>
							</van-field>
						</p>
					</div>
				</div>
				<div class="type_price">
					<div>
						<p>付款方式</p>
						<p v-if="pricetype == ''" @click="priceshow = true">请选择</p>
						<p v-else @click="priceshow = true">{{ pricetype }}</p>
					</div>
					<div>
						<p>声明价值</p>
						<p style="display: flex;justify-content: center;"><input
								style="width: 1rem;border: none;text-align: center;" v-model="declaredValue"
								type="number" />元
						</p>
					</div>
				</div>
				<div class="type_price" v-show="this.accountType == 1">
					<div>
						<p>邮购类型</p>
						<p v-if="addresstype == ''" @click="addressshow = true">请选择</p>
						<p v-else @click="addressshow = true">{{ addresstype }}</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 备注 -->
		<div class="bz">
			<div>
				<van-field style="font-size: 16px;" v-model="bz" name="备注" label="备注" placeholder="包装运输等要求" />
			</div>
		</div>

		<!-- 财务核销码 -->
		<div class="az" v-if="SendInfoValue.isVerification == 1">
			<van-field style="font-size: 16px;" v-model="authorization" name="authorization" label="财务核销码"
				placeholder="请输入财务核销码" />
			<img @click="vxSearchIcon" src="../assets/images/sm.png" alt="">
		</div>

		<!-- 我同意 -->
		<div class="check">
			<van-checkbox icon-size=".24rem" v-model="check" shape="">我同意《电子运单契约条款》</van-checkbox>
		</div>

		<!-- 寄件 -->
		<div class="btn-jj">
			<van-button type="info" color="#00c4b8" @click="save()">立即寄件</van-button>
		</div>

		<!-- 填写地址 -->

		<van-popup position="bottom" :style="{ height: '85%' }" v-model="adderInfoShow" class="whrite_add">
			<div class="recognition">
				<van-cell-group inset>
					<van-field style="height: auto;" v-model="discernMessage" rows="1" label="识别" type="textarea"
						placeholder="请粘贴,点击识别(姓名、手机号、省、市、区、详细地址间请输入空格)" />
				</van-cell-group>
				<div style="background-color: white;width: 100%;height: .8rem;padding-top: .2rem;">
					<van-button @click="shibie()" style="width: 15%;height: .6rem;float: right; margin-right: .2rem;"
						color="#00c4b8" block type="info" size="small">识别</van-button>
				</div>
			</div>

			<div class="adderMessage">
				<van-form @submit="onSubmit">
					<van-field v-model="discern.name" name="姓名" label="姓名" placeholder="自动填充"
						:rules="[{ required: false }]" />
					<van-field v-model="discern.phone" maxlength="11" type="number" name="手机" label="手机"
						placeholder="自动填充" :rules="[{ required: false }]" />
					<van-field name="area" v-model="discern.province" label="省" placeholder="自动填充" />
					<van-field name="area" v-model="discern.city" label="市" placeholder="自动填充" />
					<van-field name="area" v-model="discern.district" label="区" placeholder="自动填充" />
					<van-field name="area" v-model="discern.town" label="镇" placeholder="自动填充" />
					<van-field v-model="discern.address" maxlength="50" name="详细地址" label="详细地址" placeholder="自动填充"
						:rules="[{ required: false }]" />
					<div style="margin-top: 16px;">
						<van-button :disabled="disabled" color="#00c4b8" block type="info"
							native-type="submit">保存</van-button>
					</div>
				</van-form>
			</div>
		</van-popup>

		<!-- 弹窗物品类型 -->
		<van-popup v-model="wpshow" position="bottom">
			<van-picker title="物品类型" show-toolbar :columns="wplist" @confirm="onConfirm1" @cancel="wpshow = false" />
		</van-popup>
		<!-- 弹窗付款方式 -->
		<van-popup v-model="priceshow" position="bottom">
			<van-picker title="付款方式" show-toolbar :columns="pricelist" @confirm="onConfirm2"
				@cancel="priceshow = false" />
		</van-popup>


		<!-- 打印机选择器 -->
		<van-popup v-model="printerShow" position="bottom">
			<van-picker show-toolbar :columns="getPrintersList" @confirm="onPrinter" @cancel="printerShow = false">
				<template v-slot:option="value">
					{{ value.printerName }}
				</template>
			</van-picker>
		</van-popup>
	</div>
</template>

<script>
import areaList from "@/script/areas.js"
import { Toast } from 'vant';
import { saveMailDo, getSendInfo, geLogisticsList, getListOfPrinters, } from '../api/index'
import { spiltAddress } from '../api/addressBoook'
export default {

	data() {
		return {
			wptype: "物品",//物品类型
			addresstype: "顾客邮购",//地址类型
			youGouType: "",//邮购类型
			addressshow: false,//地址类型弹窗显示
			addlist: ['顾客邮购', '非顾客邮购'],//
			wpshow: false,//物品类型弹窗显示
			wplist: ["物品", "文件"],
			pricetype: "月结(公司件)",//付款类型
			stepper: '',//件数
			Kilogram: '',//公斤
			max: '',//最大数
			priceshow: false,//付款类型弹窗显示
			pricelist: ["到付", "自费(个人件)", "月结(公司件)",],
			check: false,//契约条款
			bz: '',//快递备注
			showPicker: false,//快递
			expressInfoShow: "顺丰快递",//快递公司展示
			expressPhone: "",//快递公司电话传值
			expressInfo: "1",//快递公司传值
			columns: [],//快递公司列表
			columns2: ["个人件", "公司件"],
			declaredValue: '0', //声明价值
			showPicker2: false,
			goodOrderNo: '',//商品订单编号
			waybillNo: '',//运单号
			wayShow: true,
			accountType: '',//账号类型
			costCenterList: [],//成本中心列表
			costCenterName: "",//成本中心展示
			costCenterId: "",//成本中心展示
			elvenPhone: '',//收件人输入的手机号
			pattern: /^\d{11}$/,
			SendInfoValue: {},//寄件人信息
			authorization: '',//财务核销码
			getPrintersList: [],//打印机获取数据
			printerShow: false,//打印机出现
			printerName: '',//选中的打印机名称
			printerId: '',//选中的打印机id
			adderInfoShow: false,//收件人信息弹框
			discernMessage: '',//识别信息
			discern: {
				name: '',
				phone: '',
				province: '',
				city: '',
				district: '',
				town: '',
				address: '',
				proDisTown: '',
			},//识别后的信息
			disabled: false,//确定按钮的使用
			isAddressIdTransfer: false,//是否传送地址铺的Id
		}
	},
	created: function () {
		this.accountType = localStorage.getItem("accountType")
		this.geLogisticsListAPIList()
	},
	async mounted() {
		const res = await getSendInfo({ userId: localStorage.getItem("userId") }, { emulateJSON: true, loading: true, message: '获取寄件人信息...' })
		if (res.code == 444) {
			Toast(res.error)
		} else {
			this.SendInfoValue = res
		}
		// 当从地址铺回来时将this.isAddressIdTransfer状态改变
		if (this.transmitMessageVlaue.isAddressIdTransfer) {
			this.isAddressIdTransfer = this.transmitMessageVlaue.isAddressIdTransfer
		}
		console.log(this.isAddressIdTransfer, 'this.isAddressIdTransfer')
	},
	methods: {
		// 运单号扫描
		wxScanCode(type) {
			let wx = this.$wx;
			this.$http.post(this.$store.state.host + "/weixin/getWxConfig", {
				url: window.location.href.split('#')[0]
			}, {
				emulateJSON: true
			})
				.then(res => {
					//发送成功
					var timestamp = res.wxConfig.timestamp;
					var noncestr = res.wxConfig.nonceStr;
					var signature = res.wxConfig.signature;
					var appId = res.wxConfig.appId;
					wx.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						// debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: appId, // 必填，公众号的唯一标识
						timestamp: timestamp, // 必填，生成签名的时间戳
						nonceStr: noncestr, // 必填，生成签名的随机串
						signature: signature, // 必填，签名，见附录1
						jsApiList: [
							"scanQRCode",
						] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
					});
					wx.ready(() => {
						wx.scanQRCode({
							needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
							scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
							success: (res) => {
								var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
								if (result.indexOf(",") != -1) {
									let result1 = res.resultStr.split(",");
									result = result1[result1.length - 1];
								}
								if (type == 1) {
									this.waybillNo = result;
								} else {
									this.goodOrderNo = result;
								}

							},
							error: function (res) {
								console.log(res);
							}
						});

					});
				}, res => {
					//发送失败
					Toast("网络错误!")
				})

		},

		// 收件人信息弹框
		changeAdderInfo() {
			this.adderInfoShow = true
			// 回显
			this.discern.province = this.transmitMessageVlaue.addresseeProvince
			this.discern.city = this.transmitMessageVlaue.addresseeCity
			this.discern.district = this.transmitMessageVlaue.addresseeCounty
			this.discern.name = this.transmitMessageVlaue.addresseeName
			this.discern.phone = this.transmitMessageVlaue.addresseePhone
			this.discern.town = this.transmitMessageVlaue.addresseeTown
			this.discern.address = this.transmitMessageVlaue.addresseeAddrInfo
		},
		async shibie() {
			if (this.discernMessage == '') {
				Toast('请粘贴地址')
				return
			}
			const res = await spiltAddress({ address: this.discernMessage })
			if (res.prov) {
				this.discern.name = res.per
				this.discern.phone = res.tel
				this.discern.province = res.prov
				this.discern.city = res.city
				this.discern.district = res.district
				this.discern.town = res.town
				this.discern.address = res.addr_info
			} else {
				Toast('请求失败')
			}
			console.log(res, 'res')
		},
		// 保存修改收件人信息
		async onSubmit() {
			if (this.discern.name == '' || this.discern.name == undefined) {
				Toast('请输入姓名')
				return
			}

			if (this.discern.phone == '' || this.discern.phone == undefined) {
				Toast('请填写手机号')
				return
			}

			if (this.discern.phone != '' && this.discern.phone != undefined) {
				let regPhone = new RegExp(this.$store.state.regPhone)
				if (!regPhone.test(this.discern.phone)) {
					Toast('手机号格式不正确')
					return
				}
			}

			if (this.discern.province == '' || this.discern.province == undefined) {
				Toast('请输入省')
				return
			}
			if (this.discern.city == '' || this.discern.city == undefined) {
				Toast('请输入市')
				return
			}
			if (this.discern.district == '' || this.discern.district == undefined) {
				Toast('请输入区')
				return
			}
			if (this.discern.town == '' || this.discern.town == undefined) {
				Toast('请输入镇')
				return
			}

			if (this.discern.address == '' || this.discern.address == undefined) {
				Toast('请输入详细地址')
				return
			}
			// 关闭弹窗
			this.adderInfoShow = false

			function equal(key1, key2) {
				return key1 === key2
			}

			// 如果发生修改 false , 没有修改 true
			this.isAddressIdTransfer = equal(this.transmitMessageVlaue.addresseeProvince, this.discern.province) &&
				equal(this.transmitMessageVlaue.addresseeCity, this.discern.city) &&
				equal(this.transmitMessageVlaue.addresseeCounty, this.discern.district) &&
				equal(this.transmitMessageVlaue.addresseeName, this.discern.name) &&
				equal(this.transmitMessageVlaue.addresseePhone, this.discern.phone) &&
				equal(this.transmitMessageVlaue.addresseeTown, this.discern.town) &&
				equal(this.transmitMessageVlaue.addresseeAddrInfo, this.discern.address)

			console.log("4444", this.isAddressIdTransfer)

			this.transmitMessageVlaue.addresseeProvince = this.discern.province
			this.transmitMessageVlaue.addresseeCity = this.discern.city
			this.transmitMessageVlaue.addresseeCounty = this.discern.district
			this.transmitMessageVlaue.addresseeName = this.discern.name
			this.transmitMessageVlaue.addresseePhone = this.discern.phone
			this.transmitMessageVlaue.addresseeTown = this.discern.town
			this.transmitMessageVlaue.addresseeAddrInfo = this.discern.address

			this.discern = {
				name: '',
				phone: '',
				province: '',
				city: '',
				district: '',
				town: '',
				address: '',
				proDisTown: '',
			}
			this.discernMessage = ''

		},

		// 财务核销码哦icon扫描
		async vxSearchIcon() {
			console.log('123')
			wx.scanQRCode({
				needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
				success: (res) => {
					var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
					if (result.indexOf(",") != -1) {
						let result1 = res.resultStr.split(",");
						result = result1[result1.length - 1];
					}
					console.log(result, '======财务核销码返回结果')
					this.authorization = result
				},
				error: function (res) {
					console.log(res, 'error++++++++++');
				}
			});
		},
		// 快递公司
		async geLogisticsListAPIList() {
			const res = await geLogisticsList({})
			this.columns = res.list.map((item) => {
				return {
					id: item.id,
					expresCompanyName: item.expresCompanyName
				}
			})
		},
		// 选择快递公司
		onConfirm(e) {
			this.expressInfoShow = e.expresCompanyName
			this.expressInfo = e.id
			this.showPicker = false
		},
		// 选择物品确定
		onConfirm1(e) {//确定
			this.wptype = e
			this.wpshow = false
		},
		// 选择付款方式确定
		onConfirm2(e) {//确定
			this.pricetype = e
			this.priceshow = false
		},
		// 地址簿跳转
		link(obj) {
			this.$router.push({ path: '/Myaddressbook', query: { active: obj } })
			// this.isAddressIdTransfer = true //进入地址铺了，传递
		},
		//立即寄件交互
		async save() {
			if (this.SendInfoValue.name == '' || this.SendInfoValue.name == undefined) {
				Toast('寄件人姓名不能为空')
				return
			}
			if (this.SendInfoValue.phone == '' || this.SendInfoValue.phone == undefined) {
				Toast('寄件人手机号不能为空')
				return
			}
			if (!this.pattern.test(this.SendInfoValue.phone)) {
				Toast('寄件人手机号码不正确')
				return
			}
			if (this.transmitMessageVlaue.addresseeName == '' || this.transmitMessageVlaue.addresseeName == undefined) {
				Toast('收件人姓名不能为空')
				return
			}
			if (this.transmitMessageVlaue.addresseePhone == '' || this.transmitMessageVlaue.addresseePhone == undefined) {
				Toast('手机号码不能为空')
				return
			}
			if (!this.pattern.test(this.transmitMessageVlaue.addresseePhone)) {
				Toast('收件人手机号码不正确')
				return
			}
			if (this.expressInfo == '' || this.expressInfo == undefined) {
				Toast('请选择快递公司')
				return
			}
			if (this.wptype == '' || this.wptype == undefined) {
				Toast('请选择物品类型')
				return
			}
			if (this.stepper == '' || this.stepper == undefined) {
				Toast('请选择重量')
				return
			}
			if (this.pricetype == '' || this.pricetype == undefined) {
				Toast('请选择付款方式')
				return
			}
			let payWay = ''
			let mainType = ''
			if (this.pricetype == "自费(个人件)") {
				payWay = '自费'
				mainType = '个人件'
			}
			if (this.pricetype == "月结(公司件)") {
				payWay = '月结'
				mainType = '公司件'
			}

			if (this.check == false) {
				Toast('请点击同意《电子运单契约条款》')
				return
			}

			const getPrinters = await getListOfPrinters({})


			if (getPrinters.code == 0) {

				if (getPrinters.data.length == []) {
					if (getPrinters.data.length == []) {
						this.shipServe()
						Toast('没有打印机')
					}
				} else {


					if (getPrinters.data.length != []) {
						this.getPrintersList = getPrinters.data.map((item) => {
							return { printerName: item.printerName, id: item.id }
						})
					}

					if (this.getPrintersList.length === 1) {
						this.shipServe(this.getPrintersList[0].id)
					} else {
						this.printerShow = true
					}
				}

			} else {
				Toast('系统异常')
			}



			return
		},
		// 打印机确认
		async onPrinter(e) {
			this.printerName = e.printerName;
			this.printerId = e.id;
			await this.shipServe(e.id)
		},
		// 寄件
		async shipServe(printId) {
			const $toast = Toast.loading({
				message: '保存中...',
				forbidClick: true,
				duration: 0
			});
			let pricetypeValue = ''
			if (this.pricetype == '月结(公司件)') {
				pricetypeValue = 3
			} else if (this.pricetype == '自费(个人件)') {
				pricetypeValue = 2
			} else if (this.pricetype == '到付') {
				pricetypeValue = 1
			}
			let wptypeValue = ''
			if (this.wptype == "物品") {
				wptypeValue = 2
			} else {
				wptypeValue = 1
			}
			// 去掉金额前的0
			if (this.declaredValue != 0) {
				this.declaredValue = this.declaredValue.replace(/^0+/, '')
			}
			let parmas = {
				expressInfo: this.expressInfo,//快递公司1-顺丰
				userAddressId: this.isAddressIdTransfer == false ? '' : this.transmitMessageVlaue.id,//收发室ID
				// userAddressId: 'ede4f065286a406dbb82064ec7524b4e',
				expressType: wptypeValue,//快件类型 1-文件 2-物品
				expressNum: this.stepper, //快递数量
				payInfo: pricetypeValue,//付费信息 1-到付 2-自付 3-月付
				expressRemark: this.bz,//快递备注
				expressWeight: this.Kilogram,//公斤
				expressPrice: this.declaredValue,//价值
				name: this.SendInfoValue.name,//寄件人姓名
				phone: this.SendInfoValue.phone,//寄件人手机号
				addresseeName: this.transmitMessageVlaue.addresseeName,//收件人姓名
				addresseePhone: this.transmitMessageVlaue.addresseePhone,//收件人手机号
				addresseeProvince: this.transmitMessageVlaue.addresseeProvince,//省
				addresseeCity: this.transmitMessageVlaue.addresseeCity,//s市
				addresseeCounty: this.transmitMessageVlaue.addresseeCounty,//区
				addresseeTown: this.transmitMessageVlaue.addresseeTown,//镇
				addresseeAddrInfo: this.transmitMessageVlaue.addresseeAddrInfo,//详细地址
				verificationCode: this.authorization, //财务核销码
				printId: printId,//打印机ID
			}
			const res = await saveMailDo({ ...parmas })
			if (res.msg == 'success') {
				Toast('寄件成功')
				this.$router.push('/')
			} else {
				this.$toast(res.error)
			}
			$toast.clear()
		}
	},

	computed: {
		areaList() {
			return areaList
		},
		transmitMessageVlaue() {
			return this.$store.state.transmitMessageVlaue;
		},
	}
}
</script>

<style scoped lang="less">
.content {
	.sm {
		display: flex;
		padding: .33rem;
		padding-bottom: 0;
		font-size: .3rem;
		justify-content: space-between;

		/deep/.van-field {
			width: 6.2rem;
			height: .76rem;

			.van-search__content {
				background-color: white;
			}

			input {
				text-align: right;
			}
		}

		img {
			width: .4rem;
			height: .4rem;
			position: relative;
			top: -.58rem;
			right: -6.38rem;
		}
	}

	.jjinfo {
		font-size: .24rem;
		color: #999999;

		padding: .33rem;
		padding-top: 0;
		word-break: break-word;

		>div {
			background: white;
			border-radius: .05rem;
			padding: 0rem .3rem;

			.jj {
				display: flex;
				align-items: center;
				// justify-content: space-between;
				padding: .2rem 0rem;

				.jjaddress {
					display: flex;
					padding: .1rem 0rem;

					.van-cell {
						padding: 0;
						margin: 0;


						.van-field__label.van-cell__title {
							width: 0.2em !important;
						}

					}

					.van-cell::after {
						margin-left: -16px;
						width: 100%;
					}



					>p {
						font-size: .24rem;
						font-weight: bold;
						display: inline-block;
						width: .5rem;
						height: .5rem;
						background: #00c4b8;
						text-align: center;
						line-height: .5rem;
						color: white;
						border-radius: 50%;
						margin-right: .3rem;
					}

					div {

						.font-heigth {
							padding: 4px 0;
						}
					}
				}

				.dzb {
					text-align: center;
					border-left: .01rem solid #ededed;
					padding-left: .2rem;
					width: 50px;

					img {
						width: .39rem;
						height: .42rem;
					}

					p {
						font-size: .2rem;
					}

				}
			}
		}

	}

	.kdshow {
		font-size: .3rem;
		padding: .3rem 0px;
		width: 6.84rem;
		background: white;
		border-radius: .05rem;
		margin: 0rem auto .2rem;

		/deep/.van-cell {
			padding: 0px .3rem;
			overflow: unset;

			input {
				text-align: right;
				height: .5rem;
				padding-right: .25rem;
			}
		}

		/deep/.van-cell::after {
			content: "";
			display: inline-block;
			border-right: .01rem solid #b0b0b0;
			border-bottom: .01rem solid #b0b0b0;
			transform: rotate(-45deg);
			left: unset;
			position: absolute;
			right: .3rem;
			bottom: .15rem;
			width: .2rem;
			height: .2rem;
		}
	}

	.choose {
		font-size: .3rem;
		color: #999999;
		font-weight: bold;
		padding: 0rem .33rem;

		>div {
			background: white;

			padding: .3rem .3rem;
			border-radius: .05rem;

			.type_wp {
				display: flex;
				justify-content: center;

				div {
					flex: 1;
					text-align: center;

					p:nth-of-type(2) {
						color: #333;
						margin-top: .2rem;
						font-size: .36rem;
						//position: relative;
					}

				}

				div:nth-of-type(1) {
					border-right: .01rem solid #ededed;

					p:nth-of-type(2):after {
						content: "";
						display: inline-block;
						width: .15rem;
						height: .15rem;
						border-bottom: .01rem solid #999;
						border-right: .01rem solid #999;
						transform: rotate(45deg);
						margin-left: .15rem;
						position: relative;
						top: -.08rem;
					}
				}
			}

			.type_price {
				display: flex;
				justify-content: center;
				border-top: .01rem solid #ededed;
				margin-top: .3rem;
				padding-top: .3rem;

				div {
					flex: 1;
					text-align: center;

					p:nth-of-type(2) {
						color: #333;
						margin-top: .2rem;
						font-size: .36rem;
					}
				}

				div:nth-of-type(1) {
					border-right: .01rem solid #ededed;

					p:nth-of-type(2):after {
						content: "";
						display: inline-block;
						width: .15rem;
						height: .15rem;
						border-bottom: .01rem solid #999;
						border-right: .01rem solid #999;
						transform: rotate(45deg);
						margin-left: .15rem;
						position: relative;
						top: -.08rem;
					}
				}
			}
		}

	}

	.bz {
		// margin-top: -0.53rem;
		padding: 0 .33rem;
		font-size: 16px;

		/deep/.van-field__value {

			input {
				text-align: right;
			}

		}
	}

	.az {
		margin: 0px .33rem;
		font-size: 16px;
		display: flex;
		align-items: center;
		background-color: #fff;


		// position: absolute;

		/deep/.van-field__value {

			input {
				text-align: right;
			}

		}

		img {
			width: .4rem;
			height: .4rem;
			margin-right: 6px;
		}
	}

	.check {
		font-size: .24rem;
		margin-top: 6px;

		text-align: center;

		/deep/.van-checkbox {
			justify-content: center;

			.van-checkbox__label {
				color: #999;
			}
		}
	}

	.btn-jj {
		padding: 0 .33rem .33rem;

		button {
			width: 100%;
		}
	}
}

.address {
	display: flex;
	font-size: 14px;
	line-height: 24px;
	position: relative;

	.address_label {
		flex: none;
		width: 6.2em;
		margin-right: 12px;
		color: #646566;
		text-align: left;
		word-wrap: break-word;
	}

	.address_text {
		color: #323233;
	}

	&::after {
		position: absolute;
		box-sizing: border-box;
		content: ' ';
		pointer-events: none;
		right: 16px;
		bottom: 0;
		left: 16px;
		border-bottom: 1px solid #ebedf0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		margin-left: -16px;
		width: 100%;
	}
}

.whrite_add {
	width: 100vw;
	background-color: #f8f8f8;

	.recognition {

		padding: .3rem;

		/deep/.van-field__value {
			input {
				text-align: right;
			}

		}
	}

	.adderMessage {
		padding: 0rem .3rem;
	}

	/deep/.van-field__value {
		input {
			text-align: right;
		}
	}

	/deep/ .van-field--min-height .van-field__control {
		min-height: 72px;
	}

	/deep/.van-popup__close-icon--top-right {
		top: 5px;
		right: 10px;
	}
}
</style>