library-wechat/subpkg/pages/feedback-detail/feedback-detail.vue

<template>
  <view class="feedback-detail-page">
    <view class="section">
      <text class="subject">{{ detail.title }}</text>
      <view class="section-content">{{ detail.suggestion }}</view>
      <text class="time">{{  formatTimestamp(detail.suggestionTime) }}</text>
    </view>

    <view class="section reply-section">
      <view class="section-title">馆方回复</view>
      <view class="section-content" v-if="detail.reply">{{ detail.reply }}</view>
      <view class="section-content no-reply" v-else>暂未回复~</view>
      <text class="time" v-if="detail.reply">{{  formatTimestamp(detail.replyTime) }}</text>
    </view>
  </view>
</template>

<script>
import { FetchReaderMessageDetailsById  } from '@/api/user';

export default {
  data() {
    return {
      detail: {}
    };
  },
  onLoad(options) {
    if (options.item) {
      this.detail = JSON.parse(decodeURIComponent(options.item));
      this.getReaderMessageDetailsById();
    }
  },
  methods: {
    async getReaderMessageDetailsById(){
      try {
        // 检查 id 是否存在
        if (!this.detail.id) {
          console.warn('缺少留言 ID');
          return;
        }
        
        const res = await FetchReaderMessageDetailsById({
          id: this.detail.id
        });
        
        console.log(res);
        
        if (res && res.code === 200) {
          this.detail = res.data || {};
        } else {
          uni.showToast({ title: res?.msg || '获取留言详情失败', icon: 'none' });
        }
      } catch (error) {
        console.error('获取留言详情异常:', error);
        uni.showToast({ title: '获取留言详情失败', icon: 'none' });
      }
    },
    formatTimestamp(timestamp) {
      if (!timestamp || typeof timestamp !== 'number') {
        return '暂无时间';
      }
      
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    }
  }
};
</script>

<style lang="scss" scoped>
.feedback-detail-page {
  padding: 15px;
  background-color: #f7f8fa;
  min-height: 100vh;
}

.section {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 12px;
}

.section-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.section-content {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 6px;
}

.section-content:last-child {
  margin-bottom: 0;
}

.subject {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10px;
}

.time {
  font-size: 12px;
  color: #999;
  display: block;
  text-align: right;
}

.no-reply {
  color: #999;
  font-style: italic;
}

.reply-section {
  background-color: #f0f9ff;
}
</style>