im-uniapp/pages/workbench/feedback/detail.vue

<template>
  <view class="message-detail-page">
    <!-- 详情内容 -->
    <view class="detail-content" v-loading="loading">
      <view class="detail-header">
        <text class="detail-title">{{ message.title }}</text>
        
        <view class="detail-meta">
          <view class="meta-item">
            <uni-icons type="user" size="14" color="#666"></uni-icons>
            <text>创建人：{{ message.createBy || '未知' }}</text>
          </view>
          <view class="meta-item">
            <uni-icons type="time" size="14" color="#666"></uni-icons>
            <text>创建时间：{{ formatTime(message.createTime) }}</text>
          </view>
        </view>
        
        <view class="project-info" v-if="message.projectId">
          <text class="label">项目信息：</text>
          <text>{{ message.projectName }}</text>
          <text v-if="message.projectCode"> ({{ message.projectCode }})</text>
        </view>
      </view>
      
      <view class="detail-divider"></view>
      
      <mp-html :content="message.content"></mp-html>
    </view>
  </view>
</template>

<script>
import { getFeedback, listFeedback, toRead } from "@/api/oa/feedback";

export default {
  data() {
    return {
      message: {},
      feedbackId: '',
      loading: false
    };
  },
  onLoad(options) {
    this.feedbackId = options.feedbackId;
    this.getMessageDetail();
  },
  methods: {
    // 获取消息详情
    getMessageDetail() {
      this.loading = true;
      // 调用列表接口获取单条数据，实际项目中应该有专门的详情接口
      getFeedback(this.feedbackId)
        .then(res => {
          if (res.data) {
            this.message = res.data;
            
            // 标记为已读
            toRead(this.message);
          } else {
            uni.showToast({
              title: '未找到消息',
              icon: 'none'
            });
          }
        })
        .catch(err => {
          uni.showToast({
            title: err.message || '获取消息失败',
            icon: 'none'
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    // 格式化时间
    formatTime(time) {
      if (!time) return '';
      const date = new Date(time);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    },
    
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
.message-detail-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.navbar {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 15px;
  background-color: #3e7bfa;
  color: #fff;
}

.back-btn {
  background-color: transparent;
  border: none;
  color: #fff;
  padding: 5px 10px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

.detail-content {
  padding: 15px;
  background-color: #fff;
  margin: 10px;
  border-radius: 8px;
}

.detail-header {
  margin-bottom: 20px;
}

.detail-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  display: block;
  color: #333;
}

.detail-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 15px;
  color: #666;
  font-size: 14px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.project-info {
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}

.label {
  color: #666;
  font-weight: 500;
}

.detail-divider {
  height: 1px;
  background-color: #eee;
  margin: 15px 0;
}

.detail-body {
  color: #333;
  line-height: 1.8;
  font-size: 15px;
  padding: 10px 0;
}

image {
	max-width: 100vw;
	object-fit: contain;
}
</style>