h5-meike/pages/index/authorization.vue

<template>
	<view class="auth_rq">
		<image class="auth_rq_image" src="https://aliyunoss.hn12301.net/sd/ali_logo.png"></image>
		<view class="auth_rq_view">质惠游</view>

		<!-- xuchao: 开发模式提示（正式环境不显示） -->
		<view class="auth_rq_tips" v-if="devMode">开发模式：输入测试手机号直接登录</view>

		<view class="auth_rq_input" :style="{marginTop: devMode ? '40rpx' : '146rpx'}">
			<u-input v-model="value" type="number" :border="false" :custom-style='customStyle' placeholder='请输入手机号' />
		</view>
		<!-- xuchao: 开发模式免验证码 -->
		<view class="auth_rq_input" v-if="!devMode" style="margin-top: 50rpx;">
			<u-input v-model="value1" type="number" :border="false" :custom-style='customStyle' placeholder='请输入验证码' />
			<text style="margin-left: 30rpx;" :style="{color:isFlag?'#488CFE':'#666'}" @tap="getCode">{{tips}}</text>
		</view>

		<button class="auth_rq_button1" :style="{marginTop: devMode ? '80rpx' : '80rpx'}" @click="doLogin">立即登录</button>

		<view style="margin-top: 32rpx;margin-left: 70rpx;">
			<u-checkbox-group>
				<u-checkbox v-model="checked" shape="circle" style="color: #929292;">我已阅读并同意<text
						style="color: #488CFE;" @click="readXy()">用户服务协议</text></u-checkbox>
			</u-checkbox-group>
		</view>

		<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
			@change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	// xuchao: 登录页 —— 微信版
	// 开发模式：输入测试手机号直接登录（假登录）
	// 正式流程：微信网页授权（code 换用户信息）+ 短信验证码绑定手机号
	import config from '@/common/config.js'
	import auth from '@/common/auth.js'

	export default {
		data() {
			return {
				devMode: config.devMode,
				redirect: '',
				tips: '发送验证码',
				seconds: 60,
				checked: false,
				value: '',
				value1: '',
				isFlag: true,
				customStyle: {
					background: '#f8f8f8',
				}
			}
		},
		onLoad(options) {
			// xuchao: 记录登录前的页面，登录成功后回跳
			if (options.redirect) {
				this.redirect = options.redirect
			}
			// xuchao: 正式流程 —— 公众号网页授权重定向回来时 URL 带 code，用它换用户信息
			if (options.code && !config.devMode) {
				auth.loginByWechat(options.code).then(res => {
					// 后端已绑定手机的用户直接登录成功
					if (res && res.mobile) {
						uni.setStorageSync('openId', res.openId)
						uni.setStorageSync('phone', res.mobile)
						this.finishLogin()
					}
					// 未绑定手机的用户停留在本页，走短信验证码绑定
				}).catch(() => {})
			}
		},
		methods: {
			// xuchao: 登录入口
			doLogin() {
				if (!this.checked) {
					uni.showToast({ icon: 'none', title: '请先阅读并同意用户服务协议' })
					return
				}
				if (!/^1\d{10}$/.test(this.value)) {
					uni.showToast({ icon: 'none', title: '请输入正确的手机号' })
					return
				}
				if (config.devMode) {
					// 开发模式：只允许测试手机号登录
					if (config.testPhones.indexOf(this.value) === -1) {
						uni.showToast({ icon: 'none', title: '开发模式仅支持测试手机号' })
						return
					}
					auth.loginByMock(this.value)
					this.finishLogin()
					return
				}
				// 正式流程：短信验证码校验 + 绑定手机号
				if (!this.value1) {
					uni.showToast({ icon: 'none', title: '请输入验证码' })
					return
				}
				auth.bindPhoneBySms(this.value, this.value1).then(() => {
					this.finishLogin()
				}).catch(() => {})
			},
			// xuchao: 登录成功后回跳
			finishLogin() {
				uni.showToast({ icon: 'success', title: '登录成功' })
				setTimeout(() => {
					if (this.redirect) {
						uni.reLaunch({ url: this.redirect })
					} else if (getCurrentPages().length > 1) {
						uni.navigateBack()
					} else {
						uni.reLaunch({ url: '/pages/ticket/scenic' })
					}
				}, 500)
			},
			end() {
				this.isFlag = true
			},
			start() {
				this.isFlag = false
			},
			readXy() {
				uni.downloadFile({
					url: "https://aliyunoss.hn12301.net/sd/zfzxy.docx",
					success: function(res) {
						uni.openDocument({
							filePath: res.tempFilePath,
							showMenu: true
						});
					}
				});
			},
			codeChange(text) {
				this.tips = text;
			},
			// xuchao: 发送验证码 —— 开发模式仅走倒计时，正式流程需后端短信接口
			getCode() {
				if (!/^1\d{10}$/.test(this.value)) {
					uni.showToast({ icon: 'none', title: '请输入正确的手机号' })
					return
				}
				if (!this.$refs.uCode.canGetCode) {
					this.$u.toast('倒计时结束后再发送');
					return
				}
				if (config.devMode) {
					this.$u.toast('验证码已发送');
					this.$refs.uCode.start();
					return
				}
				// TODO 后端就绪后替换为真实发送短信验证码接口
				uni.showLoading({ title: '正在获取验证码' })
				setTimeout(() => {
					uni.hideLoading();
					this.$u.toast('短信接口未接入');
				}, 1000);
			}
		}
	}
</script>
<style>
	page {
		background: #ffffff;
	}
</style>
<style lang="less" scoped>
	.auth_rq {
		.auth_rq_input {
			display: flex;
			width: 610rpx;
			height: 98rpx;
			align-items: center;
			padding-left: 40rpx;
			margin-left: 70rpx;
			background-color: #F8F8F8;
			border-radius: 8px;
			padding-right: 40rpx;
		}

		.auth_rq_image {
			width: 164rpx;
			height: 140rpx;
			margin-top: 182rpx;
			margin-left: 294rpx;
		}

		.auth_rq_view {
			width: 750rpx;
			text-align: center;
			color: #0DD381;
			font-size: 36rpx;
			margin-top: 18rpx;
		}

		// xuchao: 开发模式提示条
		.auth_rq_tips {
			width: 610rpx;
			margin: 40rpx 0 0 70rpx;
			padding: 16rpx 24rpx;
			box-sizing: border-box;
			background-color: #FDF6EC;
			color: #E6A23C;
			font-size: 24rpx;
			border-radius: 8px;
		}

		.auth_rq_button1 {
			width: 610rpx;
			margin-left: 70rpx;
			margin-top: 80rpx;
			height: 98rpx;
			border-radius: 49rpx;
			background-color: #488CFE;
			color: #fff;
		}
	}
</style>