rain
44 lines
2.8 KiB
Vue
44 lines
2.8 KiB
Vue
<!-- 页面编号：S-01；用途：多类型内容列表功能骨架；不计为任何已完成设计页面。 -->
|
||
<template>
|
||
<view class="page-shell content-page">
|
||
<PageHeader :title="config.title" />
|
||
<view class="content-intro"><text>{{ config.copy }}</text></view>
|
||
<view class="content-list"><view v-for="item in items" :key="item.id" class="content-card paper-card"><text class="content-title">{{ item.title || item.articleTitle || item.albumName || item.ceremonyName || '家族记录' }}</text><text class="content-summary">{{ item.summary || item.content || item.description || item.feedContent || '内容待补充' }}</text><text class="content-date">{{ item.date || item.createTime || '' }}</text></view><view v-if="!items.length && !loadError" class="empty-copy">暂无{{ config.title }}</view></view>
|
||
<text v-if="loadError" class="error-copy">{{ loadError }}</text>
|
||
</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 type = ref('article')
|
||
const items = ref([])
|
||
const loadError = ref('')
|
||
const definitions = { article: { title: '谱文', copy: '记录家族历史、家训与珍贵文字。' }, album: { title: '相册', copy: '珍存家人、故土与仪式的影像。' }, ceremony: { title: '祭祀', copy: '查看家族祭祀安排与纪念活动。' }, record: { title: '族务', copy: '共同记录成长、备忘与家族事务。' } }
|
||
const config = computed(() => definitions[type.value] || definitions.article)
|
||
|
||
onLoad(async (query) => {
|
||
type.value = definitions[query.type] ? query.type : 'article'
|
||
const genealogyId = query.genealogyId || genealogyContext.getCurrentGenealogyId()
|
||
if (!genealogyId) { loadError.value = '请先选择一个家谱。'; return }
|
||
genealogyContext.setCurrentGenealogyId(genealogyId)
|
||
try { items.value = await appApi.getContent(type.value, genealogyId) } catch (error) { loadError.value = error.message || '内容加载失败。' }
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content-page { padding-bottom: 36rpx; }
|
||
.content-intro { padding: 28rpx 30rpx; background: #efe3cd; color: $ink-muted; font-size: 24rpx; }
|
||
.content-list { display: flex; flex-direction: column; gap: 18rpx; margin: 26rpx 28rpx; }
|
||
.content-card { padding: 28rpx; }
|
||
.content-title { display: block; color: $ink; font-size: 31rpx; font-weight: 700; }
|
||
.content-summary { display: block; margin-top: 14rpx; color: $ink-muted; font-size: 25rpx; line-height: 1.65; }
|
||
.content-date { display: block; margin-top: 16rpx; color: $gold; font-size: 22rpx; }
|
||
.empty-copy { padding: 80rpx 0; color: $ink-muted; font-size: 26rpx; text-align: center; }
|
||
.error-copy { display: block; margin: 20rpx 28rpx; color: $brand-red; font-size: 24rpx; }
|
||
</style>
|