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">上传体检/菌群报告、认知测评、心理测评或情绪打卡记录，为您生成个性化成长方案</text>
    </view>

    <!-- 表单 -->
    <view class="form-section">
      <!-- 上传方式：并排卡片 -->
      <view class="upload-methods">
        <view class="upload-card card-file" @click="pickFile">
          <view class="upload-card-icon">📄</view>
          <text class="upload-card-title">从聊天选择文件</text>
          <text class="upload-card-desc">PDF / Word / 图片<br/>体检报告、测评报告、情绪打卡</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">拍摄舌象照片<br/>或单页纸质报告</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 class="form-item" v-if="uploading">
        <text class="form-label">上传中...</text>
        <view class="analyzing-status">
          <text class="analyzing-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-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-purple"><text class="guide-icon">🧠</text></view>
          <view class="guide-info">
            <text class="guide-name">认知能力测评报告</text>
            <text class="guide-desc">韦氏、瑞文等标准化认知测评，以及双培强基工程DAN认知能力测评，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">气质类型、情绪智力、人格特征等心理测评，以及双培强基工程DAN人格、情绪、自我概念和自驱力测评，辅助家庭教育决策</text>
          </view>
        </view>
        <view class="guide-item">
          <view class="guide-icon-box guide-icon-pink"><text class="guide-icon">📝</text></view>
          <view class="guide-info">
            <text class="guide-name">情绪打卡记录</text>
            <text class="guide-desc">手机端情绪打卡截图或记录文件，追踪情绪变化趋势</text>
          </view>
        </view>
        <view class="guide-item" @click="goBodyFatScale">
          <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">拍摄体脂秤显示屏照片，AI 自动提取体重、BMI、体脂率等指标</text>
          </view>
        </view>
      </view>
      <view class="guide-tips">
        <text class="guide-tips-title">温馨提示</text>
        <text class="guide-tips-item">· 单次上传 1 个文件，支持 PDF / JPG / PNG 格式</text>
        <text class="guide-tips-item">· 拍照时请保持光线充足，确保报告内容完整清晰</text>
        <text class="guide-tips-item">· 上传后由 AI 自动解析，解析结果可在线编辑确认</text>
      </view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      memberId: null,
      uploading: false,
      selectedFile: null,
      photoPath: null,
      agreedToTerms: false,
      currentMemberId: null,
      extractedMetrics: []
    }
  },
  onLoad: function(options) {
    this.memberId = options.memberId ? parseInt(options.memberId) : null
    if (options.bodyFatMetrics) {
      try {
        this.extractedMetrics = JSON.parse(decodeURIComponent(options.bodyFatMetrics))
      } catch (e) {}
    }
  },
  methods: {
    // 切换同意声明
    toggleAgree() {
      this.agreedToTerms = !this.agreedToTerms
    },
    // 未勾选声明时弹窗确认
    ensureAgreed(isPhoto) {
      if (this.agreedToTerms) {
        this.startPick(isPhoto)
        return
      }
      uni.showModal({
        title: '数据使用声明',
        content: '上传报告即代表您同意平台使用本报告数据进行分析，为您提供个性化健康解决方案；未经您授权，平台不会以任何形式将您的报告内容提供给其他任何个人或机构。点击「同意继续」即表示您已阅读并同意。',
        confirmText: '同意继续',
        cancelText: '暂不',
        success: (res) => {
          if (res.confirm) {
            this.agreedToTerms = true
            this.startPick(isPhoto)
          }
        }
      })
    },
    startPick(isPhoto) {
      if (isPhoto) {
        uni.chooseImage({
          count: 1,
          sourceType: ['camera', 'album'],
          success: (res) => {
            this.photoPath = res.tempFilePaths[0]
            this.uploadAndGoConfirm(this.photoPath, 'image')
          }
        })
      } else {
        uni.chooseMessageFile({
          count: 1,
          type: 'file',
          extension: ['pdf'],
          success: (res) => {
            var files = res.tempFiles
            if (files && files.length > 0) {
              this.selectedFile = files[0]
              this.uploadAndGoConfirm(files[0].path, '')
            }
          },
          fail: (e) => {
            console.log('选择文件取消或失败', e)
          }
        })
      }
    },
    // ===== 拍照上传 =====
    takePhoto() {
      if (this.agreedToTerms) {
        this.startPick(true)
        return
      }
      uni.showModal({
        title: '数据使用声明',
        content: '上传报告即代表您同意平台使用本报告数据进行分析，为您提供个性化健康解决方案；未经您授权，平台不会以任何形式将您的报告内容提供给其他任何个人或机构。点击「同意继续」即表示您已阅读并同意。',
        confirmText: '同意继续',
        cancelText: '暂不',
        success: (res) => {
          if (res.confirm) {
            this.agreedToTerms = true
            this.startPick(true)
          }
        }
      })
    },
    // ===== 文件上传 =====
    pickFile() {
      if (this.agreedToTerms) {
        this.startPick(false)
        return
      }
      uni.showModal({
        title: '数据使用声明',
        content: '上传报告即代表您同意平台使用本报告数据进行分析，为您提供个性化健康解决方案；未经您授权，平台不会以任何形式将您的报告内容提供给其他任何个人或机构。点击「同意继续」即表示您已阅读并同意。',
        confirmText: '同意继续',
        cancelText: '暂不',
        success: (res) => {
          if (res.confirm) {
            this.agreedToTerms = true
            this.startPick(false)
          }
        }
      })
    },
    // 上传文件 → 自动跳转确认页（确认页按 draftId 触发解析并自动刷新显示结果）
    uploadAndGoConfirm(filePath, type) {
      if (!filePath) return
      this.uploading = true
      uni.showLoading({ title: '上传中...' })
      uploadReportOnly(filePath, type).then((res) => {
        uni.hideLoading()
        this.uploading = false
        var draftId = res.data && res.data.draftId
        if (!draftId) {
          uni.showToast({ title: (res && res.message) || '上传失败', icon: 'none' })
          return
        }
        uni.redirectTo({ url: '/pages/health/gut-flora-detail?draftId=' + draftId })
      }).catch((err) => {
        uni.hideLoading()
        this.uploading = false
        var msg = (err && err.message) || '上传失败，请重试'
        uni.showToast({ title: msg, icon: 'none' })
      })
    },
    // ===== 体脂秤专用上传 =====
    goBodyFatScale() {
      if (!this.agreedToTerms) {
        uni.showModal({
          title: '数据使用声明',
          content: '上传体脂秤照片即代表您同意平台使用本报告数据进行分析。点击「同意继续」即表示您已阅读并同意。',
          confirmText: '同意继续',
          cancelText: '暂不',
          success: (res) => {
            if (res.confirm) {
              this.agreedToTerms = true
              this.startBodyFatUpload()
            }
          }
        })
        return
      }
      this.startBodyFatUpload()
    },
    startBodyFatUpload() {
      var self = this
      uni.chooseImage({
        count: 1,
        sourceType: ['camera', 'album'],
        success: function(res) {
          self.photoPath = res.tempFilePaths[0]
          self.uploadBodyFat(self.photoPath)
        }
      })
    },
    uploadBodyFat(filePath) {
      var self = this
      self.uploading = true
      uni.showLoading({ title: 'AI 识别中...' })
      var token = uni.getStorageSync('token')
      uni.uploadFile({
        url: config.API_BASE_URL + '/api/health/report/bodyfat-upload',
        filePath: filePath,
        name: 'file',
        header: { 'Authorization': 'Bearer ' + token },
        success: function(uploadRes) {
          var data
          try { data = JSON.parse(uploadRes.data) } catch (e) { data = uploadRes.data }
          self.uploading = false
          uni.hideLoading()
          if (data && data.code === 200) {
            self.currentMemberId = data.data && data.data.memberId
            self.extractedMetrics = data.data && data.data.metrics || []
            uni.navigateTo({ url: '/pages/health/bodyfat-confirm' })
          } else {
            uni.showToast({ title: (data && data.message) || '上传失败', icon: 'none' })
          }
        },
        fail: function() {
          self.uploading = false
          uni.hideLoading()
          uni.showToast({ title: '网络错误', icon: 'none' })
        }
      })
    }
  }
}
</script>

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

/* ===== 导航栏 ===== */
.nav-placeholder {
  width: 80rpx;
}

/* ===== 提示条 ===== */
.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;
}

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

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

/* ===== 责任声明 ===== */
.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;
}

/* ===== 上传方式：并排卡片 ===== */
.upload-methods {
  display: flex;
  flex-direction: row;
  gap: 20rpx;
  margin-bottom: 20rpx;
}
.upload-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx 20rpx;
  border-radius: 20rpx;
  text-align: center;
  min-height: 240rpx;
}
.upload-card:active {
  opacity: 0.85;
}
.upload-card-icon {
  width: 96rpx;
  height: 96rpx;
  border-radius: 24rpx;
  font-size: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}
.upload-card-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10rpx;
}
.upload-card-desc {
  font-size: 22rpx;
  color: #94A3B8;
  line-height: 1.5;
}
.card-file {
  background: #F0F7FF;
  border: 2rpx dashed #93C5FD;
}
.card-file .upload-card-icon {
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
}
.card-photo {
  background: #FFF7ED;
  border: 2rpx solid #FED7AA;
}
.card-photo .upload-card-icon {
  background: linear-gradient(135deg, #FB923C, #EA580C);
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(234, 88, 12, 0.25);
}

/* ===== 上传说明 ===== */
.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: 30rpx;
  margin-right: 10rpx;
}
.guide-header-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}
.guide-list {
  display: flex;
  flex-direction: column;
}
.guide-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #F0F0F0;
}
.guide-item:last-of-type {
  border-bottom: none;
}
.guide-icon-box {
  width: 72rpx;
  height: 72rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 20rpx;
}
.guide-icon {
  font-size: 36rpx;
}
.guide-icon-blue {
  background: #E3F2FD;
}
.guide-icon-green {
  background: #E8F5E9;
}
.guide-icon-orange {
  background: #FFF3E0;
}
.guide-icon-purple {
  background: #F3E5F5;
}
.guide-icon-teal {
  background: #E0F2F1;
}
.guide-icon-pink {
  background: #FCE4EC;
}
.guide-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.guide-name {
  font-size: 26rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 4rpx;
}
.guide-desc {
  font-size: 22rpx;
  color: #94A3B8;
  line-height: 1.4;
}
.guide-tips {
  background: #F8FAFC;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  margin-top: 16rpx;
  display: flex;
  flex-direction: column;
}
.guide-tips-title {
  font-size: 24rpx;
  font-weight: 600;
  color: #5B9BD5;
  margin-bottom: 8rpx;
}
.guide-tips-item {
  font-size: 22rpx;
  color: #64748B;
  line-height: 1.7;
}
</style>