dsn_android/pages/fetchPacket/index.vue

<template>
	<view class="fetchPacketIndex">
		<navigation-bar-view ref="nav" :maxTimer="60"></navigation-bar-view>
		<!-- <view class="label-box">请选择您的取出方式</view> -->
		<view class="content">
			<view class="scan-code-box">
				<image class="scan-code-bg" :src="require('../../static/images/icon-scan-code-bg.png')" mode="aspectFit"></image>
				<image class="scan-code" :src="codeUrl" mode="aspectFit"></image>
			</view>
			<view class="message">点开微信”扫一扫“</view>
			<view class="message">Scan QR Code via WeChat</view>
			<!-- 			<view class="item">
				<view class="label" style="margin-bottom: 2vw;">微信扫码</view>
				<view class="img">
					<image :src="codeUrl" mode="aspectFit"></image>
				</view>
				<view class="message">微信/支付宝扫码</view>
			</view>
			<view class="item">
				<view class="label">手机号验证</view>
				<view class="cell">
					<input class="input-box" placeholder="请输入存放手机号码后四位"  type="number" @input="changePhone" />
				</view>
				<view class="cell">
					<input class="input-box" placeholder="请输入取货码"  type="number" @input="changeCode" />
					<view class="code-btn" @click="getCode">确认</view>
				</view>
			</view> -->
		</view>

		<view class="take-out-the-process">
			<image class="icon" :src="require('../../static/images/icon-take-out.png')" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	import navigationBarView from '../../components/navigationBarView.vue';

	export default {
		components: {
			navigationBarView
		},
		data() {
			return {
				countDownStr: '获取验证码',
				body: {
					phone: '',
					rentSn: ''
				},
				codeUrl: ''
			}
		},

		onLoad() {
			this.getData();
		},
		onHide() {
			const $this = this;
			$this.$nextTick(function() {
				$this.$refs.nav.clearTimer();
			})
		},

		methods: {
			getData() {
				let sn = uni.getStorageSync('sn');
				this.codeUrl = `../../static/TakeStore/take_${sn}.png`
				console.log(this.codeUrl)
				this.$api.deviceInfo({
					deviceSn: sn
				}).then(res => {
					this.codeUrl = res.data.takeUrl
				})
			},

			changePhone(e) {
				this.body.phone = e.detail.value;
			},
			changeCode(e) {
				this.body.rentSn = e.detail.value;
			},

			getCode() {
				if (!this.body.phone) {
					uni.showToast({
						title: '请输入手机号后四位',
						icon: 'none'
					})
					return
				}
				if (!this.body.rentSn) {
					uni.showToast({
						title: '请输入取货码',
						icon: 'none'
					})
					return
				}
				// 977114
				let sn = uni.getStorageSync('sn');
				this.$api.offorderOfflineInfo({
					mobile: this.body.phone,
					rentSn: this.body.rentSn,
					deviceSn: sn
				}).then(res => {
					uni.redirectTo({
						url: '/pages/order/details?mobile=' + this.body.phone + '&rentSn=' + this.body.rentSn
					})
				})

			},
		}
	}
</script>

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

		.label-box {
			padding: 15.2vw 5vw 5.2vw;
			color: #222222;
			font-size: 4.2vw;
		}

		.content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: column;
			// background-color: red;
			margin-top: 29.2vw;
			// padding: 0 5vw;

			.scan-code-box {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 39.7vw;
				height: 39.6vw;
				margin-bottom: 8.3vw;

				.scan-code-bg {
					position: absolute;
					top: 0;
					left: 0;
					width: 39.7vw;
					height: 39.6vw;
				}

				.scan-code {
					position: relative;
					width: 29.2vw;
					height: 29.2vw;
				}
			}

			.message {
				text-align: center;
				font-size: 4.2vw;
				line-height: 5.8vw;
				color: #253B56;
			}

			// .item {
			// 	display: flex;
			// 	align-items: center;
			// 	flex-direction: column;
			// 	width: 42.5vw;
			// 	height: 60.4vw;
			// 	border-radius: 1.7vw;
			// 	background-color: #FFFFFF;

			// 	.label {
			// 		margin: 11.3vw 0 5vw;
			// 		color: #222222;
			// 		font-size: 4.2vw;
			// 		line-height: 4.2vw;
			// 	}

			// 	.message {
			// 		color: #666;
			// 		font-size: 3.2vw;
			// 		line-height: 3.2vw;
			// 	}

			// 	.img {
			// 		width: 30vw;
			// 		height: 30vw;

			// 		image {
			// 			width: 100%;
			// 			height: 100%;
			// 		}
			// 	}

			// 	.cell {
			// 		display: flex;
			// 		align-items: center;
			// 		width: 35.2vw;
			// 		margin-bottom: 11rpx;

			// 		.input-box {
			// 			flex: 1;
			// 			height: 7.5vw;
			// 			line-height: 7.5vw;
			// 			border: 0.2vw solid #DCDCDC;
			// 			border-radius: .8vw;
			// 			padding: 0 1vw;
			// 			background-color: #F4F4F4;
			// 			font-size: 2.5vw;
			// 		}

			// 		.code-btn {
			// 			display: flex;
			// 			align-items: center;
			// 			justify-content: center;
			// 			width: 15vw;
			// 			height: 7.5vw;
			// 			border-radius: .8vw;
			// 			background-color: #FDD002;
			// 			margin-left: 1.9vw;
			// 			font-size: 2.5vw;
			// 		}
			// 	}
			// }
		}

		.take-out-the-process {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;

			.icon {
				width: 100vw;
				height: 43.75vw;
				vertical-align: top;
			}
		}
	}
</style>