完成50%

pages/notification/n02-message-detail.vue

@@ -2,7 +2,7 @@
 <template>
   <view class="notice-detail-page" :class="{ 'notice-state--ready': noticeState === 'ready', 'notice-state--loading': noticeState === 'loading', 'notice-state--expired': noticeState === 'expired' }">
     <ModulePageBackground module="notification" />
-    <view class="page-layer"><PageHeader title="消息详情" /></view>
+    <view class="page-layer"><PageHeader title="消息详情" custom-back @back="backToMessages" /></view>
 
     <view class="notice-content page-layer">
       <AppLoading v-if="noticeState === 'loading'" text="正在读取消息" description="请稍候，正在整理消息详情。" />
@@ -16,7 +16,7 @@
       <template v-else>
         <view class="paper-panel notice-card">
           <view class="notice-meta">
-            <text :class="{ 'is-unread': !noticeDetail.read }">{{ noticeDetail.read ? "已读" : "未读提醒" }}</text>
+            <text :class="{ 'is-unread': noticeDetail.unread }">{{ noticeDetail.unread ? "未读提醒" : "已读" }}</text>
             <text>{{ noticeDetail.time }}</text>
           </view>
           <text class="notice-title">{{ noticeDetail.title }}</text>
@@ -24,8 +24,9 @@
           <text class="notice-source">来自：{{ noticeDetail.source }}</text>
         </view>
         <view class="action-stack">
-          <AppButton v-if="!noticeDetail.read" block label="标记已读" @click="markAsRead" />
-          <AppButton v-if="noticeDetail.target" block type="secondary" :label="noticeDetail.targetLabel" @click="openNoticeTarget" />
+          <AppButton v-if="noticeDetail.unread" block label="标记已读" @click="markAsRead" />
+          <AppButton v-if="noticeDetail.targetType" block type="secondary" :label="noticeDetail.targetLabel" @click="openNoticeTarget" />
+          <text v-if="targetError" class="target-error" role="alert">{{ targetError }}</text>
         </view>
       </template>
     </view>
@@ -35,45 +36,43 @@
 
 <script setup>
 import { onUnmounted, ref } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
+import { onBackPress, onLoad } from "@dcloudio/uni-app";
 import AppButton from "@/components/AppButton.vue";
 import AppLoading from "@/components/AppLoading.vue";
 import AppToast from "@/components/AppToast.vue";
 import ModulePageBackground from "@/components/ModulePageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
+import {
+  findNotificationFixture,
+  getGenealogyFixtureAccess,
+} from "@/data/mock.js";
+import {
+  handleBackPress,
+  openNoticeTarget as navigateNoticeTarget,
+  returnTo,
+} from "@/utils/navigation.js";
 
 const noticeState = ref("loading");
 const toastVisible = ref(false);
 const toastMessage = ref("");
+const targetError = ref("");
 let toastTimer = null;
-const noticeDetail = ref({
-  id: "review-1",
-  title: "申请待审核",
-  body: "汤志成申请加入汤氏家谱，请核实申请人的亲属关系与世代信息后完成审核。",
-  time: "今天 10:28",
-  source: "汝南汤氏家谱",
-  read: false,
-  target: "/pages/genealogy/g10-application-review",
-  targetLabel: "前往入谱审核",
-});
+const noticeId = ref("");
+const noticeDetail = ref(null);
 
 onLoad((query) => {
-  if (query.state === "expired") {
+  noticeId.value = String(query.id || "");
+  if (query.state === "loading") return;
+  const selectedNotice = findNotificationFixture(noticeId.value);
+  if (
+    query.state === "expired" ||
+    !noticeId.value ||
+    !selectedNotice
+  ) {
     noticeState.value = "expired";
     return;
   }
-  if (query.id === "approved") {
-    noticeDetail.value = {
-      id: "approved",
-      title: "入谱申请已通过",
-      body: "你申请加入汝南汤氏家谱的请求已通过，现在可以查看家谱与家族动态。",
-      time: "昨天 18:10",
-      source: "汝南汤氏家谱",
-      read: true,
-      target: "/pages/genealogy/g01-my-genealogies",
-      targetLabel: "查看我的家谱",
-    };
-  }
+  noticeDetail.value = selectedNotice;
   noticeState.value = "ready";
 });
 
@@ -84,11 +83,39 @@ const showToast = (message) => {
   toastTimer = setTimeout(() => (toastVisible.value = false), 1800);
 };
 const markAsRead = () => {
-  noticeDetail.value.read = true;
+  if (!noticeDetail.value) return;
+  noticeDetail.value.unread = false;
   showToast("已标记为已读");
 };
-const openNoticeTarget = () => uni.navigateTo({ url: noticeDetail.value.target });
-const backToMessages = () => uni.navigateBack();
+const getTargetAccessError = (detail) => {
+  const genealogyId = detail?.targetParams?.genealogyId;
+  const accessRole = getGenealogyFixtureAccess(genealogyId).accessRole;
+  if (detail?.targetType === "GENEALOGY_REVIEW" && accessRole !== "owner") {
+    return "当前账号没有处理这条审核消息的权限。";
+  }
+  if (
+    detail?.targetType === "GENEALOGY_HOME" &&
+    !["owner", "member"].includes(accessRole)
+  ) {
+    return "这条消息关联的家谱已不可访问。";
+  }
+  return "";
+};
+const openNoticeTarget = async () => {
+  targetError.value = getTargetAccessError(noticeDetail.value);
+  if (targetError.value) return false;
+  try {
+    return await navigateNoticeTarget(
+      noticeDetail.value.targetType,
+      noticeDetail.value.targetParams,
+    );
+  } catch (_error) {
+    targetError.value = "这条消息的业务入口已失效，请返回消息中心。";
+    return false;
+  }
+};
+const backToMessages = () => returnTo("N01", {});
+onBackPress((event) => handleBackPress(event, backToMessages));
 onUnmounted(() => toastTimer && clearTimeout(toastTimer));
 </script>
 
@@ -106,6 +133,7 @@ onUnmounted(() => toastTimer && clearTimeout(toastTimer));
 .notice-body { display: block; margin-top: 22rpx; color: #5f4a38; font-size: 25rpx; line-height: 1.75; overflow-wrap: anywhere; }
 .notice-source { display: block; margin-top: 28rpx; color: $ink-muted; font-size: 22rpx; overflow-wrap: anywhere; }
 .action-stack { display: flex; flex-direction: column; gap: 18rpx; margin-top: 28rpx; }
+.target-error { display: block; color: #b42318; font-size: 22rpx; line-height: 1.5; text-align: center; }
 .state-card { min-height: 340rpx; padding: 72rpx 50rpx 48rpx; box-sizing: border-box; text-align: center; }
 .state-title { display: block; color: $ink; font-size: 34rpx; font-weight: 700; }
 .state-copy { display: block; margin: 18rpx 0 28rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }