51 lines
2.6 KiB
Vue
51 lines
2.6 KiB
Vue
<!-- 页面编号：F-08；用途：相册照片墙。响应未声明照片展示 DTO 时保持关闭。 -->
|
||
<template>
|
||
<view class="album-detail-page">
|
||
<ModulePageBackground module="family" />
|
||
<view class="album-detail-header"><PageHeader title="相册详情" custom-back @back="returnToAlbums" /></view>
|
||
<view class="album-detail-content">
|
||
<view class="album-state-card">
|
||
<text>{{ stateCopy.title }}</text>
|
||
<text>{{ stateCopy.copy }}</text>
|
||
<AppButton block :label="stateCopy.action" @click="returnToAlbums" />
|
||
</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 albumId = ref("");
|
||
const hasValidContext = computed(() => /^[1-9]\d*$/.test(genealogyId.value) && /^[1-9]\d*$/.test(albumId.value));
|
||
const stateCopy = computed(() => hasValidContext.value
|
||
? { title: "照片墙待后端字段合同", copy: "照片列表没有声明照片 ID、OSS 访问地址、标题、说明或相册展示字段；页面已停止展示本地图片和本地预览。", action: "返回相册列表" }
|
||
: { title: "相册入口无效", copy: "没有取得有效家谱或相册标识，页面不会回退到其他相册。", action: "返回上一页" },
|
||
);
|
||
onLoad((query) => {
|
||
genealogyId.value = String(query?.genealogyId || "");
|
||
albumId.value = String(query?.albumId || "");
|
||
});
|
||
const returnToAlbums = () => /^[1-9]\d*$/.test(genealogyId.value)
|
||
? returnTo("F07", { genealogyId: genealogyId.value })
|
||
: goBack();
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||
.album-detail-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||
.album-detail-header, .album-detail-content { z-index: 1; }
|
||
.album-detail-content { padding: 22rpx 24rpx calc(48rpx + env(safe-area-inset-bottom)); }
|
||
.album-state-card { @include adaptive.adaptive-family-panel; width: 100%; min-height: 430rpx; padding: 104rpx 40rpx 62rpx; box-sizing: border-box; text-align: center; }
|
||
.album-state-card text { display: block; }
|
||
.album-state-card text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 36rpx; font-weight: 700; }
|
||
.album-state-card text:nth-child(2) { margin-top: 10rpx; color: $ink-muted; font-size: 23rpx; line-height: 1.6; }
|
||
.album-state-card .app-button { margin-top: 34rpx; }
|
||
</style>
|