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

<template>
  <view class="container">
    <view class="header">
      <text class="title">上传测评报告</text>
      <text class="subtitle">支持 PDF / JPG / PNG 格式</text>
    </view>

    <view class="section">
      <view class="section-title">选择测评人</view>
      <view class="child-selector">
        <view class="child-item"
          :class="{ selected: selectedChildId === child.id }"
          v-for="child in children" :key="child.id"
          @click="selectedChildId = child.id">
          <text class="child-name">{{ child.nickname || '未命名' }}</text>
          <text class="child-check" v-if="selectedChildId === child.id">✓</text>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="section-title">选择文件</view>
      <view class="file-upload" @click="chooseFile">
        <text class="upload-icon">📄</text>
        <text class="upload-text">{{ fileName || '点击选择文件' }}</text>
      </view>
    </view>

    <view class="section">
      <view class="section-title">备注（可选）</view>
      <textarea class="textarea" v-model="notes" placeholder="添加备注信息..." />
    </view>

    <button class="btn-submit" :disabled="!canSubmit" @click="submitUpload">
      {{ uploading ? '上传中...' : '提交报告' }}
    </button>
  </view>
</template>

<script>
import { uploadAssessmentReport } from '../../utils/api.js'
import { pickImage } from '../../utils/image-picker.js'

export default {
  data() {
    return {
      children: [],
      selectedChildId: null,
      file: null,
      fileName: '',
      notes: '',
      uploading: false
    }
  },
  computed: {
    canSubmit() {
      return this.selectedChildId && this.file && !this.uploading
    }
  },
  onLoad() {
    this.loadChildren()
  },
  methods: {
    async loadChildren() {
      try {
        const res = await getChildren()
        if (res.code === 200) {
          this.children = res.data || []
          if (this.children.length === 1) {
            this.selectedChildId = this.children[0].id
          }
        }
      } catch (e) {
        console.error('获取测评人列表失败', e)
      }
    },
    chooseFile() {
      pickImage({
        count: 1,
        success: (res) => {
          this.file = res.tempFiles[0]
          this.fileName = this.file.name || '已选择文件'
        }
      })
    },
    async submitUpload() {
      if (!this.canSubmit) return
      this.uploading = true
      uni.showLoading({ title: '上传中...' })
      try {
        const res = await uploadAssessmentReport(this.file, this.selectedChildId, this.notes)
        uni.hideLoading()
        if (res.code === 200) {
          uni.showModal({
            title: '上传成功',
            content: '报告已提交，等待成长规划师确认',
            showCancel: false,
            success: () => uni.navigateBack()
          })
        } else {
          uni.showToast({ title: res.message || '上传失败', icon: 'none' })
        }
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: '上传失败', icon: 'none' })
      }
      this.uploading = false
    }
  }
}
</script>

<stylescoped lang="scss">
.container {
  padding: 30rpx;
  background: $facade-fill-page;
  min-height: 100vh;
}
.header {
  text-align: center;
  padding: 40rpx 0 30rpx;
}
.title {
  font-size: 44rpx;
  font-weight: bold;
  color: $facade-text-strong;
  display: block;
  margin-bottom: 16rpx;
}
.subtitle {
  font-size: 26rpx;
  color: $facade-text-muted;
}
.section {
  background: $app-surface;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: $facade-text-strong;
  margin-bottom: 20rpx;
}
.child-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}
.child-item {
  position: relative;
  background: $facade-fill-page;
  border: 2rpx solid $facade-hairline;
  border-radius: 10rpx;
  padding: 20rpx;
  min-width: 160rpx;
  text-align: center;
}
.child-item.selected {
  border-color: $accent-indigo;
  background: #F0F4FF;
}
.child-name {
  font-size: 28rpx;
  color: $facade-text-strong;
}
.child-check {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  width: 36rpx;
  height: 36rpx;
  background: $accent-indigo;
  color: $app-surface;
  border-radius: 50%;
  line-height: 36rpx;
  text-align: center;
  font-size: 20rpx;
}
.file-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  height: 160rpx;
  background: $facade-fill-page;
  border: 2rpx dashed $facade-text-ghost;
  border-radius: 12rpx;
}
.upload-icon {
  font-size: 48rpx;
}
.upload-text {
  font-size: 28rpx;
  color: $facade-text-body;
}
.textarea {
  width: 100%;
  height: 160rpx;
  background: $facade-fill-page;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}
.btn-submit {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(135deg, $accent-indigo, $accent-indigo-deep);
  color: $app-surface;
  border-radius: 44rpx;
  font-size: 30rpx;
  margin-top: 30rpx;
}
.btn-submit[disabled] {
  opacity: 0.5;
}
</style>