aquagreen_wechat_app/src/subPackages/pages-common/messageDetail.vue

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

    <view class="px-4 pt-3">
      <view class="glass-card p-5">
        <text class="notice-title">{{ message?.title || '消息详情' }}</text>
        <view class="meta-row">
          <text class="meta-text">{{ message?.createTime ? formatDate(message.createTime, 'YYYY-MM-DD HH:mm') : '' }}</text>
        </view>

        <view class="notice-body">
          <text class="body-p">{{ message?.content || '暂无内容' }}</text>

          <view v-if="message?.type === 'task'" class="task-box">
            <view class="meta-line">
              <text class="meta-label">任务名称</text>
              <text class="meta-value">{{ message.title }}</text>
            </view>
            <view class="meta-line">
              <text class="meta-label">执行班组</text>
              <text class="meta-value">张师傅组</text>
            </view>
            <view class="meta-line">
              <text class="meta-label">预计到达</text>
              <text class="meta-value">09:30</text>
            </view>
            <view class="meta-line">
              <text class="meta-label">联系电话</text>
              <text class="meta-value">139****6666</text>
            </view>
          </view>

          <text class="body-p">施工过程中如有任何问题，请及时联系调度中心。服务完成后，请及时验收确认。</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import TopBar from '@/components/common/TopBar.vue'
import { formatDate } from '@/utils'
import type { Notification } from '@/types'

const message = ref<Notification | null>(null)

onMounted(() => {
  const data = uni.getStorageSync('current_message')
  if (data) {
    message.value = data
  }
})
</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: 8px;
  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;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.8;
  color: #4b5563;
}

.task-box {
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 14px;
  background-color: rgba(164, 216, 152, 0.14);
  border: 1px solid rgba(164, 216, 152, 0.3);
}

.meta-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.meta-line:last-child {
  margin-bottom: 0;
}

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

.meta-value {
  font-size: 13px;
  color: #4b5563;
}
</style>