BRS1.0/pages/mypage/index.vue

<template>
	<view class="app-content">
		<img src="static/beijing.png" alt="" class="tuku">
		<!-- <Nav :navname.sync="navname" :navtype="false" :navtypes="true" :index="index"></Nav> -->
		<view class="cont" style="margin-top: 3rem;">
			<view class="photograph" @tap="upindiv">
				<img src="static/shuai.png" alt="">
			</view>
			<view class="details">
				<p>{{$storage.getJson("users").user_name?$storage.getJson("users").user_name:""}}</p>
				<span>工号：{{$storage.getJson("users").user_id?$storage.getJson("users").user_id:""}}</span>
			</view>
			<view class="detail_list">
				<view class="list_child" @tap="recup('SORT')">
					<p>分拣</p>
					<span>{{SORTCount}}</span>
				</view>
				<view class="list_child" @tap="recup('LOAD')">
					<p>装车</p>
					<span>{{LOADCount}}</span>
				</view>
				<view class="list_child" @tap="recup('INFL')">
					<p>装机</p>
					<span>{{INFLCount}}</span>
				</view>
				<view class="list_child" @tap="recup('UNLOAD')">
					<p>卸机</p>
					<span>{{UNLOADCount}}</span>
				</view>
				<view class="list_child" @tap="recup('ARRIVED')">
					<p>到达</p>
					<span>{{ARRIVEDCount}}</span>
				</view>
				<view class="list_child" @tap="recup('extract')">
					<p>提取</p>
					<span>{{extractCount}}</span>
				</view>
			</view>
			<view class="detail_type">
				<view class="list_child" @tap="recup()">
					<view class="log bg1"></view>
					<p>我的记录</p>
				</view>
				<view class="list_child" @tap="uppop">
					<view class="log bg2"></view>
					<p>扫码开关</p>
				</view>
				<view class="list_child" @tap="uppops">
					<view class="log bg3"></view>
					<p>工作方式</p>
				</view>
				<view class="list_child" @tap="uphelp">
					<view class="log bg4"></view>
					<p>帮助</p>
				</view>
			</view>
		</view>
		<z-popup v-model="all">
			<view class="popup_title">
				<p>请选择扫码开关</p>
			</view>
			<view class="popup_content">
				<ul>
					<li v-for="(item, index) in list" :key="index" @tap="()=>selectup(index)">
						<p>{{item.name}}</p>
						<view class="start" v-if="action === index ? true: false">
							<img src="static/gou.png" alt="">
						</view>
					</li>
				</ul>
				<view class="top"></view>
				<view class="cancel" @tap="()=>topup()">取消</view>
			</view>
		</z-popup>
		<z-popup v-model="allshow">
			<view class="popup_title">
				<p>请选择工作方式</p>
			</view>
			<view class="popup_content">
				<ul>
					<li v-for="(item, index) in lists" :key="index" @tap="()=>selectup2(index)">
						<p>{{item.name}}</p>
						<view class="start" v-if="action2 === index ? true: false">
							<img src="static/gou.png" alt="">
						</view>
					</li>
				</ul>
				<view class="top"></view>
				<view class="cancel" @tap="()=>topup()">取消</view>
			</view>
		</z-popup>
	</view>
</template>
<script>
	import Nav from '../../components/header/nav.vue'
	// import Popup from '../../uni_modules/z-popup/components/z-popup'
	export default {
		data() {
			return {
				SORTCount: 0,
				LOADCount: 0,
				INFLCount: 0,
				UNLOADCount: 0,
				ARRIVEDCount: 0,
				extractCount: 0,
				main: null,
				poll: null,
				filter: null,
				pusher: null,
				intentServer: null,
				navname: '我的',
				all: false,
				allshow: false,
				action: 0,
				action2: 0,
				index: 0,
				list: [{
						name: '激光扫描枪'
					},
					{
						name: 'RFID读取器'
					}
				],
				lists: [{
						name: '单次扫描'
					},
					{
						name: '连续扫描'
					}
				]
			}
		},
		created(option) {},
		onLoad() {},
		onUnload() {
			uni.$off("scancodemsg");
		},
		onShow() {
			// uni.hideTabBar()//关闭导航栏
			// uni.showTabBar()//显示导航栏
			this.action = this.$storage.get("device")?Number(this.$storage.get("device")):0
			this.$devapi.TYPE_DEV_JQHWGEVIQUWVILBE = this.action
			this.action2 = this.$storage.get("times")?Number(this.$storage.get("times")):0
			this.$devapi.RFIDIntervalTime = this.action2
			uni.$on("scancodemsg", (data) => {
				if (data.msg.length > 9) {
					uni.navigateTo({
						url: "/pages/detail/index?luggageNum=" + data.msg
						// url: "/pages/detail/index?luggageNum=3999483183"
					})
				}
			});
			if (this.$storage.get('airport')) {
				this.index = this.$storage.get('airport')
			}
			this.SORTCount = 0;
			this.LOADCount = 0;
			this.INFLCount = 0;
			this.UNLOADCount = 0;
			this.ARRIVEDCount = 0;
			this.extractCount = 0;
			if (this.$storage.getJson("users").user_name) {
				this.$nextTick(e=>{
					this.getDataCount()
				})
			}
		},
		onHide() {
			uni.$off("scancodemsg");
		},
		mounted() {},
		components: {
			Nav
		},
		watch: {
			allshow() {
				if (this.allshow) {
					uni.hideTabBar({})
				} else {
					uni.showTabBar()
				}
			},
			all() {
				if (this.all) {
					uni.hideTabBar({})
				} else {
					uni.showTabBar()
				}
			}
		},
		methods: {
			async getDataCount() {
				let data = {
					"serviceId": 3018,
					"dataContent": [{
							"agentNumber": this.$storage.getJson("users").user_name
						}
					]
				}
				await this.$http.httpPost('/openApi/query', data).then(res => {
					if (res.code == "0") {
						res.returnData.map(item => {
							if(item.nodeCode == "SORT"){
								this.SORTCount = item.total
							}
							if(item.nodeCode == "LOAD"){
								this.LOADCount = item.total
							}
							if(item.nodeCode == "INFL"){
								this.INFLCount = item.total
							}
							if(item.nodeCode == "UNLOAD"){
								this.UNLOADCount = item.total
							}
							if(item.nodeCode == "ARRIVED"){
								this.ARRIVEDCount = item.total
							}
							if(item.nodeCode == "extract"){
								this.extractCount = item.total
							}
						})
					}
					else{
						uni.showToast({
							icon:'none',
							title: "查询信息失败",
							duration: 5000
						});
					}
				})
			},
			recup(type) {
				if(type){
					uni.navigateTo({
						url: "/pages/myrecords/index?nodeCode="+type
					})
				}
				else{
					uni.navigateTo({
						url: "/pages/myrecords/index"
					})
				}
			},
			fall() {
				uni.redirectTo({
					url: "/pages/index/index"
				})
			},
			upindiv() {
				uni.navigateTo({
					url: "/pages/individual/index"
				})
			},
			uphelp() {
				uni.navigateTo({
					url: "/pages/help/index"
				})
			},
			uppop() {
				uni.hideTabBar({})
				this.all = true
			},
			uppops() {
				uni.hideTabBar({})
				this.allshow = true
			},
			selectup(index) {
				this.$devapi.TYPE_DEV_JQHWGEVIQUWVILBE = Number(index)
				this.$storage.set("device",index)
				this.action = index
			},
			selectup2(index) {
				this.$storage.set("times",index)
				this.action2 = index
				this.$devapi.RFIDIntervalTime = this.action2
			},
			topup() {
				this.all = false
				this.allshow = false
				uni.showTabBar() //显示导航栏
			}
		},
	}
</script>
<style lang="scss" scoped>
	.app-content {

		// position: relative;
		>.tuku {
			position: absolute;
			z-index: -1;
			width: 100%;
			top: 0;
		}

		>.cont {
			z-index: 999;

			>.photograph {
				width: 6rem;
				height: 6rem;
				// background: red;
				border-radius: 50%;
				margin: 0 auto;
				margin-top: .625rem;
			}

			>.details {
				width: 100%;
				height: 3.125rem;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				// background: red;
				margin-top: .625rem;

				>p {
					color: rgb(255, 255, 255);
					font-family: Noto Sans SC;
					font-size: 1rem;
					font-weight: 500;
				}

				>span {
					color: rgb(255, 255, 255);
					font-family: Noto Sans SC;
					font-size: .8125rem;
					font-weight: 500;
				}
			}

			>.detail_list {
				width: 100%;
				// background: red;
				display: flex;
				flex-wrap: wrap;
				margin-top: 1rem;

				>.list_child {
					width: 33%;
					display: flex;
					flex-direction: column;
					justify-items: center;
					align-items: center;
					margin-bottom: 1rem;

					>p {
						color: rgb(255, 255, 255);
						font-family: Noto Sans SC;
						font-size: .8125rem;
						font-weight: 500;
					}

					>span {
						color: rgb(255, 255, 255);
						font-family: Helvetica;
						font-size: 1rem;
						font-weight: 700;
					}
				}

			}

			>.detail_type {
				height: calc(100vh - 35.875rem);
				padding: 0 3.125rem 0 3.125rem;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				flex: 1;

				>.list_child {
					width: 7.5rem;
					height: 7.5rem;
					background: linear-gradient(188.06deg, rgba(65.49, 109.04, 128.64, 1.00) 3.551%, rgba(38, 68.32, 81.96, 1.00) 110.878%);
					box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
					border-radius: 4px;
					margin-bottom: 4%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					>.log {
						width: 2.25rem;
						height: 2.25rem;
						// background: rgb(196, 196, 196);
						margin-bottom: .5rem;
					}

					.bg1 {
						background: url('../../static/jilu.png') no-repeat;
						background-size: 100% 100%;
					}

					.bg2 {
						background: url('../../static/kaiguan.png') no-repeat;
						background-size: 100% 100%;
					}

					.bg3 {
						background: url('../../static/gongzuo.png') no-repeat;
						background-size: 100% 100%;
					}

					.bg4 {
						background: url('../../static/bagzu.png') no-repeat;
						background-size: 100% 100%;
					}

					>p {
						color: rgb(255, 255, 255);
						font-family: Noto Sans SC;
						font-size: .9375rem;
						font-weight: 500;
					}
				}
			}
		}

		.popup_title {
			width: 100%;
			height: 4.5rem;
			background: rgb(255, 255, 255);
			border-radius: 10px 10px 0px 0px;
			display: flex;
			align-items: center;
			color: rgb(16, 17, 22);
			font-family: Noto Sans SC;
			font-size: 1rem;
			font-weight: 700;

			>p {
				margin-left: 1.5rem;
				color: rgb(16, 17, 22);
				font-family: Noto Sans SC;
				font-size: 1rem;
				font-weight: 700;
			}

		}

		.popup_content {
			width: 100%;
			background: rgb(255, 255, 255);

			>ul {
				width: 100%;

				>li {
					width: 82%;
					height: 2.6875rem;
					display: flex;
					align-items: center;
					justify-content: space-between;

					>p {
						color: rgb(0, 0, 0);
						font-family: Noto Sans SC;
						font-size: .8125rem;
						font-weight: 400;
					}

					>.start {
						width: 1rem;
						height: 1rem;
						background: rgb(37, 121, 160);
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50%;
					}
				}
			}

			>.top {
				width: 100%;
				height: .875rem;
				background: rgb(249, 249, 249);
			}

			>.cancel {
				width: 100%;
				height: 3.3125rem;
				display: flex;
				align-items: center;
				justify-content: center;
				color: rgb(0, 0, 0);
				font-family: Noto Sans SC;
				font-size: .9375rem;
				font-weight: 500;
			}
		}
	}
</style>