courier_mobile_front/src/pages/components/HomePage.vue

<template>
	<div class="content">
		<div class="sm">
			<van-search v-model="searchValue" @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">
					<span class="span">
						<img src="@/assets/user/u32.png" alt="">
					</span>
					<p>快件入库</p>
				</router-link>
			</div>
			<div class="icon-box">
				<router-link to="Removal">
					<span class="span">
						<img src="@/assets/user/u35.png" alt="">
					</span>
					<p>快件出库</p>
				</router-link>
			</div>
			<div class="icon-box">
				<router-link to="DeliveryInquiry">
					<span class="span">
						<img src="@/assets/user/u38.png" alt="">
					</span>
					<p>派件查询</p>
				</router-link>
			</div>
			<div class="icon-box">
				<router-link to="SignA">
					<span class="span">
						<img src="@/assets/user/u41.png" alt="">
					</span>
					<p>派件签收</p>
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
import { appFindYourShipment, appStatistics, getSysUserInfoByUserIdAPI, getWxConfig } from '../../api/index'
import {
	Toast,
	Dialog
} from 'vant'
// vue 专用版本JS-SDK
import wx from "weixin-jsapi";
export default {
	data() {
		return {
			deliveryList: [],//派件
			collectList: [],//揽收
			searchValue: "", //搜索单号的值
			expressMap: {}, //收件
			mailMap: {}, //寄件
		}
	},
	async mounted() {
		// 数据图表
		const resValue = await appStatistics({ deliveryPeopleId: localStorage.getItem('courierId') })
		const { dispatchStatistics = [], pickupStatistics = [] } = resValue.data
		let signSuccessfully = 0; // 签收成功
		let outOfDelivery = 0; // 派送中
		let deliveryFailure = 0; // 派送失败
		dispatchStatistics.forEach(({ expressStatus, number }) => {
			if (expressStatus == "1") {
				outOfDelivery = number
			} else if (expressStatus == "2") {
				signSuccessfully = number
			} else if (expressStatus == "4") {
				deliveryFailure = number
			}
		})
		let waiteCollecte = 0 //待揽收
		let noCollecte = 0 //未揽收
		let collecteSuccess = 0 //揽收成功
		pickupStatistics.forEach(({ express_status, number }) => {
			if (express_status == "1") {
				waiteCollecte = number
				noCollecte = number
			} else if (express_status == "2") {
				collecteSuccess = number
			}
		})

		// 页面加载完成唤醒微信扫一扫
		//本地 注释  服务器 放开
		setTimeout(() => {
			let myChart = this.$echarts.init(document.getElementById('myChart1'))
			var option = {
				tooltip: {
					// show: false,
					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|' + signSuccessfully +
								'}',
							rich: {
								total: {
									fontSize: 12,
									fontWeight: 'bold',
									color: '#454c5c'
								},
								active: {
									fontSize: 10,
									color: '#6c7a89',
									lineHeight: 30,
								},
							}
						},
						emphasis: { //中间文字显示
							show: true,
						}
					},
					color: ['#07daf9', '#f98407', '#f9df07', '#079bf9'],
					labelLine: {
						show: false
					},
					data: [{
						value: signSuccessfully,
						name: '签收成功'
					},
					{
						value: outOfDelivery,
						name: '派送中'
					},
					{
						value: deliveryFailure,
						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|' + collecteSuccess +
								'}',
							rich: {
								total: {
									fontSize: 12,
									fontWeight: 'bold',
									color: '#454c5c'
								},
								active: {
									fontSize: 10,
									color: '#6c7a89',
									lineHeight: 30,
								},
							}
						},
						emphasis: { //中间文字显示
							show: true,
						}
					},
					color: ['#07daf9', '#f98407', '#f9df07', '#079bf9'],
					labelLine: {
						show: false
					},
					data: [{
						value: collecteSuccess,
						name: '揽收成功'
					},
					{
						value: waiteCollecte,
						name: '待揽收'
					},

					{
						value: noCollecte,
						name: '未揽收'
					},
					]
				}]
			}
			myChart2.setOption(option2)

		}, 500)

	},
	methods: {
		// 点击搜索icon
		wxScanCode() {
			wx.scanQRCode({
				needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
				success: (res) => {
					//alert(res)
					console.log(res, '==============')
					var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
					if (result.indexOf(",") != -1) {
						let result1 = res.resultStr.split(",");
						result = result1[result1.length - 1];
					}
					this.wxScanCodeA(result)
				},
				error: function (res) {
					console.log(res, 'error++++++++++');
				}
			});
			console.log('qwe')


		},

		// 点击搜索icon
		async wxScanCodeA(result) {
			const res = await appFindYourShipment({ expressNo: result }, { emulateJSON: true })
			if (res.msg == 'success' && res.data) {
				this.$store.state.shipment = res
				this.$router.push('ScannerResult')
			} else {
				Toast('找不到此单号')
			}
		},

		// 搜索
		async onSearch() {
			const res = await appFindYourShipment({ expressNo: this.searchValue }, { emulateJSON: true })
			if (res.msg == 'success' && res.data) {
				this.$store.state.shipment = res
				this.$router.push('ScannerResult')
			} else {
				Toast('找不到此单号')
			}
		}

	},

	// async getUser() {
	// 	const res = await getSysUserInfoByUserIdAPI({ userId: localStorage.getItem("userId") })
	// 	this.$store.state.user = res.sysUserInfo
	// 	console.log(this.$store.state.user, 'this.$state.state.user')
	// }

	//单号搜索
	// onSearch(val) {
	// 	this.$router.push({
	// 		path: '/Sysearch',
	// 		query: {
	// 			expressNo: val,
	// 			searchType: "1" //1.搜索全部 2.搜索快件 3.搜索寄件
	// 		}
	// 	})
	// },

}


</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;

		#myChart1,
		#myChart2 {
			// width: 100%;
			// height: 100%;
			width: 50%;
			height: 200px;
			// margin: 0 auto;
		}
	}

	.icon {
		font-size: .26rem;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background: white;
		padding: .3rem .6rem 0rem;
		margin-top: .3rem;
		border-radius: .05rem;

		&-box {
			width: 35%;
			text-align: center;
			display: block;
			margin-bottom: .3rem;
			color: #333;

			a {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				&:link {
					color: #000;
				}

				.span {
					background-color: #00c4b8;
					width: 1.8rem;
					height: 1.8rem;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;

					img {
						width: 1rem;
						height: 1rem;
					}


				}

				p {
					margin-top: 4px;
				}
			}


		}
	}
}
</style>