优化小程序

uniapp/pages/register/confirm.vue

@@ -0,0 +1,174 @@
+<template>
+	<view class="rp-page">
+		<view class="rp-card">
+			<text class="rp-title">确认注册</text>
+			<text class="rp-desc">你正在为电脑端的账号注册完成身份确认。点击确认后，请回到电脑继续填写账号信息。</text>
+
+			<button class="rp-btn" :class="{ disabled: loading }" :disabled="loading" @tap="confirm('')">
+				{{ loading ? '确认中…' : '确认是我本人注册' }}
+			</button>
+
+			<!-- #ifdef MP-WEIXIN -->
+			<button class="rp-btn ghost" :disabled="loading" open-type="getPhoneNumber" @getphonenumber="onPhone">
+				验证手机号并确认（可选）
+			</button>
+			<!-- #endif -->
+
+			<text class="rp-status" :class="{ ok: success, err: !!errorMsg }">{{ statusText }}</text>
+
+			<view class="rp-back" @tap="backHome">
+				<text class="rp-link">返回首页</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+/**
+ * 小程序码扫码注册确认页：
+ * 电脑端注册页展示小程序码（scene=注册会话）→ 微信扫码进入本页 →
+ * uni.login 取 code 调 /auth/register/mini/confirm → 电脑端轮询到已确认后继续注册。
+ */
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { confirmMiniappRegister } from '@/api/auth.js'
+
+const scene = ref('')
+const loading = ref(false)
+const success = ref(false)
+const errorMsg = ref('')
+const statusText = ref('')
+
+onLoad((options = {}) => {
+	// scene 由小程序码携带，微信会自动做一次 URL 解码
+	scene.value = options.scene || ''
+	if (!scene.value) {
+		errorMsg.value = '缺少会话标识，请回到电脑端重新获取二维码'
+		statusText.value = errorMsg.value
+	}
+})
+
+function miniAppId() {
+	try {
+		const info = uni.getAccountInfoSync()
+		return (info && info.miniProgram && info.miniProgram.appId) || ''
+	} catch (e) {
+		return ''
+	}
+}
+
+function uniLoginCode() {
+	return new Promise((resolve, reject) => {
+		uni.login({
+			provider: 'weixin',
+			success: (res) => (res && res.code ? resolve(res.code) : reject(new Error('获取登录凭证失败'))),
+			fail: () => reject(new Error('获取登录凭证失败'))
+		})
+	})
+}
+
+async function confirm(phoneCode = '') {
+	if (loading.value) return
+	if (!scene.value) {
+		errorMsg.value = '缺少会话标识，请回到电脑端重新获取二维码'
+		statusText.value = errorMsg.value
+		return
+	}
+	loading.value = true
+	errorMsg.value = ''
+	statusText.value = '正在确认…'
+	try {
+		const code = await uniLoginCode()
+		await confirmMiniappRegister({ scene: scene.value, code, phoneCode, appid: miniAppId() })
+		success.value = true
+		statusText.value = '确认成功，请回到电脑继续完成注册'
+		uni.showToast({ title: '确认成功', icon: 'success' })
+	} catch (err) {
+		errorMsg.value = (err && err.message) || '确认失败，请返回电脑端重新获取二维码'
+		statusText.value = errorMsg.value
+	} finally {
+		loading.value = false
+	}
+}
+
+/** 手机号快速验证为可选项：未开通或用户拒绝时仍按 openid 完成确认 */
+function onPhone(e) {
+	const detail = (e && e.detail) || {}
+	const errMsg = detail.errMsg || ''
+	if (errMsg.indexOf('deny') !== -1) {
+		uni.showToast({ title: '已取消手机号授权', icon: 'none' })
+		return
+	}
+	const phoneCode = detail.code && errMsg.indexOf('fail') === -1 ? detail.code : ''
+	confirm(phoneCode)
+}
+
+function backHome() {
+	uni.reLaunch({ url: '/pages/index/index' })
+}
+</script>
+
+<style scoped>
+.rp-page {
+	min-height: 100vh;
+	padding: 48rpx 32rpx;
+	box-sizing: border-box;
+	background: #f6f8fb;
+}
+.rp-card {
+	background: #ffffff;
+	border-radius: 20rpx;
+	padding: 48rpx 36rpx;
+	box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.06);
+}
+.rp-title {
+	font-size: 40rpx;
+	font-weight: 600;
+	color: #1f2937;
+}
+.rp-desc {
+	display: block;
+	margin-top: 16rpx;
+	font-size: 26rpx;
+	line-height: 1.7;
+	color: #6b7280;
+}
+.rp-btn {
+	margin-top: 40rpx;
+	height: 88rpx;
+	line-height: 88rpx;
+	font-size: 30rpx;
+	color: #ffffff;
+	background: #2563eb;
+	border-radius: 12rpx;
+}
+.rp-btn.ghost {
+	margin-top: 20rpx;
+	color: #2563eb;
+	background: #ffffff;
+	border: 1rpx solid #2563eb;
+}
+.rp-btn.disabled {
+	opacity: 0.6;
+}
+.rp-status {
+	display: block;
+	margin-top: 28rpx;
+	font-size: 26rpx;
+	color: #6b7280;
+}
+.rp-status.ok {
+	color: #16a34a;
+}
+.rp-status.err {
+	color: #dc2626;
+}
+.rp-back {
+	margin-top: 36rpx;
+	text-align: center;
+}
+.rp-link {
+	font-size: 26rpx;
+	color: #2563eb;
+}
+</style>