cfc/cfc-frontend/pages/profile/report-detail.vue

<template>
  <view class="container">
    <view class="report-header">
      <view class="type-badge" :class="'badge-' + getBadgeClass(detail.reportType)">
        <text>{{ detail.reportTypeName || '报告' }}</text>
      </view>
      <text class="report-title">{{ detail.title }}</text>
      <view class="report-meta">
        <text class="meta-item">{{ detail.subjectName }}</text>
        <text class="meta-item">{{ formatDate(detail.reportDate) }}</text>
      </view>
      <view class="score-section" v-if="detail.overallScore !== null && detail.overallScore !== undefined">
        <text class="score">{{ detail.overallScore }}</text>
        <text class="score-label">综合评分</text>
      </view>
    </view>

    <view class="summary-section" v-if="detail.summary">
      <text class="section-title">报告摘要</text>
      <text class="summary-text">{{ detail.summary }}</text>
    </view>

    <view class="action-section" v-if="detail.hasFile">
      <button class="action-btn" @click="downloadReport">下载报告</button>
      <button class="action-btn secondary" @click="goToOriginalDetail">查看原始详情</button>
    </view>

    <view class="action-section" v-else>
      <button class="action-btn secondary" @click="goToOriginalDetail">查看原始详情</button>
    </view>
  </view>
</template>

<script>
import { getReportSummaryDetail, downloadReportSummary } from '../../utils/api.js'

export default {
  data() {
    return {
      reportId: null,
      detail: {}
    }
  },
  onLoad(options) {
    if (options && options.id) {
      this.reportId = parseInt(options.id)
      this.loadDetail()
    }
  },
  onShareAppMessage() {
    return {
      title: '浠艾福报告',
      path: '/pages/profile/report-detail?id=' + this.reportId
    }
  },
  methods: {
    loadDetail() {
      var self = this
      getReportSummaryDetail(self.reportId).then(function(res) {
        if (res && res.data) {
          self.detail = res.data
          uni.setNavigationBarTitle({ title: self.detail.title || '报告详情' })
        }
      }).catch(function(e) {
        console.log('加载详情失败', e)
        uni.showToast({ title: '加载失败', icon: 'none' })
      })
    },
    downloadReport() {
      var self = this
      uni.showLoading({ title: '下载中...' })
      downloadReportSummary(self.reportId).then(function(res) {
        if (res && res.data && res.data.fileUrl) {
          var url = res.data.fileUrl
          var name = res.data.fileName || 'report'
          uni.downloadFile({
            url: url,
            filePath: wx.env.USER_DATA_PATH + '/' + name,
            success: function(res2) {
              uni.saveFileToDisk({
                filePath: res2.filePath,
                success: function() {
                  uni.showToast({ title: '保存成功', icon: 'success' })
                },
                fail: function() {
                  uni.showToast({ title: '保存失败', icon: 'none' })
                }
              })
            },
            fail: function() {
              uni.showToast({ title: '下载失败', icon: 'none' })
            },
            complete: function() {
              uni.hideLoading()
            }
          })
        }
      }).catch(function(e) {
        uni.hideLoading()
        uni.showToast({ title: '下载失败', icon: 'none' })
      })
    },
    goToOriginalDetail() {
      var route = this.detail.detailRoute || ''
      if (route) {
        var url = route + (this.detail.sourceId ? '?reportId=' + this.detail.sourceId : '')
        uni.navigateTo({ url: url })
      } else {
        uni.showToast({ title: '暂无详情页面', icon: 'none' })
      }
    },
    getBadgeClass(reportType) {
      return reportType || 'default'
    },
    formatDate(dateStr) {
      if (!dateStr) return '--'
      return dateStr
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 24rpx;
}

.report-header {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  margin-bottom: 16rpx;
}

.type-badge {
  display: inline-block;
  font-size: 22rpx;
  padding: 6rpx 20rpx;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
}

.badge-gut_flora { background: #E8F5E9; color: #2E7D32; }
.badge-physical_exam { background: #E3F2FD; color: #1565C0; }
.badge-dan { background: #F3E5F5; color: #7B1FA2; }
.badge-insurance { background: #FFF3E0; color: #E65100; }
.badge-fortune { background: #FCE4EC; color: #C62828; }

.report-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.report-meta {
  display: flex;
  flex-direction: row;
  margin-bottom: 16rpx;
}

.meta-item {
  font-size: 24rpx;
  color: #888;
  margin-right: 24rpx;
}

.score-section {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.score {
  font-size: 56rpx;
  font-weight: bold;
  color: #5B9BD5;
}

.score-label {
  font-size: 24rpx;
  color: #888;
  margin-left: 12rpx;
}

.summary-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  margin-bottom: 16rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.summary-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.action-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}

.action-btn {
  background: #5B9BD5;
  color: #fff;
  font-size: 28rpx;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
}

.action-btn.secondary {
  background: #f0f0f0;
  color: #333;
  margin-bottom: 0;
}
</style>