feat: 完成前端业务闭环与后端联调

pages/profile/security.vue

@@ -21,9 +21,6 @@
           ><text>账号编号</text
           ><text>{{ profile.userNo || "未提供" }}</text></view
         >
-        <text class="security-note"
-          >这里显示可查看的账号信息，其他安全信息暂不支持查看。</text
-        >
         <AppButton block label="修改密码" @click="openPassword" />
         <AppButton
           type="secondary"
@@ -31,6 +28,14 @@
           label="换绑手机号"
           @click="openPhone"
         />
+        <AppButton
+          type="secondary"
+          block
+          :disabled="wechatProviderState !== 'ready' || bindingWechat"
+          :label="bindingWechat ? '正在绑定微信…' : '绑定微信'"
+          @click="bindWechat"
+        />
+        <text v-if="wechatBindingMessage" class="security-message">{{ wechatBindingMessage }}</text>
       </view>
     </view>
   </view>
@@ -48,6 +53,7 @@ import {
   isRequestCancelled
 } from "@/services/api/request-controller.js";
 import { profileApi } from "@/services/api/profile-service.js";
+import { authApi } from "@/services/api/auth-service.js";
 import { getRequestErrorMessage } from "@/services/api/request-error-message.js";
 import { openPage, returnTo } from "@/utils/navigation/gateway.js";
 
@@ -55,6 +61,10 @@ const profile = reactive({ phone: "", userNo: "" });
 const loading = ref(false);
 const securityProfileError = ref("");
 const securityProfileRequestController = createRequestController();
+const wechatBindingRequestController = createRequestController();
+const wechatProviderState = ref("unknown");
+const bindingWechat = ref(false);
+const wechatBindingMessage = ref("");
 let pageActive = true;
 const maskedPhone = computed(() =>
   /^\d{7,}$/.test(profile.phone)
@@ -81,10 +91,72 @@ const loadProfile = async () => {
 const backToProfile = () => returnTo("M01");
 const openPassword = () => openPage("M04", {}, "M03");
 const openPhone = () => openPage("M05", {}, "M03");
-onShow(loadProfile);
+const detectWechatProvider = () => {
+  // #ifdef APP-PLUS
+  if (typeof uni?.getProvider !== "function") {
+    wechatProviderState.value = "unavailable";
+    wechatBindingMessage.value = "当前设备不支持微信授权";
+    return;
+  }
+  uni.getProvider({
+    service: "oauth",
+    success: ({ provider = [] } = {}) => {
+      if (!pageActive) return;
+      wechatProviderState.value = provider.includes("weixin") ? "ready" : "unavailable";
+      if (wechatProviderState.value === "unavailable") {
+        wechatBindingMessage.value = "当前设备未安装或未配置微信授权";
+      }
+    },
+    fail: () => {
+      if (!pageActive) return;
+      wechatProviderState.value = "unavailable";
+      wechatBindingMessage.value = "暂时无法使用微信授权";
+    },
+  });
+  // #endif
+  // #ifndef APP-PLUS
+  wechatProviderState.value = "unavailable";
+  wechatBindingMessage.value = "请在 App 中绑定微信";
+  // #endif
+};
+const requestWechatAuthorizationCode = () =>
+  new Promise((resolve, reject) => {
+    uni.login({
+      provider: "weixin",
+      onlyAuthorize: true,
+      success: ({ code } = {}) => resolve(code),
+      fail: reject,
+    });
+  });
+const bindWechat = async () => {
+  if (bindingWechat.value || wechatProviderState.value !== "ready") return;
+  bindingWechat.value = true;
+  wechatBindingMessage.value = "";
+  try {
+    const code = await requestWechatAuthorizationCode();
+    await authApi.bindWechat(
+      { code },
+      { requestController: wechatBindingRequestController },
+    );
+    if (pageActive) wechatBindingMessage.value = "微信绑定成功";
+  } catch (error) {
+    if (!pageActive || isRequestCancelled(error)) return;
+    const errorText = String(error?.errMsg || error?.message || "");
+    wechatBindingMessage.value = /cancel|取消/i.test(errorText)
+      ? "已取消微信绑定"
+      : getRequestErrorMessage(error, "微信绑定失败，请稍后重试");
+  } finally {
+    if (pageActive) bindingWechat.value = false;
+  }
+};
+onShow(() => {
+  void loadProfile();
+  detectWechatProvider();
+});
 onUnload(() => {
   pageActive = false;
   securityProfileRequestController.abort();
+  wechatBindingRequestController.abort();
 });
 </script>
 
@@ -101,7 +173,8 @@ onUnload(() => {
   z-index: 1;
 }
 .page-content {
-  padding: 18rpx 24rpx 72rpx;
+  flex: 1;
+  padding: 18rpx 24rpx calc(72rpx + env(safe-area-inset-bottom));
 }
 .state-card,
 .security-card {
@@ -155,13 +228,27 @@ onUnload(() => {
   text-align: right;
   overflow-wrap: anywhere;
 }
-.security-note {
-  margin-top: 22rpx;
-  color: $ink-muted;
-  font-size: clamp(14px, 22rpx, 17px);
-  line-height: 1.6;
-}
 .security-card .app-button {
   margin-top: 20rpx;
 }
+.security-message {
+  margin-top: 16rpx;
+  color: $ink-muted;
+  font-size: clamp(14px, 22rpx, 17px);
+  line-height: 1.5;
+  text-align: center;
+}
+
+@media (max-width: 340px) {
+  .page-content {
+    padding-right: 20rpx;
+    padding-left: 20rpx;
+  }
+
+  .state-card,
+  .security-card {
+    padding-right: 30rpx;
+    padding-left: 30rpx;
+  }
+}
 </style>