feat: support mini program phone authorization binding

miniprogram/pages/web-view/index.js

@@ -155,6 +155,48 @@ function requestMiniProgramLogin(code) {
   });
 }
 
+function requestMiniProgramBindPhone(authToken, wechatPhoneCode) {
+  return new Promise((resolve, reject) => {
+    const apiBaseUrl = trimTrailingSlash(API_BASE_URL);
+    if (!isConfiguredApiBaseUrl(apiBaseUrl)) {
+      reject(new Error('请先配置 API_BASE_URL'));
+      return;
+    }
+
+    wx.request({
+      url: `${apiBaseUrl}/api/auth/wechat/bind-phone`,
+      method: 'POST',
+      data: { wechatPhoneCode },
+      header: {
+        authorization: `Bearer ${authToken}`,
+        'content-type': 'application/json',
+        'x-client-type': MINI_PROGRAM_CLIENT_TYPE,
+        'x-client-runtime': MINI_PROGRAM_CLIENT_RUNTIME,
+        'x-client-platform': resolveClientPlatform(),
+        'x-client-instance-id': getClientInstanceId(),
+        'x-mini-program-app-id': MINI_PROGRAM_APP_ID,
+        'x-mini-program-env': MINI_PROGRAM_ENV,
+      },
+      success(response) {
+        if (response.statusCode >= 200 && response.statusCode < 300) {
+          resolve(response.data);
+          return;
+        }
+        const message =
+          response.data &&
+          response.data.error &&
+          response.data.error.message
+            ? response.data.error.message
+            : `绑定手机号失败：${response.statusCode}`;
+        reject(new Error(message));
+      },
+      fail(error) {
+        reject(new Error(error.errMsg || '绑定手机号请求失败'));
+      },
+    });
+  });
+}
+
 async function resolveAuthResult() {
   const code = await wxLogin();
   const response = await requestMiniProgramLogin(code);
@@ -169,8 +211,11 @@ async function resolveAuthResult() {
 
 Page({
   data: {
+    authResult: null,
+    bindingPhone: false,
     errorMessage: '',
     loading: true,
+    phoneBindingRequired: false,
     webViewUrl: '',
   },
 
@@ -196,27 +241,94 @@ Page({
 
     try {
       const authResult = await resolveAuthResult();
+      if (authResult.bindingStatus === 'pending_bind_phone') {
+        this.setData({
+          authResult,
+          errorMessage: '',
+          loading: false,
+          phoneBindingRequired: true,
+          webViewUrl: '',
+        });
+        return;
+      }
+
       this.setData({
+        authResult,
         errorMessage: '',
         loading: false,
+        phoneBindingRequired: false,
         webViewUrl: resolveWebViewUrl(authResult),
       });
     } catch (error) {
       this.setData({
+        authResult: null,
         errorMessage:
           error && error.message
             ? error.message
             : '微信登录失败，请稍后重试。',
         loading: false,
+        phoneBindingRequired: false,
         webViewUrl: '',
       });
     }
   },
 
+  async handleGetPhoneNumber(event) {
+    if (!this.data.authResult || !this.data.authResult.token) {
+      this.handleRetryLogin();
+      return;
+    }
+
+    const detail = event.detail || {};
+    if (!detail.code) {
+      this.setData({
+        errorMessage: detail.errMsg || '需要授权手机号后才能完成绑定。',
+      });
+      return;
+    }
+
+    this.setData({
+      bindingPhone: true,
+      errorMessage: '',
+    });
+    try {
+      const response = await requestMiniProgramBindPhone(
+        this.data.authResult.token,
+        detail.code,
+      );
+      if (!response || !response.token) {
+        throw new Error('服务器未返回绑定后的登录态');
+      }
+      const nextAuthResult = {
+        token: response.token,
+        bindingStatus: 'active',
+      };
+      this.setData({
+        authResult: nextAuthResult,
+        bindingPhone: false,
+        errorMessage: '',
+        loading: false,
+        phoneBindingRequired: false,
+        webViewUrl: resolveWebViewUrl(nextAuthResult),
+      });
+    } catch (error) {
+      this.setData({
+        bindingPhone: false,
+        errorMessage:
+          error && error.message
+            ? error.message
+            : '绑定手机号失败，请稍后重试。',
+      });
+    }
+  },
+
   handleRetryLogin() {
     this.setData({
+      authResult: null,
+      bindingPhone: false,
       errorMessage: '',
       loading: true,
+      phoneBindingRequired: false,
       webViewUrl: '',
     });
     this.onLoad();

miniprogram/pages/web-view/index.wxml

@@ -13,6 +13,31 @@
   </view>
 </view>
 
+<view wx:elif="{{phoneBindingRequired}}" class="setup-screen">
+  <view class="setup-card">
+    <view class="setup-title">绑定手机号</view>
+    <view wx:if="{{errorMessage}}" class="setup-text setup-text--danger">
+      {{errorMessage}}
+    </view>
+    <button
+      class="retry-button"
+      open-type="getPhoneNumber"
+      bindgetphonenumber="handleGetPhoneNumber"
+      loading="{{bindingPhone}}"
+      disabled="{{bindingPhone}}"
+    >
+      {{bindingPhone ? '正在绑定' : '微信授权手机号'}}
+    </button>
+    <button
+      class="ghost-button"
+      disabled="{{bindingPhone}}"
+      bindtap="handleRetryLogin"
+    >
+      重新登录
+    </button>
+  </view>
+</view>
+
 <view wx:else class="setup-screen">
   <view class="setup-card">
     <view class="setup-title">无法进入</view>

miniprogram/pages/web-view/index.wxss

@@ -32,6 +32,10 @@
   color: rgba(245, 247, 251, 0.72);
 }
 
+.setup-text--danger {
+  color: #ffb4a9;
+}
+
 .retry-button {
   margin-top: 28rpx;
   width: 100%;
@@ -41,3 +45,14 @@
   font-size: 28rpx;
   line-height: 2.6;
 }
+
+.ghost-button {
+  margin-top: 18rpx;
+  width: 100%;
+  border-radius: 8rpx;
+  border: 1rpx solid rgba(255, 255, 255, 0.24);
+  background: transparent;
+  color: rgba(245, 247, 251, 0.86);
+  font-size: 26rpx;
+  line-height: 2.6;
+}