jiapuapp/pages/profile/m03-security-settings.vue

<!-- 页面编号：M-03；用途：展示当前账号可读取的安全概览，不执行安全写入。 -->
<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="loadError" class="state-card">
        <text>账号安全资料暂时无法读取</text><text>{{ loadError }}</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
        >
        <view class="security-field"
          ><text>账号状态</text
          ><text>{{ profile.status || "未提供" }}</text></view
        >
        <text class="security-note"
          >当前仅展示可确认的账户信息，其他安全记录暂不可查看。</text
        >
        <AppButton block label="修改密码" @click="openPassword" />
        <AppButton
          type="secondary"
          block
          label="换绑手机号"
          @click="openPhone"
        />
      </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 {
  appApi,
  createRequestController,
  isRequestCancelled,
} from "@/utils/api.js";
import { openPage, returnTo } from "@/utils/navigation.js";

const profile = reactive({ phone: "", userNo: "", status: "" });
const loading = ref(false);
const loadError = ref("");
const controller = createRequestController();
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;
  loadError.value = "";
  try {
    const data = await appApi.getProfile({ requestController: controller });
    if (pageActive) Object.assign(profile, data);
  } catch (error) {
    if (pageActive && !isRequestCancelled(error))
      loadError.value = error?.message || "请稍后重试";
  } finally {
    if (pageActive) loading.value = false;
  }
};
const backToProfile = () => returnTo("M01");
const openPassword = () => openPage("M04", {}, "M03");
const openPhone = () => openPage("M05", {}, "M03");
onShow(loadProfile);
onUnload(() => {
  pageActive = false;
  controller.abort();
});
</script>

<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.security-page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: $paper;
}
.page-header,
.page-content {
  z-index: 1;
}
.page-content {
  padding: 18rpx 24rpx 72rpx;
}
.state-card,
.security-card {
  box-sizing: border-box;
  min-height: 340rpx;
  padding: 54rpx 42rpx 44rpx;
  @include adaptive.adaptive-family-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: 35rpx;
  font-weight: 700;
}
.state-card text:nth-child(2) {
  margin-top: 18rpx;
  color: $ink-muted;
  font-size: 24rpx;
  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: 24rpx;
  font-weight: 700;
}
.security-field text:last-child {
  color: $ink-muted;
  font-size: 22rpx;
  text-align: right;
  overflow-wrap: anywhere;
}
.security-note {
  margin-top: 22rpx;
  color: $ink-muted;
  font-size: 22rpx;
  line-height: 1.6;
}
.security-card .app-button {
  margin-top: 20rpx;
}
</style>