Review changes batch 6 of 6
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user