完成70%
This commit is contained in:
@@ -1,141 +1,11 @@
|
||||
<!-- 页面编号：N-02；用途：消息详情、已读状态与上下文操作。 -->
|
||||
<!-- 页面编号：N-02；用途：通知详情。没有详情读取 operation 时保持关闭。 -->
|
||||
<template>
|
||||
<view class="notice-detail-page" :class="{ 'notice-state--ready': noticeState === 'ready', 'notice-state--loading': noticeState === 'loading', 'notice-state--expired': noticeState === 'expired' }">
|
||||
<ModulePageBackground module="notification" />
|
||||
<view class="page-layer"><PageHeader title="消息详情" custom-back @back="backToMessages" /></view>
|
||||
|
||||
<view class="notice-content page-layer">
|
||||
<AppLoading v-if="noticeState === 'loading'" text="正在读取消息" description="请稍候，正在整理消息详情。" />
|
||||
|
||||
<view v-else-if="noticeState === 'expired'" class="paper-panel state-card">
|
||||
<text class="state-title">这条消息已失效</text>
|
||||
<text class="state-copy">消息可能已撤回或超过保留期限，请返回消息中心查看其他内容。</text>
|
||||
<AppButton block label="返回消息中心" @click="backToMessages" />
|
||||
</view>
|
||||
|
||||
<template v-else>
|
||||
<view class="paper-panel notice-card">
|
||||
<view class="notice-meta">
|
||||
<text :class="{ 'is-unread': noticeDetail.unread }">{{ noticeDetail.unread ? "未读提醒" : "已读" }}</text>
|
||||
<text>{{ noticeDetail.time }}</text>
|
||||
</view>
|
||||
<text class="notice-title">{{ noticeDetail.title }}</text>
|
||||
<text class="notice-body">{{ noticeDetail.body }}</text>
|
||||
<text class="notice-source">来自：{{ noticeDetail.source }}</text>
|
||||
</view>
|
||||
<view class="action-stack">
|
||||
<AppButton v-if="noticeDetail.unread" block label="标记已读" @click="markAsRead" />
|
||||
<AppButton v-if="noticeDetail.targetType" block type="secondary" :label="noticeDetail.targetLabel" @click="openNoticeTarget" />
|
||||
<text v-if="targetError" class="target-error" role="alert">{{ targetError }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<AppToast :visible="toastVisible" :message="toastMessage" />
|
||||
</view>
|
||||
<view class="message-detail-page"><ModulePageBackground module="notification" /><view class="page-header"><PageHeader title="消息详情" custom-back @back="backToMessages" /></view><view class="page-content"><view class="state-card"><text>消息详情暂未开放</text><text>Apifox 当前只有通知列表、单条标已读和全部标已读 operation，没有消息详情读取 owner；页面不再从 fixture 展示正文、来源或业务跳转。</text><AppButton block label="返回消息中心" @click="backToMessages" /></view></view></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onUnmounted, ref } from "vue";
|
||||
import { onBackPress, 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 {
|
||||
findNotificationFixture,
|
||||
getGenealogyFixtureAccess,
|
||||
} from "@/data/mock.js";
|
||||
import {
|
||||
handleBackPress,
|
||||
openNoticeTarget as navigateNoticeTarget,
|
||||
returnTo,
|
||||
} from "@/utils/navigation.js";
|
||||
|
||||
const noticeState = ref("loading");
|
||||
const toastVisible = ref(false);
|
||||
const toastMessage = ref("");
|
||||
const targetError = ref("");
|
||||
let toastTimer = null;
|
||||
const noticeId = ref("");
|
||||
const noticeDetail = ref(null);
|
||||
|
||||
onLoad((query) => {
|
||||
noticeId.value = String(query.id || "");
|
||||
if (query.state === "loading") return;
|
||||
const selectedNotice = findNotificationFixture(noticeId.value);
|
||||
if (
|
||||
query.state === "expired" ||
|
||||
!noticeId.value ||
|
||||
!selectedNotice
|
||||
) {
|
||||
noticeState.value = "expired";
|
||||
return;
|
||||
}
|
||||
noticeDetail.value = selectedNotice;
|
||||
noticeState.value = "ready";
|
||||
});
|
||||
|
||||
const showToast = (message) => {
|
||||
toastMessage.value = message;
|
||||
toastVisible.value = true;
|
||||
if (toastTimer) clearTimeout(toastTimer);
|
||||
toastTimer = setTimeout(() => (toastVisible.value = false), 1800);
|
||||
};
|
||||
const markAsRead = () => {
|
||||
if (!noticeDetail.value) return;
|
||||
noticeDetail.value.unread = false;
|
||||
showToast("已标记为已读");
|
||||
};
|
||||
const getTargetAccessError = (detail) => {
|
||||
const genealogyId = detail?.targetParams?.genealogyId;
|
||||
const accessRole = getGenealogyFixtureAccess(genealogyId).accessRole;
|
||||
if (detail?.targetType === "GENEALOGY_REVIEW" && accessRole !== "owner") {
|
||||
return "当前账号没有处理这条审核消息的权限。";
|
||||
}
|
||||
if (
|
||||
detail?.targetType === "GENEALOGY_HOME" &&
|
||||
!["owner", "member"].includes(accessRole)
|
||||
) {
|
||||
return "这条消息关联的家谱已不可访问。";
|
||||
}
|
||||
return "";
|
||||
};
|
||||
const openNoticeTarget = async () => {
|
||||
targetError.value = getTargetAccessError(noticeDetail.value);
|
||||
if (targetError.value) return false;
|
||||
try {
|
||||
return await navigateNoticeTarget(
|
||||
noticeDetail.value.targetType,
|
||||
noticeDetail.value.targetParams,
|
||||
);
|
||||
} catch (_error) {
|
||||
targetError.value = "这条消息的业务入口已失效，请返回消息中心。";
|
||||
return false;
|
||||
}
|
||||
};
|
||||
const backToMessages = () => returnTo("N01", {});
|
||||
onBackPress((event) => handleBackPress(event, backToMessages));
|
||||
onUnmounted(() => toastTimer && clearTimeout(toastTimer));
|
||||
import AppButton from "@/components/AppButton.vue"; import ModulePageBackground from "@/components/ModulePageBackground.vue"; import PageHeader from "@/components/PageHeader.vue"; import { returnTo } from "@/utils/navigation.js"; const backToMessages=()=>returnTo("N01");
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
|
||||
.notice-detail-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||||
.page-layer { z-index: 1; }
|
||||
.notice-content { flex: 1; padding: 28rpx 30rpx 72rpx; }
|
||||
.paper-panel { @include adaptive.adaptive-notification-content; }
|
||||
.notice-card { min-height: 430rpx; padding: 54rpx 52rpx; box-sizing: border-box; }
|
||||
.notice-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8rpx 20rpx; color: $ink-muted; font-size: 22rpx; }
|
||||
.notice-meta .is-unread { color: $brand-red; font-weight: 700; }
|
||||
.notice-title { display: block; margin-top: 24rpx; color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 38rpx; font-weight: 700; overflow-wrap: anywhere; }
|
||||
.notice-body { display: block; margin-top: 22rpx; color: #5f4a38; font-size: 25rpx; line-height: 1.75; overflow-wrap: anywhere; }
|
||||
.notice-source { display: block; margin-top: 28rpx; color: $ink-muted; font-size: 22rpx; overflow-wrap: anywhere; }
|
||||
.action-stack { display: flex; flex-direction: column; gap: 18rpx; margin-top: 28rpx; }
|
||||
.target-error { display: block; color: #b42318; font-size: 22rpx; line-height: 1.5; text-align: center; }
|
||||
.state-card { min-height: 340rpx; padding: 72rpx 50rpx 48rpx; box-sizing: border-box; text-align: center; }
|
||||
.state-title { display: block; color: $ink; font-size: 34rpx; font-weight: 700; }
|
||||
.state-copy { display: block; margin: 18rpx 0 28rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
|
||||
@media (max-width: 340px) { .notice-content { padding-right: 22rpx; padding-left: 22rpx; } .notice-card { padding-right: 40rpx; padding-left: 40rpx; } }
|
||||
.message-detail-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-header,.page-content{z-index:1}.page-content{padding:18rpx 24rpx 72rpx}.state-card{box-sizing:border-box;min-height:340rpx;padding:78rpx 52rpx 50rpx;text-align:center;@include adaptive.adaptive-family-content}.state-card text{display:block}.state-card text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:35rpx;font-weight:700}.state-card text:nth-child(2){margin-top:18rpx;color:$ink-muted;font-size:24rpx;line-height:1.65}.state-card .app-button{margin-top:28rpx}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user