yunzerwebsiteallinone/uniapp/pages/register/confirm.vue

<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>