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

<template>
  <view class="teaching-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>
        <textarea class="form-textarea" v-model="form.steps" placeholder="请描述您的教学步骤（每行一步）" :maxlength="500" />
      </view>
      <view class="form-item">
        <text class="form-label">附件截图（可选）</text>
        <button class="upload-btn" @click="chooseImage">选择图片</button>
        <image v-if="image" :src="image" class="preview-img" mode="aspectFit" />
      </view>
      <view class="form-item">
        <text class="form-label">关联成果ID（可选）</text>
        <input class="form-input" v-model="form.submissionId" type="number" placeholder="如有对应成果请填写ID" />
      </view>
      <button class="submit-btn" @click="handleSubmit" :loading="loading" :disabled="loading || !form.steps">提交教学卡</button>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      bookTypes: [
        { value: 'wealth', label: '财富账' },
        { value: 'health', label: '健康账' },
        { value: 'growth', label: '成长账' }
      ],
      form: {
        bookType: 'wealth',
        steps: '',
        submissionId: ''
      },
      image: '',
      loading: false
    }
  },
  computed: {
    selectedBookType() {
      return this.bookTypes.find(b => b.value === this.form.bookType) || this.bookTypes[0]
    }
  },
  methods: {
    onBookTypeChange(e) {
      this.form.bookType = this.bookTypes[e.detail.value].value
    },
    chooseImage() {
      var self = this
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: function(res) {
          self.image = res.tempFilePaths[0]
        }
      })
    },
    handleSubmit() {
      if (!this.form.steps.trim()) {
        uni.showToast({ title: '请填写教学步骤', icon: 'none' })
        return
      }
      if (this.loading) return
      this.loading = true
      var self = this
      var doSubmit = function(imageUrl) {
        var data = {
          bookType: self.form.bookType,
          steps: self.form.steps,
          image: imageUrl || null,
          submissionId: self.form.submissionId ? parseInt(self.form.submissionId) : null
        }
        return submitTeachingCard(data)
      }
      var p = this.image ? uploadFile(this.image).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>
.teaching-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: 24rpx; border-left: 8rpx solid #F97316; padding-left: 16rpx; }
.form-item { margin-bottom: 28rpx; }
.form-label { display: block; font-size: 28rpx; color: #1E293B; font-weight: 500; margin-bottom: 12rpx; }
.form-input, .picker-display { width: 100%; height: 80rpx; border: 2rpx solid #E2E8F0; border-radius: 8rpx; padding: 0 20rpx; font-size: 28rpx; color: #1E293B; background: #F8FAFC; line-height: 80rpx; }
.form-textarea { width: 100%; min-height: 200rpx; 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: 16rpx; }
.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>