jiapuapp/pages/notification/n02-message-detail.vue

<!-- 页面编号：N-02；用途：消息详情、已读状态与上下文操作。 -->
<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>
</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));
</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; } }
</style>