76 lines
4.2 KiB
Vue
76 lines
4.2 KiB
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,.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>
|