fix:echars样式

src/pages/components/HomePage.vue

@@ -69,146 +69,148 @@ export default {
 	},
 	created: function () {
 		this.isLogin();
-		// this.getData()
+		this.getData()
 	},
 	mounted() {
 		// 页面加载完成唤醒微信扫一扫
 		//本地 注释  服务器 放开
 		this.wxScanCode();
+		setTimeout(() => {
+			let myChart = this.$echarts.init(document.getElementById('myChart1'))
+			var option = {
+				tooltip: {
+					trigger: 'item'
+				},
+				legend: {
+					top: '65%',
+					left: '30%',
+					orient: 'vertical',
+					icon: 'circle',
+					itemGap: 6,
+					textStyle: {
+						fontSize: 10,
+					}
 
-		let myChart = this.$echarts.init(document.getElementById('myChart1'))
-		var option = {
-			tooltip: {
-				trigger: 'item'
-			},
-			legend: {
-				top: '65%',
-				left: '30%',
-				orient: 'vertical',
-				icon: 'circle',
-				itemGap: 6,
-				textStyle: {
-					fontSize: 10,
-				}
-
-			},
-			series: [{
-				name: '数据',
-				type: 'pie',
-				center: ["50%", "35%"],
-				radius: ['40%', '60%'],
-				avoidLabelOverlap: false,
-				label: {
-					normal: {
-						show: true,
-						position: 'center',
-						color: '#4c4a4a',
-						formatter: '{active|' + '今日累计收件' + '}' + '\n\r' + '{total|' + this.total +
-							'}',
-						rich: {
-							total: {
-								fontSize: 12,
-								fontWeight: 'bold',
-								color: '#454c5c'
-							},
-							active: {
-								fontSize: 10,
-								color: '#6c7a89',
-								lineHeight: 30,
-							},
+				},
+				series: [{
+					name: '数据',
+					type: 'pie',
+					center: ["50%", "35%"],
+					radius: ['40%', '60%'],
+					avoidLabelOverlap: false,
+					label: {
+						normal: {
+							show: true,
+							position: 'center',
+							color: '#4c4a4a',
+							formatter: '{active|' + '今日累计收件' + '}' + '\n\r' + '{total|' + this.total +
+								'}',
+							rich: {
+								total: {
+									fontSize: 12,
+									fontWeight: 'bold',
+									color: '#454c5c'
+								},
+								active: {
+									fontSize: 10,
+									color: '#6c7a89',
+									lineHeight: 30,
+								},
+							}
+						},
+						emphasis: { //中间文字显示
+							show: true,
 						}
 					},
-					emphasis: { //中间文字显示
-						show: true,
-					}
-				},
-				color: ['#07daf9', '#f98407', '#f9df07', '#079bf9'],
-				labelLine: {
-					show: false
-				},
-				data: [{
-					value: 123,
-					name: '签收成功'
-				},
-				{
-					value: 444,
-					name: '派送中'
-				},
-				{
-					value: 222,
-					name: '派送失败'
-				},
-				]
-			}]
-		}
-		myChart.setOption(option)
+					color: ['#07daf9', '#f98407', '#f9df07', '#079bf9'],
+					labelLine: {
+						show: false
+					},
+					data: [{
+						value: 123,
+						name: '签收成功'
+					},
+					{
+						value: 444,
+						name: '派送中'
+					},
+					{
+						value: 222,
+						name: '派送失败'
+					},
+					]
+				}]
+			}
+			myChart.setOption(option)
 
-		let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
-		var option2 = {
-			tooltip: {
-				trigger: 'item'
-			},
-			legend: {
-				top: '65%',
-				left: '30%',
-				orient: 'vertical',
-				icon: 'circle',
-				itemGap: 6,
-				textStyle: {
-					fontSize: 10,
-				}
+			let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
+			var option2 = {
+				tooltip: {
+					trigger: 'item'
+				},
+				legend: {
+					top: '65%',
+					left: '30%',
+					orient: 'vertical',
+					icon: 'circle',
+					itemGap: 6,
+					textStyle: {
+						fontSize: 10,
+					}
 
-			},
-			series: [{
-				name: '数据',
-				type: 'pie',
-				center: ["50%", "35%"],
-				radius: ['40%', '60%'],
-				avoidLabelOverlap: false,
-				label: {
-					normal: {
-						show: true,
-						position: 'center',
-						color: '#4c4a4a',
-						formatter: '{active|' + '今日累计下单' + '}' + '\n\r' + '{total|' + this.total +
-							'}',
-						rich: {
-							total: {
-								fontSize: 12,
-								fontWeight: 'bold',
-								color: '#454c5c'
-							},
-							active: {
-								fontSize: 10,
-								color: '#6c7a89',
-								lineHeight: 30,
-							},
+				},
+				series: [{
+					name: '数据',
+					type: 'pie',
+					center: ["50%", "35%"],
+					radius: ['40%', '60%'],
+					avoidLabelOverlap: false,
+					label: {
+						normal: {
+							show: true,
+							position: 'center',
+							color: '#4c4a4a',
+							formatter: '{active|' + '今日累计下单' + '}' + '\n\r' + '{total|' + this.total +
+								'}',
+							rich: {
+								total: {
+									fontSize: 12,
+									fontWeight: 'bold',
+									color: '#454c5c'
+								},
+								active: {
+									fontSize: 10,
+									color: '#6c7a89',
+									lineHeight: 30,
+								},
+							}
+						},
+						emphasis: { //中间文字显示
+							show: true,
 						}
 					},
-					emphasis: { //中间文字显示
-						show: true,
-					}
-				},
-				color: ['#07daf9', '#f98407', '#f9df07', '#079bf9'],
-				labelLine: {
-					show: false
-				},
-				data: [{
-					value: 123,
-					name: '揽收成功'
-				},
-				{
-					value: 444,
-					name: '待揽收'
-				},
-				{
-					value: 222,
-					name: '未揽收'
-				},
-				]
-			}]
-		}
-		myChart2.setOption(option2)
+					color: ['#07daf9', '#f98407', '#f9df07', '#079bf9'],
+					labelLine: {
+						show: false
+					},
+					data: [{
+						value: 123,
+						name: '揽收成功'
+					},
+					{
+						value: 444,
+						name: '待揽收'
+					},
+					{
+						value: 222,
+						name: '未揽收'
+					},
+					]
+				}]
+			}
+			myChart2.setOption(option2)
+
+		}, 500)
 
 	},
 	methods: {//encodeURI(window.location.href.split('#')[0])
@@ -298,6 +300,7 @@ export default {
 				.then(res => {
 					//发送成功
 					if (res.body.msg == 'success') {
+						console.log(this.expressMap, 'this.expressMap')
 						this.expressMap = res.body.expressMap
 						this.data[0].value = this.expressMap.successNum
 						this.data[1].value = this.expressMap.waitNum
@@ -365,10 +368,11 @@ export default {
 		background: white;
 		display: flex;
 
-		div {
+		#myChart1,
+		#myChart2 {
 			// width: 100%;
 			// height: 100%;
-			width: 169px;
+			width: 50%;
 			height: 200px;
 			// margin: 0 auto;
 		}

src/pages/components/Waitsent.vue

@@ -7,25 +7,70 @@
                 <div style="font-size: 16px;">批次号：<span style="font-size: 16px;">ff123</span></div>
                 <div class="jindu">派送进度 10/15</div>
             </div>
-            <div class="batch-middel">
-                <div class="batch-middel-text">
-                    <div class="batch-middel-text-style">【xx】运单号：xxxxx</div>
-                    <div class="batch-middel-text-style">收件人：xxx</div>
-                    <div class="batch-middel-text-style">部门：</div>
-                    <div class="batch-middel-text-style">楼层：</div>
-                    <div class="batch-middel-text-style">座位号：</div>
-                    <div style="display: flex;" class="batch-middel-text-style">联系方式:138XXXX1234 <van-button
-                            style="margin-top: -5px; border-radius: 6px;" type="info" size="mini">拨打</van-button></div>
+            <!-- 各个运单 -->
+            <div class="batchss" :style="batchssStyle">
+                <div class="batch-middel">
+                    <div class="batch-middel-text">
+                        <div class="batch-middel-text-style">【xx】运单号：xxxxx</div>
+                        <div class="batch-middel-text-style">收件人：xxx</div>
+                        <div class="batch-middel-text-style">部门：</div>
+                        <div class="batch-middel-text-style">楼层：</div>
+                        <div class="batch-middel-text-style">座位号：</div>
+                        <div style="display: flex;" class="batch-middel-text-style">联系方式:138XXXX1234 <van-button
+                                style="margin-top: -5px; border-radius: 6px;" type="info" size="mini">拨打</van-button>
+                        </div>
+                    </div>
+                    <div style="display: flex; padding-top: 5px;">
+                        <van-button style="width: 100px; border-radius: 6px;" size="small" type="info"
+                            @click="onReceiving">签收
+                        </van-button>
+                        <van-button style="width: 100px; border-radius: 6px;" size="small" type="danger"
+                            @click="onSureRetention">设为滞留</van-button>
+                    </div>
                 </div>
-                <div style="display: flex; padding-top: 5px;">
-                    <van-button style="width: 100px; border-radius: 6px;" size="small" type="info"
-                        @click="onReceiving">签收
-                    </van-button>
-                    <van-button style="width: 100px; border-radius: 6px;" size="small" type="danger"
-                        @click="onRetention">设为滞留</van-button>
+                <!-- 各个运单 -->
+                <div class="batch-middel">
+                    <div class="batch-middel-text">
+                        <div class="batch-middel-text-style">【xx】运单号：xxxxx</div>
+                        <div class="batch-middel-text-style">收件人：xxx</div>
+                        <div class="batch-middel-text-style">部门：</div>
+                        <div class="batch-middel-text-style">楼层：</div>
+                        <div class="batch-middel-text-style">座位号：</div>
+                        <div style="display: flex;" class="batch-middel-text-style">联系方式:138XXXX1234 <van-button
+                                style="margin-top: -5px; border-radius: 6px;" type="info" size="mini">拨打</van-button>
+                        </div>
+                    </div>
+                    <div style="display: flex; padding-top: 5px;">
+                        <van-button style="width: 100px; border-radius: 6px;" size="small" type="info"
+                            @click="onReceiving">签收
+                        </van-button>
+                        <van-button style="width: 100px; border-radius: 6px;" size="small" type="danger"
+                            @click="onSureRetention">设为滞留</van-button>
+                    </div>
+                </div>
+                <!-- 各个运单 -->
+                <div class="batch-middel">
+                    <div class="batch-middel-text">
+                        <div class="batch-middel-text-style">【xx】运单号：xxxxx</div>
+                        <div class="batch-middel-text-style">收件人：xxx</div>
+                        <div class="batch-middel-text-style">部门：</div>
+                        <div class="batch-middel-text-style">楼层：</div>
+                        <div class="batch-middel-text-style">座位号：</div>
+                        <div style="display: flex;" class="batch-middel-text-style">联系方式:138XXXX1234 <van-button
+                                style="margin-top: -5px; border-radius: 6px;" type="info" size="mini">拨打</van-button>
+                        </div>
+                    </div>
+                    <div style="display: flex; padding-top: 5px;">
+                        <van-button style="width: 100px; border-radius: 6px;" size="small" type="info"
+                            @click="onReceiving">签收
+                        </van-button>
+                        <van-button style="width: 100px; border-radius: 6px;" size="small" type="danger"
+                            @click="onSureRetention">设为滞留</van-button>
+                    </div>
                 </div>
             </div>
-            <div class="batch-bottom">
+
+            <div @click="onUnfold" class="batch-bottom">
                 展开.....
             </div>
 
@@ -45,22 +90,51 @@
                     <van-field readonly clickable name="picker" :value="selectedOption" label="签收类型"
                         placeholder="点击签收类型" @click="showPicker = true" />
                     <van-popup v-model="showPicker" position="bottom">
-                        <van-picker show-toolbar  :columns="options" @confirm="onConfirm" @cancel="showPicker = false" />
+                        <van-picker show-toolbar :columns="options" @confirm="onConfirm" @cancel="showPicker = false" />
                     </van-popup>
+                    <van-field v-if="wer == '他人签收'" v-model="qwe" :rules="[{ required: true }]" label="代取手机号"
+                        placeholder="请输入代取手机号" />
                     <van-field name="uploader" label="签收照片">
                         <template #input>
                             <van-uploader v-model="uploader" />
                         </template>
                     </van-field>
-                    <van-field v-if="wer == '他人签收'" v-model="qwe" label="代取手机号" placeholder="请输入代取手机号" />
+
                     <div style="margin: 16px;">
                         <van-button round block type="info" native-type="submit">签收完成</van-button>
                     </div>
                 </van-form>
 
             </van-popup>
+
             <!-- 设为滞留 -->
-            <van-popup v-model="retention" style="width: 100%; height: 60%;">内容</van-popup>
+            <van-popup v-model="retention" style="width: 100%; height: 75%;">
+                <div style="font-size: 20px; text-align: center; ">派件滞留</div>
+                <van-form @submit="onSubmit">
+                    <van-field label="运单号" value="xxx" readonly />
+                    <van-field label="快件类型" value="xxx" readonly />
+                    <van-field label="快递公司" value="xxx" readonly />
+                    <van-field label="部门" value="xxx" readonly />
+                    <van-field label="座位号" value="xxx" readonly />
+                    <van-field label="收件人" value="xxx" readonly />
+                    <van-field label="楼层" value="xxx" readonly />
+                    <van-field label="联系方式" value="xxx" readonly />
+
+                    <van-field readonly clickable name="picker" :value="selectedRetention" label="滞留原因"
+                        placeholder="点击签收类型" @click="showRetention = true" />
+                    <van-popup v-model="showRetention" position="bottom">
+                        <van-picker show-toolbar :columns="Retention" @confirm="onRetention"
+                            @cancel="showRetention = false" />
+                    </van-popup>
+                    <van-field v-if="ert == '其他原因'" v-model="qwe" label="其他原因" :rules="[{ required: true }]"
+                        placeholder="请输入其他原因" />
+
+
+                    <div style="margin: 16px;">
+                        <van-button round block native-type="submit" type="danger">设为滞留</van-button>
+                    </div>
+                </van-form>
+            </van-popup>
         </div>
     </div>
 </template>
@@ -70,15 +144,20 @@ export default {
     name: 'waitsent',
     data() {
         return {
-            qwe:'',
+            shouldHideOverflow: true,
+            qwe: '',
             search: '',
             receiving: false,//签收
             retention: false,//滞留
             selectedOption: '', // 设置为空字符串，等待选择
+            selectedRetention: '',
             value: '',
             options: ['本人签收', '他人签收'],
+            Retention: ['无法联系收件人', '其他原因'],
             showPicker: false,
-            wer:'',
+            showRetention: false,
+            wer: '',
+            ert: '',
             uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
         };
     },
@@ -89,23 +168,40 @@ export default {
             this.selectedOption = this.options[0];
         },
         // 滞留
-        onRetention() {
+        onSureRetention() {
             this.retention = true;
         },
         onConfirm(value) {
             this.selectedOption = value;
             this.showPicker = false;
             this.wer = value
-            console.log(value,'123')
+        },
+        onRetention(value) {
+            this.selectedRetention = value;
+            this.showRetention = false;
+            this.ert = value
         },
         // 签收完成
         onSubmit() {
 
+        },
+        // 展开
+        onUnfold() {
+            this.shouldHideOverflow = !this.shouldHideOverflow;
+            console.log(this.shouldHideOverflow, '44')
         }
     },
 
     mounted() {
         this.selectedOption = this.options[0]; // 默认选择第一个选项
+    },
+    computed: {
+        batchssStyle() {
+            return {
+                overflow: this.shouldHideOverflow ? 'hidden' : 'auto',
+                height: this.shouldHideOverflow ? '130px' : 'auto',
+            }
+        }
     }
 
 };
@@ -116,6 +212,11 @@ export default {
     font-size: 12px;
 }
 
+.batchss {
+    height: 130px;
+    // overflow: hidden;
+}
+
 .batch {
     background-color: #fff;
     margin: 10px;
@@ -135,7 +236,8 @@ export default {
         height: 120px;
         background-color: #f2f2f2;
         border-radius: 12px;
-        margin: 0 6px;
+        margin: 10px 6px;
+
 
         &-text {
             display: flex;
@@ -149,7 +251,7 @@ export default {
     }
 
     &-bottom {
-        padding: 14px 4px;
+        padding: 10px 4px;
         color: #169bd5;
     }
 }

src/pages/my.vue

@@ -1,156 +1,169 @@
 <template>
 	<div class="body">
-    <!-- 选择类型 -->
-    <div class="head">
-		<template v-if="headimgurl!=null&&headimgurl!=''">
-			<img :src="headimgurl" alt="">
-		</template>
-		<template v-else>
-			<img src="../assets/images/foot_icon1.png" alt="">
-		</template>
-		<div>
-			<p>姓名：{{user.NAME}}</p>
-			<p>{{user.PHONE}}</p>
+		<!-- 选择类型 -->
+		<div class="head">
+			<template v-if="headimgurl != null && headimgurl != ''">
+				<img :src="headimgurl" alt="">
+			</template>
+			<template v-else>
+				<img src="../assets/images/foot_icon1.png" alt="">
+			</template>
+			<div>
+				<p>姓名：{{ user.NAME }}</p>
+				<p>{{ user.PHONE }}</p>
+			</div>
+			<img style="width: 100%;border-radius: 0px;margin-top: .4rem;" src="../assets/images/my_banner.png" alt="">
 		</div>
-		<img style="width: 100%;border-radius: 0px;margin-top: .4rem;" src="../assets/images/my_banner.png" alt="">
-	</div>
-    <div class="list">
-      <router-link to="/Personinfomation">
-        <img src="../assets/images/my_icon1.png" alt="">
-        <span>账号信息</span>
-      </router-link>
-      <router-link to="/Forgetpassword">
-        <img src="../assets/images/my_icon6.png" alt="">
-        <span>修改密码</span>
-      </router-link>
-    </div>
-    <div class="btn">
-    	<van-button color="#00c4b8" @click="loginout">退出登录</van-button>
-    </div>
-	<van-tabbar v-model="active">
+		<div class="list">
+			<router-link to="/Personinfomation">
+				<img src="../assets/images/my_icon1.png" alt="">
+				<span>账号信息</span>
+			</router-link>
+			<router-link to="/Forgetpassword">
+				<img src="../assets/images/my_icon6.png" alt="">
+				<span>修改密码</span>
+			</router-link>
+		</div>
+		<div class="btn">
+			<van-button color="#00c4b8" @click="loginout">退出登录</van-button>
+		</div>
+		<van-tabbar v-model="active">
 			<van-tabbar-item @click="my">首页</van-tabbar-item>
-			<van-tabbar-item >我的</van-tabbar-item>
+			<van-tabbar-item>我的</van-tabbar-item>
 		</van-tabbar>
 	</div>
 </template>
 
 <script>
 export default {
-    data() {
-      return {
-        titlename:"我的",
-        userId:"",
-        user:[],
-        headimgurl:'',
-		active: 1,
-      };
-    },
-    created:function(){
+	data() {
+		return {
+			titlename: "我的",
+			userId: "",
+			user: [],
+			headimgurl: '',
+			active: 1,
+		};
+	},
+	created: function () {
 		this.isLogin();
 		this.userId = localStorage.getItem("userId");
-    console.log('userId:'+ this.userId);
+		console.log('userId:' + this.userId);
 		this.getUser();
 		this.headimgurl = localStorage.getItem('headimgurl');
-    },
-    methods:{
-      //退出登录
-			loginout(){
-				localStorage.removeItem("userId");
-				localStorage.removeItem("openid");
-				window.location.href ='http://47.101.145.23/wuliu/ljy/';
-			},
-
-			my() {
-            this.$router.push('/')
-        }
-    }
-  };
+	},
+	methods: {
+		//退出登录
+		loginout() {
+			localStorage.removeItem("userId");
+			localStorage.removeItem("openid");
+			// window.location.href ='http://47.101.145.23/wuliu/ljy/';
+			// 配置一下  环境
+		},
+
+		my() {
+			this.$router.push('/')
+		}
+	}
+};
 </script>
 
 <style lang="less" scoped>
-  body{
-    background: #fbfbfb;
-  }
-  .body{
-    padding-bottom: 1.5rem;
-	  .head{
-		  padding:.43rem .38rem;
-		  font-size: .24rem;
-		  color: #999;
-		  display: flex;
-		  background: white;
-		  flex-wrap: wrap;
-		  position: relative;
-		  img{
-			  width: 1.48rem;
-			  height: 1.48rem;
-			  border-radius: 50%;
-			  margin-right: .4rem;
-		  }
-		  div{
-			  p:nth-of-type(1){
-				  font-size: .36rem;
-				  font-weight: bold;
-				  color: #333;
-				  margin-bottom: .2rem;
-				  padding-top: .3rem;
-			  }
-		  }
-		  // div:after{
-			 //  content: "";
-			 //  display: block;
-			 //  width: .2rem;
-			 //  height: .2rem;
-			 //  border-left: .01rem solid #333;
-			 //  border-top: .01rem solid #333;
-			 //  transform: rotate(135deg);
-			 //  position: absolute;
-			 //  right: .38rem;
-			 //  top: 1rem;
-		  // }
-	  }
-    .list{
-      background: white;
-      margin-top: .36rem;
-      border-radius: .05rem;
-      a{
-        font-size: .3rem;
-        font-weight: bold;
-        display: block;
-        color: #333;
-        padding:.3rem .4rem;
-        border-bottom:1px solid #f4f3f3;
+body {
+	background: #fbfbfb;
+}
+
+.body {
+	padding-bottom: 1.5rem;
+
+	.head {
+		padding: .43rem .38rem;
+		font-size: .24rem;
+		color: #999;
+		display: flex;
+		background: white;
+		flex-wrap: wrap;
 		position: relative;
-        img{
-          width: .4rem;
-          height: .4rem;
-        }
-        span{
-          position: relative;
-          top: -.075rem;
-          margin-left: .3rem;
-        }
-      }
-	  a:after{
-		  content: "";
-		  display: block;
-		  width: .2rem;
-		  height: .2rem;
-		  border-left: .01rem solid #b8b8b8;
-		  border-top: .01rem solid #b8b8b8;
-		  transform: rotate(135deg);
-		  position: absolute;
-		  right: .4rem;
-		  top: .4rem;
-	  }
-
-    }
-    .btn{
-    	padding: 0px .37rem;
-    	button{
-    		width: 100%;
-    		color: white;
-    	}
-    }
-  }
+
+		img {
+			width: 1.48rem;
+			height: 1.48rem;
+			border-radius: 50%;
+			margin-right: .4rem;
+		}
+
+		div {
+			p:nth-of-type(1) {
+				font-size: .36rem;
+				font-weight: bold;
+				color: #333;
+				margin-bottom: .2rem;
+				padding-top: .3rem;
+			}
+		}
+
+		// div:after{
+		//  content: "";
+		//  display: block;
+		//  width: .2rem;
+		//  height: .2rem;
+		//  border-left: .01rem solid #333;
+		//  border-top: .01rem solid #333;
+		//  transform: rotate(135deg);
+		//  position: absolute;
+		//  right: .38rem;
+		//  top: 1rem;
+		// }
+	}
+
+	.list {
+		background: white;
+		margin-top: .36rem;
+		border-radius: .05rem;
+
+		a {
+			font-size: .3rem;
+			font-weight: bold;
+			display: block;
+			color: #333;
+			padding: .3rem .4rem;
+			border-bottom: 1px solid #f4f3f3;
+			position: relative;
+
+			img {
+				width: .4rem;
+				height: .4rem;
+			}
+
+			span {
+				position: relative;
+				top: -.075rem;
+				margin-left: .3rem;
+			}
+		}
+
+		a:after {
+			content: "";
+			display: block;
+			width: .2rem;
+			height: .2rem;
+			border-left: .01rem solid #b8b8b8;
+			border-top: .01rem solid #b8b8b8;
+			transform: rotate(135deg);
+			position: absolute;
+			right: .4rem;
+			top: .4rem;
+		}
+
+	}
+
+	.btn {
+		padding: 0px .37rem;
+
+		button {
+			width: 100%;
+			color: white;
+		}
+	}
+}
 </style>

src/pages/new/removal.vue

@@ -1,14 +1,15 @@
 <template>
     <div class="container">
         <back :title="titlename"></back>
-        <van-search v-model="phone" placeholder="请输入手机单号" />
+        <van-search v-model="keyWorld" placeholder="请输入手机单号" />
         <img @click="onImg" src="@/assets/user/u4.png" alt="">
-        <div style="padding: 12px;">
-            <div v-if="show">已添加快件:</div>
-            <div v-if="show">
-                xxxxxxx
+        <div style="padding: 12px;" v-if="show">
+            <div>已添加快件:</div>
+            <div v-for="item in codes" :key="item">
+                <div>{{ item }}</div>
+                <div>x</div>
             </div>
-            <van-button @click="onBatch" class="build" v-if="show" type="info">生成批次</van-button>
+            <van-button @click="onBatch" class="build" type="info">生成批次</van-button>
         </div>
     </div>
 </template>
@@ -19,21 +20,27 @@ export default {
     data() {
         return {
             titlename: "快件出库",
-            show: false,
+            codes: [],
+            keyWorld: ""
         };
     },
     methods: {
         onImg() {
-            this.show = true
-
+            // 调用
+            this.callback(Math.random())
         },
-        phone() {
-            console.log('123')
+        callback(code) {
+            this.codes.push(code)
         },
         // 生成批次
         onBatch() {
             this.$router.push('Batched')
         }
+    },
+    computed: {
+        show() {
+            return this.codes.length > 0
+        }
     }
 
 };