cfc/cfc-frontend/pages/health/report-list.vue

<template>
  <view class="list-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="nav-back" @click="goBack">‹ 返回</text>
      <text class="nav-title">健康报告</text>
      <view class="nav-placeholder"></view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-wrap" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 报告列表 -->
    <view class="report-list" v-else-if="reports.length > 0">
      <view
        class="report-card"
        v-for="item in reports"
        :key="item.id"
        @click="goToDetail(item.id, item.reportType)"
      >
        <view class="report-card-left">
          <view class="report-type-badge" :class="'badge-' + (item.reportType === 'gut_flora' ? 'gut' : item.reportType === 'tongue' ? 'tongue' : 'exam')">
            <text>{{ item.reportType === 'gut_flora' ? '肠道检测' : item.reportType === 'tongue' ? '舌诊' : '体检报告' }}</text>
          </view>
          <text class="report-date">{{ formatDate(item.reportDate) }}</text>
        </view>
        <view class="report-card-right">
          <text class="report-score">{{ item.overallScore || '--' }}<text class="score-unit">分</text></text>
          <text class="report-arrow">›</text>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-wrap" v-else>
      <text class="empty-icon">📋</text>
      <text class="empty-title">暂无健康报告</text>
      <text class="empty-desc">上传体检报告或肠道检测报告，获取 AI 解读</text>
      <view class="empty-btn" @click="goToUpload">上传报告</view>
    </view>

    <!-- 底部占位 -->
    <view class="bottom-spacer"></view>
  </view>
</template>

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

export default {
  data() {
    return {
      reports: [],
      loading: false,
      childId: null
    }
  },
  onLoad(options) {
    this.childId = options.childId ? parseInt(options.childId) : null
    this.loadData()
  },
  methods: {
    loadData() {
      var self = this
      self.loading = true
      getReportList(self.childId).then(function(res) {
        self.reports = res.data || []
      }).catch(function(e) {
        console.log('获取报告列表失败', e)
        uni.showToast({ title: '加载失败', icon: 'none' })
      }).finally(function() {
        self.loading = false
      })
    },
    goBack() {
      uni.navigateBack()
    },
    goToDetail(reportId, reportType) {
      if (reportType === 'gut_flora') {
        uni.showToast({ title: '报告详情页开发中', icon: 'none' })
      } else {
        uni.navigateTo({ url: '/pages/body/health-report?reportId=' + reportId })
      }
    },
    goToUpload() {
      uni.navigateTo({ url: '/pages/health/report-upload' })
    },
    formatDate(dateStr) {
      if (!dateStr) return '--'
      try {
        var d = new Date(dateStr)
        var y = d.getFullYear()
        var m = ('' + (d.getMonth() + 1)).padStart(2, '0')
        var day = ('' + d.getDate()).padStart(2, '0')
        return y + '-' + m + '-' + day
      } catch (e) {
        return dateStr
      }
    }
  }
}
</script>

<style scoped>
.list-container {
  min-height: 100vh;
  background: #F5F7FA;
}

/* ===== 导航栏 ===== */
.nav-bar {
  position: sticky;
  top: 0;
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
  z-index: 100;
}
.nav-back {
  font-size: 32rpx;
  color: #5B9BD5;
}
.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.nav-placeholder {
  width: 80rpx;
}

/* ===== 加载状态 ===== */
.loading-wrap {
  display: flex;
  justify-content: center;
  padding: 80rpx 0;
}
.loading-text {
  font-size: 28rpx;
  color: #999;
}

/* ===== 报告列表 ===== */
.report-list {
  margin: 20rpx 30rpx;
}
.report-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 28rpx 24rpx;
  margin-bottom: 16rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.report-card:active {
  opacity: 0.8;
}
.report-card-left {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}
.report-type-badge {
  display: inline-block;
  font-size: 22rpx;
  padding: 4rpx 18rpx;
  border-radius: 20rpx;
  align-self: flex-start;
}
.badge-exam {
  background: #E3F2FD;
  color: #1565C0;
}
.badge-gut {
  background: #E8F5E9;
  color: #2E7D32;
}
.badge-tongue {
  background: #FFF3E0;
  color: #E65100;
}
.report-date {
  font-size: 24rpx;
  color: #888;
}
.report-card-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12rpx;
}
.report-score {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}
.score-unit {
  font-size: 22rpx;
  color: #999;
  font-weight: normal;
}
.report-arrow {
  font-size: 36rpx;
  color: #CCC;
}

/* ===== 空状态 ===== */
.empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 60rpx;
}
.empty-icon {
  font-size: 80rpx;
  margin-bottom: 24rpx;
}
.empty-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 12rpx;
}
.empty-desc {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  margin-bottom: 40rpx;
  line-height: 1.5;
}
.empty-btn {
  background: #5B9BD5;
  color: #fff;
  font-size: 28rpx;
  padding: 20rpx 60rpx;
  border-radius: 40rpx;
}
.empty-btn:active {
  opacity: 0.8;
}

/* ===== 底部 ===== */
.bottom-spacer {
  height: 60rpx;
}
</style>