From 231cb0765d2977548df3d36723d1093d9a8c1f68 Mon Sep 17 00:00:00 2001
From: lzh <sickone075@gmail.com>
Date: Tue, 17 Mar 2026 17:58:37 +0800
Subject: [PATCH] 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>
---
 .../auth/components/wechat-login-panel.vue    | 77 ++++++++++---------
 1 file changed, 39 insertions(+), 38 deletions(-)

diff --git a/src/pages-core/auth/components/wechat-login-panel.vue b/src/pages-core/auth/components/wechat-login-panel.vue
index 7b380e2..37b9f2c 100644
--- a/src/pages-core/auth/components/wechat-login-panel.vue
+++ b/src/pages-core/auth/components/wechat-login-panel.vue
@@ -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>