cfc/cfc-frontend/pages/teacher/plan-create.vue

<template>
  <view class="page">
    <view class="card">
      <view class="form-group">
        <text class="label">方案标题 <text class="required">*</text></text>
        <input
          class="input"
          v-model="title"
          placeholder="请输入方案标题"
        />
      </view>

      <view class="form-group">
        <text class="label">方案描述</text>
        <textarea
          class="textarea"
          v-model="description"
          placeholder="请输入方案描述（可选）"
          :maxlength="-1"
        />
      </view>
    </view>

    <view class="actions">
      <button class="btn-primary" :disabled="submitting" @click="submitPlan">
        {{ submitting ? '提交中...' : '保存方案' }}
      </button>
      <button class="btn-cancel" @click="goBack">取消</button>
    </view>
  </view>
</template>

<script>
import { createTrainingPlan } from '@/utils/api.js'

export default {
  data() {
    return {
      title: '',
      description: '',
      submitting: false
    }
  },
  methods: {
    submitPlan() {
      if (!this.title || !this.title.trim()) {
        uni.showToast({ title: '请输入方案标题', icon: 'none' })
        return
      }

      this.submitting = true

      // 创建方案（memberId 留空，由后端关联当前用户）
      createTrainingPlan(null, this.title.trim(), this.description.trim() || '')
        .then(res => {
          this.submitting = false
          if (res && res.code === 200) {
            uni.showToast({ title: '创建成功', icon: 'success' })
            // 延迟跳转，让用户看到成功提示
            setTimeout(() => {
              uni.navigateBack()
            }, 1000)
          } else {
            uni.showToast({ title: (res && res.message) || '创建失败', icon: 'none' })
          }
        })
        .catch(err => {
          this.submitting = false
          console.error('创建方案失败', err)
          uni.showToast({ title: '创建失败', icon: 'none' })
        })
    },
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped lang="scss">
.page {
  padding: 24rpx;
  background: $facade-fill-blue-ghost;
  min-height: 100vh;
}

.card {
  background: $app-surface;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.form-group {
  margin-bottom: 30rpx;
}

.form-group:last-child {
  margin-bottom: 0;
}

.label {
  font-size: 28rpx;
  color: #1F2D3D;
  display: block;
  margin-bottom: 12rpx;
  font-weight: 500;
}

.required {
  color: #F44336;
}

.input {
  width: 100%;
  height: 80rpx;
  background: #F7F9FC;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #1F2D3D;
  box-sizing: border-box;
}

.textarea {
  width: 100%;
  min-height: 200rpx;
  background: #F7F9FC;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #1F2D3D;
  box-sizing: border-box;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.btn-primary {
  width: 100%;
  background: $brand-primary;
  color: $app-surface;
  font-size: 30rpx;
  font-weight: 600;
  padding: 24rpx 0;
  border-radius: 12rpx;
  border: none;
}

.btn-primary:disabled {
  background: $facade-text-ghost;
}

.btn-cancel {
  width: 100%;
  background: #F2F4F7;
  color: #5A6478;
  font-size: 30rpx;
  padding: 24rpx 0;
  border-radius: 12rpx;
  border: none;
}
</style>