feat: 完成前端业务闭环与后端联调

This commit is contained in:
2026-08-24 23:37:56 +08:00
parent c59e36f933
commit 9ad572907b
175 changed files with 10711 additions and 1740 deletions
+29 -12
View File
@@ -1,20 +1,20 @@
<template>
<view class="message-page">
<ModulePageBackground module="notification" />
<view class="page-header"><PageHeader root title="消息中心" :action="unreadCount > 0 ? '设为已读' : ''" @action="requestMarkAllRead" /></view>
<view class="page-header"><PageHeader :root="!sourceKey" :custom-back="Boolean(sourceKey)" title="消息中心" :action="unreadCount > 0 ? '设为已读' : ''" @back="returnToSource" @action="requestMarkAllRead" /></view>
<view class="page-content">
<view v-if="notificationListState === 'loading'" class="state-card"><AppLoading text="正在读取消息通知" /></view>
<view v-else-if="notificationListState === 'error'" class="state-card">
<text>暂时无法读取消息状态</text>
<text>{{ notificationListError || "请检查网络后重新加载。" }}</text>
<AppButton block type="secondary" label="重新加载" @click="loadNotifications" />
<AppButton block label="返回我的" @click="returnToProfile" />
<AppButton block :label="returnLabel" @click="returnToSource" />
</view>
<view v-else-if="!notifications.length" class="state-card message-status-card">
<text>当前没有通知</text>
<text>新的家谱动态审核和活动消息会在这里展示</text>
<text v-if="markAllReadError" class="message-operation-error">{{ markAllReadError }}</text>
<AppButton block type="secondary" label="返回我的" @click="returnToProfile" />
<AppButton block type="secondary" :label="returnLabel" @click="returnToSource" />
</view>
<view v-else class="message-list">
<view
@@ -39,7 +39,7 @@
</view>
</view>
<AppPromotionStrip placement="message_bottom" title="消息页推荐" />
<AppTabbar active="profile" />
<AppTabbar :active="sourceTab" />
<AppDialog
:visible="markAllVisible"
eyebrow="消息状态"
@@ -56,8 +56,8 @@
</template>
<script setup>
import { ref } from "vue";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import { computed, ref } from "vue";
import { onBackPress, onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import AppButton from "@/components/AppButton.vue";
import AppDialog from "@/components/AppDialog.vue";
import AppLoading from "@/components/AppLoading.vue";
@@ -71,7 +71,7 @@ import {
} from "@/services/api/request-controller.js";
import { notificationApi } from "@/services/api/notification-service.js";
import { getRequestErrorMessage } from "@/services/api/request-error-message.js";
import { goRoot, openPage } from "@/utils/navigation/gateway.js";
import { goBack, goRoot, handleBackPress, openPage } from "@/utils/navigation/gateway.js";
const unreadCount = ref(0);
const notifications = ref([]);
@@ -82,8 +82,12 @@ const markAllReadController = createRequestController();
const markAllVisible = ref(false);
const markAllSubmitting = ref(false);
const markAllReadError = ref("");
const sourceKey = ref("");
let isPageActive = true;
const returnLabel = computed(() => (sourceKey.value ? "返回上一页" : "返回我的"));
const sourceTab = computed(() => (sourceKey.value === "G01" ? "genealogy" : "profile"));
const loadNotifications = async () => {
notificationListController.abort();
notificationListState.value = "loading";
@@ -126,12 +130,23 @@ const confirmMarkAllRead = async () => {
}
};
const returnToProfile = () => goRoot("M01");
const returnToSource = () => (sourceKey.value ? goBack() : goRoot("M01"));
const closeMarkAllDialog = () => {
if (markAllSubmitting.value) return false;
markAllVisible.value = false;
return true;
};
const openNotification = (item) => openPage("N02", { id: item.notificationId });
onLoad(loadNotifications);
onLoad((query) => {
sourceKey.value = String(query?.sourceKey || "");
loadNotifications();
});
onShow(() => {
if (notificationListState.value !== "loading") loadNotifications();
});
onBackPress((event) =>
markAllVisible.value ? handleBackPress(event, closeMarkAllDialog) : false,
);
onUnload(() => {
isPageActive = false;
notificationListController.abort();
@@ -153,7 +168,7 @@ onUnload(() => {
}
.page-content {
flex: 1;
padding: 18rpx 24rpx 190rpx;
padding: 18rpx 24rpx calc(190rpx + env(safe-area-inset-bottom));
}
.state-card {
box-sizing: border-box;
@@ -182,7 +197,9 @@ onUnload(() => {
}
.message-list {
display: grid;
gap: 16rpx;
gap: 20rpx;
box-sizing: border-box;
padding: 28rpx 24rpx;
@include adaptive-notification-content;
}
.message-row {
@@ -192,7 +209,7 @@ onUnload(() => {
padding: 24rpx;
border: 1rpx solid rgba(128, 89, 49, 0.26);
border-radius: 12rpx;
background: rgba(255, 252, 245, 0.78);
background: rgba($paper, 0.9);
}
.message-row__body { min-width: 0; flex: 1; }
.message-row__title-line { display: flex; gap: 12rpx; align-items: center; }