cfc/cfc-frontend/pages/growth/upload.vue

<template>
  <view class="container">
    <view class="header">
      <text class="title">上传测评报告</text>
      <text class="subtitle">上传PDF测评报告，自动解析数据</text>
    </view>

    <view class="form" v-if="step === 1">
      <view class="form-item">
        <text class="label">孩子</text>
        <view class="child-select" @click="selectChild">
          <text class="select-text" v-if="selectedChild">{{ selectedChild.nickname || selectedChild.name }}</text>
          <text class="select-placeholder" v-else>请选择孩子</text>
          <text class="select-arrow">›</text>
        </view>
      </view>

      <!-- 成长报告推荐区 -->
      <view class="purchase-section" v-if="recommendedProducts.length > 0">
        <view class="purchase-header">
          <text class="purchase-title">还没有成长报告？</text>
          <text class="purchase-subtitle">购买测评，获取专业成长报告</text>
        </view>
        <scroll-view class="purchase-scroll" scroll-x enable-flex show-scrollbar="false">
          <view
            class="purchase-card"
            v-for="(item, pi) in recommendedProducts"
            :key="pi"
            @click="goToProduct(item.id)"
          >
            <image class="purchase-cover" :src="getImageUrl(item.coverImage) || '/static/default-product.png'" mode="aspectFill" />
            <text class="purchase-name">{{ item.name }}</text>
            <text class="purchase-price">{{ formatPrice(item.price) }}</text>
            <view class="purchase-btn">
              <text class="purchase-btn-text">查看详情</text>
            </view>
          </view>
        </scroll-view>
      </view>

      <view class="form-item">
        <text class="label">选择报告文件</text>
        <view class="upload-area" @click="chooseFile">
          <text class="upload-icon" v-if="!fileName">+</text>
          <text class="upload-text" v-if="!fileName">点击选择PDF文件</text>
          <text class="file-name" v-if="fileName">{{ fileName }}</text>
        </view>
      </view>

      <button class="btn-submit" @click="uploadAndParse" :disabled="!canUpload">上传并解析</button>
    </view>

    <view class="form" v-if="step === 2">
      <view class="form-item">
        <text class="label">解析结果预览</text>
      </view>

      <view class="preview-card" v-if="parsedData">
        <view class="preview-row" v-if="parsedData.overallScore">
          <text class="preview-label">综合得分</text>
          <text class="preview-value">{{ parsedData.overallScore }}</text>
        </view>
        <view class="preview-row" v-if="reportDateStr">
          <text class="preview-label">报告日期</text>
          <text class="preview-value">{{ reportDateStr }}</text>
        </view>
        <view class="preview-row" v-if="parsedData.assessmentSummary">
          <text class="preview-label">测评总结</text>
          <text class="preview-value summary">{{ parsedData.assessmentSummary }}</text>
        </view>
      </view>

      <view class="form-item" v-if="!parsedData || !parsedData.reportDate">
        <text class="label">报告日期（手动输入）</text>
        <picker mode="date" :value="manualDate" @change="onDateChange">
          <view class="picker-input">{{ manualDate || '请选择日期' }}</view>
        </picker>
      </view>

      <view class="btn-group">
        <button class="btn-secondary" @click="reset">重新上传</button>
        <button class="btn-submit" @click="confirmCreate">确认创建</button>
      </view>
    </view>
  </view>
</template>

<script>
import { uploadAndParseReport, createGrowthRecordFromUpload, checkGrowthDuplicate, getChildren, productList, getChildRecords } from '../../utils/api.js'
import config from '@/config.js'

export default {
  data() {
    return {
      step: 1,
      children: [],
      selectedChild: null,
      fileName: '',
      filePath: '',
      sourceFileUrl: '',
      parsedData: null,
      reportDateStr: '',
      manualDate: '',
      recommendedProducts: [],
      growthLoading: false
    }
  },
  computed: {
    canUpload() {
      return this.selectedChild && this.filePath
    }
  },
  onLoad(options) {
    this.loadChildren(options.memberId)
  },
  methods: {
    async loadChildren(targetChildId) {
      try {
        var res = await getChildren()
        if (res.code === 200) {
          this.children = res.data || []
          var target = null
          if (targetChildId) {
            target = this.children.find(function(c) { return String(c.id) === String(targetChildId) })
          }
          if (!target && this.children.length > 0) {
            target = this.children[0]
          }
          if (target) {
            this.selectedChild = target
            this.loadRecommend()
          }
        }
      } catch (e) {
        console.error(e)
      }
    },
    selectChild() {
      var items = this.children.map(function(c) { return c.nickname || c.name })
      var self = this
      uni.showActionSheet({
        itemList: items,
        success: function(res) {
          var idx = res.tapIndex
          if (idx >= 0 && idx < self.children.length) {
            self.selectedChild = self.children[idx]
            self.loadRecommend()
          }
        }
      })
    },
    chooseFile() {
      var self = this
      uni.chooseMessageFile({
        count: 1,
        type: 'file',
        extension: ['pdf'],
        success: function(res) {
          if (res.tempFiles && res.tempFiles.length > 0) {
            self.fileName = res.tempFiles[0].name
            self.filePath = res.tempFiles[0].path
          }
        },
        fail: function() {
          uni.showToast({ title: '请选择PDF文件', icon: 'none' })
        }
      })
    },
    async uploadAndParse() {
      if (!this.canUpload) return
      uni.showLoading({ title: '上传解析中...' })
      try {
        var res = await uploadAndParseReport(this.filePath)
        uni.hideLoading()
        if (res.code === 200) {
          this.sourceFileUrl = res.data.sourceFileUrl
          this.parsedData = res.data.parsed
          this.reportDateStr = res.data.reportDateStr
          this.step = 2
        } else {
          uni.showToast({ title: res.message || '解析失败', icon: 'none' })
        }
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: e.message || '上传失败', icon: 'none' })
      }
    },
    onDateChange(e) {
      this.manualDate = e.detail.value
    },
    async confirmCreate() {
      var reportDate = this.manualDate || this.reportDateStr
      if (!reportDate && (!this.parsedData || !this.parsedData.reportDate)) {
        uni.showToast({ title: '请输入报告日期', icon: 'none' })
        return
      }
      uni.showLoading({ title: '创建中...' })
      try {
        var submitData = {
          memberId: this.selectedChild.id,
          sourceFileUrl: this.sourceFileUrl
        }
        if (this.parsedData) {
          if (this.parsedData.overallScore) submitData.overallScore = this.parsedData.overallScore
          if (this.parsedData.attentionScore) submitData.attentionScore = this.parsedData.attentionScore
          if (this.parsedData.focusScore) submitData.focusScore = this.parsedData.focusScore
          if (this.parsedData.memoryScore) submitData.memoryScore = this.parsedData.memoryScore
          if (this.parsedData.logicScore) submitData.logicScore = this.parsedData.logicScore
          if (this.parsedData.perceptionScore) submitData.perceptionScore = this.parsedData.perceptionScore
          if (this.parsedData.spatialScore) submitData.spatialScore = this.parsedData.spatialScore
          if (this.parsedData.processingSpeedScore) submitData.processingSpeedScore = this.parsedData.processingSpeedScore
          if (this.parsedData.emotionScore) submitData.emotionScore = this.parsedData.emotionScore
          if (this.parsedData.resilienceScore) submitData.resilienceScore = this.parsedData.resilienceScore
          if (this.parsedData.assessmentSummary) submitData.assessmentSummary = this.parsedData.assessmentSummary
          if (this.parsedData.growthSuggestions) submitData.growthSuggestions = this.parsedData.growthSuggestions
        }
        if (this.manualDate) {
          submitData.manualReportDate = this.manualDate
        }
        var res = await createGrowthRecordFromUpload(submitData)
        uni.hideLoading()
        if (res.code === 200) {
          uni.showToast({ title: '创建成功', icon: 'success' })
          setTimeout(function() {
            uni.navigateTo({ url: '/pages/growth/detail?recordId=' + res.data.id })
          }, 500)
        } else {
          uni.showToast({ title: res.message || '创建失败', icon: 'none' })
        }
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: e.message || '创建失败', icon: 'none' })
      }
    },
    reset() {
      this.step = 1
      this.fileName = ''
      this.filePath = ''
      this.sourceFileUrl = ''
      this.parsedData = null
      this.reportDateStr = ''
      this.manualDate = ''
    },
    loadRecommend: async function() {
      this.recommendedProducts = []
      var child = this.selectedChild
      if (!child) {
        this.growthLoading = false
        return
      }
      this.growthLoading = true
      try {
        var res = await getChildRecords(child.id)
        if (res && res.code === 200) {
          var records = res.data || []
          if (records.length === 0) {
            var prodRes = await productList({ growthRelated: true, size: 10 })
            if (prodRes && prodRes.code === 200) {
              var arr = (prodRes.data && prodRes.data.list) || (prodRes.data && prodRes.data.records) || []
              this.recommendedProducts = arr
            }
          }
        }
      } catch (e) {
        this.recommendedProducts = []
      } finally {
        this.growthLoading = false
      }
    },
    goToProduct: function(id) {
      uni.navigateTo({ url: '/pages/discover-detail/product-detail/product-detail?id=' + id })
    },
    formatPrice: function(cents) {
      if (cents === null || cents === undefined) return '¥0'
      return '¥' + (cents / 100).toFixed(2)
    },
    getImageUrl: function(path) {
      return config.API_BASE_URL + path
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  background: #F8F8F8;
  min-height: 100vh;
}
.header {
  text-align: center;
  padding: 40rpx 0 30rpx;
}
.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}
.subtitle {
  font-size: 26rpx;
  color: #999;
}
.form {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
}
.form-item {
  margin-bottom: 30rpx;
}
.label {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
  font-weight: bold;
}
.child-select {
  display: flex;
  align-items: center;
  height: 76rpx;
  border: 1rpx solid #E0E0E0;
  border-radius: 10rpx;
  padding: 0 20rpx;
}
.select-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}
.select-placeholder {
  flex: 1;
  font-size: 28rpx;
  color: #ccc;
}
.select-arrow {
  font-size: 32rpx;
  color: #ccc;
}
.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200rpx;
  border: 2rpx dashed #ccc;
  border-radius: 16rpx;
  background: #fafafa;
}
.upload-icon {
  font-size: 64rpx;
  color: #999;
  line-height: 1;
}
.upload-text {
  font-size: 26rpx;
  color: #999;
  margin-top: 10rpx;
}
.file-name {
  font-size: 28rpx;
  color: #667eea;
  word-break: break-all;
  text-align: center;
}
.btn-submit {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
}
.btn-submit[disabled] {
  opacity: 0.5;
}
.preview-card {
  background: #f9f9ff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
}
.preview-row {
  display: flex;
  margin-bottom: 16rpx;
}
.preview-label {
  font-size: 26rpx;
  color: #666;
  width: 160rpx;
  flex-shrink: 0;
}
.preview-value {
  font-size: 26rpx;
  color: #333;
  flex: 1;
}
.preview-value.summary {
  max-height: 200rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.picker-input {
  height: 76rpx;
  line-height: 76rpx;
  border: 1rpx solid #E0E0E0;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}
.btn-group {
  display: flex;
  gap: 20rpx;
}
.btn-secondary {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  background: #fff;
  color: #667eea;
  border: 2rpx solid #667eea;
  border-radius: 44rpx;
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
}
.btn-group .btn-submit {
  flex: 1;
}
.purchase-section {
  background: #F0F9FF;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  border: 2rpx solid #BAE6FD;
}
.purchase-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 16rpx;
}
.purchase-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #0369A1;
}
.purchase-subtitle {
  font-size: 24rpx;
  color: #0284C7;
  margin-top: 6rpx;
}
.purchase-scroll {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
}
.purchase-card {
  display: inline-flex;
  flex-direction: column;
  width: 220rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 16rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.purchase-cover {
  width: 188rpx;
  height: 120rpx;
  border-radius: 8rpx;
  background: #F1F5F9;
  margin-bottom: 8rpx;
}
.purchase-name {
  font-size: 22rpx;
  color: #333;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4rpx;
}
.purchase-price {
  font-size: 24rpx;
  color: #EF4444;
  font-weight: bold;
  margin-bottom: 8rpx;
}
.purchase-btn {
  background: #3B82F6;
  border-radius: 8rpx;
  padding: 8rpx 0;
  text-align: center;
}
.purchase-btn-text {
  font-size: 22rpx;
  color: #fff;
  font-weight: 500;
}
</style>