courier_mobile_front/src/pages/kjsearch.vue

<template>
	<div>
		
		<div class="content">
			<div class="sm">
				<van-search v-model="value" @search="onSearch" placeholder="点击搜索单号" />
				<img src="../assets/user/sm.png" alt="" @click="wxScanCode()" >
			</div>
			<!-- 快件查询列表 -->
      <van-checkbox-group v-model="result">
      <van-cell-group>
			<div class="jjlist" v-for="item in resultList">
				<div class="listinfo">
					<!-- <div class="list_top" @click="goInfo(item.expressNo)"> -->
          <div class="list_top">

            <div class="checked">
            	<van-checkbox :disabled="item.signinStatus == 0" checked-color="#00c4b8" :name="item.expressNo" ref="checkboxes" />
            </div>

						<div class="list_top_left" @click="goInfo(item.expressNo)">
							<!-- <img src="../assets/images/ad_icon1.png" alt=""> -->
							<div>
								<p>{{item.expressNo}}</p>
								<p>{{item.mailRoom}} {{item.recipient}} {{item.build}} {{item.sendSeat}} {{item.floor}}</p>
							</div>
              <span style="margin-top: 30%;">{{item.recordDate2}}</span>
						</div>

            <div class="closed">
              <van-icon name="cross" @click="deleteInfo(item)"/>
            </div>


					</div>
				</div>
			</div>
      </van-cell-group>
      </van-checkbox-group>
      <div style="margin-top: 16px;">
				<van-field readonly clickable name="picker" :value="phone" label="收件人手机" placeholder="输入手机号后四位查询" @click="addshow1=true"/>
				<van-field readonly type="text" v-model="recipient" label="收件人" />
				<van-button style="margin-top: 16px;" color="#00c4b8" block type="info" @click="signSave">合并签收</van-button>
			</div>

      <!-- 填写手机号码 -->
      <van-popup round v-model="addshow1" class="whrite_add2" closeable @closed="close" :close-on-click-overlay="false">
      	<div>
      		<p style="font-size: 16px;text-align: center;margin-bottom: 16px;">填写号码</p>
      		<van-form @submit="onSubmit">
      		  <van-field v-model="phone" name="收件人手机" label="收件人手机" type="number" maxlength="20" placeholder="输入手机号后四位" @change="searchList()"/>
      		  <ul>
      			  <li v-for="(item,i) in employeeList" @click="choose(i,item)">
      				<p>{{item.name}}</p>
      				<p>{{item.department}}</p>
      				<van-icon v-if="index == i" name="passed" />
      			  </li>
      		  </ul>
      		  <div style="margin-top: 16px;">
      		    <van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
      		  </div>
      		</van-form>
      	</div>
      </van-popup>

		</div>
	</div>
</template>

<script>
  import {Toast,Dialog,Checkbox,CheckboxGroup} from 'vant'
  import Swiper from 'swiper'
	export default{
    inject: ['reload'],
		data(){
			return{
        result:[],
				titlename:"快件查询",
				value:"",
				expressNo:"",//快递单号
				resultList:[],
        addshow1:false,
        name:"",
        box:"",
        phone:'',//手机号
        recipient:'',//收件人
        employeeList:[],//收件人列表
        index:'-1',
        searchType:"2"//1.搜索全部 2.搜索快件 3.搜索寄件
			}
		},
		created:function(){
			//
		},
		methods:{
			//微信扫码
			wxScanCode() {
				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(",");
										this.value = result1[result1.length-1];
									}
									this.onSearch(this.value)
									// this.getData()
								},
								error: function(res) {
									console.log(res);
								}
							});
						});
					}, res => {
						//发送失败
						Toast("网络错误!")
					})

			},
      //选择员工
			choose(val,item){
				this.index = val
				this.recipient = item.name
				this.phone = item.phone
			},
			//手机号后四位搜索
			searchList(){
				this.$http.post(this.$store.state.host+"/solic/getEmployeeInfoByPhone",{
          phone:this.phone,
          },{
            emulateJSON:true,
            })
					.then(res=>{
						//发送成功
						if(res.body.msg=='success'){
							this.employeeList = res.body.employeeList
						}
				},res=>{
						//发送失败
					Toast("网络错误!")
				})
			},
			//跳转详情
			goInfo(expressNo){
        //收件查询
					this.$router.push({path:'/Kjsearchinfo',query:{expressNo:expressNo,type:1}})
			},
      deleteInfo(e){
        console.log("E:" + JSON.stringify(e))
          this.resultList.splice(this.resultList.indexOf(e), 1) // ['b']
      },
			//搜索
			onSearch(val){
				this.expressNo = val
				this.getData()
			},
      toggle(index) {
          this.$refs.checkboxes[index].toggle();
      },
      onSubmit(){
      	if(this.recipient == ''){
      		Toast('请选择收件人')
      		return
      	}
      	this.addshow1=false
      	//this.tjshow=true
      },
      close(){
      	//this.phone = ''
      	//this.name = ''
      	//this.department = ''
      	this.index = ''
      },
			//后端获取数据
			getData(){
        localStorage.getItem("userId")
				Toast.loading({
				    message: '加载中...',
				    forbidClick: true,
				    duration:0
				});
        console.log("后端获取数据:expressNo = " + this.expressNo);
				this.$http.post(this.$store.state.host+"/solic/getExpressListByNo",{
          expressNo:this.expressNo,
          searchType:"2",
          mailRoomId:localStorage.getItem('roomId'),
          userId:localStorage.getItem('userId'),
          },{emulateJSON:true})
					.then(res=>{
            if(res.body.msg == "success"){
              var list = res.body.resultList;
              var oldlist = this.resultList;
            	//发送成功

              if(oldlist == ''){
                for (var i = 0; i < list.length; i++) {
                 this.resultList.push(list[i])
                }
              }else{

                for (var i1 = 0; i1 < list.length; i1++) {
                  if(JSON.stringify(oldlist).indexOf(JSON.stringify(list[i1])) == -1){
                    this.resultList.push(list[i1])
                  }else{
                    console.log('存在重复快递单号！')
                    Toast("存在重复快递单号!")
              }

              }
            }
            }else if(res.body.msg == "查无此单号"){
              Toast("查无此快递单号!")
            }
				},res=>{
						//发送失败
					Toast("网络错误!")
				})
				Toast.clear()
			},
      //合并签收
      			signSave(){
      				if(this.result.length == 0){
      					Toast('请选择需要合并的快递！');
      					return;
      				}
      				if(this.recipient == ''){
      					Toast('请选择收件人！');
      					return;
      				}
      				this.$http.post(this.$store.state.host+"/solic/marginSignExpress",
      				{expressNoList:this.result.join(','),
      				collectAgent:this.recipient},{emulateJSON:true})
      					.then(res=>{
      						//发送成功
      						if(res.body.msg=='success'){
      							Toast("合并签收成功！");
      							// setTimeout(()=>{
             //            this.reload();
      							// },1200)
                    setTimeout(() => {
                    	this.$router.push({path:'/Sign2',query:{expressNoList:this.result.join(',')}});
                    	this.buttonDis = false
                    }, 2000)

      						}else{
      							Toast("合并签收失败！");
      						}
      				},res=>{
      						//发送失败
      					Toast("网络错误!")
      				})
      			},
      			//选择员工
      			choose(val,item){
      				this.index = val
      				this.recipient = item.name
      				this.phone = item.phone
      			},
      			//手机号后四位搜索
      			searchList(){
      				this.$http.post(this.$store.state.host+"/solic/getEmployeeInfoByPhone",{
             phone:this.phone,
             },{
               emulateJSON:true,
               })
      					.then(res=>{
      						//发送成功
      						if(res.body.msg=='success'){
      							this.employeeList = res.body.employeeList
      						}
      				},res=>{
      						//发送失败
      					Toast("网络错误!")
      				})
      			},

		},
		mounted:function(){

		}
	}
</script>

<style scoped lang="less">
	.content{
		padding: 0.25rem .37rem;
		.sm{
			display: flex;
			margin-bottom: .2rem;
			justify-content: space-between;
			/deep/.van-search{
				width: 6.2rem;
				height: .76rem;
				border-radius: 25px;
				overflow: hidden;
				padding: 0rem;
				background-color: white;
				.van-search__content{
					background-color: white;
				}
				input{
					background-color: white;
				}
			}
			img{
				width:.4rem;
				height: .4rem;
				position: relative;
				top: .18rem;
			}
		}

    .whrite_add2{
    	width: 6.6rem;
    	padding: .4rem .2rem;
    	font-size: .3rem;
    	/deep/.van-field__value{
    		input{
    			text-align: right;
    		}

    	}
    	/deep/.van-popup__close-icon--top-right{
    		top: 5px;
    		right: 10px;
    	}
    	ul{
    		li{
    			padding: 10px 36px 10px 16px;
    			display: flex;
    			justify-content: space-between;
    			position: relative;
    			i{
    				position: absolute;
    				right: 0px;
    				top:.25rem

    			}
    			i:before{
    				background: #00c4b8;
    				color: white;
    				border-radius: 50%;
    			}
    		}
    	}
    }
    .van-checkbox-group{
      .van-cell-group{
        background-color: unset;
      }
    }
		.jjlist {
			font-size: .3rem;
			color: #999999;

			.listinfo {
				background: white;
				padding: .3rem .3rem .3rem;
				border-radius: .05rem;
				margin-bottom: .2rem;
				position: relative;
				.list_top {
					display: flex;
					justify-content: space-between;
          align-items: center;
          position: relative;
          .closed{
            position: absolute;
            right: -0.4rem;
            top: -0.4rem;
            z-index: 3;
            i{
              background: #ed1919;
              border-radius: 50%;
              color: white;
              padding: 0.03rem;
            }
          }
					.list_top_left {
						img {
							display: inline-block;
							width: .87rem;
							height: .87rem;
							position: relative;
						}

						div {
							width: 4rem;
							margin-left: .2rem;
							display: inline-block;
							line-height: 150%;
							position: relative;
							top: -.1rem;
							p:nth-of-type(1) {
								font-size: .28rem;
								color: #333;
								font-weight: bold;
							}
							p:nth-of-type(2) {
								font-size: .22rem;
							}
						}
					}
					>p {
						font-size: .23rem;
						font-weight: bold;
						display: flex;
						align-items: center;
					}
					.staus1{
						color: #f5693d;
					}
					.staus2{
						color: #3d82f5;
					}
				}
			}
		}
	}
</style>