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:
lzh
2026-03-17 17:58:37 +08:00
parent b7a9f6ed62
commit 231cb0765d

View File

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