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

<template>
  <view class="upload-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="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="agreedToTerms = !agreedToTerms">
          <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="bottom-spacer"></view>

    <!-- 菌群测评商品 -->
    <view class="product-section" v-if="recommendedProducts.length > 0">
      <view class="product-header">
        <text class="product-header-icon">📦</text>
        <text class="product-header-title">为家人购买检测服务</text>
      </view>
      <view class="product-grid">
        <view
          class="product-card"
          v-for="item in recommendedProducts"
          :key="item.id"
          @click="goToProduct(item.id)"
        >
          <image class="product-cover" :src="getImageUrl(item.coverImage) || '/static/default-product.png'" mode="aspectFill" />
          <text class="product-name">{{ item.name }}</text>
          <text class="product-price">{{ formatPriceWithSymbol(item.price) }}</text>
          <view class="product-btn">
            <text class="product-btn-text">去购买</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getProductsByDomain, uploadReportOnly } from '../../utils/api.js'
import config from '@/config.js'

export default {
  data() {
    return {
      memberId: null,
      uploading: false,
      selectedFile: null,
      photoPath: null,
      agreedToTerms: false,
      // 购买推荐
      recommendedProducts: [],
      loadingProducts: false
    }
  },
  onLoad: function(options) {
    this.memberId = options.memberId ? parseInt(options.memberId) : null
    this.loadRecommendProducts()
  },
  onShow: function() {
    this.loadRecommendProducts()
  },
  methods: {
    // 未勾选声明时弹窗确认
    ensureAgreed(isPhoto) {
      if (this.agreedToTerms) {
        this.startPick(isPhoto)
        return
      }
      var self = this
      uni.showModal({
        title: '数据使用声明',
        content: '上传报告即代表您同意平台使用报告数据进行分析并提供个性化健康解决方案；平台承诺未经您授权，不会以任何形式将您的报告提供给其他任何个人或机构。点击「同意并继续」即表示您已阅读并同意。',
        confirmText: '同意并继续',
        cancelText: '暂不',
        success: function(res) {
          if (res.confirm) {
            self.agreedToTerms = true
            self.startPick(isPhoto)
          }
        }
      })
    },
    startPick(isPhoto) {
      var self = this
      if (isPhoto) {
        uni.chooseImage({
          count: 1,
          sourceType: ['camera', 'album'],
          success: function(res) {
            self.photoPath = res.tempFilePaths[0]
            self.uploadAndGoConfirm(self.photoPath, 'image')
          }
        })
      } else {
        uni.chooseMessageFile({
          count: 1,
          type: 'file',
          extension: ['pdf'],
          success: function(res) {
            var files = res.tempFiles
            if (files && files.length > 0) {
              self.selectedFile = files[0]
              self.uploadAndGoConfirm(files[0].path, '')
            }
          },
          fail: function(e) {
            console.log('选择文件取消或失败', e)
          }
        })
      }
    },
    // ===== 拍照上传 =====
    takePhoto() {
      this.ensureAgreed(true)
    },
    // ===== 文件上传 =====
    pickFile() {
      this.ensureAgreed(false)
    },
    // 上传文件 → 自动跳转确认页（确认页按 draftId 触发解析并自动刷新显示结果）
    uploadAndGoConfirm(filePath, type) {
      var self = this
      if (!filePath) return
      self.uploading = true
      uni.showLoading({ title: '上传中...' })
      uploadReportOnly(filePath, type).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
        }
        // 只传 draftId，确认页自行解析
        uni.redirectTo({ url: '/pages/health/report-confirm?draftId=' + draftId })
      }).catch(function(err) {
        uni.hideLoading()
        self.uploading = false
        var msg = (err && err.message) || '上传失败，请重试'
        uni.showToast({ title: msg, icon: 'none' })
      })
    },
    loadRecommendProducts: function() {
      var self = this
      self.loadingProducts = true
      // 直接按身体维度加载推荐商品（商城已有的 domain 筛选器）
      getProductsByDomain('body', 1, 4).then(function(res) {
        if (res && res.data && res.data.records) {
          self.recommendedProducts = res.data.records
        } else {
          self.recommendedProducts = []
        }
      }).catch(function() {
        self.recommendedProducts = []
      }).finally(function() {
        self.loadingProducts = false
      })
    },
    goToProduct: function(productId) {
      // 直接进入结算页，跳过商品详情页
      var product = this.recommendedProducts.find(function(p) { return p.id === productId })
      if (product) {
        var productData = {
          productId: product.id,
          productName: product.name,
          coverImage: product.coverImage || '',
          unitPrice: product.price || 0,
          quantity: 1
        }
        uni.setStorageSync('checkoutItems', [productData])
        uni.navigateTo({ url: '/pages/shop/checkout/checkout?from=report_upload&id=' + productId })
      } else {
        uni.navigateTo({ url: '/pages/discover-detail/product-detail/product-detail?id=' + productId })
      }
    },
    formatPriceWithSymbol: function(cents) {
      if (cents === null || cents === undefined) return '¥0'
      return '¥' + (cents / 100).toFixed(2)
    },
    goBack() {
      uni.navigateBack()
    },
    getImageUrl: function(path) {
      return config.API_BASE_URL + path
    }
  }
}
</script>

<style scoped>
.upload-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;
}

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

/* ===== 菌群测评商品 ===== */
.product-section {
  margin: 0 30rpx 30rpx;
}
.product-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 16rpx;
}
.product-header-icon {
  font-size: 28rpx;
  margin-right: 8rpx;
}
.product-header-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
}
.product-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16rpx;
}
.product-card {
  width: calc(50% - 8rpx);
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-sizing: border-box;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
}
.product-card:active {
  opacity: 0.85;
}
.product-cover {
  width: 100%;
  height: 160rpx;
  border-radius: 10rpx;
  background: #F1F5F9;
  margin-bottom: 12rpx;
}
.product-name {
  display: block;
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 6rpx;
}
.product-price {
  display: block;
  font-size: 26rpx;
  color: #EF4444;
  font-weight: bold;
  margin-bottom: 12rpx;
}
.product-btn {
  background: linear-gradient(135deg, #5B9BD5, #3A7CC4);
  border-radius: 8rpx;
  padding: 12rpx 0;
  text-align: center;
}
.product-btn-text {
  font-size: 24rpx;
  color: #fff;
  font-weight: 500;
}
</style>