修改未完成

2026-07-13 17:31:05 +08:00
parent 965fff1621
commit 355f47976a
95 changed files with 1112 additions and 721 deletions
@@ -0,0 +1,55 @@
+<!-- 页面编号：N-01；用途：消息中心。 -->
+<template>
+  <view class="page-shell notification-page">
+    <PageHeader title="消息通知" action="全部已读" @action="readAll" />
+    <view class="notice-intro"><text>{{ loadError || '与家谱相关的提醒都会留在这里。' }}</text></view>
+    <view class="notice-list"><view v-for="item in list" :key="item.id" class="notice-row" :class="{ unread: item.unread }" @click="read(item)"><view class="notice-dot"></view><view class="notice-copy"><text class="notice-title">{{ item.title }}</text><text class="notice-content">{{ item.content }}</text></view><text class="notice-time">{{ item.time }}</text></view></view>
+  </view>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import PageHeader from '@/components/PageHeader.vue'
+import { appApi } from '@/utils/api.js'
+
+const list = ref([])
+const loadError = ref('')
+onMounted(async () => {
+  try {
+    list.value = await appApi.getNotifications()
+  } catch (error) {
+    loadError.value = error.message || '通知加载失败。'
+  }
+})
+const read = async (item) => {
+  if (!item.unread) return
+  try {
+    await appApi.markNotificationRead(item.id)
+    item.unread = false
+  } catch (error) {
+    uni.showToast({ title: error.message || '标记已读失败', icon: 'none' })
+  }
+}
+const readAll = async () => {
+  try {
+    await appApi.markAllNotificationsRead()
+    list.value.forEach((item) => { item.unread = false })
+    uni.showToast({ title: '已全部标记为已读', icon: 'none' })
+  } catch (error) {
+    uni.showToast({ title: error.message || '操作失败，请稍后重试', icon: 'none' })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.notification-page { padding-bottom: 36rpx; }
+.notice-intro { padding: 28rpx 30rpx; background: #efe3cd; color: $ink-muted; font-size: 24rpx; }
+.notice-list { margin: 0 28rpx; }
+.notice-row { display: flex; align-items: flex-start; gap: 16rpx; padding: 28rpx 0; border-bottom: 1rpx solid #e4d8c0; }
+.notice-dot { width: 14rpx; height: 14rpx; flex: 0 0 auto; margin-top: 13rpx; border-radius: 50%; background: transparent; }
+.notice-row.unread .notice-dot { background: $brand-red; }
+.notice-copy { min-width: 0; flex: 1; }
+.notice-title { display: block; color: $ink; font-size: 30rpx; font-weight: 700; }
+.notice-content { display: block; margin-top: 10rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.55; }
+.notice-time { flex: 0 0 auto; color: #a19482; font-size: 20rpx; }
+</style>