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

<template>
  <view class="list-container">
    <!-- 成员过滤 -->
    <view class="member-filter">
      <scroll-view class="filter-scroll" scroll-x="true" :show-scrollbar="false">
        <view class="filter-chips">
          <view class="chip" :class="{ 'chip-active': !selectedMemberId }" @click="selectAllMembers">
            <text class="chip-text">全部</text>
          </view>
          <view
            class="chip"
            v-for="item in members"
            :key="item.id"
            :class="{ 'chip-active': selectedMemberId === item._filterId }"
            @click="selectMember(item)"
          >
            <text class="chip-text">{{ item.nickname || '成员' }}</text>
          </view>
        </view>
      </scroll-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">
      <swipe-action v-for="item in reports" :key="item.id">
        <view class="report-card" @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-person" v-if="item.personName">{{ item.personName }}</text>
            <text class="report-date">报告日期：{{ formatDate(item.reportDate) }}</text>
            <text class="report-upload-date">上传日期：{{ formatDate(item.createdAt) }}</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>
        <template #right>
          <button class="swipe-delete" @click.stop="confirmDelete(item)">删除</button>
        </template>
      </swipe-action>
    </view>

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

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

<script>
import { getReportList, deleteReport, getFamilyMemberList } from '../../utils/api.js'
import { parseDate } from '../../utils/format.js'

export default {
  data() {
    return {
      reports: [],
      members: [],
      selectedMemberId: null,
      loading: false,
      memberId: null
    }
  },
  onLoad(options) {
    // 导航参数可带初始 memberId（预选对应成员）；未传时默认"全部"
    this.memberId = options.memberId ? parseInt(options.memberId) : null
    this.selectedMemberId = this.memberId
    this.loadMembers()
    this.loadData()
  },
  methods: {
    loadMembers() {
      var self = this
      getFamilyMemberList({}).then(function(res) {
        if (res.code === 200 && Array.isArray(res.data)) {
          // _filterId 预计算，供 :class 内联比较使用（小程序 :class 禁止方法调用）
          var list = []
          for (var i = 0; i < res.data.length; i++) {
            var m = res.data[i]
            list.push({
              id: m.id,
              nickname: m.nickname,
              avatar: m.avatar,
              _filterId: m.id || m.userId
            })
          }
          self.members = list
        }
      }).catch(function(e) {
        console.log('获取家庭成员失败', e)
      })
    },
    selectAllMembers() {
      if (this.selectedMemberId === null) return
      this.selectedMemberId = null
      this.loadData()
    },
    selectMember(item) {
      var filterId = item._filterId
      if (this.selectedMemberId === filterId) return
      this.selectedMemberId = filterId
      this.loadData()
    },
    loadData() {
      var self = this
      self.loading = true
      getReportList(self.selectedMemberId).then(function(res) {
        self.reports = res.data || []
      }).catch(function(e) {
        console.log('获取报告列表失败', e)
        uni.showToast({ title: '加载失败', icon: 'none' })
      }).finally(function() {
        self.loading = false
      })
    },
    goToDetail(reportId, reportType) {
		var url
		if (reportType === 'gut_flora') {
			url = '/pages/health/gut-flora-detail?reportId=' + reportId
		} else if (reportType === 'dan') {
			url = '/pages/dan-assessment/report-result?reportId=' + reportId
		} else {
			url = '/pages/health/report-detail?reportType=' + (reportType || 'gut_flora') + '&reportId=' + reportId
		}
		uni.navigateTo({ url: url })
	},
    goToUpload() {
      uni.navigateTo({ url: '/pages/health/report-upload' })
    },
    confirmDelete(item) {
      var self = this
      uni.showModal({
        title: '删除报告',
        content: '确定删除该健康报告吗？删除后不可恢复。',
        confirmColor: '#F56C6C',
        success: function(res) {
          if (!res.confirm) return
          self.doDelete(item)
        }
      })
    },
    doDelete(item) {
      var self = this
      deleteReport(item.id).then(function(res) {
        if (res.code === 200) {
          uni.showToast({ title: '已删除', icon: 'success' })
          self.loadData()
        } else {
          uni.showToast({ title: res.message || '删除失败', icon: 'none' })
        }
      }).catch(function(e) {
        console.log('删除报告失败', e)
        uni.showToast({ title: '删除失败', icon: 'none' })
      })
    },
    formatDate(dateStr) {
      if (!dateStr) return '--'
      var d = parseDate(dateStr)
      if (!d) return dateStr
      var y = d.getFullYear()
      var m = ('' + (d.getMonth() + 1)).padStart(2, '0')
      var day = ('' + d.getDate()).padStart(2, '0')
      return y + '-' + m + '-' + day
    }
  }
}
</script>

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

/* ===== 成员过滤 ===== */
.member-filter {
  background: #F5F7FA;
  padding: 20rpx 30rpx 4rpx;
}
.filter-scroll {
  width: 100%;
  white-space: nowrap;
}
.filter-chips {
  display: flex;
  flex-direction: row;
}
.chip {
  flex-shrink: 0;
  background: #fff;
  border: 1rpx solid #E2E8F0;
  border-radius: 28rpx;
  padding: 10rpx 30rpx;
  margin-right: 16rpx;
}
.chip-active {
  background: #5B9BD5;
  border-color: #5B9BD5;
}
.chip-text {
  font-size: 26rpx;
  color: #64748B;
}
.chip-active .chip-text {
  color: #fff;
}

/* ===== 加载状态 ===== */
.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: 2rpx;
  flex: 1;
  min-width: 0;
}
.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-person {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
  margin-top: 4rpx;
}
.report-date {
  font-size: 22rpx;
  color: #888;
  margin-top: 4rpx;
}
.report-upload-date {
  font-size: 22rpx;
  color: #AAA;
  margin-top: 2rpx;
}
.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;
}

/* ===== 滑动删除 ===== */
.swipe-delete {
  height: 100%;
  width: 160rpx;
  background: #F56C6C;
  color: #fff;
  font-size: 28rpx;
  border: none;
  border-radius: 0;
}

/* swipe-action 组件内部样式覆盖 */
/deep/ .uni-swipe-action__content {
  border-radius: 16rpx;
}
/deep/ .uni-swipe-action__button {
  border-radius: 0 16rpx 16rpx 0;
}

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