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="collecting-wrap" v-if="collectingReports.length > 0">
      <view class="collecting-card" v-for="item in collectingReports" :key="item.draftId">
        <view class="collecting-icon">
          <view class="spinner"></view>
        </view>
        <view class="collecting-info">
          <text class="collecting-title">数据采集中</text>
          <text class="collecting-file">{{ item.originalFilename || '健康报告' }}</text>
        </view>
        <text class="collecting-status">解析完成后自动入库</text>
      </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="swipe-row" v-for="item in reports" :key="item.id">
        <!-- 右侧删除按钮（滑动后露出） -->
        <view class="swipe-actions">
          <view class="swipe-delete" @click.stop="confirmDelete(item)">删除</view>
        </view>
        <!-- 卡片内容（可左滑） -->
        <view class="swipe-content"
              :class="{ 'swipe-moving': curId === item.id }"
              :style="'transform: translateX(' + (curId === item.id ? moveOffset : (openMap[item.id] ? -80 : 0)) + 'px)'"
              @touchstart="onTouchStart($event, item)"
              @touchmove="onTouchMove"
              @touchend="onTouchEnd"
              @click="onRowClick(item)">
          <view class="report-card">
            <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>
        </view>
      </view>
    </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, getCollectingReports } from '../../utils/api.js'
import { parseDate } from '../../utils/format.js'

export default {
  data() {
    return {
      reports: [],
      members: [],
      selectedMemberId: null,
      loading: false,
      memberId: null,
      // 异步采集中的草稿
      collectingReports: [],
      collectTimer: null,
      // 左滑删除
      openMap: {},
      curId: null,
      moveOffset: 0,
      startX: 0,
      startY: 0,
      touchDidMove: false,
      baseOffset: 0
    }
  },
  onLoad(options) {
    // 导航参数可带初始 memberId（预选对应成员）；未传时默认"全部"
    this.memberId = options.memberId ? parseInt(options.memberId) : null
    this.selectedMemberId = this.memberId
    this.loadMembers()
    this.loadData()
    this.startCollectPolling()
  },
  onShow() {
    // 从报告上传页返回时刷新列表，展示后台异步采集完成/失败的报告
    if (this._pageShown) {
      this.loadData()
      this.loadCollectingReports()
    }
    this._pageShown = true
  },
  onUnload() {
    if (this.collectTimer) {
      clearInterval(this.collectTimer)
      this.collectTimer = null
    }
  },
  methods: {
    startCollectPolling() {
      var self = this
      if (self.collectTimer) {
        clearInterval(self.collectTimer)
      }
      self.loadCollectingReports()
      self.collectTimer = setInterval(function() {
        self.loadCollectingReports()
      }, 6000)
    },
    loadCollectingReports() {
      var self = this
      var prevCount = self.collectingReports.length
      getCollectingReports().then(function(res) {
        if (res.code === 200) {
          var list = res.data || []
          self.collectingReports = list
          // 采集卡片消失后刷新列表，让刚入库的报告立刻出现
          if (prevCount > 0 && list.length < prevCount) {
            self.loadData()
          }
        }
      }).catch(function() {
        // 采集进度轮询失败静默，下一轮重试
      })
    },
    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 })
 	},
    onRowClick(item) {
      // 刚滑动过，忽略本次点击
      if (this.touchDidMove) {
        this.touchDidMove = false
        return
      }
      // 行处于打开态，点击先收起
      if (this.openMap[item.id]) {
        this.$set(this.openMap, item.id, false)
        return
      }
      this.goToDetail(item.id, item.reportType)
    },
    onTouchStart(e, item) {
      // 先收起其它已打开行
      if (this.curId !== null && this.curId !== item.id && this.openMap[this.curId]) {
        this.$set(this.openMap, this.curId, false)
      }
      var touch = e.touches[0]
      this.curId = item.id
      this.startX = touch.clientX
      this.startY = touch.clientY
      this.touchDidMove = false
      this.baseOffset = this.openMap[item.id] ? -80 : 0
      this.moveOffset = this.baseOffset
    },
    onTouchMove(e) {
      if (this.curId === null) return
      var touch = e.touches[0]
      var dx = touch.clientX - this.startX
      var dy = touch.clientY - this.startY
      // 横向滑动（水平分量大于垂直分量）
      if (Math.abs(dx) > Math.abs(dy)) {
        this.touchDidMove = Math.abs(dx) > 10
        var offset = this.baseOffset + dx
        if (offset < -80) offset = -80
        if (offset > 0) offset = 0
        this.moveOffset = offset
      }
    },
    onTouchEnd() {
      if (this.curId === null) return
      // 位移超过阈值则打开，否则收起
      var shouldOpen = this.moveOffset < -20
      this.$set(this.openMap, this.curId, shouldOpen)
      this.moveOffset = shouldOpen ? -80 : 0
      this.curId = null
    },
    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;
}

/* ===== 采集中草稿 ===== */
.collecting-wrap {
  margin: 20rpx 30rpx 0;
}
.collecting-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #FFF8E6;
  border: 1rpx solid #F5D78E;
  border-radius: 16rpx;
  padding: 20rpx 24rpx;
  margin-bottom: 16rpx;
}
.collecting-icon {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #F0B429;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}
.spinner {
  width: 28rpx;
  height: 28rpx;
  border: 4rpx solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: collecting-spin 1s linear infinite;
}
@keyframes collecting-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.collecting-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.collecting-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #7A5C00;
}
.collecting-file {
  font-size: 24rpx;
  color: #A08A45;
  margin-top: 4rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collecting-status {
  font-size: 22rpx;
  color: #C0A75A;
  flex-shrink: 0;
}

/* ===== 报告列表 ===== */
.report-list {
  margin: 20rpx 30rpx;
}
.swipe-row {
  position: relative;
  overflow: hidden;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.swipe-actions {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  flex-direction: row;
}
.swipe-delete {
  width: 80px;
  height: 100%;
  background: #F56C6C;
  color: #fff;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swipe-content {
  position: relative;
  z-index: 2;
  background: #fff;
  transition: transform 0.25s ease;
}
.swipe-moving {
  transition: none;
}
.report-card {
  border-radius: 0;
  padding: 28rpx 24rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.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;
}

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