完成50%

pages/family/f08-album-detail.vue

@@ -2,27 +2,25 @@
 <template>
   <view class="album-detail-page" :class="`album-state--${albumState}`">
     <ModulePageBackground module="family" />
-    <view class="album-detail-header"><PageHeader title="相册详情" /></view>
+    <view class="album-detail-header"><PageHeader title="相册详情" custom-back @back="requestBack" /></view>
 
     <view class="album-detail-content">
       <view v-if="albumState === 'expired'" class="album-expired-state">
         <view class="album-state-card__body">
           <text class="album-state-card__eyebrow">相册状态</text>
-          <text class="album-state-card__title">相册已失效</text>
-          <text class="album-state-card__copy">这个相册已无法查看</text>
-          <AppButton block label="返回相册列表" @click="returnToAlbums" />
+          <text class="album-state-card__title">相册已失效或入口无效</text>
+          <text class="album-state-card__copy">当前家谱中没有找到这本相册，页面不会回退到其他相册。</text>
+          <AppButton block :label="genealogyId ? '返回相册列表' : '返回上一页'" @click="returnToAlbums" />
         </view>
       </view>
 
       <template v-else>
         <view class="album-heading">
-          <text class="album-heading__eyebrow">家族影像 · 2024</text>
-          <text class="album-heading__title">2024 春节团圆</text>
-          <text class="album-heading__copy"
-            >一家人围坐团圆，让今朝欢聚与祖居旧影留在同一本相册里。</text
-          >
+          <text class="album-heading__eyebrow">家族影像</text>
+          <text class="album-heading__title">{{ album.name }}</text>
+          <text class="album-heading__copy">{{ album.description }}</text>
           <text class="album-heading__count"
-            >{{ albumState === "empty" ? "0 张照片" : "5 张照片" }}</text
+            >{{ albumState === "empty" ? "0 张照片" : `${photos.length} 张照片` }}</text
           >
         </view>
 
@@ -102,20 +100,23 @@ import { onBackPress, onLoad } from "@dcloudio/uni-app";
 import AppButton from "@/components/AppButton.vue";
 import ModulePageBackground from "@/components/ModulePageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
+import { findFamilyAlbumFixture } from "@/data/mock.js";
+import {
+  goBack,
+  handleBackPress,
+  openPage,
+  returnTo,
+  runBackGuard,
+} from "@/utils/navigation.js";
 
 const albumState = ref("normal");
+const genealogyId = ref("");
 const albumId = ref("");
+const album = ref(null);
+const photos = ref([]);
 const previewVisible = ref(false);
 const previewIndex = ref(0);
 
-const photos = [
-  { src: "/static/assets/modules/family/f08/f08-reunion-hero.png", alt: "春节团圆时三代家人的合影", caption: "除夕团圆 · 2024" },
-  { src: "/static/assets/modules/family/f08/f08-family-portrait.png", alt: "家人在院落前的春节合影", caption: "院前合影 · 2024" },
-  { src: "/static/assets/modules/family/f08/f08-reunion-table.png", alt: "家人围坐吃年夜饭", caption: "围桌守岁 · 2024" },
-  { src: "/static/assets/modules/family/f08/f08-ancestral-home.png", alt: "祖居院落的复古旧照", caption: "祖居旧影 · 1968" },
-  { src: "/static/assets/modules/family/f08/f08-ancestral-portrait.png", alt: "老一辈家人在祖居门前的合影", caption: "门前合影 · 1972" },
-];
-
 const openPreview = (index) => {
   previewIndex.value = index;
   previewVisible.value = true;
@@ -128,16 +129,27 @@ const closePreview = () => {
 };
 
 const toUpload = () =>
-  uni.navigateTo({
-    url: `/pages/family/f09-media-upload?albumId=${albumId.value}`,
-  });
+  openPage(
+    "F09",
+    { genealogyId: genealogyId.value, albumId: albumId.value },
+    "F08",
+  );
 
-const returnToAlbums = () => {
-  uni.redirectTo({ url: "/pages/family/f07-album-list" });
-};
+const returnToAlbums = () =>
+  genealogyId.value
+    ? returnTo("F07", { genealogyId: genealogyId.value })
+    : goBack();
 
 onLoad((query) => {
-  albumId.value = query.albumId || "reunion";
+  genealogyId.value = String(query.genealogyId || "");
+  albumId.value = String(query.albumId || "");
+  album.value = findFamilyAlbumFixture(genealogyId.value, albumId.value);
+  photos.value = album.value?.photos || [];
+  if (!album.value) {
+    albumState.value = "expired";
+    previewVisible.value = false;
+    return;
+  }
   albumState.value =
     query.state === "empty"
       ? "empty"
@@ -149,11 +161,13 @@ onLoad((query) => {
   previewVisible.value = albumState.value === "preview";
 });
 
-onBackPress(() => {
-  if (!previewVisible.value) return false;
-  closePreview();
-  return true;
-});
+const requestBack = () =>
+  runBackGuard({
+    transientOpen: previewVisible.value,
+    "close-transient": closePreview,
+  });
+
+onBackPress((event) => handleBackPress(event, requestBack));
 
 </script>