caremate/train-frontend/pages/enroll/form.vue

<template>
  <view class="form-page">
    <view class="section-card">
      <text class="section-title">报名信息</text>
      <text class="card-desc">填写联系方式与准备情况，缴费后由助教分配班次</text>

      <view class="summary-box" v-if="courseName">
        <view class="summary-row">
          <text class="summary-label">报名课程</text>
          <text class="summary-value">{{ courseName }}</text>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">姓名</text>
        <input class="form-input" v-model="form.name" placeholder="请输入真实姓名" />
      </view>
      <view class="form-item">
        <text class="form-label">手机号</text>
        <input class="form-input" v-model="form.phone" type="number" maxlength="11" placeholder="请输入手机号" />
      </view>
      <view class="form-item switch-item">
        <text class="form-label">是否携带笔记本</text>
        <switch :checked="form.bringLaptop === 1" color="#F97316" @change="onLaptopChange" />
      </view>
      <view class="form-item">
        <text class="form-label">已备数据</text>
        <view class="check-group">
          <view class="check-item" @click="toggleData('wealth')">
            <text class="check-square" :class="{ checked: dataReadyList.indexOf('wealth') > -1 }">✓</text>
            <text class="check-text">券商持仓</text>
          </view>
          <view class="check-item" @click="toggleData('health')">
            <text class="check-square" :class="{ checked: dataReadyList.indexOf('health') > -1 }">✓</text>
            <text class="check-text">体检/血压报告</text>
          </view>
          <view class="check-item" @click="toggleData('growth')">
            <text class="check-square" :class="{ checked: dataReadyList.indexOf('growth') > -1 }">✓</text>
            <text class="check-text">孩子成绩/日程</text>
          </view>
        </view>
      </view>
      <view class="form-item">
        <text class="form-label">最想解决的问题</text>
        <textarea class="form-textarea" v-model="form.topProblems" placeholder="如：如何用AI管理家庭资产、孩子学习计划…" />
      </view>
      <view class="form-item" v-if="form.inviteCode">
        <text class="form-label">邀请码</text>
        <input class="form-input" v-model="form.inviteCode" disabled placeholder="微信好友邀请码" />
      </view>

      <button class="submit-btn" @click="handleSubmit" :loading="loading" :disabled="loading">提交报名</button>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      form: {
        courseId: '',
        name: '',
        phone: '',
        bringLaptop: 0,
        dataReady: '',
        topProblems: '',
        inviteCode: ''
      },
      courseName: '',
      dataReadyList: [],
      loading: false
    }
  },
  onLoad(options) {
    if (!guardPage()) return
    this.form.courseId = options && options.courseId ? options.courseId : ''
    this.courseName = options && options.courseName ? decodeURIComponent(options.courseName) : ''
    this.form.inviteCode = options && options.inviteCode ? decodeURIComponent(options.inviteCode) : ''
    this.form.name = options && options.name ? decodeURIComponent(options.name) : ''
    this.form.phone = options && options.phone ? decodeURIComponent(options.phone) : ''
    if (!this.form.courseId) {
      uni.showToast({ title: '参数错误', icon: 'none' })
      setTimeout(function() {
        uni.navigateBack({ delta: 1 })
      }, 1500)
    }
  },
  methods: {
    onLaptopChange(e) {
      this.form.bringLaptop = e.detail.value ? 1 : 0
    },
    toggleData(key) {
      var idx = this.dataReadyList.indexOf(key)
      if (idx > -1) {
        this.dataReadyList.splice(idx, 1)
      } else {
        this.dataReadyList.push(key)
      }
      this.form.dataReady = this.dataReadyList.join(',')
    },
    handleSubmit() {
      var name = (this.form.name || '').trim()
      var phone = (this.form.phone || '').trim()
      if (!name) {
        uni.showToast({ title: '请填写姓名', icon: 'none' })
        return
      }
      if (!/^1\d{10}$/.test(phone)) {
        uni.showToast({ title: '请填写正确的手机号', icon: 'none' })
        return
      }
      if (this.loading) return
      this.loading = true
      var self = this
      var payload = {
        courseId: self.form.courseId,
        name: name,
        phone: phone,
        bringLaptop: self.form.bringLaptop,
        dataReady: self.form.dataReady,
        topProblems: (self.form.topProblems || '').trim(),
        inviteCode: self.form.inviteCode
      }
      createEnrollment(payload).then(function(resp) {
        uni.showToast({ title: '报名成功', icon: 'success' })
        setTimeout(function() {
          var enrollmentId = resp.data && resp.data.id ? resp.data.id : ''
          if (enrollmentId) {
            // 跳转支付页（test-mode 下自动模拟支付成功）
            uni.redirectTo({ url: '/pages/pay/index?enrollmentId=' + enrollmentId })
          } else {
            uni.redirectTo({ url: '/pages/enroll/list' })
          }
        }, 1200)
      }).catch(function(err) {
        uni.showToast({ title: (err && err.message) || '报名失败', icon: 'none' })
      }).finally(function() {
        self.loading = false
      })
    }
  }
}
</script>

<style scoped>
.form-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: 8rpx; border-left: 8rpx solid #F97316; padding-left: 16rpx; }
.card-desc { display: block; font-size: 26rpx; color: #64748B; margin-bottom: 32rpx; }
.summary-box { background: #FFF7ED; border-radius: 8rpx; padding: 20rpx 24rpx; margin-bottom: 24rpx; border: 2rpx solid #FED7AA; }
.summary-row { display: flex; align-items: center; margin-bottom: 8rpx; }
.summary-row:last-child { margin-bottom: 0; }
.summary-label { font-size: 24rpx; color: #64748B; width: 140rpx; flex-shrink: 0; }
.summary-value { font-size: 26rpx; color: #1E293B; font-weight: 600; flex: 1; }
.form-item { margin-bottom: 24rpx; }
.form-label { display: block; font-size: 26rpx; color: #475569; font-weight: 500; margin-bottom: 12rpx; }
.form-input { height: 72rpx; border: 2rpx solid #E2E8F0; border-radius: 8rpx; padding: 0 16rpx; font-size: 28rpx; color: #1E293B; background: #F8FAFC; }
.form-textarea { width: 100%; height: 160rpx; border: 2rpx solid #E2E8F0; border-radius: 8rpx; padding: 16rpx; font-size: 28rpx; color: #1E293B; background: #F8FAFC; box-sizing: border-box; }
.check-group { display: flex; flex-wrap: wrap; }
.check-item { display: flex; align-items: center; width: 50%; margin-bottom: 16rpx; }
.check-square { width: 36rpx; height: 36rpx; border: 2rpx solid #CBD5E1; border-radius: 6rpx; display: flex; align-items: center; justify-content: center; font-size: 24rpx; color: #FFF; margin-right: 12rpx; flex-shrink: 0; }
.check-square.checked { background: #F97316; border-color: #F97316; }
.check-text { font-size: 26rpx; color: #1E293B; }
.switch-item { display: flex; align-items: center; justify-content: space-between; }
.switch-item .form-label { margin-bottom: 0; }
.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: 24rpx; }
.submit-btn:active { opacity: 0.85; }
</style>