user_mobile_front/src/pages/inexpress.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}}</p>
							<p v-if="jjadd==''||jjadd==' '" @click="addtype(1)">填写寄件地址</p>
							<p v-else @click="addtype(1)">{{jjadd}}</p> -->
							<p>{{user.name}} {{user.organization}} {{user.phone}} {{user.telephone}}</p>
							<p>{{jjaddress}}</p>
						</div>
					</div>
					<!-- <div class="dzb">
						<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>
							<p v-if="sjname==''||sjname==' '">收件地址</p>
							<p v-else>{{sjname}}   {{sjInfo.receiveMobile}}</p>
							<p v-if="sjadd==''||sjadd==' '" @click="addtype(3)">填写收件地址</p>
							<p v-else @click="addtype(3)">{{sjadd}}</p>
						</div>
					</div>
					<div class="dzb" @click="link(3)">
						<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"
			  />
			</van-popup>
		</div>
		<!-- 主体类型 -->
		<!-- <div class="kdshow">
			<van-field readonly clickable name="picker" :value="mainType" label="主体类型" placeholder="请选择主体类型" @click="showPicker2 = true" />
			<van-popup v-model="showPicker2" position="bottom">
			  <van-picker
			    show-toolbar
			    :columns="columns2"
			    @confirm="onConfirm0"
			    @cancel="showPicker2 = false"
			  />
			</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 v-if="wptype=='产品'">重量(公斤)</template>
							<template v-if="wptype=='非产品'">重量(公斤)</template>
							<template v-if="wptype=='文件'">数量(件数)</template>
						</p>
						<p>
							<van-field name="stepper" style="padding: 0px;">
								<template #input>
									<van-stepper v-model="stepper" :max="max"></van-stepper>
								</template>
							</van-field>
						</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 内部调拨 -->
		<div class="choose">
			<div>
				<div class="type_inner">
					<div>
						<p>地址类型</p>
						<p v-if="addresstype==''" @click="addressshow=true">请选择</p>
						<p v-else @click="addressshow=true">{{addresstype}}</p>
						<!-- <p class="inner_p">内部调拨</p> -->
					</div>
					<div>
						<p>
							<template v-if="wptype=='产品'">选择产品</template>
							<template v-if="wptype=='非产品'">选择标签</template>
							<template v-if="wptype=='文件'">选择标签</template>
						</p>
						<p v-if="innerType==''" @click="wpshow2=true">请选择</p>
						<p v-else @click="wpshow2=true">{{innerType}}</p>
					</div>
				</div>
			</div>
		</div>

		<!--商品订单编号-->
		<div class="bz" style="padding-bottom: 0;" v-show="this.accountType == 1">
			<div>
				<van-field maxlength="50" v-model="goodOrderNo" name="调拨单号" label="调拨单号" placeholder="请输入调拨单号"/>
			</div>
		</div>

		<!-- 备注 -->
		<div class="bz">
			<div>
				<van-field v-model="bz" name="备注" label="备注" placeholder="包装运输等要求"/>
			</div>
		</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="wpshow2" position="bottom">
		  <van-picker title="选择" show-toolbar :columns="innerlist" @confirm="onConfirm11" @cancel="wpshow2=false"/>
		</van-popup>

		<!-- 弹窗地址类型类型 -->
		<van-popup v-model="addressshow" position="bottom">
		  <van-picker title="地址类型" show-toolbar :columns="addlist" @confirm="onConfirm8" @cancel="addressshow=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 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">
					<form action="/">
					  <van-search
						shape="round"
					    v-model="dsname"
					    show-action
					    placeholder="请输入搜索关键词"
					    @search="onSearch"
					    @cancel="onCancel"
					  />
					</form>
					<van-list>
					  <van-cell v-for="(item,index) in dsList" @click="onSubmit(index)" :key="item.name" :title="item.name + ' ' + item.phone + ' ' + item.telephone " />
					</van-list>
				  <!-- <van-field v-model="name" readonly name="姓名" label="姓名" placeholder="请输入姓名" @click="dsnameshow = true" :rules="[{ required: false}]"/>
				  <van-field v-model="phone" readonly maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机" @click="dsnameshow = true" :rules="[{ required: false}]"/>
				  <van-field v-model="telPhone" readonly maxlength="20" type="text" name="座机" label="座机" placeholder="请输入座机" @click="dsnameshow = true" :rules="[{ required: false}]"/>
				  <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区" @click="areashow = true" :rules="[{ required: false}]"/>
				  <van-field v-model="address" readonly maxlength="50" name="详细地址" label="详细地址" placeholder="请输入详细地址" @click="dsnameshow = true" :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="dsnameshow" position="bottom">
		  <van-picker title="内部收件人" show-toolbar :columns="dsList" value-key="text" @confirm="onConfirmDs" @cancel="dsnameshow=false"/>
		</van-popup>
		<!-- 城市选择 -->
		<van-popup v-model="areashow" position="bottom">
		  <van-area
		    :area-list="areaList"
		    @confirm="onConfirm3"
		    @cancel="areashow = false"
		  />
		</van-popup>
	</div>
</template>

<script>
	import areaList from "@/script/areas.js"
	import { Stepper,Toast } from 'vant';
	export default{
		data(){
			return {
				titlename:"内部件",
				wptype:"产品",//物品类型
				wpshow:false,//物品类型弹窗显示
				wplist:["产品","非产品","文件"],
				pricetype:"",//付款类型
				stepper:'',
				max:'',
				priceshow:false,//付款类型弹窗显示
				pricelist:["自费","月结"],
				addshow:false,
				name:"",
				phone:"",
				telPhone:"",
				city:"",
				address:"",
				areashow:false,
				index:"",
				title:"",
				jjname:"",
				jjadd:"",
				sjname:"",
				sjadd:"",
				bz:"",
				check:false,
				showPicker:false,//快递
				value:"",
				columns:[],
				columns2:["个人件","公司件"],
				user:{},
				expressInfoShow:"",//快递公司展示
				expressPhone:"",//快递公司电话传值
				expressInfo:"",//快递公司传值
				showPicker2:false,
				mainType:'',
				jjaddress:'',//寄件个人地址
				dsList:[],//代收人列表
				dsnameshow:false,
				dsname:'',
				userId:"",
				sjInfo:{},
				declaredValue:'',
				innerType:'可销品',//内部调拨
				wpshow2:false,//内部类型弹窗显示
				innerlist:['可销品','非卖品'],
				addresstype:"办公室",//地址类型
				addressTypeSend:'',//上传地址类型字段
				addressshow:false,//地址类型弹窗显示
				addlist:['办公室','仓库','店铺调拨'],//
				goodOrderNo:'',
        accountType:''//账号类型
			}
		},
		created:function(){
			this.isLogin();
			this.userId = localStorage.getItem("userId");
			this.getUser();
			this.getPersonalAddress()
      this.accountType = localStorage.getItem("accountType")
			//代收人列表
			//this.findCollectAgentList()
			//收件地址
			if(JSON.stringify(this.$store.state.sjInfo3)!='{}'){
				this.sjname = this.$store.state.sjInfo3.sjname
				this.sjadd = this.$store.state.sjInfo3.sjadd
				this.sjInfo = this.$store.state.sjInfo3
			}else{
				//收件人记忆
				this.getLastRecvUserInfo()
			}
			//获取快递信息
			this.getLogisticsList()

		},
		methods:{
			//代收人搜索
			onSearch(){
				this.$http.post(this.$store.state.host+"/sendMail/searchInnerContactsList.do",{
					userId:this.userId,name:this.dsname},{emulateJSON:true})
					.then(res=>{
						//发送成功
						if(res.body.msg=='success'){
							this.dsList = res.body.list
							for(var i=0;i<this.dsList.length;i++){
								this.dsList[i].text = this.dsList[i].name +' '+ this.dsList[i].phone +' ' + this.dsList[i].telephone
							}
							//this.dsnameshow=true
						}
				},res=>{
						 //发送失败
					Toast("网络错误!")
				})
			},
			//搜索取消
			onCancel(){
				this.onSearch()
			},
			// 填写地址类型确定
			onConfirm8(e){//确定

				this.addresstype=e
				this.addressshow=false
			},
			onConfirmDs(e){//确定
				if(e != undefined){
					this.name = e.name
					this.phone=e.phone
					this.telPhone = e.telephone
					this.address = e.address
					this.city = e.province + ' ' + e.area + ' ' + e.city
				}
				//this.getPersonalAddressById(e.user_id)
				this.dsnameshow=false
			},
			//收件人记忆
			getLastRecvUserInfo(){
				Toast.loading({
				    message: '加载中...',
				    forbidClick: true,
				    duration:0
				});
				this.$http.post(this.$store.state.host+"/sendMail/getLastRecvUserInfo.do",{userId:this.userId},{emulateJSON:true})
					.then(res=>{
						//发送成功
						if(res.body.msg=='success'){
							if(JSON.stringify(res.body.result)!='{}'){
								this.sjname = res.body.result.name+' '+res.body.result.phone
								this.sjadd = res.body.result.area+' '+res.body.result.address
								this.sjInfo = {}
								this.sjInfo.sjname = this.sjname
								this.sjInfo.sjadd = this.sjadd
								this.sjInfo.receiver = res.body.result.name
								this.sjInfo.receiverPhone = res.body.result.phone
								this.sjInfo.receiveMobile = res.body.result.telPhone
								this.sjInfo.receiveAddr = res.body.result.area
								this.sjInfo.receiveAddress = res.body.result.address
								this.$store.commit("getSjInfo3",this.sjInfo)
							}

						}
						Toast.clear()
				},res=>{
						 //发送失败
					Toast("网络错误!")
				})
				Toast.clear()
			},
			//收件
			getPersonalAddress(){
				Toast.loading({
				    message: '加载中...',
				    forbidClick: true,
				    duration:0
				});
				this.$http.post(this.$store.state.host+"/personal/getPersonalAddress.do",{userId:this.userId},{emulateJSON:true})
					.then(res=>{
						//发送成功
						if(res.body.msg=='success'){
							this.jjaddress = res.body.address
							this.jjadd = res.body.provinceAndCity
						}
						Toast.clear()
				},res=>{
						 //发送失败
					Toast("网络错误!")
				})
				Toast.clear()
			},
			// 选择快递公司
			onConfirm(e){
				this.expressInfoShow=e.text
				this.expressInfo=e.id
				this.expressPhone=e.phone
				this.showPicker=false
			},
			onConfirm0(e){
				this.mainType=e
				this.showPicker2=false
			},
			// 选择物品确定
			onConfirm1(e){//确定
			if(e == '产品'){
				this.innerlist = ['可销品','非卖品']
				this.innerType = '可销品'
			}else{
				this.innerlist = ["小样","物料"]
				this.innerType = '小样'
			}

			if(e == '文件'){
				this.max = '10'
			}else{
				this.max = '1'
			}

				this.wptype=e
				this.wpshow=false
			},
			// 选择内部确定
			onConfirm11(e){//确定
				this.innerType=e
				this.wpshow2=false


			},
			// 选择付款方式确定
			onConfirm2(e){//确定
				this.pricetype=e
				this.priceshow=false
			},
			// 填写地址确定
			onConfirm3(e){//确定
				this.city=e[0].name+' '+e[1].name+' '+e[2].name
				this.areashow=false
			},
			// 寄件地址1与收件地址2
			addtype(obj){
				this.index=obj
				if(obj==1){
					this.title="寄件地址"
				}
				if(obj==3){
					this.title="内部收件地址"
				}
				this.addshow=true
				this.onSearch()
			},
			// 填写地址确定
			onSubmit(index){
				this.name = this.dsList[index].name
				this.phone = this.dsList[index].phone
				this.city = this.dsList[index].province + ' '+ this.dsList[index].city+' ' + this.dsList[index].area
				this.address = this.dsList[index].address
				this.telPhone = this.dsList[index].telPhone
				if(this.index==3){
					this.sjname=this.name+' '+this.phone
			        this.sjadd=this.city+' '+this.address
					this.sjInfo = {}
					this.sjInfo.sjname = this.sjname
					this.sjInfo.sjadd = this.sjadd
					this.sjInfo.receiver = this.name
					this.sjInfo.receiverPhone = this.phone
					this.sjInfo.receiveMobile = this.telPhone
					this.sjInfo.receiveAddr = this.city
					this.sjInfo.receiveAddress = this.address
					this.$store.commit("getSjInfo3",this.sjInfo)
				}

				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){
				this.$router.push({path:'/Inaddressbook',query:{active:obj}})
			},
			//立即寄件交互
			save(){

				if(this.user.name == '' || this.user.name == undefined){
					Toast('请填写寄件人信息')
					return
				}

				if(this.sjname == '' || this.sjname == undefined ||
				this.sjadd == '' || this.sjadd == undefined){
					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.accountType == 1){//柜台
          if(this.goodOrderNo == ''){
          	Toast('请填写调拨单号')
          	return
          }
        }else{//没有绑定账号类型
            Toast('当前账号没有绑定账号类型,请联系管理员')
          	return
        }


				if(this.addresstype == '店铺调拨'){ 
					this.addressTypeSend = '3'
				}else if(this.addresstype == '仓库'){
					this.addressTypeSend = '2'
				}else if(this.addresstype == '办公室'){
					this.addressTypeSend = '1'
				}



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

				Toast.loading({
				    message: '保存中...',
				    forbidClick: true,
				    duration:0
				});

				this.$http.post(this.$store.state.host+"/sendMail/saveMail.do",{userId:this.userId,
					sender:this.user.name,
					senderPhone:this.user.phone,
					senderMobile:this.user.telephone,
					sendAddr:this.jjadd,
					sendAddress:this.jjaddress,
					receiver:this.sjInfo.receiver,
					receiverPhone:this.sjInfo.receiverPhone,
					receiveMobile:this.sjInfo.receiveMobile,
					receiveAddr:this.sjInfo.receiveAddr,
					receiveAddress:this.sjInfo.receiveAddress,
					expressInfo:this.expressInfo,
					itemType:this.wptype,
					mainType:this.mainType,
					weight:this.stepper,
					itemNum:this.stepper,
					payWay:this.pricetype,
					mainType:'公司件',
					expressType:'内部件',
					declaredValue:this.declaredValue,
					itemRemark:this.bz,
					expressPhone:this.expressPhone,
					innerType:this.innerType,
					goodOrderNo:this.goodOrderNo,
					addressType:this.addressTypeSend
					},{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 .3rem;
				.jj{
					display: flex;
					justify-content: space-between;
					padding: .2rem 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;
							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_inner{
					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;
						}
						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;
						}
						/* .inner_p{

							color: black;
							margin-top: .2rem;
							font-size: .36rem;
						} */

					}
					div:nth-of-type(2){
						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;
		}
	}
</style>