user_mobile_front/src/pages/multipleexpress.vue

<template>
	<div class="content">
		<backindex :title="titlename"></backindex>
		<!-- 寄件地址 -->
		<div class="jjinfo">
			<div>
				<div class="jj">
					<div class="jjaddress">
						<p>寄</p>
						<div>
							<p v-if="jjname==''||jjname==' '">寄件地址</p>
							<p v-else>{{jjname}} {{jjInfo.senderMobile}}</p>
							<p v-if="jjadd==''||jjadd==' '" @click="addtype(1)">填写寄件地址</p>
							<p v-else @click="addtype(1,1)">{{jjadd}}</p>
						</div>
					</div>
					<div class="dzb" @click="link(1)">
						<img src="../assets/images/addlist.png" alt="">
						<p>地址簿</p>
					</div>				
				</div>
			</div>			
		</div>
		<!-- 收件地址 -->
		<div class="sjinfo" v-for="(item,index) in sjList">
			<div>
				<div class="top"><p>{{index+1}}</p></div>
				<div class="sj">
					<div class="sjaddress">
						<p style="background: #fa9c22;">收</p>
						<div>
							<p v-if="item.sjname==''||item.sjname==' '">收件地址</p>
							<p v-else>{{item.sjname}} {{item.receiveMobile}}</p>
							<p v-if="item.sjadd==''||item.sjadd==' '" @click="addtype(2)">填写收件地址</p>
							<p v-else @click="addtype(2,index)">{{item.sjadd}}</p>
						</div>
					</div>
					<div class="dzb cz">
						<div>
							<img src="../assets/images/whrite.png" alt="">
							<p @click="addtype(2,index)">编辑</p>
						</div>
						<div>
							<img src="../assets/images/del.png" alt="">
							<p @click="del(index)">删除</p>
						</div>
					</div>
				</div>
				<div class="sj" style="border-top:.01rem solid #ededed">
					<div class="sjaddress">
						<van-field v-model="item.wpinfo" name="物品信息" label="物品信息" placeholder="请填写"  @click="wpShow(index)" readonly/>
					</div>
				</div>
			</div>	
		</div>
		<!-- 添加收件人 -->
		<div class="add_per">
			<div>
				<div class="add_per_info">
					<p style="background: #fa9c22;">收</p>
					<p @click="link(2)">+添加收件人</p>
				</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"
			  />
			</van-popup>
		</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 round v-model="addshow" class="whrite_add" closeable @closed="close" :close-on-click-overlay="false">
			<div>
				<p style="font-size: 16px;text-align: center;margin-bottom: 16px;">{{title}}</p>
				<van-form @submit="onSubmit">
				  <van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名" :rules="[{ required: false}]"/>
				  <van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机" :rules="[{ required: false}]"/>
				  <van-field v-model="telPhone" maxlength="20" type="text" name="座机" label="座机" placeholder="请输入座机" :rules="[{ required: false}]"/>
				  <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区" @click="areashow = true" :rules="[{ required: false}]"/>
				  <van-field v-model="address" name="详细地址" maxlength="50" label="详细地址" placeholder="请输入详细地址" :rules="[{ required: false}]"/>
				  <div style="margin-top: 16px;">
				    <van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
				  </div>
				</van-form>
			</div>
		  
		</van-popup>
		<!-- 城市选择 -->
		<van-popup v-model="areashow" position="bottom">
		  <van-area
		    :area-list="areaList"
		    @confirm="onConfirm3"
		    @cancel="areashow = false"
		  />
		</van-popup>
		<!-- 选择物品 -->
		<van-popup v-model="wp" round closeable>
		  <div class="wpinfo">
			  <div>
				  <van-field name="radio" label="包裹类型">
				    <template #input>
				      <van-radio-group v-model="radio" direction="horizontal">
				        <van-radio name="物品" shape="square">物品</van-radio>
				        <van-radio name="文件" shape="square">文件</van-radio>
				      </van-radio-group>
				    </template>
				  </van-field>
				  <van-field v-if="radio == '物品'" name="stepper" label="预估重量(/KG)">
				    <template #input>
				      <van-stepper v-model="kg" />
				    </template>
				  </van-field>
				  <van-field v-if="radio == '文件'" name="stepper" label="文件数量(/件)">
				    <template #input>
				      <van-stepper v-model="num" />
				    </template>
				  </van-field>
				  <div style="margin-top: 16px;">
				    <van-button color="#00c4b8" block type="info" @click="wpconform">确定</van-button>
				  </div>
			  </div>
			  
		  </div>
		</van-popup>
	</div>	
</template>

<script>
	import areaList from "@/script/areas.js"
	import { Stepper,Toast,Dialog } from 'vant';
	export default{
		data(){
			return {
				titlename:"批量寄",
				addshow:false,
				name:"",
				phone:"",
				telPhone:"",
				city:"",
				address:"",
				areashow:false,
				index:"",
				title:"",
				jjname:"",
				jjadd:"",
				sjname:"",
				sjadd:"",
				check:false,
				wpinfo:"",//物品信息
				wp:false,
				kg:1,
				num:1,
				radio:"物品",
				showPicker:false,//快递
				value:"",
				expressInfoShow:"",//快递公司展示
				expressPhone:"",//快递公司电话传值
				expressInfo:"",//快递公司传值
				columns:[],
				sjList:[],
				wpIndex:'',//物品下标
				jjInfo:{},//寄件信息
			}
		},
		created:function(){
			this.isLogin();
			this.userId = localStorage.getItem("userId");
			
			//寄件地址
			if(JSON.stringify(this.$store.state.jjInfo)!='{}'){
				this.jjname = this.$store.state.jjInfo.jjname
				this.jjadd = this.$store.state.jjInfo.jjadd
				this.jjInfo = this.$store.state.jjInfo
			}else{	//获取默认地址
				this.getDefaultAddress()
			}
			
			//收件地址
			if(JSON.stringify(this.$store.state.sjList)!='[]'){
				this.sjList = this.$store.state.sjList
			}
			//快递公司列表
			this.getLogisticsList()
		},
		methods:{
			// 选择快递公司
			onConfirm(e){
				this.expressInfoShow=e.text
				this.expressInfo=e.id
				this.expressPhone=e.phone
				this.showPicker=false
			},
			// 选择物品确定
			onConfirm1(e){//确定
				this.wptype=e
				this.wpshow=false
				console.log(e)
			},
			// 选择付款方式确定
			onConfirm2(e){//确定
				this.pricetype=e
				this.priceshow=false
				console.log(e)
			},
			// 填写地址确定
			onConfirm3(e){//确定
				this.city=e[0].name+' '+e[1].name+' '+e[2].name
				this.areashow=false
				console.log(e)
			},
			// 寄件地址1与收件地址2
			addtype(obj,index){
				this.index=obj
				if(obj==1){
					this.title="寄件地址"
				}
				if(obj==2){
					this.title="收件地址"
					this.wpIndex = index
					this.name = this.sjList[index].receiver
					this.phone = this.sjList[index].receiverPhone
					this.telPhone = this.sjList[index].receiveMobile
					this.city = this.sjList[index].receiveAddr 
					this.address = this.sjList[index].receiveAddress
				}
				this.addshow=true
			},
			// 填写地址确定
			onSubmit(){
				if(this.name == '' || this.name == undefined ){
					Toast('请填写姓名')
					return
				}
				// if(this.phone == '' || this.phone == undefined ){
				// 	Toast('请填写手机')
				// 	return
				// }
				// let regPhone = new RegExp(this.$store.state.regPhone)
				// if(!regPhone.test(this.phone)){
				// 	Toast('手机号格式不正确')
				// 	return
				// }
				
				if ((this.phone == '' || this.phone == undefined) && (this.telPhone == '' || this.telPhone == undefined)) {
					Toast('请填写手机号或者座机号')
					return
				}
				
				if(this.phone != '' && this.phone != undefined){
					let regPhone = new RegExp(this.$store.state.regPhone)
					if (!regPhone.test(this.phone)) {
						Toast('手机号格式不正确')
						return
					}
				}
				
				if(this.city == '' || this.city == undefined ){
					Toast('请选择省市区')
					return
				}
				if(this.address == '' || this.address == undefined ){
					Toast('请填写详细地址')
					return
				}
				if(this.index==1){
					this.jjname=this.name+' '+this.phone
					this.jjadd=this.city+' '+this.address
					let jjInfo = {}
					jjInfo.jjname = this.jjname
					jjInfo.jjadd = this.jjadd
					jjInfo.sender = this.name
					jjInfo.senderPhone = this.phone
					jjInfo.senderMobile = this.telPhone
					jjInfo.sendAddr = this.city
					jjInfo.sendAddress = this.address
					this.$store.commit("getJjInfo",jjInfo)
				}
				if(this.index==2){
					this.sjname=this.name+' '+this.phone
			        this.sjadd=this.city+' '+this.address
					this.$store.state.sjList[this.wpIndex].sjname = this.sjname
					this.$store.state.sjList[this.wpIndex].sjadd = this.sjadd
					this.$store.state.sjList[this.wpIndex].receiver = this.name
					this.$store.state.sjList[this.wpIndex].receiverPhone = this.phone
					this.$store.state.sjList[this.wpIndex].receiveMobile = this.telPhone
					this.$store.state.sjList[this.wpIndex].receiveAddr = this.city
					this.$store.state.sjList[this.wpIndex].receiveAddress = this.address
					this.sjList = this.$store.state.sjList
				}
				
				this.addshow=false
				this.name=""
				this.phone=""
				this.telPhone=""
				this.city=""
				this.address=""
			},
			close(){
				this.name=""
				this.phone=""
				this.telPhone=""
				this.city=""
				this.address=""
			},
			// 地址簿跳转
			link(obj){
				if(this.sjList.length > 19){
					Toast('添加收件人最多添加20人')
					return
				}
				this.$router.push({path:'/MultipleAddressbook',query:{active:obj}})
			},
			// 物品选择
			wpconform(){
				this.sjList[this.wpIndex].itemType = this.radio
				this.sjList[this.wpIndex].weight =this.kg
				this.sjList[this.wpIndex].itemNum =this.num
				if(this.radio == '物品'){
					this.sjList[this.wpIndex].wpinfo=this.radio+'-'+this.kg+'kg'
				}
				if(this.radio == '文件'){
					this.sjList[this.wpIndex].wpinfo=this.radio+'-'+this.num+'件'
				}		
				this.wp=false
			},
			//添加收件人
			// addSj(){
			// 	this.sjList.push({})
			// },
			//删除收件人
			del(index){
				Dialog.confirm({ title: '', message: '确定删除吗', })
				 .then(() => {
					this.sjList.splice(index,1)
				})
				.catch(() => {
						//  on cancel 
				})
				
			},
			//物品展示
			wpShow(index){
				this.wp = true
				this.wpIndex = index
				this.radio = this.sjList[index].itemType
				this.kg = this.sjList[index].weight
				this.num = this.sjList[index].itemNum
			},
			save(){
				
				if(this.jjname == '' || this.jjname == undefined || 
				this.jjadd == '' || this.jjadd == undefined){
					Toast('请填写寄件人信息')
					return
				}
				
				if(this.sjList== undefined || this.sjList.length <= 0){
					Toast('请填写收件人信息')
					return
				}
				
				if(this.expressInfo == '' || this.expressInfo == undefined){
					Toast('请选择快递公司')
					return
				}
				
				if(this.check == false){
					Toast('请点击同意《电子运单契约条款》')
					return
				}
				
				//循环sjList信息
				let receiverMap = []
				let	receiverPhoneMap = []
				let	receiveAddrMap = []
				let	receiveAddressMap = []
				let	itemTypeMap = []
				let	weightMap = []
				let	itemNumMap = []
				
				//暂时无值
				let payWayMap = []
				let mainTypeMap = []
				let expressTypeMap = []
				let declaredValueMap = []
				let itemRemarkMap = []

				for(var i=0;i<this.sjList.length;i++){
					receiverMap.push(this.sjList[i].receiver)
					receiverPhoneMap.push(this.sjList[i].receiverPhone)
					receiveAddrMap.push(this.sjList[i].receiveAddr)
					receiveAddressMap.push(this.sjList[i].receiveAddress)
					itemTypeMap.push(this.sjList[i].itemType)
					weightMap.push(this.sjList[i].weight)
					itemNumMap.push(this.sjList[i].itemNum)
					
					//暂时无值
					payWayMap.push('月结')
					mainTypeMap.push('公司件')
					expressTypeMap.push('外部件')
					declaredValueMap.push('0')
					itemRemarkMap.push(' ')
				}
				
				Toast.loading({
				    message: '保存中...',
				    forbidClick: true,
				    duration:0
				});
				
				this.$http.post(this.$store.state.host+"/sendMail/saveBatchMail.do",{userId:this.userId,
					sender:this.jjInfo.sender,
					senderPhone:this.jjInfo.senderPhone,
					sendAddr:this.jjInfo.sendAddr,
					sendAddress:this.jjInfo.sendAddress,
					expressInfo:this.expressInfo,
					expressPhone:this.expressPhone,
					receiverMap:receiverMap.toString(),
					receiverPhoneMap:receiverPhoneMap.toString(),
					receiveAddrMap:receiveAddrMap.toString(),
					receiveAddressMap:receiveAddressMap.toString(),
					itemTypeMap:itemTypeMap.toString(),
					weightMap:weightMap.toString(),
					itemNumMap:itemNumMap.toString(),
					
					payWayMap:payWayMap.toString(),
					mainTypeMap:mainTypeMap.toString(),
					expressTypeMap:expressTypeMap.toString(),
					declaredValueMap:declaredValueMap.toString(),
					itemRemarkMap:itemRemarkMap.toString()
					},{emulateJSON:true})
						.then(res=>{
							//发送成功
							if(res.body.msg=='success'){
								Toast("下单成功，快递员将尽快上门取件！")
								let that = this;
								setTimeout(function(){
									that.$router.push({path:'/'})
								},1000)
							}else if(res.body.msg != '' && res.body.msg != 'success'){
								Toast(res.body.msg);
							}else{
								Toast("寄件失败");
							}		
					},res=>{
						//发送失败
						Toast("网络错误");
					})
					Toast.clear()
			}
		},
		computed:{
			areaList(){
				return areaList
			}
		}
	}
</script>

<style scoped lang="less">
	.content{
		.jjinfo{
			font-size: .24rem;
			color: #999999;
			padding: .33rem;
			word-break: break-word;
			>div{
				background: white;
				border-radius: .05rem;
				padding: .1rem .2rem;
				.jj{
					display: flex;
					justify-content: space-between;
					padding: .15rem 0rem;
					.jjaddress{
						display: flex;
						padding: .1rem 0rem;
						>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;
							width: 4.2rem;
							p:nth-of-type(1){
								font-size: .24rem;
								color: #333;
								margin-bottom: .2rem;
							}
							p:nth-of-type(2){
								font-size: .24rem;
							}
						}
					}
					.dzb{
						text-align: center;
						border-left: .01rem solid #ededed;
						min-width: 1.4rem;
						img{
							width:.39rem;
							height: .42rem;
							padding-top: .2rem;
						}
						p{
							font-size: .2rem;
						}
						
					}
				}
		    }
		
		}
		.sjinfo{
			font-size: .24rem;
			color: #999999;
			padding: 0rem .33rem .33rem .33rem;
			word-break: break-word;
			>div{
                background: white;
                border-radius: .05rem;
                padding: .3rem .2rem .1rem;
				position: relative;
				.top{
					background: url(../assets/images/top.png) no-repeat left top;
					background-size: 100% 100%;
					position: absolute;
					left: 0px;
					top: 0px;
					width: .6rem;
					height: .5rem;
					color: white;
					text-align: center;
					p{
						position: relative;
						right: .1rem;
						top: .01rem;
					}
				}
				.sj{
					display: flex;
					justify-content: space-between;
					padding: .15rem 0rem;
					.sjaddress{
						width: 100%;
						display: flex;
						padding: .1rem 0rem;
						/deep/.van-field{
							padding: 0rem;

							.van-field__value{
								input{
									text-align: right;
									padding: 0rem;
								}
								
							}
						}
						>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: .2rem;
						}
						div{
							//font-weight: bold;
							//width: 4.2rem;
							p:nth-of-type(1){
								font-size: .24rem;
								color: #333;
								margin-bottom: .2rem;
							}
							p:nth-of-type(2){
								font-size: .24rem;
							}
						}
					}
					.dzb{
						text-align: center;
						border-left: .01rem solid #ededed;
						//padding-left: .3rem;
						min-width: 1.4rem;
						>img{
							width:.39rem;
							height: .42rem;
							padding-top: .2rem;
						}
						>p{
							font-size: .2rem;
						}
						
					}
					.cz{
						display: flex;
						justify-content: center;
						padding-left: 0rem;
						padding-top: .2rem;
						div{
							text-align: center;
							padding: 0rem .05rem 0rem;
							img{
								width: .26rem;
								height: .26rem;
							}
							p {
								font-size:.1rem;
								color: #999999;
								
							}
						}
					}
				}
						
			}				
		}
		.add_per{
			div{
				font-size: .3rem;
				color: #999999;
				font-weight: bold;
				padding: 0rem .33rem;
				margin-bottom: .3rem;
				border-radius: .05rem;
				.add_per_info{
					background: white;
					display: flex;
					color: #333;
					padding: .33rem .2rem;
					p:nth-of-type(1){
						font-size: 0.24rem;
						font-weight: bold;
						display: inline-block;
						width: 0.5rem;
						height: 0.5rem;
						text-align: center;
						line-height: 0.5rem;
						color: white;
						border-radius: 50%;
						margin-right: 0.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;
			margin-bottom: .3rem;
			>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{
			padding: .33rem;
		    font-size: .3rem;
			/deep/.van-field__value{
				input{
					text-align: right;
				}
				
			}
		}
		.check{
			font-size: .24rem;
			
			text-align: center;
			
			/deep/.van-checkbox{
				justify-content: center;
				.van-checkbox__label{
					color: #999;
				}
			}
		}
		.btn-jj{
			padding: .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;
		}
	}
	.wpinfo{
		width: 6.6rem;
		padding: .2rem;
		/deep/.van-field{
			.van-field__label{
				width:2.5rem;
				
			}
            .van-field__value{
				input{
					width:64px
				}
			}
		}
	}
</style>