refactor(auth): optimize WeChat login flow and error handling
Unify two-step login UI with consistent button styles, add proper error toasts for non-binding failures, and simplify phone auth prompt text. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,31 +1,27 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-if="!needPhoneAuth" class="auth-btn-wrapper" style="margin-top: 40rpx">
|
||||
<view class="wechat-btn" @click="handleWechatLogin">
|
||||
<view class="auth-btn-wrapper" style="margin-top: 40rpx">
|
||||
<!-- 已绑定:静默登录 -->
|
||||
<view v-if="!needPhoneAuth" class="wechat-btn" @click="handleWechatLogin">
|
||||
<wd-icon name="chat" size="22px" color="#07c160" />
|
||||
<text class="wechat-btn__text">微信一键登录</text>
|
||||
</view>
|
||||
|
||||
<!-- 未绑定:授权手机号登录 -->
|
||||
<button
|
||||
v-else
|
||||
class="wechat-btn wechat-btn--native"
|
||||
open-type="getPhoneNumber"
|
||||
:loading="loading"
|
||||
@getphonenumber="handleGetPhoneNumber"
|
||||
>
|
||||
<wd-icon name="chat" size="22px" color="#07c160" />
|
||||
<text class="wechat-btn__text">授权手机号登录</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view v-else class="wx-phone-auth">
|
||||
<view class="wx-phone-auth__tip">
|
||||
<text>检测到当前账号未绑定手机号,请先完成微信手机号授权</text>
|
||||
</view>
|
||||
<view class="auth-btn-wrapper" style="margin-top: 20rpx">
|
||||
<button
|
||||
class="wx-phone-btn"
|
||||
open-type="getPhoneNumber"
|
||||
:loading="loading"
|
||||
@getphonenumber="handleGetPhoneNumber"
|
||||
>
|
||||
微信手机号一键登录
|
||||
</button>
|
||||
</view>
|
||||
<view class="auth-btn-wrapper" style="margin-top: 16rpx">
|
||||
<wd-button block type="text" @click="needPhoneAuth = false">
|
||||
返回重试
|
||||
</wd-button>
|
||||
</view>
|
||||
<view v-if="needPhoneAuth" class="auth-tip">
|
||||
<text>当前微信未关联手机号,请授权后自动登录</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -51,6 +47,7 @@ const toast = useToast()
|
||||
const loading = ref(false)
|
||||
const needPhoneAuth = ref(false)
|
||||
|
||||
/** 第一步:尝试静默登录(已绑定用户直接成功) */
|
||||
async function handleWechatLogin() {
|
||||
if (!props.agreed) {
|
||||
toast.warning('请先阅读并同意用户协议和隐私政策')
|
||||
@@ -69,13 +66,17 @@ async function handleWechatLogin() {
|
||||
redirectAfterLogin(props.redirectUrl)
|
||||
} catch (error: any) {
|
||||
if (error?.code === 1002000005) {
|
||||
// 未绑定手机号 → 自动切换到手机号授权按钮
|
||||
needPhoneAuth.value = true
|
||||
} else {
|
||||
toast.error('登录失败,请重试')
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 第二步:手机号授权后完成登录 */
|
||||
async function handleGetPhoneNumber(e: any) {
|
||||
if (e.detail.errMsg !== 'getPhoneNumber:ok') {
|
||||
toast.warning('未获取到手机号授权,无法继续登录')
|
||||
@@ -90,6 +91,8 @@ async function handleGetPhoneNumber(e: any) {
|
||||
const tokenStore = useTokenStore()
|
||||
await tokenStore.weixinMiniAppLogin({ phoneCode, loginCode, state })
|
||||
redirectAfterLogin(props.redirectUrl)
|
||||
} catch {
|
||||
toast.error('登录失败,请重试')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
@@ -110,6 +113,18 @@ async function handleGetPhoneNumber(e: any) {
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
|
||||
// 重置 button 原生样式,保持与 view 版本一致
|
||||
&--native {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
line-height: 100rpx;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 30rpx;
|
||||
color: #07c160;
|
||||
@@ -117,24 +132,10 @@ async function handleGetPhoneNumber(e: any) {
|
||||
}
|
||||
}
|
||||
|
||||
.wx-phone-auth__tip {
|
||||
.auth-tip {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
font-size: 24rpx;
|
||||
color: #9c9b99;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.wx-phone-btn {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
background: linear-gradient(to right, #07c160, #06ad56);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 24rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4rpx;
|
||||
box-shadow: 0 12rpx 40rpx rgba(7, 193, 96, 0.25);
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user