rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改部分样式

Browse Source
This commit is contained in:
rain
2026-07-27 17:29:58 +08:00
parent 04287e6777
commit 1e9e25fe67
53 changed files with 11562 additions and 2617 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/tree/t03-member-profile.vue
+403 -92
View File
@@ -13,7 +13,8 @@
>
<ModulePageBackground module="tree" />
<view class="member-page__header">
<PageHeader title="成员档案"
<PageHeader
title="成员档案"
:action="canPreviewEdit ? '编辑预览' : ''"
custom-back
@back="requestBack"
@@ -26,14 +27,26 @@
</view>
<view class="member-panel">
<AppLoading v-if="memberState === 'loading'" text="正在读取成员档案" description="请稍候，正在整理成员资料。" />
<AppLoading
v-if="memberState === 'loading'"
text="正在读取成员档案"
description="请稍候，正在整理成员资料。"
/>
<view v-else-if="memberState === 'detail' && member" class="member-detail">
<view
v-else-if="memberState === 'detail' && member"
class="member-detail"
>
<view class="member-heading">
<view class="member-heading__seal"><text>{{ member.name.slice(0, 1) }}</text></view>
<view class="member-heading__seal"
><text>{{ member.name.slice(0, 1) }}</text></view
>
<view>
<text>{{ member.name }}</text>
<text>第 {{ member.generation }} 世 · {{ member.relation }} · {{ member.branch }}</text>
<text
>第 {{ member.generation }} 世 · {{ member.relation }} ·
{{ member.branch }}</text
>
</view>
</view>
@@ -45,10 +58,13 @@
<text class="member-section-title">基本资料</text>
<view v-for="item in details" :key="item.label" class="member-info-row">
<text>{{ item.label }}</text><text>{{ item.value || "未填写" }}</text>
<text>{{ item.label }}</text
><text>{{ item.value || "未填写" }}</text>
</view>
<text class="member-section-title member-section-title--relation">亲属关系</text>
<text class="member-section-title member-section-title--relation"
>亲属关系</text
>
<view class="member-relatives">
<view
v-for="relative in member.relatives"
@@ -56,22 +72,40 @@
:data-person-id="relative.id"
@click="openRelative(relative.id)"
>
<text>{{ relative.relation }}</text><text>{{ relative.name }}</text>
<text>{{ relative.relation }}</text
><text>{{ relative.name }}</text>
</view>
<text v-if="!member.relatives.length">尚未记录可查看的亲属</text>
</view>
<view class="member-record-actions">
<view role="button" aria-label="查看成长日志" @click="toGrowthJournal"><text>成长日志</text></view>
<view role="button" aria-label="查看人生事服务状态" @click="toLifeEvents"><text>人生事（待开放）</text></view>
<view role="button" aria-label="查看成长日志" @click="toGrowthJournal"
><text>成长日志</text></view
>
<view
role="button"
aria-label="查看人生事服务状态"
@click="toLifeEvents"
><text>人生事（待开放）</text></view
>
</view>
<view v-if="canPreviewEdit" class="member-profile-action" @click="toEdit"><text>制作成员编辑预览</text></view>
<view
v-if="canPreviewEdit"
class="member-profile-action"
@click="toEdit"
><text>制作成员编辑预览</text></view
>
</view>
<view v-else-if="memberState === 'restricted' && member" class="member-restricted">
<view
v-else-if="memberState === 'restricted' && member"
class="member-restricted"
>
<view class="member-heading">
<view class="member-heading__seal"><text>{{ member.name.slice(0, 1) }}</text></view>
<view class="member-heading__seal"
><text>{{ member.name.slice(0, 1) }}</text></view
>
<view>
<text>{{ member.name }}</text>
<text>第 {{ member.generation }} 世 · {{ member.relation }}</text>
@@ -79,13 +113,17 @@
</view>
<text>{{ restrictedCopy.title }}</text>
<text>{{ restrictedCopy.copy }}</text>
<view class="member-restricted-action" @click="toTree"><text>返回上一位成员</text></view>
<view class="member-restricted-action" @click="toTree"
><text>返回上一位成员</text></view
>
</view>
<view v-else class="member-error">
<text>成员档案暂不可用</text>
<text>{{ errorMessage }}</text>
<view class="member-profile-action" @click="toTree"><text>返回世系树</text></view>
<view class="member-profile-action" @click="toTree"
><text>返回世系树</text></view
>
</view>
</view>
</view>
@@ -97,7 +135,11 @@ import { onBackPress, onLoad, onShow, onUnload } from "@dcloudio/uni-app";
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 {
appApi,
createRequestController,
isRequestCancelled,
} from "@/utils/api.js";
import {
consumeNavigationResult,
handleBackPress,
@@ -116,23 +158,69 @@ const trailIndex = ref(-1);
const memberRequestController = createRequestController();
let loadSequence = 0;
const details = computed(() => member.value ? [
{ label: "别名", value: member.value.aliasName },
{ label: "字辈", value: member.value.generationName },
{ label: "性别（字典值）", value: member.value.sex },
{ label: "人物状态（字典值）", value: member.value.personStatus },
{ label: "出生日期", value: member.value.status === "forbidden" ? "按权限隐藏" : member.value.birthDate },
{ label: "出生农历", value: member.value.status === "forbidden" ? "按权限隐藏" : member.value.birthLunar },
{ label: "生卒信息", value: member.value.years },
{ label: "出生地", value: member.value.status === "forbidden" ? "按权限隐藏" : member.value.birthplace },
{ label: "逝世农历", value: member.value.status === "forbidden" ? "按权限隐藏" : member.value.deathLunar },
{ label: "逝世地", value: member.value.status === "forbidden" ? "按权限隐藏" : member.value.deathPlace },
{ label: "安葬地", value: member.value.status === "forbidden" ? "按权限隐藏" : member.value.burialPlace },
{ label: "配偶", value: member.value.spouseNames },
{ label: "所属支系", value: member.value.branch },
{ label: "生平", value: member.value.status === "forbidden" ? "按权限隐藏" : member.value.biography },
{ label: "备注", value: member.value.remark },
] : []);
const details = computed(() =>
member.value
? [
{ label: "别名", value: member.value.aliasName },
{ label: "字辈", value: member.value.generationName },
{ label: "性别（字典值）", value: member.value.sex },
{ label: "人物状态（字典值）", value: member.value.personStatus },
{
label: "出生日期",
value:
member.value.status === "forbidden"
? "按权限隐藏"
: member.value.birthDate,
},
{
label: "出生农历",
value:
member.value.status === "forbidden"
? "按权限隐藏"
: member.value.birthLunar,
},
{ label: "生卒信息", value: member.value.years },
{
label: "出生地",
value:
member.value.status === "forbidden"
? "按权限隐藏"
: member.value.birthplace,
},
{
label: "逝世农历",
value:
member.value.status === "forbidden"
? "按权限隐藏"
: member.value.deathLunar,
},
{
label: "逝世地",
value:
member.value.status === "forbidden"
? "按权限隐藏"
: member.value.deathPlace,
},
{
label: "安葬地",
value:
member.value.status === "forbidden"
? "按权限隐藏"
: member.value.burialPlace,
},
{ label: "配偶", value: member.value.spouseNames },
{ label: "所属支系", value: member.value.branch },
{
label: "生平",
value:
member.value.status === "forbidden"
? "按权限隐藏"
: member.value.biography,
},
{ label: "备注", value: member.value.remark },
]
: [],
);
const canPreviewEdit = computed(() => memberState.value === "detail");
const restrictedCopy = computed(() =>
member.value?.status === "forbidden"
@@ -145,18 +233,29 @@ const restrictedCopy = computed(() =>
copy: "页面只保留姓名、关系与世代，不展示其他资料或操作入口。",
},
);
const statusLabel = computed(() => ({ privacy: "隐私资料", deceased: "离世纪念", forbidden: "访问受限" })[member.value?.status] || "成员状态");
const statusDescription = computed(() => ({
privacy: "部分资料仅向授权成员展示",
deceased: "查看生平保留与纪念资料说明",
forbidden: "当前账号只能查看有限身份信息",
})[member.value?.status] || "查看成员状态说明");
const memberContextDescription = computed(() => ({
loading: "正在读取成员资料",
detail: "成员身份与亲属关系",
restricted: "隐私成员仅展示基础身份",
error: "请重新选择成员",
}[memberState.value] || "请重新选择成员"));
const statusLabel = computed(
() =>
({ privacy: "隐私资料", deceased: "离世纪念", forbidden: "访问受限" })[
member.value?.status
] || "成员状态",
);
const statusDescription = computed(
() =>
({
privacy: "部分资料仅向授权成员展示",
deceased: "查看生平保留与纪念资料说明",
forbidden: "当前账号只能查看有限身份信息",
})[member.value?.status] || "查看成员状态说明",
);
const memberContextDescription = computed(
() =>
({
loading: "正在读取成员资料",
detail: "成员身份与亲属关系",
restricted: "隐私成员仅展示基础身份",
error: "请重新选择成员",
})[memberState.value] || "请重新选择成员",
);
const loadMember = async (nextPersonId, { preserveCurrent = false } = {}) => {
const normalizedPersonId = String(nextPersonId || "");
@@ -210,7 +309,9 @@ const initializeMemberTrail = async (initialPersonId) => {
memberTrail.splice(0, memberTrail.length);
trailIndex.value = -1;
const normalizedPersonId = String(initialPersonId || "");
const loaded = await loadMember(normalizedPersonId, { preserveCurrent: true });
const loaded = await loadMember(normalizedPersonId, {
preserveCurrent: true,
});
if (!loaded) return false;
memberTrail.splice(0, memberTrail.length, normalizedPersonId);
trailIndex.value = 0;
@@ -219,7 +320,8 @@ const initializeMemberTrail = async (initialPersonId) => {
const openRelative = async (nextPersonId) => {
const normalizedPersonId = String(nextPersonId || "");
if (!normalizedPersonId || normalizedPersonId === personId.value) return false;
if (!normalizedPersonId || normalizedPersonId === personId.value)
return false;
// 先读取目标成员，只有真实读取成功后才截断前进历史并推进轨迹；失败时
// 当前成员、当前索引和既有历史全部保持不变。
@@ -235,7 +337,9 @@ const popMemberTrail = async () => {
while (trailIndex.value > 0) {
const targetIndex = trailIndex.value - 1;
const historicalPersonId = memberTrail[targetIndex];
const loaded = await loadMember(historicalPersonId, { preserveCurrent: true });
const loaded = await loadMember(historicalPersonId, {
preserveCurrent: true,
});
if (loaded) {
trailIndex.value = targetIndex;
return true;
@@ -285,58 +389,265 @@ onUnload(() => {
const toEdit = () => {
if (!canPreviewEdit.value) return false;
return openPage("T05", { genealogyId: genealogyId.value, personId: personId.value }, "T03");
return openPage(
"T05",
{ genealogyId: genealogyId.value, personId: personId.value },
"T03",
);
};
const openMemberState = () =>
openPage("T08", { genealogyId: genealogyId.value, personId: personId.value }, "T03");
openPage(
"T08",
{ genealogyId: genealogyId.value, personId: personId.value },
"T03",
);
const toGrowthJournal = () =>
openPage("R08", { genealogyId: genealogyId.value, personId: personId.value }, "T03");
openPage(
"R08",
{ genealogyId: genealogyId.value, personId: personId.value },
"T03",
);
const toLifeEvents = () =>
openPage("R09", { genealogyId: genealogyId.value, personId: personId.value }, "T03");
openPage(
"R09",
{ genealogyId: genealogyId.value, personId: personId.value },
"T03",
);
const toTree = requestBack;
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.member-page { display: flex; min-height: 100vh; flex-direction: column; padding-bottom: 28rpx; box-sizing: border-box; background: $paper; }
.member-page__header, .member-context, .member-panel { z-index: 2; }
.member-context { @include adaptive.adaptive-tree-field; width: calc(100% - 32rpx); margin: 18rpx auto 0; padding: 16rpx 24rpx; }
.member-context text { display: block; color: $ink-muted; font-size: 23rpx; line-height: 1.45; }
.member-context text:first-child { color: $ink; font-size: 26rpx; font-weight: 700; }
.member-panel { @include adaptive.adaptive-tree-panel; width: calc(100% - 32rpx); margin: 16rpx auto 0; padding: 9% 8%; }
.member-panel > .app-loading { margin-top: 30%; }
.member-heading { display: flex; align-items: center; gap: 20rpx; }
.member-heading__seal { display: flex; width: 74rpx; height: 74rpx; flex: 0 0 74rpx; align-items: center; justify-content: center; background: url("/static/assets/modules/genealogy/transparent/current-seal-frame.png") center / contain no-repeat; }
.member-heading__seal text { color: #fff7e7; font-size: 28rpx; }
.member-heading > view:last-child text { display: block; color: $ink-muted; font-size: 23rpx; line-height: 1.45; }
.member-heading > view:last-child text:last-child { font-size: 23rpx; }
.member-heading > view:last-child text:first-child { color: $ink; font-family: "STKaiti", "KaiTi", serif; font-size: 36rpx; font-weight: 700; }
.member-status-entry { @include adaptive.adaptive-genealogy-list-card; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14rpx; margin-top: 18rpx; padding: 18rpx 22rpx; }
.member-status-entry text { color: $ink-muted; font-size: 22rpx; line-height: 1.4; }
.member-status-entry text:first-child, .member-status-entry text:last-child { color: $brand-red; font-weight: 700; }
.member-section-title { display: block; margin-top: 24rpx; color: $brand-red; font-size: 24rpx; font-weight: 700; }
.member-info-row { @include adaptive.adaptive-tree-field; display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 64rpx; align-items: center; gap: 18rpx; margin-top: 8rpx; padding: 8rpx 18rpx; }
.member-info-row text { color: $ink-muted; font-size: 23rpx; line-height: 1.45; }
.member-info-row text:last-child { color: $ink; text-align: right; }
.member-relatives { margin-top: 8rpx; font-size: 23rpx; }
.member-relatives > view { display: flex; justify-content: space-between; gap: 20rpx; padding: 12rpx 18rpx; color: $ink; font-size: 23rpx; }
.member-relatives > view text:last-child { color: $brand-red; }
.member-relatives > text { display: block; color: $ink-muted; font-size: 23rpx; line-height: 1.5; }
.member-record-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12rpx; margin-top: 20rpx; }
.member-record-actions > view { @include adaptive.adaptive-scroll-button(secondary); display: flex; min-height: 72rpx; align-items: center; justify-content: center; padding: 8rpx 14rpx; text-align: center; }
.member-record-actions text { color: $brand-red; font-size: 22rpx; font-weight: 700; line-height: 1.35; }
.member-profile-action { @include adaptive.adaptive-scroll-button(primary); display: flex; min-height: 76rpx; align-items: center; justify-content: center; margin-top: 22rpx; }
.member-profile-action text { color: #fff9ed; font-size: 24rpx; font-weight: 700; }
.member-restricted { padding-top: 14rpx; }
.member-restricted > text { display: block; color: $ink-muted; font-size: 23rpx; line-height: 1.6; text-align: center; }
.member-restricted > text:first-of-type { margin-top: 28rpx; color: $ink; font-family: "STKaiti", "KaiTi", serif; font-size: 31rpx; font-weight: 700; }
.member-restricted > text + text { margin-top: 12rpx; }
.member-restricted-action { @include adaptive.adaptive-scroll-button(secondary); display: flex; min-height: 76rpx; align-items: center; justify-content: center; margin-top: 22rpx; }
.member-restricted-action text { color: $brand-red; font-size: 24rpx; font-weight: 700; }
.member-error { margin-top: 30%; text-align: center; }
.member-error > text { display: block; color: $ink-muted; font-size: 24rpx; line-height: 1.55; }
.member-error > text:nth-child(2) { font-size: 24rpx; }
.member-error > text:first-child { color: $ink; font-family: "STKaiti", "KaiTi", serif; font-size: 34rpx; font-weight: 700; }
@media (min-width: 400px) { .member-context, .member-panel { width: calc(100% - 48rpx); } }
.member-page {
display: flex;
min-height: 100vh;
flex-direction: column;
padding-bottom: 28rpx;
box-sizing: border-box;
background: $paper;
}
.member-page__header,
.member-context,
.member-panel {
z-index: 2;
}
.member-context {
@include adaptive.adaptive-tree-field;
width: calc(100% - 32rpx);
margin: 18rpx auto 0;
padding: 16rpx 24rpx;
}
.member-context text {
display: block;
color: $ink-muted;
font-size: 23rpx;
line-height: 1.45;
}
.member-context text:first-child {
color: $ink;
font-size: 26rpx;
font-weight: 700;
}
.member-panel {
@include adaptive.adaptive-tree-panel;
width: calc(100% - 32rpx);
margin: 16rpx auto 0;
padding: 9% 8%;
}
.member-panel > .app-loading {
margin-top: 30%;
}
.member-heading {
display: flex;
align-items: center;
gap: 20rpx;
}
.member-heading__seal {
display: flex;
width: 74rpx;
height: 74rpx;
flex: 0 0 74rpx;
align-items: center;
justify-content: center;
background: url("/static/assets/modules/genealogy/transparent/current-seal-frame.png")
center / contain no-repeat;
}
.member-heading__seal text {
color: #fff7e7;
font-size: 28rpx;
}
.member-heading > view:last-child text {
display: block;
color: $ink-muted;
font-size: 23rpx;
line-height: 1.45;
}
.member-heading > view:last-child text:last-child {
font-size: 23rpx;
}
.member-heading > view:last-child text:first-child {
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 36rpx;
font-weight: 700;
}
.member-status-entry {
@include adaptive.adaptive-genealogy-list-card;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14rpx;
margin-top: 18rpx;
padding: 18rpx 22rpx;
}
.member-status-entry text {
color: $ink-muted;
font-size: 22rpx;
line-height: 1.4;
}
.member-status-entry text:first-child,
.member-status-entry text:last-child {
color: $brand-red;
font-weight: 700;
}
.member-section-title {
display: block;
margin-top: 24rpx;
color: $brand-red;
font-size: 24rpx;
font-weight: 700;
}
.member-info-row {
@include adaptive.adaptive-tree-field;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
min-height: 64rpx;
align-items: center;
gap: 18rpx;
margin-top: 8rpx;
padding: 8rpx 18rpx;
}
.member-info-row text {
color: $ink-muted;
font-size: 23rpx;
line-height: 1.45;
}
.member-info-row text:last-child {
color: $ink;
text-align: right;
}
.member-relatives {
margin-top: 8rpx;
font-size: 23rpx;
}
.member-relatives > view {
display: flex;
justify-content: space-between;
gap: 20rpx;
padding: 12rpx 18rpx;
color: $ink;
font-size: 23rpx;
}
.member-relatives > view text:last-child {
color: $brand-red;
}
.member-relatives > text {
display: block;
color: $ink-muted;
font-size: 23rpx;
line-height: 1.5;
}
.member-record-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12rpx;
margin-top: 20rpx;
}
.member-record-actions > view {
@include adaptive.adaptive-scroll-button(secondary);
display: flex;
min-height: 72rpx;
align-items: center;
justify-content: center;
padding: 8rpx 14rpx;
text-align: center;
}
.member-record-actions text {
color: $brand-red;
font-size: 22rpx;
font-weight: 700;
line-height: 1.35;
}
.member-profile-action {
@include adaptive.adaptive-scroll-button(primary);
display: flex;
min-height: 76rpx;
align-items: center;
justify-content: center;
margin-top: 22rpx;
}
.member-profile-action text {
color: #fff9ed;
font-size: 24rpx;
font-weight: 700;
}
.member-restricted {
padding-top: 14rpx;
}
.member-restricted > text {
display: block;
color: $ink-muted;
font-size: 23rpx;
line-height: 1.6;
text-align: center;
}
.member-restricted > text:first-of-type {
margin-top: 28rpx;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 31rpx;
font-weight: 700;
}
.member-restricted > text + text {
margin-top: 12rpx;
}
.member-restricted-action {
@include adaptive.adaptive-scroll-button(secondary);
display: flex;
min-height: 76rpx;
align-items: center;
justify-content: center;
margin-top: 22rpx;
}
.member-restricted-action text {
color: $brand-red;
font-size: 24rpx;
font-weight: 700;
}
.member-error {
margin-top: 30%;
text-align: center;
}
.member-error > text {
display: block;
color: $ink-muted;
font-size: 24rpx;
line-height: 1.55;
}
.member-error > text:nth-child(2) {
font-size: 24rpx;
}
.member-error > text:first-child {
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 34rpx;
font-weight: 700;
}
@media (min-width: 400px) {
.member-context,
.member-panel {
width: calc(100% - 48rpx);
}
}
</style>