59 lines
2.7 KiB
Vue
59 lines
2.7 KiB
Vue
<!-- 页面编号：F-05；用途：谱文详情。详情 DTO 未声明时不展示本地正文。 -->
|
||
<template>
|
||
<view class="article-detail-page">
|
||
<ModulePageBackground module="family" />
|
||
<view class="article-detail-header"><PageHeader title="谱文详情" custom-back @back="backToArticles" /></view>
|
||
<view class="article-detail-content">
|
||
<view class="article-state-card">
|
||
<text>{{ stateCopy.title }}</text>
|
||
<text>{{ stateCopy.copy }}</text>
|
||
<AppButton block :label="stateCopy.action" @click="backToArticles" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, ref } from "vue";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import AppButton from "@/components/AppButton.vue";
|
||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||
import PageHeader from "@/components/PageHeader.vue";
|
||
import { goBack, returnTo } from "@/utils/navigation.js";
|
||
|
||
const genealogyId = ref("");
|
||
const articleId = ref("");
|
||
const hasValidContext = computed(() => /^[1-9]\d*$/.test(genealogyId.value) && /^[1-9]\d*$/.test(articleId.value));
|
||
const stateCopy = computed(() => hasValidContext.value
|
||
? {
|
||
title: "谱文正文待后端字段合同",
|
||
copy: "详情接口没有声明文章标题、分类、作者、更新时间或正文段落字段；页面已停止读取本地文章，不能猜测这些字段。",
|
||
action: "返回谱文列表",
|
||
}
|
||
: {
|
||
title: "谱文入口无效",
|
||
copy: "没有取得有效家谱或文章标识，页面不会回退到其他文章。",
|
||
action: "返回上一页",
|
||
},
|
||
);
|
||
onLoad((query) => {
|
||
genealogyId.value = String(query?.genealogyId || "");
|
||
articleId.value = String(query?.articleId || "");
|
||
});
|
||
const backToArticles = () => /^[1-9]\d*$/.test(genealogyId.value)
|
||
? returnTo("F04", { genealogyId: genealogyId.value })
|
||
: goBack();
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||
.article-detail-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||
.article-detail-header, .article-detail-content { z-index: 1; }
|
||
.article-detail-content { padding: 18rpx 24rpx 72rpx; }
|
||
.article-state-card { @include adaptive.adaptive-family-content; width: 100%; min-height: 350rpx; margin-top: 36rpx; padding: 78rpx 52rpx 50rpx; text-align: center; }
|
||
.article-state-card > text { display: block; }
|
||
.article-state-card > text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 35rpx; font-weight: 700; }
|
||
.article-state-card > text:nth-child(2) { margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
|
||
.article-state-card .app-button { margin-top: 30rpx; }
|
||
</style>
|