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

<template>
  <view class="form-page">
    <view class="section-card">
      <text class="section-title">{{ memberMode ? '会员免费报名' : '沙龙报名' }}</text>
      <text class="card-desc">{{ memberMode ? '使用会员免费沙龙次数，报名成功即锁定名额' : '填写联系方式，完成支付后即可锁定名额' }}</text>

      <view class="summary-box" v-if="salonTitle">
        <view class="summary-row">
          <text class="summary-label">活动主题</text>
          <text class="summary-value">{{ salonTheme }} - {{ salonTitle }}</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" v-if="!memberMode">
        <text class="form-label">邀请码（选填）</text>
        <input class="form-input" v-model="form.inviteCode" placeholder="邀请码（选填）" />
      </view>

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

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

export default {
  data() {
    return {
      form: {
        salonId: '',
        name: '',
        phone: '',
        inviteCode: ''
      },
      salonTheme: '',
      salonTitle: '',
      memberMode: false,
      loading: false
    }
  },
  onLoad(options) {
    if (!guardPage()) return
    this.form.salonId = options && options.salonId ? options.salonId : ''
    this.salonTheme = options && options.theme ? decodeURIComponent(options.theme) : ''
    this.salonTitle = options && options.title ? decodeURIComponent(options.title) : ''
    this.form.name = options && options.name ? decodeURIComponent(options.name) : ''
    this.form.phone = options && options.phone ? decodeURIComponent(options.phone) : ''
    this.memberMode = options && options.member === '1'
    
    if (!this.form.salonId) {
      uni.showToast({ title: '参数错误', icon: 'none' })
      setTimeout(function() {
        uni.navigateBack({ delta: 1 })
      }, 1500)
    }
  },
  methods: {
    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 = {
        salonId: self.form.salonId,
        name: name,
        phone: phone,
        inviteCode: (self.form.inviteCode || '').trim()
      }
      if (self.memberMode) {
        memberSalonRegister(payload).then(function(resp) {
          uni.showToast({ title: '报名成功', icon: 'success' })
          setTimeout(function() {
            uni.redirectTo({ url: '/pages/salon/list' })
          }, 1200)
        }).catch(function(err) {
          uni.showToast({ title: (err && err.message) || '报名失败', icon: 'none' })
        }).finally(function() {
          self.loading = false
        })
        return
      }
      createSalonEnroll(payload).then(function(resp) {
        uni.showToast({ title: '报名成功', icon: 'success' })
        setTimeout(function() {
          var enrollmentId = resp.data && resp.data.id ? resp.data.id : ''
          if (enrollmentId) {
            uni.redirectTo({ url: '/pages/pay/index?enrollmentId=' + enrollmentId })
          } else {
            uni.redirectTo({ url: '/pages/salon/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: #2A2326; margin-bottom: 8rpx; border-left: 8rpx solid #FC7A57; padding-left: 16rpx; }
.card-desc { display: block; font-size: 26rpx; color: #5A4F4B; margin-bottom: 32rpx; }
.summary-box { background: #FFF0E8; 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: #5A4F4B; width: 140rpx; flex-shrink: 0; }
.summary-value { font-size: 26rpx; color: #2A2326; 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: #2A2326; background: #F8FAFC; }
.submit-btn { width: 100%; height: 88rpx; line-height: 88rpx; background: #FC7A57; color: #FFF; font-size: 30rpx; font-weight: 600; border-radius: 44rpx; border: none; margin-top: 24rpx; }
.submit-btn:active { opacity: 0.85; }
</style>