修改完成

2026-07-21 07:53:03 +08:00
parent 01d246c47b
commit ff60119277
172 changed files with 7982 additions and 2999 deletions
@@ -1,5 +1,111 @@
-<!-- 页面编号：N-02；用途：消息详情、已读与空状态。 -->
-<template><ModulePage page-id="n02" /></template>
+<!-- 页面编号：N-02；用途：消息详情、已读状态与上下文操作。 -->
+<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="notice-content page-layer">
+      <AppLoading v-if="noticeState === 'loading'" text="正在读取消息" description="请稍候，正在整理消息详情。" />
+
+      <view v-else-if="noticeState === 'expired'" class="paper-panel state-card">
+        <text class="state-title">这条消息已失效</text>
+        <text class="state-copy">消息可能已撤回或超过保留期限，请返回消息中心查看其他内容。</text>
+        <AppButton block label="返回消息中心" @click="backToMessages" />
+      </view>
+
+      <template v-else>
+        <view class="paper-panel notice-card">
+          <view class="notice-meta">
+            <text :class="{ 'is-unread': !noticeDetail.read }">{{ noticeDetail.read ? "已读" : "未读提醒" }}</text>
+            <text>{{ noticeDetail.time }}</text>
+          </view>
+          <text class="notice-title">{{ noticeDetail.title }}</text>
+          <text class="notice-body">{{ noticeDetail.body }}</text>
+          <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" />
+        </view>
+      </template>
+    </view>
+    <AppToast :visible="toastVisible" :message="toastMessage" />
+  </view>
+</template>
+
 <script setup>
-import ModulePage from "@/components/ModulePage.vue";
+import { onUnmounted, ref } from "vue";
+import { 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";
+
+const noticeState = ref("loading");
+const toastVisible = ref(false);
+const toastMessage = 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: "前往入谱审核",
+});
+
+onLoad((query) => {
+  if (query.state === "expired") {
+    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: "查看我的家谱",
+    };
+  }
+  noticeState.value = "ready";
+});
+
+const showToast = (message) => {
+  toastMessage.value = message;
+  toastVisible.value = true;
+  if (toastTimer) clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => (toastVisible.value = false), 1800);
+};
+const markAsRead = () => {
+  noticeDetail.value.read = true;
+  showToast("已标记为已读");
+};
+const openNoticeTarget = () => uni.navigateTo({ url: noticeDetail.value.target });
+const backToMessages = () => uni.navigateBack();
+onUnmounted(() => toastTimer && clearTimeout(toastTimer));
 </script>
+
+<style scoped lang="scss">
+.notice-detail-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
+.page-layer { z-index: 1; }
+.notice-content { flex: 1; padding: 28rpx 30rpx 72rpx; }
+.paper-panel { background: url("/static/assets/modules/notification/transparent/n01-notice-card.png") center / 100% 100% no-repeat; }
+.notice-card { min-height: 430rpx; padding: 54rpx 52rpx; box-sizing: border-box; }
+.notice-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8rpx 20rpx; color: $ink-muted; font-size: 22rpx; }
+.notice-meta .is-unread { color: $brand-red; font-weight: 700; }
+.notice-title { display: block; margin-top: 24rpx; color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 38rpx; font-weight: 700; overflow-wrap: anywhere; }
+.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; }
+.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; }
+@media (max-width: 340px) { .notice-content { padding-right: 22rpx; padding-left: 22rpx; } .notice-card { padding-right: 40rpx; padding-left: 40rpx; } }
+</style>