快件入库页面完成

package.json

@@ -73,6 +73,7 @@
     "postcss-loader": "^2.0.8",
     "postcss-url": "^7.2.1",
     "rimraf": "^2.6.0",
+    "sass": "^1.72.0",
     "selenium-server": "^3.0.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",

src/pages/components/HomePage.vue

@@ -0,0 +1,421 @@
+<template>
+	<div>
+		<div class="content">
+			<div class="sm">
+				<van-search v-model="value" @search="onSearch" placeholder="点击搜索单号" />
+				<img @click="wxScanCode()" src="@/assets/user/u4.png" alt="">
+			</div>
+			<!-- 显示 -->
+			<div class="echarts1">
+				<div id="myChart1"></div>
+				<div id="myChart2"></div>
+			</div>
+			<!-- 图标 -->
+			<div class="icon">
+				<div class="icon-box">
+					<router-link to="storage">
+						<div style="">
+							<img src="@/assets/user/u32.png" alt="">
+						</div>
+						<p>快件入库</p>
+					</router-link>
+				</div>
+				<div class="icon-box">
+					<router-link to="Pjpc">
+						<div style="">
+							<img src="@/assets/user/u35.png" alt="">
+						</div>
+						<p>快件出库</p>
+					</router-link>
+				</div>
+				<div class="icon-box">
+					<router-link to="Box">
+						<div style="">
+							<img src="@/assets/user/u38.png" alt="">
+						</div>
+						<p>派件查询</p>
+					</router-link>
+				</div>
+				<div class="icon-box">
+					<router-link to="Kjsearch">
+						<div style="">
+							<img src="@/assets/user/u41.png" alt="">
+						</div>
+						<p>派件签收</p>
+					</router-link>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import {
+	Toast,
+	Dialog
+} from 'vant'
+// vue 专用版本JS-SDK
+import wx from "weixin-jsapi";
+export default {
+	data() {
+		return {
+			active: 0,
+			value: "",
+			index: 1,
+			total: 0,
+			expressMap: {}, //收件
+			mailMap: {} //寄件
+		}
+	},
+	created: function () {
+		//this.getOpenid("");
+		this.isLogin();
+		this.getData()
+	},
+	mounted() {
+		// 页面加载完成唤醒微信扫一扫
+		//本地 注释  服务器 放开
+		this.wxScanCode();
+
+		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,
+							},
+						}
+					},
+					emphasis: { //中间文字显示
+						show: true,
+					}
+				},
+				color: ['#02a7f0', '#bfbf00', '#d7d7d7', '#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,
+				}
+
+			},
+			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,
+					}
+				},
+				color: ['#02a7f0', '#bfbf00', '#d7d7d7', '#079bf9'],
+				labelLine: {
+					show: false
+				},
+				data: [{
+					value: 123,
+					name: '揽收成功'
+				},
+				{
+					value: 444,
+					name: '待揽收'
+				},
+				{
+					value: 222,
+					name: '未揽收'
+				},
+				]
+			}]
+		}
+		myChart2.setOption(option2)
+
+	},
+	methods: {//encodeURI(window.location.href.split('#')[0])
+		wxScanCode() {
+			let purl = /(Android)/i.test(navigator.userAgent) ? window.location.href.split('#')[0] : encodeURI(window.location.href.split('#')[0]);
+			let dataForm = {
+				'url': purl
+			}
+			//alert(url)
+			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) => {
+								//alert(res)
+								var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
+								if (result.indexOf(",") != -1) {
+									let result1 = res.resultStr.split(",");
+									result = result1[result1.length - 1];
+								}
+								this.onSearch(result)
+							},
+							error: function (res) {
+								console.log(res);
+							}
+						});
+
+					});
+				}, res => {
+					//发送失败
+					Toast("网络错误!")
+				})
+
+		},
+		sys() {
+
+		},
+		//打印面单
+		print() {
+			Toast('该功能正在开发中，敬请期待！');
+		},
+		//单号搜索
+		onSearch(val) {
+			this.$router.push({
+				path: '/Sysearch',
+				query: {
+					expressNo: val,
+					searchType: "1" //1.搜索全部 2.搜索快件 3.搜索寄件
+				}
+			})
+		},
+		//后端获取数据
+		getData() {
+			Toast.loading({
+				message: '加载中...',
+				forbidClick: true,
+				duration: 0
+			});
+
+			this.$http.post(this.$store.state.host + "/solic/solicHomePage.do", {
+				mailRoomId: localStorage.getItem('roomId')
+			}, {
+				emulateJSON: true
+			})
+				.then(res => {
+					//发送成功
+					if (res.body.msg == 'success') {
+						this.expressMap = res.body.expressMap
+						this.data[0].value = this.expressMap.successNum
+						this.data[1].value = this.expressMap.waitNum
+						this.data[2].value = this.expressMap.problemNum
+						this.mailMap = res.body.mailMap
+						console.log(this.mailMap, '=======================mailMap')
+						console.log(this.expressMap, '=======================expressMap')
+						//this.echart1(this.data)
+					}
+				}, res => {
+					//发送失败
+					Toast("网络错误!")
+				})
+			Toast.clear()
+		},
+
+		echart1(obj) {
+			console.log("图表数据：" + JSON.stringify(obj))
+
+		},
+
+	},
+
+}
+</script>
+
+<style scoped lang="less">
+.content {
+	padding: 0.25rem .37rem;
+
+	.sm {
+		display: flex;
+		margin-bottom: .2rem;
+		justify-content: space-between;
+
+		/deep/.van-search {
+			width: 100%;
+			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;
+			margin-left: .1rem;
+		}
+	}
+
+	.echarts1 {
+		width: 100%;
+		height: 4.2rem;
+		background: white;
+		display: flex;
+
+		div {
+			// width: 100%;
+			// height: 100%;
+			width: 169px;
+			height: 200px;
+			// margin: 0 auto;
+		}
+	}
+
+	.icon {
+		font-size: .26rem;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		background: white;
+		padding: .4rem .6rem 0rem;
+		margin-top: .3rem;
+		border-radius: .05rem;
+
+		&-box {
+			width: 35%;
+			text-align: center;
+			display: block;
+			margin-bottom: .5rem;
+			color: #333;
+
+			a {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				flex-direction: column;
+
+				div {
+					background-color: #169bd5;
+					width: 2rem;
+					height: 2rem;
+					border-radius: 50%;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+
+					img {
+						width: 1.15rem;
+						height: 1.15rem;
+					}
+				}
+			}
+
+
+		}
+	}
+}
+</style>

src/pages/components/My.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="container">My</div>
+</template>
+
+<script>
+export default {
+    name: 'My',
+    data() {
+        return {};
+    },
+
+};
+</script>

src/pages/email.vue

@@ -1,512 +1,38 @@
 <template>
 	<div>
-		<!-- <back :title="titlename"></back> -->
-		<div class="content">
-			<div class="sm">
-				<van-search v-model="value" @search="onSearch" placeholder="点击搜索单号" />
-				<img @click="wxScanCode()" src="../assets/user/u4.png" alt="">
-			</div>
-			<!-- table切换 -->
-			<!-- <div class="tab">
-				<div>
-					<p @click="tab(1)" :class="[index == 1 ? 'active' : '']">收件</p>
-					<p @click="tab(2)" :class="[index == 2 ? 'active' : '']">寄件</p>
-				</div>
-			</div> -->
-			<!-- 显示 -->
-		
-				<div id="aaaa" style="width: 100%;height: 200px;"></div>
-	
-			<!-- 图标 -->
-			<div class="icon">
-				<div class="icon-box">
-					<router-link to="Sjdj">
-						<div style="">
-							<img src="../assets/user/u32.png" alt="">
-						</div>
-						<p>快件入库</p>
-					</router-link>
-				</div>
-				<div class="icon-box">
-					<router-link to="Pjpc">
-						<div style="">
-							<img src="../assets/user/u35.png" alt="">
-						</div>
-						<p>快件出库</p>
-					</router-link>
-				</div>
-				<div class="icon-box">
-					<router-link to="Box">
-						<div style="">
-							<img src="../assets/user/u38.png" alt="">
-						</div>
-						<p>派件查询</p>
-					</router-link>
-				</div>
-				<div class="icon-box">
-					<router-link to="Kjsearch">
-						<div style="">
-							<img src="../assets/user/u41.png" alt="">
-						</div>
-						<p>派件签收</p>
-					</router-link>
-				</div>
-
-			</div>
-			<!-- <div class="tab">
-				<div>
-					<p @click="tab(1)" :class="[index == 1 ? 'active' : '']"><router-link to="/">首页</router-link></p>
-					<p @click="tab(2)" :class="[index == 2 ? 'active' : '']">我的</p>
-					<P @click="tab(2)" :class="[index == 2 ? 'active' : '']"><router-link to="my">我的</router-link></P>
-				</div>
-			</div> -->
-			<van-tabbar v-model="active" active-color="#1f1f1f" inactive-color="inactive-color"
-				style="background-color: #aaaaaa; ">
-				<van-tabbar-item>首页</van-tabbar-item>
-				<van-tabbar-item>我的</van-tabbar-item>
-			</van-tabbar>
+		<van-tabbar v-model="active" active-color="#1f1f1f" inactive-color="inactive-color"
+			style="background-color: #aaaaaa; ">
+			<van-tabbar-item>首页</van-tabbar-item>
+			<van-tabbar-item>我的</van-tabbar-item>
+		</van-tabbar>
+
+		<div v-if="this.active === 0">
+			<HomePage></HomePage>
+		</div>
+		<div v-else>
+			<My></My>
 		</div>
 	</div>
 </template>
 
 <script>
-import {
-	Toast,
-	Dialog
-} from 'vant'
-// vue 专用版本JS-SDK
-import wx from "weixin-jsapi";
+
+import HomePage from './components/HomePage.vue'
+import My from './components/My.vue'
 export default {
+	name: 'email',
+	components: {
+		HomePage,
+		My
+	},
 	data() {
 		return {
 			active: 0,
-			titlename: "邮件收发室",
-			value: "",
-			index: 1,
-			total: 0,
-			title: "今日累计收件",
-			data: [{
-				value: 0,
-				name: '签收成功'
-			},
-			{
-				value: 0,
-				name: '待签收'
-			},
-			{
-				value: 0,
-				name: '问题件'
-			},
-			],
-			expressMap: {}, //收件
-			mailMap: {} //寄件
 		}
 	},
-	created: function () {
-		//this.getOpenid("");
-		this.isLogin();
-		this.getData()
-	},
-	mounted() {
-		// 页面加载完成唤醒微信扫一扫
-		//本地 注释  服务器 放开
-		this.wxScanCode();
-
-		let myChart = this.$echarts.init(document.getElementById('aaaa'))
-		var option = {
-			tooltip: {
-				trigger: 'item'
-			},
-			legend: {
-				top: '60%',
-				right: '5%',
-				orient: 'vertical',
-				icon: 'circle',
-				textStyle:{
-					fontSize: 10,
-				}
-				
-			},
-			series: [{
-				name: '数据',
-				type: 'pie',
-				center: ["50%", "30%"],
-				radius: ['40%', '70%'],
-				avoidLabelOverlap: false,
-				label: {
-					normal: {
-						show: true,
-						position: 'center',
-						color: '#4c4a4a',
-						formatter: '{active|' + this.title + '}' + '\n\r' + '{total|' + this.total +
-							'}',
-						rich: {
-							total: {
-								fontSize: 12,
-								fontWeight: 'bold',
-								color: '#454c5c'
-							},
-							active: {
-								fontSize: 10,
-								color: '#6c7a89',
-								lineHeight: 30,
-							},
-						}
-					},
-					emphasis: { //中间文字显示
-						show: true,
-					}
-				},
-				color: ['#07daf9', '#f98407', '#f9df07', '#079bf9'],
-				// emphasis: {
-				//     label: {
-				//         show: false,
-				//         fontSize: '40',
-				//         fontWeight: 'bold'
-				//     }
-				// },
-				labelLine: {
-					show: false
-				},
-				data: [{
-					value: 123,
-					name: '签收成功'
-				},
-				{
-					value: 444,
-					name: '待签收'
-				},
-				{
-					value: 222,
-					name: '问题件'
-				},
-				]
-			}]
-		}
-		option =  {
-  tooltip: {
-    trigger: 'item'
-  },
-  legend: {
-    top: '5%',
-    left: 'center'
-  },
-  series: [
-    {
-      name: 'Access From',
-      type: 'pie',
-      radius: ['40%', '70%'],
-      avoidLabelOverlap: false,
-      itemStyle: {
-        borderRadius: 10,
-        borderColor: '#fff',
-        borderWidth: 2
-      },
-      label: {
-        show: false,
-        position: 'center'
-      },
-      emphasis: {
-        label: {
-          show: true,
-          fontSize: 40,
-          fontWeight: 'bold'
-        }
-      },
-      labelLine: {
-        show: false
-      },
-      data: [
-        { value: 1048, name: 'Search Engine' },
-        { value: 735, name: 'Direct' },
-        { value: 580, name: 'Email' },
-        { value: 484, name: 'Union Ads' },
-        { value: 300, name: 'Video Ads' }
-      ]
-    }
-  ]
-}
-		myChart.setOption(option)
-		
-	},
-	methods: {//encodeURI(window.location.href.split('#')[0])
-		wxScanCode() {
-			let purl = /(Android)/i.test(navigator.userAgent) ? window.location.href.split('#')[0] : encodeURI(window.location.href.split('#')[0]);
-			let dataForm = {
-				'url': purl
-			}
-			//alert(url)
-			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) => {
-								//alert(res)
-								var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
-								if (result.indexOf(",") != -1) {
-									let result1 = res.resultStr.split(",");
-									result = result1[result1.length - 1];
-								}
-								this.onSearch(result)
-							},
-							error: function (res) {
-								console.log(res);
-							}
-						});
-
-					});
-				}, res => {
-					//发送失败
-					Toast("网络错误!")
-				})
-
-		},
-		sys() {
-
-		},
-		//打印面单
-		print() {
-			Toast('该功能正在开发中，敬请期待！');
-		},
-		//单号搜索
-		onSearch(val) {
-			this.$router.push({
-				path: '/Sysearch',
-				query: {
-					expressNo: val,
-					searchType: "1" //1.搜索全部 2.搜索快件 3.搜索寄件
-				}
-			})
-		},
-		//后端获取数据
-		getData() {
-			Toast.loading({
-				message: '加载中...',
-				forbidClick: true,
-				duration: 0
-			});
-
-			this.$http.post(this.$store.state.host + "/solic/solicHomePage.do", {
-				mailRoomId: localStorage.getItem('roomId')
-			}, {
-				emulateJSON: true
-			})
-				.then(res => {
-					//发送成功
-					if (res.body.msg == 'success') {
-						this.expressMap = res.body.expressMap
-						this.data[0].value = this.expressMap.successNum
-						this.data[1].value = this.expressMap.waitNum
-						this.data[2].value = this.expressMap.problemNum
-						this.mailMap = res.body.mailMap
-						console.log(this.mailMap, '=======================mailMap')
-						console.log(this.expressMap, '=======================expressMap')
-						//this.echart1(this.data)
-					}
-				}, res => {
-					//发送失败
-					Toast("网络错误!")
-				})
-			Toast.clear()
-		},
-		tab(obj) {
-			this.getData()
-			this.index = obj
-			// if (this.index == 1) {
-			// 	this.title = "今日累计收件"
-			// 	this.total = this.expressMap.receiveNum
-			// 	this.data = [{
-			// 		value: this.expressMap.successNum,
-			// 		name: '签收成功'
-			// 	},
-			// 	{
-			// 		value: this.expressMap.waitNum,
-			// 		name: '待签收'
-			// 	},
-			// 	{
-			// 		value: this.expressMap.problemNum,
-			// 		name: '问题件'
-			// 	},
-			// 	]
-			// 	this.echart1(this.data)
-			// }
-			// if (this.index == 2) {
-			// 	this.title = "今日累计下单"
-			// 	this.total = this.mailMap.sendNum
-			// 	//alert(this.mailMap.waitLsNum)
-			// 	this.data = [{
-			// 		value: this.mailMap.succesLsNum,
-			// 		name: '揽收成功'
-			// 	},
-			// 	{
-			// 		value: this.mailMap.waitLsNum,
-			// 		name: '待揽收'
-			// 	},
-			// 	{
-			// 		value: this.mailMap.alreadyLsNum,
-			// 		name: '已寄出'
-			// 	},
-			// 	{
-			// 		value: this.mailMap.problemLsNum,
-			// 		name: '问题件'
-			// 	},
-			// 	]
-			// 	this.echart1(this.data)
-			// }
-		},
-		echart1(obj) {
-			console.log("图表数据：" + JSON.stringify(obj))
-
-		},
-
-	},
-	
 }
 </script>
 
 <style scoped lang="less">
-.content {
-	padding: 0.25rem .37rem;
-
-	.sm {
-		display: flex;
-		margin-bottom: .2rem;
-		justify-content: space-between;
-
-		/deep/.van-search {
-			width: 100%;
-			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;
-			margin-left: .1rem;
-		}
-	}
-
-	.tab {
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		width: 100%;
-		height: 1.3rem;
-		font-size: .32rem;
-		color: #333;
-		background: #aaaaaa;
-		border-radius: .05rem;
-
-		div {
-			display: flex;
-			height: 1.3rem;
-			text-align: center;
-			line-height: 1rem;
-
-			p {
-				flex: 1;
-				padding: .2rem 0rem;
-				border-top-left-radius: .05rem;
-				border-top-right-radius: .05rem;
-				overflow: hidden;
-
-
-			}
-
-			p.active {
-				background: white;
-			}
-		}
-
-	}
-
-	.echarts1 {
-		width: 100%;
-		height: 4.2rem;
-		background: white;
-
-		#myChart1 {
-			width: 100%;
-			height: 200px;
-		}
-	}
-
-	.icon {
-		font-size: .26rem;
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-		background: white;
-		padding: .4rem .6rem 0rem;
-		margin-top: .3rem;
-		border-radius: .05rem;
-
-		&-box {
-			width: 35%;
-			text-align: center;
-			display: block;
-			margin-bottom: .5rem;
-			color: #333;
-
-			a {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				flex-direction: column;
-
-				div {
-					background-color: #169bd5;
-					width: 2rem;
-					height: 2rem;
-					border-radius: 50%;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-
-					img {
-						width: 1.15rem;
-						height: 1.15rem;
-					}
-				}
-			}
-
-
-		}
-	}
-}
 </style>

src/pages/new/storage.vue

@@ -0,0 +1,207 @@
+<template>
+    <div>
+        <div class="container">
+            <van-form @submit="onSubmit">
+                <div class="little-box">
+                    <div class="text1">快递单号</div>
+                    <van-field v-model="object.a" name="快递单号" placeholder="请输入快递单号"
+                        :rules="[{ required: true, message: '' }]" />
+                </div>
+                <div class="little-box">
+                    <div class="text">快递公司:</div>
+                    <van-field readonly clickable name="picker" :value="value" 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="little-box">
+                    <div class="text">收件人手机号码</div>
+                    <van-field v-model="object.b" name="手机号码" placeholder="请输入收件人手机号码"
+                        :rules="[{ required: true, message: '' }]" />
+                </div>
+                <div class="little-box">
+                    <div class="text">收件人姓名</div>
+                    <van-field v-model="object.username" name="收件人姓名" placeholder="请输入收件人姓名"
+                        :rules="[{ required: true, message: '' }]" />
+                </div>
+                <div class="little-box">
+                    <div class="text">收件人部门</div>
+                    <van-field v-model="object.username" name="收件人姓名" placeholder="请输入收件人部门"
+                        :rules="[{ required: true, message: '' }]" />
+                </div>
+                <div class="little-box">
+                    <div class="text">所属收发室:</div>
+                    <van-field readonly clickable name="picker" :value="value2" placeholder="请选择所属收发室"
+                        @click="outgoing = true" />
+                    <van-popup v-model="outgoing" position="bottom">
+                        <van-picker show-toolbar :columns="outgoings" @confirm="onOutgoing"
+                            @cancel="outgoing = false" />
+                    </van-popup>
+                </div>
+                <div class="little-box">
+                    <div class="text">收件人楼层:</div>
+                    <van-field readonly clickable name="picker" :value="value3" placeholder="请选择收件人楼层"
+                        @click="floor = true" />
+                    <van-popup v-model="floor" position="bottom">
+                        <van-picker show-toolbar :columns="floors" @confirm="onFloor" @cancel="floor = false" />
+                    </van-popup>
+                </div>
+                <div class="little-box">
+                    <div class="text">收件人座位</div>
+                    <van-field v-model="object.set" name="收件人座位" placeholder="请输入收件人座位"
+                        :rules="[{ required: true, message: '' }]" />
+                </div>
+                <div class="little-box">
+                    <div class="text">快件类型</div>
+                    <van-field name="radio">
+                        <template #input>
+                            <van-radio-group v-model="object.radio" direction="horizontal">
+                                <van-radio name="1">文件</van-radio>
+                                <van-radio name="2">物品</van-radio>
+                            </van-radio-group>
+                        </template>
+                    </van-field>
+                </div>
+                <div class="little-box">
+                    <div class="text">快递数量</div>
+                    <van-field v-model="object.e" name="快递数量" placeholder="请输入快递数量"
+                        :rules="[{ required: true, message: '' }]" />
+                </div>
+                <div class="little-box">
+                    <div class="text">货架信息:</div>
+                    <van-field readonly clickable name="picker" :value="value4" placeholder="请选择货架"
+                        @click="shelf = true" />
+                    <van-popup v-model="shelf" position="bottom">
+                        <van-picker show-toolbar :columns="shelfs" @confirm="onShelf" @cancel="shelf = false" />
+                    </van-popup>
+                </div>
+                <div class="little-box">
+                    <div class="text">到付件</div>
+                    <div style="display: flex; justify-content: flex-start;">
+                        <van-field name="checkbox">
+                            <template #input>
+                                <van-checkbox v-model="checkbox" @change="onCheckboxChange"
+                                    shape="square" /><span>到付</span>
+                            </template>
+                        </van-field>
+                        <van-field :disabled="isdisabled" style="margin-left: -245px;" v-model="object.e" name="到付备注"
+                            placeholder="请输入到付备注"  />
+                    </div>
+                </div>
+                <div class="little-box">
+                    <div class="text">快递备注</div>
+                    <van-field v-model="object.f" name="快递备注" placeholder="请输入快递备注"
+                        :rules="[{ required: true, message: '' }]" />
+                </div>
+
+
+
+
+
+
+                <div style=" display: flex; justify-content: space-between; background-color: #fff;  padding: 10px 0;">
+                    <van-button size="small" style="border-radius: 5px; width: 190px;" block type="info"
+                        native-type="submit">保存/打印小标签并添加下一个</van-button>
+                    <van-button size="small" style="width: 130px; border-radius: 5px;" block type="info"
+                        native-type="submit">保存并打印小标签</van-button>
+                </div>
+            </van-form>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            object: {
+                username: '',
+                a: '',
+                b: '',
+                c: '',
+                d: '',
+                e: '',
+                f: '',
+                set: '',
+                radio: '1',
+            },
+            checkbox: false,
+            isdisabled: true,//是否选中多选
+            value: '', //快递公司
+            columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'], //快递公司
+            showPicker: false, //快递公司
+            value2: '', //快递公司
+            outgoings: ['杭州', '宁波', '温州', '嘉兴', '湖州'], //收发室
+            outgoing: false, //收发室
+            value3: '', //快递公司
+            floors: ['杭州', '宁波', '温州', '嘉兴', '湖州'], //收发室
+            floor: false, //收发室
+            value4: '', //快递公司
+            shelfs: ['杭州', '宁波', '温州', '嘉兴', '湖州'], //收发室
+            shelf: false, //收发室
+        };
+    },
+    methods: {
+        // 选择快递公司
+        onConfirm(value) {
+            this.value = value;
+            this.showPicker = false;
+        },
+        // 选择收发室
+        onOutgoing(value) {
+            this.value2 = value;
+            this.outgoing = false;
+        },
+        onFloor(value) {
+            this.value3 = value;
+            this.floor = false;
+        },
+        onShelf(value) {
+            this.value4 = value;
+            this.shelf = false;
+        },
+        // 提交
+        onSubmit(values) {
+            console.log('submit', values);
+            this.$router.push('/')
+        },
+        onCheckboxChange() {
+            this.isdisabled = !this.isdisabled
+        }
+
+
+    },
+
+
+};
+</script>
+
+<style lang="less" scoped>
+.container {
+    height: 100%;
+    background-color: #f2f2f2;
+    margin: 18px 12px;
+
+    .little-box {
+        background-color: #fff;
+        margin-top: 2px;
+
+        /deep/ .van-field {
+            padding: 0;
+            margin-top: 6px;
+        }
+
+        .text {
+            padding-top: 10px;
+            font-size: 12px;
+        }
+
+        .text1 {
+            padding-top: 0px;
+            font-size: 12px;
+        }
+    }
+
+}
+</style>

src/pages/sjdj.vue

@@ -1,13 +1,6 @@
 <template>
   <div>
     <backindex :title="titlename"></backindex>
-  <van-field
-    v-model="username"
-    name="用户名"
-    label="用户名"
-    placeholder="用户名"
-    :rules="[{ required: true, message: '请填写用户名' }]"
-  />
     <div class="content">
       <div class="sm">
         <van-search v-model="value" @search="onSearch" placeholder="点击搜索单号" />

src/router/index.js

@@ -1,19 +1,20 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Kjsearch from '@/pages/kjsearch'
+import Kjsearch from '@/pages/kjsearch'
 import Sysearch from '@/pages/sysearch'
 import Kjsearchinfo from '@/pages/kjsearchinfo'
 import Jjsearch from '@/pages/jjsearch'
 import Sjdj from '@/pages/sjdj'
+import storage from '@/pages/new/storage'
 import Addper from '@/pages/addper'
 import Box from '@/pages/box'
 import Pjpc from '@/pages/pjpc'
-import Sign from '@/pages/sign'
+import Sign from '@/pages/sign'
 import Sign2 from '@/pages/sign2'
 import Login from '@/pages/login'
-import Key from '@/pages/key'
-import My from '@/pages/my'
-import Personinfomation from '@/pages/personinfomation'
+import Key from '@/pages/key'
+import My from '@/pages/my'
+import Personinfomation from '@/pages/personinfomation'
 import Forgetpassword from '@/pages/forgetpassword'
 // 用户使用
 import Email from '@/pages/email'
@@ -44,38 +45,38 @@ export default new Router({
 			meta: {
 				needLogin: true //需要加校检判断的路由
 			}
-		},
-    { //邮件收发室
-    	path: '/Sign2',
-    	name: 'Sign2',
-    	component: Sign2,
-    	meta: {
-    		needLogin: true //需要加校检判断的路由
-    	}
-    },
-    { //我的
-    	path: '/My',
-    	name: 'My',
-    	component: My,
-    	meta: {
-    		needLogin: true //需要加校检判断的路由
-    	}
-    },
-    { //个人信息
-    	path: '/Personinfomation',
-    	name: 'Personinfomation',
-    	component: Personinfomation,
-    	meta: {
-    		needLogin: true //需要加校检判断的路由
-    	}
-    },
-    { //修改密码
-    	path: '/Forgetpassword',
-    	name: 'Forgetpassword',
-    	component: Forgetpassword,
-    	meta: {
-    		needLogin: true //需要加校检判断的路由
-    	}
+		},
+    { //邮件收发室
+    	path: '/Sign2',
+    	name: 'Sign2',
+    	component: Sign2,
+    	meta: {
+    		needLogin: true //需要加校检判断的路由
+    	}
+    },
+    { //我的
+    	path: '/My',
+    	name: 'My',
+    	component: My,
+    	meta: {
+    		needLogin: true //需要加校检判断的路由
+    	}
+    },
+    { //个人信息
+    	path: '/Personinfomation',
+    	name: 'Personinfomation',
+    	component: Personinfomation,
+    	meta: {
+    		needLogin: true //需要加校检判断的路由
+    	}
+    },
+    { //修改密码
+    	path: '/Forgetpassword',
+    	name: 'Forgetpassword',
+    	component: Forgetpassword,
+    	meta: {
+    		needLogin: true //需要加校检判断的路由
+    	}
     },
 		{ //邮件收发室
 			path: '/',
@@ -92,14 +93,14 @@ export default new Router({
 			meta: {
 				needLogin: true //需要加校检判断的路由
 			}
-		},
-    { //首页查询
-    	path: '/Sysearch',
-    	name: 'Sysearch',
-    	component: Sysearch,
-    	meta: {
-    		needLogin: true //需要加校检判断的路由
-    	}
+		},
+    { //首页查询
+    	path: '/Sysearch',
+    	name: 'Sysearch',
+    	component: Sysearch,
+    	meta: {
+    		needLogin: true //需要加校检判断的路由
+    	}
     },
 		{ //快件查询详情
 			path: '/Kjsearchinfo',
@@ -125,6 +126,14 @@ export default new Router({
 				needLogin: true //需要加校检判断的路由
 			}
 		},
+		{ //收件登记
+			path: '/storage',
+			name: 'storage',
+			component: storage,
+			meta: {
+				needLogin: true //需要加校检判断的路由
+			}
+		},
 		{ //新增收件人
 			path: '/Addper',
 			name: 'Addper',

yarn.lock

@@ -2041,6 +2041,21 @@ check-types@^7.3.0:
   resolved "https://registry.npmmirror.com/check-types/-/check-types-7.4.0.tgz#0378ec1b9616ec71f774931a3c6516fad8c152f4"
   integrity sha512-YbulWHdfP99UfZ73NcUDlNJhEIDgm9Doq9GhpyXbF+7Aegi3CVV7qqMCKTTqJxlvEvnQBp9IA+dxsGN6xK/nSg==
 
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.6.0"
+  resolved "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chokidar@^2.1.2, chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.npmmirror.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -4952,6 +4967,11 @@ image-size@~0.5.0:
   resolved "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
   integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
 
+immutable@^4.0.0:
+  version "4.3.5"
+  resolved "https://registry.npmmirror.com/immutable/-/immutable-4.3.5.tgz#f8b436e66d59f99760dc577f5c99a4fd2a5cc5a0"
+  integrity sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==
+
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npmmirror.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -9062,6 +9082,15 @@ sass-loader@^10.1.1:
     schema-utils "^3.0.0"
     semver "^7.3.2"
 
+sass@^1.72.0:
+  version "1.72.0"
+  resolved "https://registry.npmmirror.com/sass/-/sass-1.72.0.tgz#5b9978943fcfb32b25a6a5acb102fc9dabbbf41c"
+  integrity sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 sax@^1.2.4:
   version "1.3.0"
   resolved "https://registry.npmmirror.com/sax/-/sax-1.3.0.tgz#a5dbe77db3be05c9d1ee7785dbd3ea9de51593d0"
@@ -9404,6 +9433,11 @@ source-list-map@^2.0.0:
   resolved "https://registry.npmmirror.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
+"source-map-js@>=0.6.2 <2.0.0":
+  version "1.2.0"
+  resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
+  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
+
 source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"