cfc/cfc-frontend/pages/health/my-feedback.vue

<template>
  <view class="mf-page">
    <view class="mf-list" v-if="list.length > 0">
      <view class="mf-item" v-for="(item, idx) in list" :key="item.id">
        <view class="mf-item-head">
          <text class="mf-badge" :class="badgeClass(item)">{{ typeText(item) }}</text>
          <text class="mf-time">{{ formatTime(item.createdAt) }}</text>
        </view>
        <text class="mf-content">{{ item.content }}</text>
        <view class="mf-answer">
          <text class="mf-answer-label">解答</text>
          <text class="mf-answer-text" v-if="isAnswered(item)">{{ item.aiAnswer }}</text>
          <text class="mf-answer-text mf-answer-muted" v-else-if="isPending(item)">解答生成中，请稍后刷新查看</text>
          <text class="mf-answer-text mf-answer-muted" v-else>解答暂不可用</text>
        </view>
      </view>
    </view>

    <view class="mf-empty" v-else-if="!loading">
      <text class="mf-empty-icon">💬</text>
      <text class="mf-empty-text">还没有提交过反馈</text>
      <text class="mf-empty-hint">在健康报告详情页可以向我们提出疑问或建议</text>
    </view>

    <view class="mf-loading" v-else>
      <text class="mf-loading-text">加载中...</text>
    </view>
  </view>
</template>

<script>
import { getMyReportFeedbacks } from '../../utils/api.js'

export default {
  data: function() {
    return {
      list: [],
      loading: false,
      reportId: null
    }
  },
  onLoad: function(options) {
    if (options && options.reportId) {
      this.reportId = Number(options.reportId)
    }
  },
  onShow: function() {
    this.loadList()
  },
  onPullDownRefresh: function() {
    var self = this
    this.loadList(function() {
      uni.stopPullDownRefresh()
    })
  },
  methods: {
    loadList: function(done) {
      var self = this
      this.loading = true
      var payload = {}
      if (this.reportId) payload.reportId = this.reportId
      getMyReportFeedbacks(payload).then(function(res) {
        if (res.code === 200) {
          self.list = res.data || []
        } else {
          uni.showToast({ title: res.message || '加载失败', icon: 'none' })
        }
      }).catch(function() {
        uni.showToast({ title: '加载失败', icon: 'none' })
      }).then(function() {
        self.loading = false
        if (done) done()
      })
    },
    typeText: function(item) {
      return item.feedbackType === 'suggestion' ? '建议' : '疑问'
    },
    badgeClass: function(item) {
      return item.feedbackType === 'suggestion' ? 'mf-badge-suggestion' : 'mf-badge-question'
    },
    isAnswered: function(item) {
      return item.aiStatus === 'answered' && !!item.aiAnswer
    },
    isPending: function(item) {
      return item.aiStatus === 'pending'
    },
    formatTime: function(v) {
      if (!v) return ''
      var s = String(v)
      if (s.length >= 19) return s.substring(0, 19).replace('T', ' ')
      return s.substring(0, 10)
    }
  }
}
</script>

<style scoped>
.mf-page {
  min-height: 100vh;
  background: #F7F8FA;
  padding: 20rpx;
  box-sizing: border-box;
}
.mf-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}
.mf-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14rpx;
}
.mf-badge {
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}
.mf-badge-question {
  color: #4A9BD7;
  background: #EAF4FC;
}
.mf-badge-suggestion {
  color: #E6A23C;
  background: #FDF4E7;
}
.mf-time {
  font-size: 22rpx;
  color: #bbb;
}
.mf-content {
  display: block;
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  word-break: break-all;
  margin-bottom: 18rpx;
}
.mf-answer {
  background: #F5FAFE;
  border-radius: 12rpx;
  padding: 18rpx;
}
.mf-answer-label {
  display: block;
  font-size: 22rpx;
  color: #10B981;
  margin-bottom: 8rpx;
}
.mf-answer-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.7;
  word-break: break-all;
}
.mf-answer-muted {
  color: #999;
}
.mf-empty {
  padding: 160rpx 60rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mf-empty-icon {
  font-size: 80rpx;
  margin-bottom: 24rpx;
}
.mf-empty-text {
  font-size: 30rpx;
  color: #666;
  margin-bottom: 12rpx;
}
.mf-empty-hint {
  font-size: 24rpx;
  color: #aaa;
  text-align: center;
  line-height: 1.6;
}
.mf-loading {
  padding: 160rpx 0;
  display: flex;
  justify-content: center;
}
.mf-loading-text {
  font-size: 26rpx;
  color: #999;
}
</style>