dsn_android/pages/index/index.vue

<template>
	<view class="index">
		<view class="header" @click="openInfoPopup">
			<view class="icon"></view>

			<view class="info">
				<view class="title">
					<text>{{body.stationName}}</text>
					<text class="right">{{date}}</text>
				</view>
				<view class="number">
					<text>{{body.deviceSn}}</text>
				</view>
			</view>

		</view>
		<view class="header-banner">
			<swiper style="height: 56.25vw;" autoplay>
				<block v-for="(item, i) in headerBanner" :key="i">
					<swiper-item>
						<view class="banner-img" :style="getHeaderBannreStyle(item.image)"></view>
						<!-- <image class="" :src="item.image" mode="aspectFill"></image> -->
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- 		<view class="center-banner">
			<swiper style="height: 40vw;" autoplay>
				<block v-for="(item, i) in centerBanner" :key="i">
					<swiper-item>
						<view class="banner-img" :style="getHeaderBannreStyle(item.image)"></view>
					</swiper-item>
				</block>
			</swiper>
		</view> -->

		<view class="btn-box">
	<!-- 		<view class="btn" v-if="body.scanImage">
				<image class="bg" :src="body.scanImage"></image>
			</view> -->
			<view class="btn" @click="bagStorage">
				<image class="bg" :src="require('../../static/images/icon-storage-bg.png')"></image>
				<!-- 			<image class="icon" :src="require('../../static/images/icon-storage.png')"></image>
				<view class="label">存物</view> -->
			</view>
		<!-- 	<view class="btn" v-if="body.takeImage">
				<image class="bg" :src="body.takeImage"></image>
			</view> -->
			<view class="btn" @click="fetchPacket">
				<image class="bg" :src="require('../../static/images/icon-fetch-bg.png')"></image>
				<!-- 		<image class="icon" :src="require('../../static/images/icon-fetch.png')"></image>
				<view class="label">取物</view> -->
			</view>
		</view>

		<image class="terms-icon" :src="require('../../static/images/icon-terms.png')" mode="aspectFill"></image>
		<!-- <view class="welcome">欢迎使用木桩储物柜</view> -->

		<uni-popup ref="statusPopup" type="center">
			<!-- :class="reportStatus.status == 1 ? 'success' : 'fail'" -->
			<view class="status-box">
				<!-- <image class="delete-icon" src="../../static/images/icon-delete.png" @click="closeStatusPopup"></image> -->
				<image class="icon" :src="require('../../static/images/icon-success.png')" v-if="reportStatus.status == 1"></image>
				<image class="icon" :src="require('../../static/images/icon-fail.png')" v-else></image>
				<view class="label">
					<text>{{reportStatus.msg}}</text>
					<!-- 		<text v-if="reportStatus.status == 1">开箱成功</text>
					<text v-if="reportStatus.status == 2">未找到该订单</text>
					<text v-if="reportStatus.status == 4">开箱失败</text> -->
				</view>
				<view class="clear-btn" @click="closeStatusPopup">知道了</view>
			</view>
		</uni-popup>

		<uni-popup ref="infoPopup" type="center">
			<view class="info-body">
				<image class="delete-icon-info" :src="require('../../static/images/icon-delete-info.png')" @click="deleteInfoPopup"></image>
				<view class="top">
					<view class="cell">
						<view class="label-box">
							<image class="icon" :src="require('../../static/images/icon-address.png')"></image>
							<text>柜机地址</text>
						</view>
						<view class="address">{{body.stationAddress}}</view>
					</view>
					<view class="line"></view>
					<view class="cell">
						<view class="label-box" @touchstart="startAdminLogin" @touchend="endAdminLogin">
							<image class="icon" :src="require('../../static/images/icon-sn.png')"></image>
							<text style="margin-right: 2.3vw;">柜机编号</text>
							<text style="color: #FFFFFF;">{{body.deviceSn}}</text>
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="label-box">
						<view class="label">扫描下方二维码</view>
						<view class="message">获取木桩柜详细信息</view>
					</view>
					<view class="qrcode">
						<image :src="body.url"></image>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="bindPopup" type="center">
			<view class="bind-body">
				<view class="title">绑定设备号</view>
				<view class="input-box">
					<!--  -->
					<input placeholder="请输入要绑定的设备号" placeholder-style="color: #B7B7B7" @input="changeBind" />
				</view>
				<view class="bind-btn" @click="bindDevice">绑定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'

	export default {
		data() {
			return {
				headerBanner: [],
				centerBanner: [],
				date: '',
				reportStatus: {},
				body: {},
				msg: '',
				timer: '',
				timer1: '',
				deviceSn: '',
				isNoBind: true
			}
		},
		onLoad() {
			const $this = this;
			setInterval(function() {
				let date = new Date();
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				let d = date.getDate();
				let h = date.getHours();
				let mm = date.getMinutes();
				$this.date =
					`${y}-${m > 9 ? m : '0' + m}-${d > 9 ? d : '0' + d} ${h > 9 ? h : '0' + h}:${mm > 9 ? mm : '0' + mm}`
			}, 1000)

			this.getHeaderBanner();
			this.getCenterBanner();
			// uni.removeStorageSync('sn');
			// uni.setStorageSync('sn', '862607052911665');
			let sn = uni.getStorageSync('sn');
			

			if (!sn) {
				plus.device.getInfo({
					success: function(e) {
						console.log('getDeviceInfo success: ', e.uuid);
						$this.$api.deviceGetDeviceSn({
							uuid: e.uuid
						}).then(res => {
							console.log('AAAA', res)
							$this.uuid = e.uuid;
							if (res.deviceSn) {
								uni.setStorageSync('sn', res.deviceSn);
								$this.getData()
							} else {
								$this.isNoBind = true
							}

							// $this.getStatus()
						}, err => {
							console.log("SASAERR", err)
						})
					},
					fail: function(e) {
						console.log('getDeviceInfo failed: ', e);
					}
				});
			} else {
				console.log("SSAASS")
				this.getData()
			}
		},
		onShow() {
			console.log("SA")

			clearInterval(this.timer);
			uni.setStorageSync('sn', '862607052911665')
			if (uni.getStorageSync('sn')) {
				// this.getStatus()
			}
			// const $this = this;
			// $this.$nextTick(function() {
			// 	$this.$refs.statusPopup.open()
			// 	setInterval(function() {
			// 		$this.$refs.statusPopup.close()

			// 	}, 10000)
			// })
		},
		onHide() {
			clearInterval(this.timer);
		},
		methods: {
			startAdminLogin() {
				this.adminTime = new Date().getTime();
			},
			endAdminLogin() {
				let lastTime = new Date().getTime();
				if (this.adminTime && (lastTime - this.adminTime > 4000)) {
					this.adminLogin();
					this.adminTime = 0;
				}
			},
			getHeaderBannreStyle(e) {
				return {
					backgroundImage: `url(${e})`
				}
			},
			getData() {
				let sn = uni.getStorageSync('sn');
				this.$api.deviceInfo({
					deviceSn: sn
				}).then(res => {
					this.body = res.data;
				})
			},

			closeStatusPopup() {
				const $this = this;
				clearInterval(this.timer1)
				$this.$nextTick(function() {
					$this.$refs.statusPopup.close()
				})
			},

			getStatus() {
				const $this = this;
				this.timer = setInterval(function() {
					let sn = uni.getStorageSync('sn');
					$this.$api.deviceReportStatus({
						deviceSn: sn
					}).then(res => {
						console.log(res);
						if (res.report) {
							console.log("@@@@", res);
							$this.reportStatus = res.report;
							clearTimeout(this.timer1);
							if (res.report.status == 3) {
								// uni.setStorageSync('timeoutOrder', res.order)
								uni.navigateTo({
									url: '/pages/order/details?orderSn=' + res.report.orderSn
								})
							} else {
								$this.$nextTick(function() {
									console.log("SSSS1")
									clearInterval(this.timer1)
									$this.$refs.statusPopup.close()
									$this.$refs.statusPopup.open()
									$this.hideStatus();
								})
							}
						}
					})
				}, 3000)
			},


			hideStatus() {
				const $this = this;
				this.timer1 = setTimeout(function() {
					clearInterval(this.timer1)
					$this.$nextTick(function() {
						$this.$refs.statusPopup.close()
					})
				}, 10000)
			},

			getHeaderBanner() {
				this.$api.bannerList({
					type: 2
				}).then(res => {
					console.log(res);
					this.headerBanner = res.data;
				})
			},
			getCenterBanner() {
				this.$api.bannerList({
					type: 3
				}).then(res => {
					console.log(res);
					this.centerBanner = res.data;
				})
			},

			bagStorage() {
				uni.navigateTo({
					url: '/pages/bagStorage/login'
				})
			},

			fetchPacket() {
				uni.navigateTo({
					url: '/pages/fetchPacket/index'
				})
			},

			openInfoPopup() {
				let sn = uni.getStorageSync('sn');

				if (!this.isNoBind) {
					this.$refs.infoPopup.open();
				} else {
					this.$refs.bindPopup.open();
				}
			},

			deleteInfoPopup() {
				const $this = this;
				$this.$nextTick(function() {
					$this.$refs.infoPopup.close()
				})
			},

			// 管理员登录
			adminLogin() {
				console.log("管理员登录")
				clearInterval(this.timer);
				uni.navigateTo({
					url: '/pages/admin/login'
				})
			},

			// 绑定设备号
			changeBind(e) {
				this.deviceSn = e.detail.value;
			},

			// 绑定设备号
			bindDevice() {
				uni.showLoading({
					title: '绑定中...'
				})
				this.$api.deviceBindDevice({
					uuid: this.uuid,
					deviceSn: this.deviceSn
				}).then(res => {
					uni.setStorageSync('sn', this.deviceSn);
					this.getData()
					this.$refs.bindPopup.close();
					uni.hideLoading()
				}, err => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	.index {
		min-height: 100vh;
		background-color: #FFF;

		.header {
			display: flex;
			align-items: center;
			height: 10vw;
			padding: 0 4.2vw 0 2.1vw;
			background-color: #FFFFFF;

			.icon {
				width: 6.3vw;
				height: 6.3vw;
				border-radius: 50%;
				background-color: #FEE306;
				margin-right: 1.7vw;
			}

			.info {
				flex: 1;

				.title {
					display: flex;
					justify-content: space-between;
					font-size: 2.9vw;
					line-height: 2.9vw;
				}

				.number {
					display: flex;
					justify-content: space-between;
					margin-top: 1.5vw;
					font-size: 1.7vw;
					line-height: 1.7vw;
				}
			}
		}

		.header-banner {
			width: 100vw;
			height: 56.25vw;

			.banner-img {
				width: 100vw;
				height: 56.25vw;
				vertical-align: top;
				background-repeat: no-repeat;
				background-size: cover;
			}
		}

		.center-banner {
			// width: 100vw;
			height: 35vw;
			margin: 2.5vw 2.1vw;

			.banner-img {
				width: calc(100vw - 4.2vw);
				height: 35vw;
				border-radius: .8vw;
				vertical-align: top;
				background-repeat: no-repeat;
				background-size: cover;
			}
		}

		.btn-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 2.5vw 2.5vw;

			.btn {
				position: relative;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				width: 46.25vw;
				height: 70.4vw;

				.bg {
					position: absolute;
					top: 0;
					width: 46.25vw;
					height: 70.4vw;
				}

				.icon {
					position: relative;
					width: 19.2vw;
					height: 17.3vw;
					margin-bottom: 4.2vw;
				}

				.label {
					position: relative;
					color: #182B10;
					font-size: 6.3vw;
				}
			}
		}

		.terms-icon {
			width: 100vw;
			height: 38.96vw;
			vertical-align: top;
		}

		.status-box {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			width: 77.6vw;
			min-height: 51.2vw;
			background-color: #FFFFFF;
			border-radius: 5vw;
			font-size: 4.2vw;
			padding: 10vw 0;

			.icon {
				width: 20vw;
				height: 20vw;
				margin-bottom: 6.8vw;
			}

			.clear-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 31.1vw;
				height: 9.2vw;
				margin-top: 10.8vw;
				color: #FFFFFF;
				border-radius: 9.2vw;
				font-size: 3.9vw;
				background: linear-gradient(to bottom, #FEE704, #FDD001);
			}

			.label {
				padding: 0 10vw;
				text-align: center;
			}
		}

		.info-body {
			position: relative;
			border-radius: 8rpx;
			background-color: #FFFFFF;
			width: 72.9vw;

			.delete-icon-info {
				position: absolute;
				width: 7vw;
				height: 12.5vw;
				top: -12.5vw;
				right: 0;
			}

			.top {
				border-radius: 8rpx 8rpx 0 0;
				padding: 7.3vw 5.2vw 9.4vw;
				background: linear-gradient(to bottom, #FEE704, #FDD001);

				.cell {
					// min-height: 18.8vw;

					.label-box {
						display: flex;
						align-items: center;
						font-weight: 500;
						color: #B86000;
						font-size: 3.8vw;
						line-height: 3.8vw;

						.icon {
							width: 4.2vw;
							height: 4.2vw;
							margin-right: 1.9vw;
						}
					}

					.address {
						color: #B86000;
						font-size: 2.9vw;
						margin-top: 1.9vw;
						margin-left: 6.1vw;
					}
				}

				.line {
					margin: 5.8vw 0;
					height: 2rpx;
					background-color: #FFFFFF;
					opacity: .4;
				}
			}

			.bottom {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				height: 58.3vw;

				.label-box {
					text-align: center;
					padding: 1.7vw 1.7vw .8vw;
					border-radius: 4rpx;
					background-color: #F4F4F4;

					.label {
						font-size: 3.8vw;
						line-height: 3.8vw;
						margin-bottom: 1vw;
					}

					.message {
						color: #454545;
						font-size: 2.5vw;
						line-height: 2.5vw;
					}
				}

				.qrcode {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 30vw;
					height: 30vw;
					border: 4rpx solid #999999;
					border-radius: 8rpx;
					margin-top: 1.5vw;

					image {
						width: 26.7vw;
						height: 26.7vw;
					}
				}
			}
		}

		.welcome {
			margin-top: 1.3vw;
			width: 100vw;
			text-align: center;
			font-size: 3.3vw;
			color: #444;
		}

		.bind-body {
			display: flex;
			align-items: center;
			flex-direction: column;
			width: 70vw;
			height: 60vw;
			background: #FFFFFF;
			border-radius: 3vw;

			.title {
				margin-top: 6.3vw;
				text-align: center;
				border-radius: 4rpx;
				background-color: #F4F4F4;
			}

			.input-box {
				padding: 4.3vw 0;
				margin: 4.3vw 4.3vw 0;
				border-bottom: 2rpx solid #999999;

				input {
					font-size: 4.3vw;
				}
			}

			.bind-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50vw;
				height: 11.5vw;
				margin: 8.1vw 0;
				border-radius: 11.5vw;
				font-weight: 500;
				font-size: 4.3vw;
				background: linear-gradient(to right, #FEE704, #FDD001);
			}
		}


	}
</style>