Review changes batch 6 of 6

2026-07-20 06:52:33 +08:00
parent db97d3da27
commit 5a31a75da0
160 changed files with 9206 additions and 572 deletions
@@ -1,4 +1,289 @@
 <!-- 页面编号：N-01；用途：消息中心、已读操作、空态与失败状态。 -->
-<template><view class="notice-page" :class="{'notice-state--list':noticeState==='list','notice-state--empty':noticeState==='empty','notice-state--error':noticeState==='error'}"><ModulePageBackground module="notification"/><view class="notice-page__header"><PageHeader title="消息中心" action="全部已读" @action="markAllRead"/></view><view class="notice-content"><template v-if="noticeState==='list'"><view v-for="item in notices" :key="item.id" class="notice-card" @click="readNotice(item)"><image src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill"/><view><text>{{item.unread?'未读提醒':'已读'}} · {{item.time}}</text><text>{{item.title}}</text><text>{{item.content}}</text></view></view></template><view v-else class="notice-state-card"><image src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill"/><view><text>{{noticeState==='empty'?'暂时没有新消息':'消息中心暂不可用'}}</text><text>{{noticeState==='empty'?'家谱申请、审核结果和家族提醒会留在这里。':'请稍后重新进入，已读状态不会受到影响。'}}</text></view></view><AppButton type="secondary" :label="noticeState==='error'?'重新查看':'前往入谱审核'" @click="noticeState==='error'?noticeState='list':toReview()"/></view><AppToast :visible="toastVisible" :message="toastMessage"/></view></template>
-<script setup>import{onUnmounted,ref}from'vue';import{onLoad}from'@dcloudio/uni-app';import AppButton from'@/components/AppButton.vue';import AppToast from'@/components/AppToast.vue';import ModulePageBackground from'@/components/ModulePageBackground.vue';import PageHeader from'@/components/PageHeader.vue';import{genealogyContext}from'@/utils/genealogy-context.js';const genealogyId=ref('');const noticeState=ref('loading');const toastVisible=ref(false);const toastMessage=ref('');let toastTimer=null;const notices=ref([{id:1,title:'申请待审核',content:'汤志成申请加入汤氏家谱，请核实亲属关系。',time:'今天 10:28',unread:true},{id:2,title:'入谱申请已通过',content:'你申请加入汝南汤氏家谱的请求已通过。',time:'昨天 18:10',unread:false}]);onLoad(query=>{genealogyId.value=query.genealogyId||genealogyContext.getCurrentGenealogyId()||'';noticeState.value=query.state==='empty'?'empty':query.state==='error'?'error':'list'});const readNotice=item=>{item.unread=false};const showToast=message=>{toastMessage.value=message;toastVisible.value=true;if(toastTimer)clearTimeout(toastTimer);toastTimer=setTimeout(()=>{toastVisible.value=false;toastTimer=null},1800)};const markAllRead=()=>{notices.value.forEach(x=>x.unread=false);showToast('已全部标记为已读')};const toReview=()=>uni.navigateTo({url:`/pages/genealogy/g10-application-review?genealogyId=${genealogyId.value}`});onUnmounted(()=>{if(toastTimer)clearTimeout(toastTimer)})</script>
-<style scoped lang="scss">.notice-page{position:relative;min-height:100vh;overflow:hidden;background:$paper}.notice-page__header,.notice-content{position:relative;z-index:2}.notice-content{padding:24rpx}.notice-card,.notice-state-card{position:relative;width:100%;height:calc((100vw - 24px)*.34286);min-height:220rpx;margin-bottom:16rpx}.notice-card>image,.notice-state-card>image{position:absolute;inset:0;width:100%;height:100%}.notice-card>view{position:absolute;inset:17% 9%;z-index:1}.notice-card text{display:block}.notice-card text:first-child{color:$brand-red;font-size:18rpx;letter-spacing:2rpx}.notice-card text:nth-child(2){margin-top:6rpx;color:$ink;font-family:STKaiti,KaiTi,serif;font-size:28rpx;font-weight:700}.notice-card text:last-child{margin-top:7rpx;color:#62584c;font-size:22rpx;font-weight:500}.notice-state-card{margin-top:70rpx}.notice-state-card>view{position:absolute;inset:25% 12%;z-index:1;text-align:center}.notice-state-card text{display:block}.notice-state-card text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:30rpx;font-weight:700}.notice-state-card text:last-child{margin-top:13rpx;color:#62584c;font-size:22rpx}.notice-content>.app-button{margin:20rpx auto 0}</style>
+<template>
+  <view
+    class="notice-page"
+    :class="{
+      'notice-state--loading': noticeState === 'loading',
+      'notice-state--list': noticeState === 'list',
+      'notice-state--empty': noticeState === 'empty',
+      'notice-state--error': noticeState === 'error',
+    }"
+  >
+    <ModulePageBackground module="notification" />
+    <view class="notice-page__header">
+      <PageHeader
+        title="消息中心"
+        :action="noticeState === 'list' ? '全部已读' : ''"
+        @action="markAllRead"
+      />
+    </view>
+
+    <view class="notice-content">
+      <AppLoading
+        v-if="noticeState === 'loading'"
+        text="正在整理消息"
+        description="请稍候，正在同步家谱申请与家族提醒。"
+      />
+
+      <template v-else-if="noticeState === 'list'">
+        <view class="notice-list">
+          <view
+            v-for="item in notices"
+            :key="item.id"
+            class="notice-card"
+            role="button"
+            :aria-label="`${item.unread ? '未读' : '已读'}消息：${item.title}`"
+            @click="readNotice(item)"
+          >
+            <image
+              class="notice-card__skin"
+              src="/static/assets/modules/notification/transparent/n01-notice-card.png"
+              mode="scaleToFill"
+            />
+            <view class="notice-card__copy">
+              <text
+                class="notice-card__status"
+                :class="{ 'is-unread': item.unread }"
+                >{{ item.unread ? "未读提醒" : "已读" }} · {{ item.time }}</text
+              >
+              <text class="notice-card__title">{{ item.title }}</text>
+              <text class="notice-card__summary">{{ item.content }}</text>
+            </view>
+          </view>
+        </view>
+        <AppButton
+          class="notice-review-action"
+          block
+          type="secondary"
+          label="前往入谱审核"
+          @click="toReview"
+        />
+      </template>
+
+      <view v-else class="notice-state-card">
+        <image
+          class="notice-state-card__skin"
+          src="/static/assets/modules/notification/transparent/n01-notice-card.png"
+          mode="scaleToFill"
+        />
+        <view class="notice-state-card__copy">
+          <text class="notice-state-card__title">{{
+            noticeState === "empty" ? "暂时没有新消息" : "消息中心暂不可用"
+          }}</text>
+          <text class="notice-state-card__description">{{
+            noticeState === "empty"
+              ? "家谱申请、审核结果和家族提醒会留在这里。"
+              : "请稍后重新进入，已读状态不会受到影响。"
+          }}</text>
+        </view>
+        <AppButton
+          block
+          :type="noticeState === 'error' ? 'secondary' : 'primary'"
+          :label="noticeState === 'error' ? '重新查看' : '前往入谱审核'"
+          @click="noticeState === 'error' ? restoreList() : toReview()"
+        />
+      </view>
+    </view>
+
+    <AppToast :visible="toastVisible" :message="toastMessage" />
+  </view>
+</template>
+
+<script setup>
+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";
+import { genealogyContext } from "@/utils/genealogy-context.js";
+
+const genealogyId = ref("");
+const noticeState = ref("loading");
+const toastVisible = ref(false);
+const toastMessage = ref("");
+let toastTimer = null;
+
+const notices = ref([
+  {
+    id: 1,
+    title: "申请待审核",
+    content: "汤志成申请加入汤氏家谱，请核实亲属关系。",
+    time: "今天 10:28",
+    unread: true,
+  },
+  {
+    id: 2,
+    title: "入谱申请已通过",
+    content: "你申请加入汝南汤氏家谱的请求已通过。",
+    time: "昨天 18:10",
+    unread: false,
+  },
+]);
+
+onLoad((query) => {
+  genealogyId.value =
+    query.genealogyId || genealogyContext.getCurrentGenealogyId() || "";
+  noticeState.value =
+    query.state === "loading"
+      ? "loading"
+      : query.state === "empty"
+        ? "empty"
+        : query.state === "error"
+          ? "error"
+          : "list";
+});
+
+const readNotice = (item) => {
+  item.unread = false;
+};
+const restoreList = () => {
+  noticeState.value = "list";
+};
+const showToast = (message) => {
+  toastMessage.value = message;
+  toastVisible.value = true;
+  if (toastTimer) clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => {
+    toastVisible.value = false;
+    toastTimer = null;
+  }, 1800);
+};
+const markAllRead = () => {
+  notices.value.forEach((item) => {
+    item.unread = false;
+  });
+  showToast("已全部标记为已读");
+};
+const toReview = () =>
+  uni.navigateTo({
+    url: `/pages/genealogy/g10-application-review?genealogyId=${genealogyId.value}`,
+  });
+
+onUnmounted(() => {
+  if (toastTimer) clearTimeout(toastTimer);
+});
+</script>
+
+<style scoped lang="scss">
+.notice-page {
+  position: relative;
+  min-height: 100vh;
+  overflow-x: hidden;
+  background: $paper;
+}
+.notice-page__header,
+.notice-content {
+  position: relative;
+  z-index: 2;
+}
+.notice-content {
+  padding: 24rpx 28rpx 100rpx;
+}
+.notice-list {
+  display: flex;
+  flex-direction: column;
+  gap: 18rpx;
+}
+.notice-card {
+  position: relative;
+  width: 100%;
+  min-height: 220rpx;
+}
+.notice-card__skin {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.notice-card__copy {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  min-height: 220rpx;
+  box-sizing: border-box;
+  flex-direction: column;
+  justify-content: center;
+  padding: 30rpx 44rpx;
+}
+.notice-card__status {
+  display: block;
+  color: $ink-muted;
+  font-size: 21rpx;
+  font-weight: 600;
+  letter-spacing: 2rpx;
+}
+.notice-card__status.is-unread {
+  color: $brand-red;
+  font-weight: 700;
+}
+.notice-card__title {
+  display: block;
+  margin-top: 7rpx;
+  color: $ink;
+  font-family: STKaiti, KaiTi, serif;
+  font-size: 30rpx;
+  font-weight: 700;
+}
+.notice-card__summary {
+  display: block;
+  margin-top: 7rpx;
+  color: #62584c;
+  font-size: 23rpx;
+  font-weight: 500;
+  line-height: 1.45;
+}
+.notice-review-action {
+  margin: 30rpx auto 0;
+}
+.notice-state-card {
+  position: relative;
+  margin-top: 38rpx;
+  text-align: center;
+}
+.notice-state-card__skin {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  height: 220rpx;
+  min-height: 118px;
+}
+.notice-state-card__copy {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  height: 220rpx;
+  min-height: 118px;
+  box-sizing: border-box;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 54rpx;
+}
+.notice-state-card__title {
+  display: block;
+  color: $ink;
+  font-family: STKaiti, KaiTi, serif;
+  font-size: 31rpx;
+  font-weight: 700;
+}
+.notice-state-card__description {
+  display: block;
+  margin-top: 13rpx;
+  color: $ink-muted;
+  font-size: 23rpx;
+  line-height: 1.5;
+}
+.notice-state-card .app-button {
+  margin: 20rpx auto 0;
+}
+@media (min-width: 400px) {
+  .notice-content {
+    padding-right: 32rpx;
+    padding-left: 32rpx;
+  }
+}
+</style>
@@ -1,3 +1,5 @@
 <!-- 页面编号：N-02；用途：消息详情、已读与空状态。 -->
 <template><ModulePage page-id="n02" /></template>
-<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
+<script setup>
+import ModulePage from "@/components/ModulePage.vue";
+</script>