aquagreen_wechat_app/src/subPackages/pages-construction/noticeDetail.vue

<template>
  <view class="sub-page">
    <TopBar title="公告详情" showBack />

    <view class="px-4 pt-3">
      <view v-if="notice" class="glass-card p-5">
        <view class="flex items-start justify-between mb-3">
          <text class="notice-title flex-1 mr-2">{{ notice.title }}</text>
          <text v-if="notice.priority >= 2" class="important-tag flex-shrink-0">重要</text>
        </view>
        <view class="meta-row mb-4">
          <text class="meta-text">{{ formatDate(notice.publishTime, 'YYYY-MM-DD') }}</text>
          <text class="meta-text mx-2">|</text>
          <text class="meta-text">{{ notice.publisherName }}</text>
        </view>
        <view class="notice-body">
          <text class="body-p">{{ notice.content }}</text>
        </view>
      </view>
      <EmptyState v-else message="公告不存在" icon="" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import TopBar from '../../components/common/TopBar.vue'
import EmptyState from '../../components/common/EmptyState.vue'
import { getNoticeDetail } from '../../api/notice'
import { formatDate } from '../../utils'

const notice = ref<any>(null)

onLoad(async (options) => {
  if (!options?.id) return
  try {
    notice.value = await getNoticeDetail(Number(options.id))
  } catch (error) {
    console.error('获取通知详情失败:', error)
  }
})
</script>

<style scoped>
.sub-page {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: #f6fbf9;
  padding-bottom: 24px;
}

.glass-card {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(164, 216, 152, 0.35);
  border-radius: 24px;
  box-shadow: 0 18px 50px -12px rgba(54, 143, 111, 0.28);
  overflow: hidden;
  margin-bottom: 12px;
}

.notice-title {
  font-size: 17px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.4;
}

.important-tag {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #ef4444;
  background-color: rgba(239, 68, 68, 0.1);
}

.meta-row {
  display: flex;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(164, 216, 152, 0.18);
}

.meta-text {
  font-size: 12px;
  color: #9ca3af;
}

.notice-body {
  padding-top: 4px;
}

.body-p {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.8;
  color: #4b5563;
}

.body-item {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.8;
  color: #4b5563;
}

.body-sign {
  display: block;
  text-align: right;
  font-size: 13px;
  line-height: 1.8;
  color: #6b7280;
}
</style>