user_mobile_front/src/pages/express.vue

<template>
	<div class="content">
		<backindex :title="titlename"></backindex>

		<!--运单号-->
		<div v-show="wayShow" class="sm" style="padding-top: 10px;height: 50px;">
			<div>
				<van-field style="background-color: rgb(0, 196, 184);" 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">
						<p>寄</p>
						<div>
							<van-field readonly v-model="SendInfoValue.address" label="地址" name="pattern"
								placeholder="请输入正确的地址" />
							<van-field v-model="SendInfoValue.phone" label="手机号" name="pattern"
								placeholder="请输入正确的手机号" />
						</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;">收</p>
						<div>
							<van-field v-model="transmitMessageVlaue.addresseeName" name="" label="姓名"
								placeholder="用户名" />
							<van-field v-model="transmitMessageVlaue.addresseePhone" label="手机号" name="pattern"
								placeholder="请输入正确的手机号" />
						</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.expressCompany }}
					</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="10"></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="10"></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 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="addressshow" position="bottom">
			<van-picker title="邮购类型" show-toolbar :columns="addlist" @confirm="onConfirm8"
				@cancel="addressshow = false" />
		</van-popup>
	</div>
</template>

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

	data() {
		return {
			titlename: "寄件",
			wptype: "物品",//物品类型
			addresstype: "顾客邮购",//地址类型
			youGouType: "",//邮购类型
			addressshow: false,//地址类型弹窗显示
			addlist: ['顾客邮购', '非顾客邮购'],//
			wpshow: false,//物品类型弹窗显示
			wplist: ["物品", "文件"],
			pricetype: "月结(公司件)",//付款类型
			stepper: '',//件数
			Kilogram: '',//公斤
			max: '',//最大数
			priceshow: false,//付款类型弹窗显示
			pricelist: ["到付", "自费(个人件)", "月结(公司件)",],
			index: "",
			title: "",
			check: false,//契约条款
			bz: '',//快递备注
			showPicker: false,//快递
			expressInfoShow: "顺丰快递",//快递公司展示
			expressPhone: "",//快递公司电话传值
			expressInfo: "1",//快递公司传值
			columns: [],//快递公司列表
			columns2: ["个人件", "公司件"],
			// transmitMessageVlaue: {},
			declaredValue: '0', //声明价值
			showPicker2: false,
			goodOrderNo: '',//商品订单编号
			waybillNo: '',//运单号
			wayShow: true,
			accountType: '',//账号类型
			showPicker9: false,
			costCenterList: [],//成本中心列表
			costCenterInfoShow: "",
			costCenterName: "",//成本中心展示
			costCenterId: "",//成本中心展示
			elvenPhone: '',//收件人输入的手机号
			pattern: /^\d{11}$/,
			SendInfoValue: {},//寄件人信息
			authorization: '',//授权码
		}
	},
	created: function () {
		this.accountType = localStorage.getItem("accountType")
		this.geLogisticsListAPIList()
	},
	async mounted() {
		const res = await getSendInfo({ userId: localStorage.getItem("userId") })
		if (res.code == 444) {
			Toast(res.msg)
		} else {
			this.SendInfoValue = res
		}

		console.log(this.SendInfoValue, 'this.SendInfoValue')
	},
	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.body.wxConfig.timestamp;
					var noncestr = res.body.wxConfig.nonceStr;
					var signature = res.body.wxConfig.signature;
					var appId = res.body.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("网络错误!")
				})

		},

		// 授权码哦icon扫描
		vxSearchIcon() {
			console.log('123')
			wx.scanQRCode({
				needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
				success: (res) => {
					//alert(res)
					console.log(res, '==============')
					var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
					if (result.indexOf(",") != -1) {
						let result1 = res.resultStr.split(",");
						result = result1[result1.length - 1];
					}
					this.authorization = value
				},
				error: function (res) {
					console.log(res, 'error++++++++++');
				}
			});
		},
		// 快递公司
		async geLogisticsListAPIList() {
			const res = await geLogisticsList({ page: 1, limit: 30 })
			this.columns = res.data.map((item) => {
				return {
					id: item.id,
					expressCompany: item.expressCompany
				}
			})
		},
		// 选择快递公司
		onConfirm(e) {
			console.log(e, '=============')
			this.expressInfoShow = e.expressCompany
			this.expressInfo = e.id
			this.showPicker = false
		},

		// 选择成本中心
		onConfirm9(e) {
			this.costCenterInfoShow = e.text
			this.costCenterId = e.id
			this.costCenterName = e.costCenterName
			this.showPicker9 = false
			console.log("costCenterId:" + this.costCenterId)
			console.log("costCenterName:" + this.costCenterName)
		},

		onConfirm0(e) {
			this.mainType = e
			this.showPicker2 = false
		},
		// 选择物品确定
		onConfirm1(e) {//确定
			this.wptype = e
			// if (this.wptype == '文件') {
			// 	this.max = '10'
			// } else {
			// 	this.max = '1'
			// }
			this.wpshow = false
		},
		// 选择付款方式确定
		onConfirm2(e) {//确定
			this.pricetype = e
			this.priceshow = false
		},
		// 填写地址类型确定
		onConfirm8(e) {//确定
			this.addresstype = e
			this.addressshow = false
		},
		// 地址簿跳转
		link(obj) {
			this.$router.push({ path: '/Myaddressbook', query: { active: obj } })
		},
		//立即寄件交互
		async save() {
			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
			}

			if (this.authorization == '' & this.SendInfoValue.isVerification == 1) {
				Toast('请填写授权码')
				return
			}

			let payWay = ''
			let mainType = ''
			if (this.pricetype == "自费(个人件)") {
				payWay = '自费'
				mainType = '个人件'
			}
			if (this.pricetype == "月结(公司件)") {
				payWay = '月结'
				mainType = '公司件'
			}

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

			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
			}
			let parmas = {
				expressInfo: this.expressInfo,//快递公司1-顺丰
				userAddressId: this.transmitMessageVlaue.id,
				// userAddressId: 'ede4f065286a406dbb82064ec7524b4e',
				expressType: wptypeValue,//快件类型 1-文件 2-物品
				expressNum: this.stepper, //快递数量
				payInfo: pricetypeValue,//付费信息 1-到付 2-自付 3-月付
				expressRemark: this.bz,//快递备注
				expressWeight: this.Kilogram,//公斤
				expressPrice: this.declaredValue,//价值
				phone: this.SendInfoValue.phone,//寄件人手机号
				addresseeName: this.transmitMessageVlaue.addresseeName,//寄件人姓名
				addresseePhone: this.transmitMessageVlaue.addresseePhone,//收件人手机号
				verificationCode: this.authorization, //授权码
			}
			const res = await saveMailDo({ ...parmas })
			if (res.msg == 'success') {
				Toast('寄件成功')
				this.$router.push('/')
			}
			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;
				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;
						}

					}



					>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-weight: bold;
						max-width: 4.2rem;

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

						p:nth-of-type(2) {
							font-size: .3rem;
						}
					}
				}

				.dzb {
					text-align: center;
					border-left: .01rem solid #ededed;
					padding-left: .3rem;

					img {
						width: .39rem;
						height: .42rem;
						padding-top: .2rem;
					}

					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;

		text-align: center;

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

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

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

		button {
			width: 100%;
		}
	}
}

.whrite_add {
	width: 6.6rem;
	padding: .4rem .2rem;

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

	}

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