caremate/train-frontend/pages/upload/index.vue

<template>
  <view class="upload-page">
    <view class="section-card">
      <text class="section-title">成果上传</text>
      <view class="form-item">
        <text class="form-label">账本类型</text>
        <picker :range="bookTypes" range-key="label" @change="onBookTypeChange">
          <view class="picker-display">{{ selectedBookType.label }} ▼</view>
        </picker>
      </view>
      <view class="form-item">
        <text class="form-label">上传类型</text>
        <radio-group @change="onTypeChange">
          <label class="radio-item"><radio value="deep" :checked="uploadForm.type === 'deep'" color="#F97316" />深度分析</label>
          <label class="radio-item"><radio value="taught" :checked="uploadForm.type === 'taught'" color="#F97316" />教学成果</label>
        </radio-group>
      </view>
      <view class="form-item">
        <label class="check-item">
          <checkbox :checked="uploadForm.desensitized" @tap="uploadForm.desensitized = !uploadForm.desensitized" color="#F97316" />
          <text>我已确认数据已脱敏处理</text>
        </label>
      </view>
      <button class="upload-btn" @click="chooseImage">选择截图</button>
      <image v-if="uploadImage" :src="uploadImage" class="preview-img" mode="aspectFit" />
      <button class="submit-btn" @click="handleUpload" :loading="loading" :disabled="!uploadForm.desensitized || !uploadImage || loading">提交</button>
    </view>

    <view class="section-card">
      <text class="section-title">我的上传记录</text>
      <view v-if="submissions.length === 0" class="empty-text">暂无记录</view>
      <view class="sub-item" v-for="(s, idx) in submissions" :key="idx">
        <view class="sub-header">
          <text class="sub-type">{{ bookLabel(s.bookType) }} · {{ s.type === 'deep' ? '深度分析' : '教学成果' }}</text>
          <text class="sub-status">{{ s.status }}</text>
        </view>
        <image v-if="s.image" :src="s.image" class="sub-thumb" mode="aspectFill" />
      </view>
    </view>
  </view>
</template>

<script>
import { uploadSubmission, getMySubmissions, uploadFile } from '@/utils/api.js'
import { guardPage } from '@/utils/guard.js'

export default {
  data() {
    return {
      bookTypes: [
        { value: 'wealth', label: '财富账' },
        { value: 'health', label: '健康账' },
        { value: 'growth', label: '成长账' }
      ],
      uploadForm: {
        bookType: 'wealth',
        type: 'deep',
        desensitized: false,
        sampleFlag: 0
      },
      uploadImage: '',
      loading: false,
      submissions: []
    }
  },
  computed: {
    selectedBookType() {
      return this.bookTypes.find(b => b.value === this.uploadForm.bookType) || this.bookTypes[0]
    }
  },
onShow() {
    if (!guardPage()) return
    this.loadSubmissions()
  },
  methods: {
    loadSubmissions() {
      var self = this
      getMySubmissions().then(function(resp) {
        self.submissions = resp.data || []
      }).catch(function() {})
    },
    onBookTypeChange(e) {
      this.uploadForm.bookType = this.bookTypes[e.detail.value].value
    },
    onTypeChange(e) {
      this.uploadForm.type = e.detail.value
    },
    chooseImage() {
      var self = this
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: function(res) {
          self.uploadImage = res.tempFilePaths[0]
        }
      })
    },
    handleUpload() {
      if (!this.uploadForm.desensitized) {
        uni.showToast({ title: '请先确认已脱敏', icon: 'none' })
        return
      }
      if (!this.uploadImage || this.loading) return
      this.loading = true
      var self = this
      uploadFile(this.uploadImage).then(function(resp) {
        var url = resp.data.url
        return uploadSubmission({
          bookType: self.uploadForm.bookType,
          type: self.uploadForm.type,
          image: url,
          files: null,
          sampleFlag: 0,
          desensitized: 1
        })
      }).then(function() {
        uni.showToast({ title: '上传成功', icon: 'success' })
        self.uploadImage = ''
        self.loadSubmissions()
      }).catch(function(err) {
        uni.showToast({ title: (err && err.message) || '上传失败', icon: 'none' })
      }).finally(function() {
        self.loading = false
      })
    },
    bookLabel(type) {
      var map = { wealth: '财富账', health: '健康账', growth: '成长账' }
      return map[type] || type
    }
  }
}
</script>

<style scoped>
.upload-page { min-height: 100vh; background: #F5F5F5; padding: 24rpx 32rpx; }
.section-card { background: #FFF; border-radius: 16rpx; padding: 32rpx; margin-bottom: 24rpx; }
.section-title { display: block; font-size: 32rpx; font-weight: 700; color: #1E293B; margin-bottom: 24rpx; border-left: 8rpx solid #F97316; padding-left: 16rpx; }
.form-item { margin-bottom: 24rpx; }
.form-label { display: block; font-size: 28rpx; color: #1E293B; font-weight: 500; margin-bottom: 12rpx; }
.picker-display { height: 72rpx; line-height: 72rpx; border: 2rpx solid #E2E8F0; border-radius: 8rpx; padding: 0 20rpx; font-size: 28rpx; color: #1E293B; background: #F8FAFC; }
.radio-item, .check-item { display: flex; align-items: center; font-size: 28rpx; color: #1E293B; margin-bottom: 12rpx; }
.upload-btn { width: 100%; height: 72rpx; line-height: 72rpx; background: #FFF7ED; color: #F97316; font-size: 28rpx; border: 2rpx dashed #F97316; border-radius: 8rpx; margin-bottom: 16rpx; }
.preview-img { width: 100%; height: 300rpx; border-radius: 8rpx; margin-bottom: 16rpx; }
.submit-btn { width: 100%; height: 80rpx; line-height: 80rpx; background: #F97316; color: #FFF; font-size: 28rpx; font-weight: 500; border-radius: 40rpx; border: none; }
.submit-btn:active { opacity: 0.85; }
.empty-text { font-size: 26rpx; color: #94A3B8; text-align: center; padding: 24rpx 0; }
.sub-item { border-bottom: 1rpx solid #F1F5F9; padding: 20rpx 0; }
.sub-header { display: flex; justify-content: space-between; align-items: center; }
.sub-type { font-size: 28rpx; color: #1E293B; font-weight: 500; }
.sub-status { font-size: 24rpx; color: #F97316; }
.sub-thumb { width: 120rpx; height: 120rpx; border-radius: 8rpx; margin-top: 12rpx; }
</style>