完成80%
This commit is contained in:
@@ -12,7 +12,7 @@
|
||||
</view>
|
||||
<template v-else>
|
||||
<view class="profile-summary">
|
||||
<view class="profile-summary__avatar"><text>{{ profile.avatar ? "已设置" : "未设置" }}</text></view>
|
||||
<view class="profile-summary__avatar"><image src="/static/assets/foundation/transparent/auth-login-outline.png" mode="aspectFit" /></view>
|
||||
<view class="profile-summary__identity">
|
||||
<text>{{ profile.nickName || "未设置昵称" }}</text>
|
||||
<text>{{ profile.realName || "未设置真实姓名" }}</text>
|
||||
@@ -22,7 +22,7 @@
|
||||
</view>
|
||||
|
||||
<view class="profile-fields">
|
||||
<view class="profile-field"><text>性别</text><text>{{ profile.sex || "未设置" }}</text></view>
|
||||
<view class="profile-field"><text>性别</text><text>{{ sexText }}</text></view>
|
||||
<view class="profile-field"><text>生日</text><text>{{ birthdayText }}</text></view>
|
||||
<view class="profile-field"><text>邮箱</text><text>{{ profile.email || "未设置" }}</text></view>
|
||||
</view>
|
||||
@@ -58,6 +58,8 @@ const loadError = ref("");
|
||||
const requestController = createRequestController();
|
||||
let pageActive = true;
|
||||
|
||||
const sexText = computed(() => (profile.sex ? "待确认" : "未设置"));
|
||||
|
||||
const birthdayText = computed(() => /^\d{4}-\d{2}-\d{2}/.test(profile.birthday) ? profile.birthday.slice(0, 10) : "未设置");
|
||||
|
||||
const loadProfile = async () => {
|
||||
@@ -99,7 +101,8 @@ onUnload(() => {
|
||||
.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; }
|
||||
.profile-summary { display: grid; grid-template-columns: 96rpx minmax(0, 1fr); align-items: center; gap: 18rpx; padding: 30rpx; }
|
||||
.profile-summary__avatar { display: flex; width: 96rpx; height: 96rpx; align-items: center; justify-content: center; border: 1rpx solid rgba(159, 23, 15, .32); border-radius: 50%; background: rgba(159, 23, 15, .06); color: $brand-red; font-size: 19rpx; text-align: center; }
|
||||
.profile-summary__avatar { display: flex; width: 96rpx; height: 96rpx; align-items: center; justify-content: center; border: 1rpx solid rgba(159, 23, 15, .32); border-radius: 50%; background: rgba(159, 23, 15, .06); }
|
||||
.profile-summary__avatar image { width: 64rpx; height: 64rpx; opacity: .8; }
|
||||
.profile-summary__identity { min-width: 0; }
|
||||
.profile-summary__identity text { display: block; overflow-wrap: anywhere; }
|
||||
.profile-summary__identity text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 32rpx; font-weight: 700; }
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
<view class="form-row"><text>昵称</text><input v-model.trim="form.nickName" maxlength="30" placeholder="请输入昵称" placeholder-class="placeholder" :disabled="saving || uploading" /></view>
|
||||
<view class="form-row"><text>真实姓名</text><input v-model.trim="form.realName" maxlength="30" placeholder="请输入真实姓名" placeholder-class="placeholder" :disabled="saving || uploading" /></view>
|
||||
<view class="form-row"><text>性别</text><input v-model.trim="form.sex" placeholder="请输入性别" placeholder-class="placeholder" :disabled="saving || uploading" /></view>
|
||||
<view class="form-row form-row--readonly"><text>性别</text><view class="readonly-value"><text>{{ form.sex ? "待确认" : "未设置" }}</text><text>选项待提供</text></view></view>
|
||||
<view class="form-row">
|
||||
<text>生日</text>
|
||||
<picker mode="date" :value="form.birthday" :disabled="saving || uploading" @change="changeBirthday"><view class="picker-value" :class="{ 'picker-value--placeholder': !form.birthday }">{{ form.birthday || "请选择生日" }}</view></picker>
|
||||
@@ -185,9 +185,12 @@ onUnload(() => {
|
||||
.avatar-row > view text { display: block; }
|
||||
.avatar-row > view text:first-child, .form-row > text { color: $ink; font-size: 23rpx; font-weight: 700; }
|
||||
.avatar-row > view text:last-child { margin-top: 4rpx; color: $ink-muted; font-size: 19rpx; overflow-wrap: anywhere; }
|
||||
.upload-button { display: flex; min-height: 64rpx; align-items: center; justify-content: center; border: 0; background: transparent; color: $brand-red; font-size: 22rpx; text-align: right; }
|
||||
.upload-button { display: flex; min-height: 88rpx; align-items: center; justify-content: center; border: 0; background: transparent; color: $brand-red; font-size: 22rpx; text-align: right; }
|
||||
.form-row input, .picker-value { width: auto; min-width: 0; min-height: 68rpx; color: $ink; font-size: 23rpx; text-align: right; }
|
||||
.picker-value { display: flex; align-items: center; justify-content: flex-end; }
|
||||
.readonly-value { display:flex; min-height:68rpx; align-items:center; justify-content:flex-end; gap:12rpx; color:$ink-muted; }
|
||||
.readonly-value text:first-child { color:$ink; font-size:23rpx; }
|
||||
.readonly-value text:last-child { color:$ink-muted; font-size:19rpx; }
|
||||
.picker-value--placeholder, .placeholder { color: #ab9a86; }
|
||||
.field-error, .save-error, .form-note { display: block; color: $ink-muted; font-size: 20rpx; line-height: 1.5; }
|
||||
.field-error, .save-error { color: #b42318; }
|
||||
|
||||
@@ -1,11 +1,75 @@
|
||||
<!-- 页面编号:M-03;用途:账号与安全入口。安全概览 DTO 未声明。 -->
|
||||
<!-- 页面编号: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 class="state-card"><text>安全资料待后端字段合同</text><text>没有独立安全概览、设备或登录记录读取 owner;页面不再显示 mock 账号摘要。可进入已独立核对的修改密码页面,换绑手机号仍需人工 TAC/短信窗口。</text><AppButton block label="修改密码" @click="openPassword" /><AppButton type="secondary" block label="换绑手机号" @click="openPhone" /></view></view></view>
|
||||
<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 AppButton from "@/components/AppButton.vue"; import ModulePageBackground from "@/components/ModulePageBackground.vue"; import PageHeader from "@/components/PageHeader.vue"; import { openPage,returnTo } from "@/utils/navigation.js"; const backToProfile=()=>returnTo("M01");const openPassword=()=>openPage("M04",{},"M03");const openPhone=()=>openPage("M05",{},"M03");
|
||||
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{box-sizing:border-box;min-height:340rpx;padding:78rpx 52rpx 50rpx;text-align:center;@include adaptive.adaptive-family-content}.state-card text{display:block}.state-card text:first-child{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:20rpx}
|
||||
.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>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<!-- 页面编号:M-05;用途:换绑手机号。缺专用发码/资料 DTO 且需人工 TAC/短信时保持关闭。 -->
|
||||
<template>
|
||||
<view class="phone-page"><ModulePageBackground module="profile" /><view class="page-header"><PageHeader title="换绑手机号" custom-back @back="backToSecurity" /></view><view class="page-content"><view class="state-card"><text>换绑手机号待人工验证</text><text>换绑接口要求新手机号、四位短信码和 `clientId`,但没有可安全消费的当前手机号 DTO,也没有已核实的专用受保护发码链。页面不显示 mock 手机号、不发送验证码、不在无人值守时换绑。</text><AppButton block label="返回账号与安全" @click="backToSecurity" /></view></view></view>
|
||||
<view class="phone-page"><ModulePageBackground module="profile" /><view class="page-header"><PageHeader title="换绑手机号" custom-back @back="backToSecurity" /></view><view class="page-content"><view class="state-card"><text>暂不能在线换绑手机号</text><text>为保护账户安全,请联系管理员协助办理手机号换绑。</text><AppButton block label="返回账号与安全" @click="backToSecurity" /></view></view></view>
|
||||
</template>
|
||||
<script setup>
|
||||
import AppButton from "@/components/AppButton.vue"; import ModulePageBackground from "@/components/ModulePageBackground.vue"; import PageHeader from "@/components/PageHeader.vue"; import { returnTo } from "@/utils/navigation.js"; const backToSecurity=()=>returnTo("M03");
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<view class="invite-hero">
|
||||
<image src="/static/assets/foundation/transparent/brand-seal.png" mode="aspectFit" />
|
||||
<text>家谱服务推荐</text>
|
||||
<text>以下内容由服务端配置;不生成邀请码,也不会伪造推广信息。</text>
|
||||
<text>以下推荐内容由服务端配置。</text>
|
||||
</view>
|
||||
<view v-if="state === 'loading'" class="state-card"><AppLoading text="正在读取推广内容" /></view>
|
||||
<view v-else-if="state === 'error'" class="state-card">
|
||||
|
||||
Reference in New Issue
Block a user