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

<template>
  <view class="sub-page">
    <TopBar title="通知详情" show-back />

    <view class="px-4 pt-3">
      <view v-if="notice" class="glass-card p-5">
        <text class="notice-title">{{ notice.title }}</text>
        <view class="meta-row">
          <text class="meta-text">{{ formatDate(notice.createTime, 'YYYY-MM-DD HH:mm') }}</text>
        </view>
        <view class="notice-body">
          <text class="body-p">{{ notice.content }}</text>
        </view>
      </view>

      <EmptyState v-else message="公告不存在" />
    </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 { formatDate } from '../../utils'

interface Notice {
  id: string
  title: string
  content: string
  createTime: string
}

const allNotices: Notice[] = [
  { id: 'n1', title: '关于调度系统升级的通知', content: '为了提升系统性能和用户体验，我们将于本周末对调度系统进行升级维护。升级期间系统可能短暂不可用，请提前做好工作安排。升级后新增排班自动提醒功能，敬请期待。', createTime: '2026-01-20T09:00:00' },
  { id: 'n2', title: '春节期间值班安排公告', content: '春节将至，为确保节日期间服务不中断，请各班组做好值班安排。具体值班表已发送至各班组负责人，如有疑问请联系调度中心。祝大家新春快乐！', createTime: '2026-01-15T09:00:00' },
  { id: 'n3', title: '安全生产月活动通知', content: '本月为安全生产月，公司将开展安全培训和应急演练。请所有员工参加，提升安全意识和应急处理能力。具体安排另行通知。', createTime: '2026-02-28T10:00:00' },
  { id: 'n4', title: '新员工培训计划安排', content: '本月将有新员工入职，请各班组安排老员工进行带教。培训内容包括：系统操作、安全规范、服务流程等。请各班组提前做好准备。', createTime: '2026-03-10T14:00:00' },
]

const notice = ref<Notice | null>(null)

onLoad((options) => {
  if (options?.id) {
    notice.value = allNotices.find(n => n.id === options.id) || null
  }
})
</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 {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.4;
}

.meta-row {
  margin-top: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(164, 216, 152, 0.18);
}

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

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

.body-p {
  display: block;
  font-size: 14px;
  line-height: 1.8;
  color: #4b5563;
}
</style>