h5-meike/pages/index/authorization.vue

<template>
	<view class="page mm-page">
		<gmy-back-touch></gmy-back-touch>
		<!-- xuchao: 品牌区 —— Logo + 渐变标题 -->
		<view class="brand mm-fade-up">
			<image class="brand__logo" src="https://aliyunoss.hn12301.net/sd/ali_logo.png"></image>
			<view class="brand__name mm-display mm-grad-text">质惠游</view>
		</view>

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

		<!-- xuchao: 登录表单 -->
		<view class="form mm-fade-up" :style="{marginTop: devMode ? '40rpx' : '96rpx'}">
			<view class="field">
				<u-input v-model="value" type="number" :border="false" :custom-style='customStyle'
					placeholder='请输入手机号' placeholder-class="mm-ph" />
			</view>
			<!-- xuchao: 开发模式免验证码 -->
			<view class="field field--code" v-if="!devMode">
				<view class="field__input">
					<u-input v-model="value1" type="number" :border="false" :custom-style='customStyle'
						placeholder='请输入验证码' placeholder-class="mm-ph" />
				</view>
				<text :class="['field__code', isFlag ? '' : 'field__code--off']" @tap="getCode">{{tips}}</text>
			</view>

			<view class="mm-btn login__btn" @click="doLogin">立即登录</view>

			<view class="agree">
				<u-checkbox-group>
					<u-checkbox v-model="checked" shape="circle" active-color="#0052FF">我已阅读并同意<text
							class="agree__link" @click="readXy()">用户服务协议</text></u-checkbox>
				</u-checkbox-group>
			</view>
		</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'
	import gmyBackTouch from "@/components/gmy-back-touch/gmy-back-touch.vue"

	export default {
		components: {
			'gmy-back-touch': gmyBackTouch
		},
		data() {
			return {
				devMode: config.devMode,
				redirect: '',
				tips: '发送验证码',
				seconds: 60,
				checked: false,
				value: '',
				value1: '',
				isFlag: true,
				// xuchao: 输入框背景由外层 .field 提供，组件内部保持透明
				customStyle: {
					background: 'transparent',
				}
			}
		},
		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 lang="less" scoped>
	.page {
		padding: 0 70rpx;
	}

	/* ---------- 品牌区 ---------- */
	.brand {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 140rpx;
	}

	.brand__logo {
		width: 164rpx;
		height: 140rpx;
	}

	.brand__name {
		margin-top: 20rpx;
		font-size: 52rpx;
		letter-spacing: 0.12em;
	}

	/* ---------- 开发模式提示条 ---------- */
	.tips {
		margin-top: 48rpx;
		padding: 16rpx 24rpx;
		background: rgba(0, 82, 255, 0.05);
		border: 2rpx solid rgba(0, 82, 255, 0.15);
		color: var(--mm-accent);
		font-size: 24rpx;
		border-radius: 16rpx;
		text-align: center;
	}

	/* ---------- 表单 ---------- */
	.field {
		display: flex;
		align-items: center;
		height: 96rpx;
		background: var(--mm-muted);
		border-radius: 20rpx;
		padding: 0 40rpx;
		transition: box-shadow 0.2s ease;
	}

	.field--code {
		margin-top: 32rpx;
	}

	.field__input {
		flex: 1;
		min-width: 0;
	}

	.field__code {
		flex: none;
		margin-left: 30rpx;
		font-size: 26rpx;
		color: var(--mm-accent);
	}

	.field__code--off {
		color: var(--mm-muted-fg);
	}

	.login__btn {
		margin-top: 80rpx;
	}

	.agree {
		margin-top: 32rpx;
		color: var(--mm-muted-fg);
		font-size: 24rpx;
	}

	.agree__link {
		color: var(--mm-accent);
	}
</style>