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

<template>
  <view class="upload-container">
    <!-- 说明提示 -->
    <view class="tip-banner">
      <text class="tip-icon">📋</text>
      <text class="tip-text">上传体检/菌群/DAN测评等报告，后台自动识别类型并解析</text>
    </view>

    <!-- 上传方式 -->
    <view class="form-section">
      <view class="upload-methods">
        <view class="upload-card card-chat" @click="pickFromChat">
          <view class="upload-card-icon">💬</view>
          <text class="upload-card-title">从聊天选取</text>
          <text class="upload-card-desc">微信聊天中的 PDF/图片</text>
        </view>
        <view class="upload-card card-photo" @click="takePhoto">
          <view class="upload-card-icon">📷</view>
          <text class="upload-card-title">拍照上传</text>
          <text class="upload-card-desc">拍摄纸质报告或舌象</text>
        </view>
      </view>

      <!-- 采集中面板 -->
      <view class="collecting-panel" v-if="collecting">
        <view class="collecting-card">
          <view class="collecting-icon">
            <view class="spinner" v-if="!collectError"></view>
            <text class="collecting-fail-mark" v-else>!</text>
          </view>
          <view class="collecting-info">
            <text class="collecting-title">{{ collectError ? '采集失败' : '数据采集中' }}</text>
            <text class="collecting-file">{{ collectFileName || '报告文件' }}</text>
            <text class="collecting-hint">{{ collectError || '后台正在识别报告类型并解析，完成后自动入库' }}</text>
          </view>
        </view>
        <view class="collecting-actions">
          <view class="collecting-btn" @click="goReportList">去报告列表查看</view>
          <view class="collecting-cancel" @click="cancelCollect">取消</view>
        </view>
      </view>

      <!-- 上传中 -->
      <view class="form-item" v-if="uploading">
        <text class="form-label">上传中...</text>
        <view class="analyzing-status">
          <text class="analyzing-text">{{ uploadingText }}</text>
        </view>
      </view>

      <!-- 责任声明 -->
      <view class="form-item disclaimer-box">
        <view class="disclaimer-check" @click="toggleAgree">
          <view class="disclaimer-checkbox" :class="{ 'disclaimer-checked': agreedToTerms }">
            <text class="disclaimer-checkmark" v-if="agreedToTerms">✓</text>
          </view>
          <text class="disclaimer-label">我已阅读并同意以下声明</text>
        </view>
        <view class="disclaimer-content">
          <text class="disclaimer-text">我同意平台使用本报告数据进行分析，为我提供个性化健康解决方案；未经我授权，平台不会以任何形式将我的报告内容提供给其他任何个人或机构。</text>
        </view>
      </view>
    </view>

    <!-- 上传说明 -->
    <view class="guide-section">
      <view class="guide-header">
        <text class="guide-header-icon">📖</text>
        <text class="guide-header-title">支持的报告类型</text>
      </view>
      <view class="guide-list">
        <view class="guide-item">
          <view class="guide-icon-box guide-icon-blue"><text class="guide-icon">📄</text></view>
          <view class="guide-info">
            <text class="guide-name">体检报告</text>
            <text class="guide-desc">血常规、尿常规、生化检验等，支持 PDF 或清晰照片</text>
          </view>
        </view>
        <view class="guide-item">
          <view class="guide-icon-box guide-icon-green"><text class="guide-icon">🦠</text></view>
          <view class="guide-info">
            <text class="guide-name">肠道菌群检测报告</text>
            <text class="guide-desc">支持 PDF 或清晰照片，AI 自动解读菌群健康</text>
          </view>
        </view>
        <view class="guide-item">
          <view class="guide-icon-box guide-icon-purple"><text class="guide-icon">🧠</text></view>
          <view class="guide-info">
            <text class="guide-name">DAN 测评报告</text>
            <text class="guide-desc">A2/B4 等成长测评 PDF，自动解析维度数据</text>
          </view>
        </view>
        <view class="guide-item">
          <view class="guide-icon-box guide-icon-orange"><text class="guide-icon">👅</text></view>
          <view class="guide-info">
            <text class="guide-name">舌象照片</text>
            <text class="guide-desc">拍摄舌象照片，AI 辅助舌诊分析</text>
          </view>
        </view>
        <view class="guide-item">
          <view class="guide-icon-box guide-icon-teal"><text class="guide-icon">⚖️</text></view>
          <view class="guide-info">
            <text class="guide-name">体脂秤报告</text>
            <text class="guide-desc">拍摄体脂秤显示屏，自动提取体重、BMI、体脂率等</text>
          </view>
        </view>
      </view>
      <view class="guide-tips">
        <text class="guide-tips-title">温馨提示</text>
        <text class="guide-tips-item">· 上传后系统自动识别报告类型，无需手动选择</text>
        <text class="guide-tips-item">· 请确保报告清晰完整，以便准确解析</text>
        <text class="guide-tips-item">· 确认入库后将自动生成成长方案，可再分解为每日任务</text>
      </view>
    </view>
  </view>
</template>

<script>
import { uploadReportOnly, getReportCollectStatus } from '../../utils/api.js'

export default {
  data() {
    return {
      memberId: null,
      uploading: false,
      agreedToTerms: false,
      uploadingText: '正在上传文件...',
      collectDraftId: null,
      collectTimer: null,
      collecting: false,
      collectFileName: '',
      collectError: '',
      collectPollCount: 0
    }
  },
  onLoad: function(options) {
    this.memberId = options.memberId ? parseInt(options.memberId) : null
  },
  onUnload: function() {
    this.stopCollectPolling()
  },
  methods: {
    toggleAgree: function() {
      this.agreedToTerms = !this.agreedToTerms
    },
    ensureAgreed: function(callback) {
      if (this.agreedToTerms) {
        callback()
        return
      }
      var self = this
      uni.showModal({
        title: '数据使用声明',
        content: '上传报告即代表您同意平台使用本报告数据进行分析，为您提供个性化健康解决方案；未经您授权，平台不会以任何形式将您的报告内容提供给其他任何个人或机构。点击「同意继续」即表示您已阅读并同意。',
        confirmText: '同意继续',
        cancelText: '暂不',
        success: function(res) {
          if (res.confirm) {
            self.agreedToTerms = true
            callback()
          }
        }
      })
    },
    pickFromChat: function() {
      var self = this
      this.ensureAgreed(function() {
        uni.chooseMessageFile({
          count: 1,
          type: 'all',
          success: function(res) {
            var files = res.tempFiles
            if (files && files.length > 0) {
              self.uploadReport(files[0].path, files[0].name || '聊天文件')
            }
          },
          fail: function() {
            // 用户取消或失败，静默处理
          }
        })
      })
    },
    takePhoto: function() {
      var self = this
      this.ensureAgreed(function() {
        uni.chooseImage({
          count: 1,
          sourceType: ['camera', 'album'],
          success: function(res) {
            if (res.tempFilePaths && res.tempFilePaths.length > 0) {
              self.uploadReport(res.tempFilePaths[0], '照片')
            }
          }
        })
      })
    },
    uploadReport: function(filePath, fileName) {
      if (!filePath) return
      var self = this
      self.uploading = true
      self.uploadingText = '正在上传文件...'
      uni.showLoading({ title: '上传中...' })
      
      // 不传 type，让后端通过指纹自动判断报告类型
      uploadReportOnly(filePath).then(function(res) {
        uni.hideLoading()
        self.uploading = false
        var draftId = res.data && res.data.draftId
        if (!draftId) {
          uni.showToast({ title: (res && res.message) || '上传失败', icon: 'none' })
          return
        }
        self.collectDraftId = draftId
        self.collecting = true
        self.collectError = ''
        self.collectFileName = fileName || '报告文件'
        self.startCollectPolling(draftId)
      }).catch(function(err) {
        uni.hideLoading()
        self.uploading = false
        var msg = (err && err.message) || '上传失败，请重试'
        uni.showToast({ title: msg, icon: 'none' })
      })
    },
    stopCollectPolling: function() {
      if (this.collectTimer) {
        clearInterval(this.collectTimer)
        this.collectTimer = null
      }
    },
    startCollectPolling: function(draftId) {
      var self = this
      self.stopCollectPolling()
      self.collectPollCount = 0
      self.pollCollectStatus(draftId)
      self.collectTimer = setInterval(function() {
        self.pollCollectStatus(draftId)
      }, 4000)
    },
    pollCollectStatus: function(draftId) {
      var self = this
      self.collectPollCount = (self.collectPollCount || 0) + 1
      // 约 6 分钟仍未完成：停轮询，提示去列表看进度
      if (self.collectPollCount > 90) {
        self.stopCollectPolling()
        self.collectError = '解析耗时较长，可去报告列表查看进度，无需重复上传'
        return
      }
      getReportCollectStatus(draftId).then(function(res) {
        var data = res.data || {}
        var status = data.parseStatus
        if (status === 'completed') {
          self.stopCollectPolling()
          self.collecting = false
          uni.showToast({ title: '报告已采集完成', icon: 'success', duration: 2000 })
          var reportId = data.reportId
          var reportType = data.reportType || 'gut_flora'
          setTimeout(function() {
            if (reportId) {
              // 统一跳转到健康报告详情页（后端指纹识别后统一入库到 health_report 表）
              if (reportType === 'gut_flora') {
                uni.redirectTo({ url: '/pages/health/gut-flora-detail?reportId=' + reportId })
              } else {
                uni.redirectTo({ url: '/pages/health/report-detail?reportType=' + reportType + '&reportId=' + reportId })
              }
            } else {
              uni.redirectTo({ url: '/pages/health/report-list' })
            }
          }, 600)
        } else if (status === 'failed') {
          self.stopCollectPolling()
          self.collectError = data.parseError || '报告采集失败，请重试'
          uni.showToast({ title: self.collectError, icon: 'none', duration: 3000 })
        }
      }).catch(function() {
        // 轮询失败静默，下次继续
      })
    },
    goReportList: function() {
      this.stopCollectPolling()
      uni.redirectTo({ url: '/pages/health/report-list' })
    },
    cancelCollect: function() {
      this.stopCollectPolling()
      this.collecting = false
      this.collectDraftId = null
      this.collectFileName = ''
      this.collectError = ''
    }
  }
}
</script>

<style scoped>
.upload-container {
  min-height: 100vh;
  background: #F5F7FA;
  padding-bottom: env(safe-area-inset-bottom);
}

.tip-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #E3F2FD;
  margin: 20rpx 30rpx;
  padding: 20rpx 24rpx;
  border-radius: 16rpx;
}
.tip-icon {
  font-size: 32rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.tip-text {
  font-size: 24rpx;
  color: #1565C0;
  line-height: 1.5;
}

.form-section {
  margin: 0 30rpx;
}
.form-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}
.form-label {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
}

/* 上传方式卡片 */
.upload-methods {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  margin-bottom: 20rpx;
}
.upload-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32rpx 12rpx;
  border-radius: 20rpx;
  text-align: center;
  min-height: 200rpx;
}
.upload-card:active {
  opacity: 0.85;
}
.upload-card-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  font-size: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}
.upload-card-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}
.upload-card-desc {
  font-size: 20rpx;
  color: #94A3B8;
  line-height: 1.5;
}

.card-chat {
  background: #F0F7FF;
  border: 2rpx dashed #93C5FD;
}
.card-chat .upload-card-icon {
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  color: #fff;
}

.card-photo {
  background: #FFF7ED;
  border: 2rpx solid #FED7AA;
}
.card-photo .upload-card-icon {
  background: linear-gradient(135deg, #FB923C, #EA580C);
  color: #fff;
}

/* 采集中面板 */
.collecting-panel {
  margin-bottom: 20rpx;
}
.collecting-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background: #FFF8E6;
  border: 1rpx solid #F5D78E;
  border-radius: 16rpx;
  padding: 28rpx 24rpx;
}
.collecting-icon {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #F0B429;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.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-fail-mark {
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
}
.collecting-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.collecting-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #7A5C00;
}
.collecting-file {
  font-size: 24rpx;
  color: #A08A45;
  margin-top: 6rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collecting-hint {
  font-size: 22rpx;
  color: #C0A75A;
  margin-top: 8rpx;
  line-height: 1.5;
}
.collecting-actions {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  margin-top: 16rpx;
}
.collecting-btn {
  flex: 1;
  height: 72rpx;
  line-height: 72rpx;
  text-align: center;
  background: #5B9BD5;
  color: #fff;
  font-size: 28rpx;
  border-radius: 12rpx;
}
.collecting-cancel {
  padding: 0 24rpx;
  height: 72rpx;
  line-height: 72rpx;
  text-align: center;
  background: #fff;
  border: 1rpx solid #D1D5DB;
  color: #666;
  font-size: 28rpx;
  border-radius: 12rpx;
}

/* 上传中状态 */
.analyzing-status {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.analyzing-text {
  font-size: 26rpx;
  color: #5B9BD5;
}

/* 责任声明 */
.disclaimer-box {
  background: #FFF8F0;
  border: 2rpx solid #FDE68A;
}
.disclaimer-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 12rpx;
}
.disclaimer-checkbox {
  width: 36rpx;
  height: 36rpx;
  border-radius: 6rpx;
  border: 2rpx solid #CBD5E1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 12rpx;
}
.disclaimer-checked {
  background: #5B9BD5;
  border-color: #5B9BD5;
}
.disclaimer-checkmark {
  font-size: 24rpx;
  color: #fff;
  font-weight: bold;
}
.disclaimer-label {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
}
.disclaimer-content {
  background: #FFFDF5;
  border-radius: 10rpx;
  padding: 16rpx;
  margin-left: 48rpx;
}
.disclaimer-text {
  font-size: 22rpx;
  color: #92400E;
  line-height: 1.6;
}

/* 上传说明 */
.guide-section {
  margin: 0 30rpx 30rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.guide-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20rpx;
}
.guide-header-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}
.guide-header-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
}
.guide-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 20rpx;
}
.guide-icon-box {
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.guide-icon {
  font-size: 32rpx;
}
.guide-icon-blue { background: #DBEAFE; }
.guide-icon-green { background: #DCFCE7; }
.guide-icon-orange { background: #FFEDD5; }
.guide-icon-purple { background: #EDE9FE; }
.guide-icon-teal { background: #CCFBF1; }
.guide-info {
  flex: 1;
}
.guide-name {
  font-size: 26rpx;
  font-weight: 600;
  color: #334155;
  display: block;
  margin-bottom: 4rpx;
}
.guide-desc {
  font-size: 22rpx;
  color: #94A3B8;
  line-height: 1.5;
}
.guide-tips {
  margin-top: 8rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid #F1F5F9;
}
.guide-tips-title {
  font-size: 24rpx;
  font-weight: 600;
  color: #64748B;
  display: block;
  margin-bottom: 8rpx;
}
.guide-tips-item {
  font-size: 22rpx;
  color: #94A3B8;
  display: block;
  line-height: 1.7;
}
</style>