60 lines
3.6 KiB
Vue
60 lines
3.6 KiB
Vue
<!-- 页面编号：T-03；用途：成员档案详情。 -->
|
||
<template>
|
||
<view class="page-shell member-page">
|
||
<PageHeader title="成员档案" action="编辑" @action="toEdit" />
|
||
<view v-if="member" class="member-hero"><view class="member-seal">{{ member.name.slice(0, 1) }}</view><view><text class="member-name">{{ member.name }}</text><text class="member-role">第 {{ member.generation }} 世 · {{ member.relation }} · 家谱成员</text></view></view>
|
||
<view v-else class="state-copy">{{ loadError || '正在载入成员档案…' }}</view>
|
||
<template v-if="member">
|
||
<view class="profile-card paper-card"><text class="section-title">基本资料</text><view v-for="item in details" :key="item.label" class="info-row"><text>{{ item.label }}</text><text>{{ item.value }}</text></view></view>
|
||
<view class="profile-card paper-card"><text class="section-title">亲属关系</text><text class="bio">亲属关系将在编辑功能接入后完整维护。</text></view>
|
||
<view v-if="member.introduction" class="profile-card paper-card"><text class="section-title">生平事迹</text><text class="bio">{{ member.introduction }}</text></view>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, ref } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import PageHeader from '@/components/PageHeader.vue'
|
||
import { appApi } from '@/utils/api.js'
|
||
import { genealogyContext } from '@/utils/genealogy-context.js'
|
||
|
||
const member = ref(null)
|
||
const loadError = ref('')
|
||
const genealogyId = ref('')
|
||
const details = computed(() => member.value ? [
|
||
{ label: '字辈', value: member.value.generationName || `第 ${member.value.generation} 世` },
|
||
{ label: '出生日期', value: member.value.birthDate || '待补' },
|
||
{ label: '生卒信息', value: member.value.years || '待补' },
|
||
{ label: '所属支系', value: member.value.branch || '主支' }
|
||
] : [])
|
||
|
||
onLoad(async (query) => {
|
||
genealogyId.value = query.genealogyId || genealogyContext.getCurrentGenealogyId()
|
||
if (!genealogyId.value || !query.personId) { loadError.value = '成员参数不完整，请从世系树进入。'; return }
|
||
genealogyContext.setCurrentGenealogyId(genealogyId.value)
|
||
try {
|
||
member.value = await appApi.getPerson(genealogyId.value, query.personId)
|
||
if (!member.value) loadError.value = '未找到该成员。'
|
||
} catch (error) {
|
||
loadError.value = error.message || '成员档案加载失败。'
|
||
}
|
||
})
|
||
|
||
const toEdit = () => uni.navigateTo({ url: `/pages/tree/t05-edit-member?genealogyId=${genealogyId.value}&personId=${member.value?.id || ''}` })
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.member-page { padding-bottom: 36rpx; }
|
||
.member-hero { display: flex; align-items: center; gap: 24rpx; padding: 38rpx 34rpx; background: $navy; }
|
||
.member-seal { display: flex; width: 92rpx; height: 92rpx; align-items: center; justify-content: center; border: 3rpx solid #e0bd77; border-radius: 50%; color: #f4daa1; font-family: serif; font-size: 46rpx; }
|
||
.member-name { display: block; color: #fff8ec; font-family: serif; font-size: 46rpx; font-weight: 700; }
|
||
.member-role { display: block; margin-top: 10rpx; color: #e0c993; font-size: 23rpx; }
|
||
.state-copy { padding: 80rpx 40rpx; color: $ink-muted; font-size: 27rpx; text-align: center; }
|
||
.profile-card { margin: 26rpx 28rpx 0; padding: 30rpx; }
|
||
.info-row { display: flex; justify-content: space-between; padding: 25rpx 0; border-bottom: 1rpx solid #eadfc9; color: $ink-muted; font-size: 27rpx; }
|
||
.info-row text:last-child { color: $ink; }
|
||
.info-row:last-child { border-bottom: 0; }
|
||
.bio { display: block; margin-top: 22rpx; color: $ink-muted; font-size: 27rpx; line-height: 1.9; }
|
||
</style>
|