290 lines
7.2 KiB
Vue
290 lines
7.2 KiB
Vue
<!-- 页面编号：N-01；用途：消息中心、已读操作、空态与失败状态。 -->
|
||
<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>
|