jiapuapp/pages/profile/security.vue

<template>
  <view class="security-page">
    <ModulePageBackground module="profile" />
    <view class="page-header"
      ><PageHeader title="账号与安全" custom-back @back="backToProfile"
    /></view>
    <view class="page-content">
      <view v-if="loading" class="state-card"
        ><AppLoading text="正在读取账号安全资料"
      /></view>
      <view v-else-if="securityProfileError" class="state-card">
        <text>账号安全资料暂时无法读取</text><text>{{ securityProfileError }}</text>
        <AppButton block label="重新读取" @click="loadProfile" />
      </view>
      <view v-else class="security-card">
        <text class="security-card__title">账号安全概览</text>
        <view class="security-field"
          ><text>绑定手机号</text><text>{{ maskedPhone }}</text></view
        >
        <view class="security-field"
          ><text>账号编号</text
          ><text>{{ profile.userNo || "未提供" }}</text></view
        >
        <AppButton block label="修改密码" @click="openPassword" />
        <AppButton
          type="secondary"
          block
          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>
</template>

<script setup>
import { computed, reactive, ref } from "vue";
import { onShow, onUnload } from "@dcloudio/uni-app";
import AppButton from "@/components/AppButton.vue";
import AppLoading from "@/components/AppLoading.vue";
import ModulePageBackground from "@/components/ModulePageBackground.vue";
import PageHeader from "@/components/PageHeader.vue";
import {
  createRequestController,
  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";

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)
    ? `${profile.phone.slice(0, 3)}****${profile.phone.slice(-4)}`
    : "未提供",
);

const loadProfile = async () => {
  if (loading.value) return;
  loading.value = true;
  securityProfileError.value = "";
  try {
    const profileResponse = await profileApi.getProfile({
      requestController: securityProfileRequestController,
    });
    if (pageActive) Object.assign(profile, profileResponse);
  } catch (error) {
    if (pageActive && !isRequestCancelled(error))
      securityProfileError.value = getRequestErrorMessage(error, "请稍后重试");
  } finally {
    if (pageActive) loading.value = false;
  }
};
const backToProfile = () => returnTo("M01");
const openPassword = () => openPage("M04", {}, "M03");
const openPhone = () => openPage("M05", {}, "M03");
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>

<style scoped lang="scss">
@import "../../styles/adaptive-frame-profiles.scss";
.security-page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: $paper;
}
.page-header,
.page-content {
  z-index: 1;
}
.page-content {
  flex: 1;
  padding: 18rpx 24rpx calc(72rpx + env(safe-area-inset-bottom));
}
.state-card,
.security-card {
  box-sizing: border-box;
  min-height: 340rpx;
  padding: 54rpx 42rpx 44rpx;
  @include adaptive-profile-content;
}
.state-card {
  text-align: center;
}
.state-card text,
.security-card text {
  display: block;
}
.state-card text:first-child,
.security-card__title {
  color: $ink;
  font-family: STKaiti, KaiTi, serif;
  font-size: clamp(19px, 35rpx, 24px);
  font-weight: 700;
}
.state-card text:nth-child(2) {
  margin-top: 18rpx;
  color: $ink-muted;
  font-size: clamp(15px, 24rpx, 18px);
  line-height: 1.65;
}
.state-card .app-button {
  margin-top: 28rpx;
}
.security-field {
  display: flex;
  min-height: 82rpx;
  align-items: center;
  justify-content: space-between;
  gap: 20rpx;
  border-bottom: 1rpx solid rgba(181, 137, 63, 0.3);
}
.security-field:first-of-type {
  margin-top: 24rpx;
}
.security-field text:first-child {
  color: $ink;
  font-size: clamp(15px, 24rpx, 18px);
  font-weight: 700;
}
.security-field text:last-child {
  color: $ink-muted;
  font-size: clamp(14px, 22rpx, 17px);
  text-align: right;
  overflow-wrap: anywhere;
}
.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>