dsn_android/pages/bagStorage/login.vue

<template>
	<view class="bagStorageLogin">
		<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="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="请输入验证码" maxlength="4" type="number" @input="changeCode" />
					<view class="code-btn" @click="getCode">{{countDownStr}}</view>
				</view>
			</view> -->
		</view>

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

<script>
	import navigationBarView from '../../components/navigationBarView.vue';
	import uQRCode from '../../js_sdk/Sansnn-uQRCode/uqrcode.js';

	export default {
		components: {
			navigationBarView
		},
		data() {
			return {
				countDownStr: '获取验证码',
				body: {
					phone: ''
				},
				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/store_${sn}.png`
				this.$api.deviceInfo({
					deviceSn: sn
				}).then(res => {
					this.codeUrl = res.data.url
				})
			},

			changePhone(e) {
				this.body.phone = e.detail.value;
			},
			changeCode(e) {
				if (e.detail.value.length == 4) {
					this.$api.commonSmsValidate({
						phone: this.body.phone,
						code: e.detail.value
					}).then(res => {
						uni.redirectTo({
							url: '/pages/bagStorage/orders?phone=' + this.body.phone
						})
					})
				}
			},

			getCode() {
				if (!this.body.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (this.countDownStr != '获取验证码') {
					return;
				}
				this.$api.commonSmsSend({
					phone: this.body.phone
				}).then(res => {
					uni.showToast({
						title: '验证码已发送'
					})
				})
				this.countDown()
			},

			countDown() {
				const $this = this;
				this.$tools.countDownForSecond(60, (timer, elemnet) => {
					if (timer == 0) {
						$this.countDownStr = '获取验证码'
					}
					$this.countDownStr = timer + 's'
				})
			}
		}
	}
</script>

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

		.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 {
				// margin-top: 8.3vw;
				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>