VAVABUY/pages/user/message/detail.vue

<template>
  <view class="message-detail-page">
    <!-- 导航栏 -->
    <Navbar title="消息详情" fixed border> </Navbar>

    <!-- 消息详情内容 -->
    <view class="message-content">
      <!-- 消息头部 -->
      <view class="msg-header">
        <!-- <view class="msg-sender">
          <uni-icons
            :type="currentMsg.type === 'system' ? 'notification' : 'chat'"
            size="24"
            color="#36D"
            class="sender-icon"
          ></uni-icons>
          <text class="sender-name">{{ getSenderName(currentMsg.type) }}</text>
        </view> -->
        <text class="msg-time">{{
          useGlobal().$format(currentMsg.indate)
        }}</text>
        <!-- <view class="read-tag" v-if="!currentMsg.read">未读</view> -->
      </view>

      <!-- 消息标题 -->
      <view class="msg-title">{{ currentMsg.title }}</view>

      <!-- 消息正文 -->
      <view class="msg-body">
        <text class="body-content">{{ currentMsg.content }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import Navbar from "@/components/navbar";
import { onLoad } from "@dcloudio/uni-app";
import { useGlobal } from "@/utils";
import { USERS_MESSAGE_DETAIL } from "@/api";

const currentMsg = ref({});

const getDeatil = async (id) => {
  const res = await USERS_MESSAGE_DETAIL(id);
  currentMsg.value = res.data;
};
onLoad((options) => {
  getDeatil(options.id);
});
</script>

<style lang="less" scoped>
.message-detail-page {
  min-height: 100vh;
  background-color: #f5f7fa;
}

// 消息内容样式
.message-content {
  padding: 16px;
  background-color: #fff;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  // 消息头部
  .msg-header {
    padding-bottom: 16px;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 16px;

    .msg-sender {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      .sender-icon {
        margin-right: 8px;
      }

      .sender-name {
        font-size: 16px;
        color: #333;
        font-weight: 500;
      }
    }

    .msg-time {
      font-size: 12px;
      color: #999;
      margin-right: 10px;
    }

    .read-tag {
      display: inline-block;
      padding: 2px 8px;
      background-color: #36d;
      color: #fff;
      font-size: 12px;
      border-radius: 4px;
    }
  }

  // 消息标题
  .msg-title {
    font-size: 18px;
    color: #333;
    font-weight: 500;
    margin-bottom: 16px;
    line-height: 1.5;
  }

  // 消息正文
  .msg-body {
    .body-content {
      font-size: 16px;
      color: #666;
      line-height: 1.8;
      white-space: pre-line; // 保留换行符
    }
  }
}
</style>