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" 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,
      // 购买推荐
      recommendedProducts: [],
      loadingProducts: false
    }
  },
  onLoad: function(options) {
    this.memberId = options.memberId ? parseInt(options.memberId) : null
    this.loadRecommendProducts()
  },
  onShow: function() {
    this.loadRecommendProducts()
  },
  methods: {
    // ===== 拍照上传 =====
    takePhoto() {
      var self = this
      uni.chooseImage({
        count: 1,
        sourceType: ['camera', 'album'],
        success: function(res) {
          self.photoPath = res.tempFilePaths[0]
          // 拍照后直接上传并进入确认页
          self.uploadAndGoConfirm(self.photoPath, 'image')
        }
      })
    },
    // ===== 文件上传 =====
    pickFile() {
      var self = this
      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)
        }
      })
    },
    // 上传文件 → 自动跳转确认页（确认页按 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;
}

/* ===== 上传方式：并排卡片 ===== */
.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>