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

<template>
  <view class="roadmap-page">
    <view class="section-card">
      <text class="section-title">路演材料上传</text>
      <text class="card-desc">上传您小组的路演陈述材料</text>
      <view class="form-item">
        <text class="form-label">路演主题陈述</text>
        <textarea class="form-textarea" v-model="proposition" placeholder="请描述您小组的路演主题..." :maxlength="1000" />
      </view>
      <view class="form-item">
        <text class="form-label">附件材料</text>
        <button class="upload-btn" @click="chooseFile">选择文件/图片</button>
        <image v-if="fileUrl" :src="fileUrl" class="preview-img" mode="aspectFit" />
        <text v-if="fileName" class="file-name">{{ fileName }}</text>
      </view>
      <button class="submit-btn" @click="handleSubmit" :loading="loading" :disabled="loading || !proposition">提交路演材料</button>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      proposition: '',
      fileUrl: '',
      fileName: '',
      filePath: '',
      loading: false
    }
  },
  methods: {
    chooseFile() {
      var self = this
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: function(res) {
          self.filePath = res.tempFilePaths[0]
          self.fileName = res.tempFilePaths[0].split('/').pop()
          self.fileUrl = res.tempFilePaths[0]
        }
      })
    },
    handleSubmit() {
      if (!guardPage()) return
      if (!this.proposition.trim()) {
        uni.showToast({ title: '请输入路演主题', icon: 'none' })
        return
      }
      if (this.loading) return
      this.loading = true
      var self = this
      var doSubmit = function(files) {
        return uploadRoadmap({ proposition: self.proposition, files: files })
      }
      var p = this.filePath ? uploadFile(this.filePath).then(function(r) { return r.data.url }) : Promise.resolve(null)
      p.then(function(url) {
        return doSubmit(url)
      }).then(function() {
        uni.showToast({ title: '提交成功', icon: 'success' })
        setTimeout(function() { uni.navigateBack() }, 800)
      }).catch(function(err) {
        uni.showToast({ title: (err && err.message) || '提交失败', icon: 'none' })
      }).finally(function() {
        self.loading = false
      })
    }
  }
}
</script>

<style scoped>
.roadmap-page { min-height: 100vh; background: #F5F5F5; padding: 32rpx; }
.section-card { background: #FFF; border-radius: 16rpx; padding: 32rpx; }
.section-title { display: block; font-size: 32rpx; font-weight: 700; color: #1E293B; margin-bottom: 12rpx; border-left: 8rpx solid #F97316; padding-left: 16rpx; }
.card-desc { display: block; font-size: 26rpx; color: #64748B; margin-bottom: 32rpx; }
.form-item { margin-bottom: 28rpx; }
.form-label { display: block; font-size: 28rpx; color: #1E293B; font-weight: 500; margin-bottom: 12rpx; }
.form-textarea { width: 100%; min-height: 240rpx; border: 2rpx solid #E2E8F0; border-radius: 8rpx; padding: 20rpx; font-size: 28rpx; color: #1E293B; background: #F8FAFC; }
.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: 250rpx; border-radius: 8rpx; margin-bottom: 12rpx; }
.file-name { font-size: 24rpx; color: #64748B; }
.submit-btn { width: 100%; height: 88rpx; line-height: 88rpx; background: #F97316; color: #FFF; font-size: 30rpx; font-weight: 600; border-radius: 44rpx; border: none; margin-top: 16rpx; }
.submit-btn:active { opacity: 0.85; }
</style>