caremate/train-frontend/pages/group-order/create.vue

<template>
  <view class="form-page">
    <view class="section-card">
      <text class="section-title">发起团报</text>
      <text class="card-desc">选择班次并填写成员名单（含开票信息，可选）</text>

      <view class="form-item">
        <text class="form-label">班次</text>
        <picker mode="selector" :range="classNames" @change="onClassChange">
          <view class="picker-value" :class="{ placeholder: !classId }">
            {{ classId ? className : '请选择班次' }}
          </view>
        </picker>
        <view v-if="classId && unitAmount !== null" class="unit-tip">
          单价 ¥{{ fenToYuan(unitAmount) }}，共 {{ members.length }} 人，合计 ¥{{ fenToYuan(unitAmount * members.length) }}
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">成员名单</text>
        <view class="member-item" v-for="(m, idx) in members" :key="idx">
          <input class="member-name" v-model="m.name" placeholder="姓名" />
          <input class="member-phone" v-model="m.phone" type="number" maxlength="11" placeholder="手机号" />
          <text class="member-del" v-if="members.length > 1" @click="removeMember(idx)">删除</text>
        </view>
        <text class="add-member" @click="addMember">+ 添加成员</text>
      </view>

      <view class="form-item">
        <text class="form-label">发票抬头（企业名称，选填）</text>
        <input class="form-input" v-model="invoice.invoiceTitle" placeholder="不填则不开票" />
      </view>
      <view class="form-item" v-if="invoice.invoiceTitle">
        <text class="form-label">税号</text>
        <input class="form-input" v-model="invoice.invoiceTaxNo" placeholder="统一社会信用代码" />
      </view>
      <view class="form-item" v-if="invoice.invoiceTitle">
        <text class="form-label">开票类型</text>
        <view class="check-group">
          <view class="check-item" @click="invoice.invoiceType = '普票'">
            <text class="check-square" :class="{ checked: invoice.invoiceType === '普票' }">✓</text>
            <text class="check-text">普票</text>
          </view>
          <view class="check-item" @click="invoice.invoiceType = '专票'">
            <text class="check-square" :class="{ checked: invoice.invoiceType === '专票' }">✓</text>
            <text class="check-text">专票</text>
          </view>
        </view>
      </view>
      <view class="form-item" v-if="invoice.invoiceTitle">
        <text class="form-label">接收邮箱（选填）</text>
        <input class="form-input" v-model="invoice.invoiceEmail" placeholder="电子发票接收邮箱" />
      </view>
      <view class="form-item" v-if="invoice.invoiceTitle">
        <text class="form-label">收票人电话（选填）</text>
        <input class="form-input" v-model="invoice.invoicePhone" type="number" maxlength="11" placeholder="收票联系电话" />
      </view>

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

<script>
import { getEnrollClasses, createGroupOrder } from '@/utils/api.js'
import { fenToYuan } from '@/utils/format.js'
import { guardPage } from '@/utils/guard.js'

export default {
  data() {
    return {
      classes: [],
      classNames: [],
      classId: '',
      className: '',
      unitAmount: null,
      members: [{ name: '', phone: '' }],
      invoice: {
        invoiceTitle: '',
        invoiceTaxNo: '',
        invoiceEmail: '',
        invoicePhone: '',
        invoiceType: '普票'
      },
      loading: false
    }
  },
  onLoad() {
    if (!guardPage()) return
    this.loadClasses()
  },
  methods: {
    fenToYuan: fenToYuan,
    loadClasses() {
      var self = this
      getEnrollClasses().then(function(resp) {
        self.classes = resp.data || []
        var names = []
        for (var i = 0; i < self.classes.length; i++) {
          names.push(self.classes[i].name || ('班次' + self.classes[i].id))
        }
        self.classNames = names
      }).catch(function() {
        uni.showToast({ title: '加载班次失败', icon: 'none' })
      })
    },
    onClassChange(e) {
      var idx = Number(e.detail.value)
      var item = this.classes[idx]
      if (!item) return
      this.classId = item.id
      this.className = item.name
      // 团报按会员价计价（与后端 create 一致）
      var price = item.memberPrice > 0 && item.memberPrice < item.price ? item.memberPrice : item.price
      this.unitAmount = price
    },
    addMember() {
      this.members.push({ name: '', phone: '' })
    },
    removeMember(idx) {
      this.members.splice(idx, 1)
    },
    validatePhone(phone) {
      return /^1\d{10}$/.test(phone)
    },
    handleSubmit() {
      var self = this
      if (!self.classId) {
        uni.showToast({ title: '请选择班次', icon: 'none' })
        return
      }
      var memberList = []
      for (var i = 0; i < self.members.length; i++) {
        var name = (self.members[i].name || '').trim()
        var phone = (self.members[i].phone || '').trim()
        if (!name || !phone) {
          uni.showToast({ title: '请填写第 ' + (i + 1) + ' 位成员的姓名和手机号', icon: 'none' })
          return
        }
        if (!self.validatePhone(phone)) {
          uni.showToast({ title: '第 ' + (i + 1) + ' 位成员手机号格式不正确', icon: 'none' })
          return
        }
        memberList.push({ name: name, phone: phone })
      }
      if (self.invoice.invoiceTitle && (self.invoice.invoiceTitle || '').trim()) {
        if (!(self.invoice.invoiceTaxNo || '').trim()) {
          uni.showToast({ title: '填写发票抬头后请一并填写税号', icon: 'none' })
          return
        }
      }
      if (self.loading) return
      self.loading = true
      var payload = {
        classId: self.classId,
        members: memberList,
        invoiceTitle: (self.invoice.invoiceTitle || '').trim(),
        invoiceTaxNo: (self.invoice.invoiceTaxNo || '').trim(),
        invoiceEmail: (self.invoice.invoiceEmail || '').trim(),
        invoicePhone: (self.invoice.invoicePhone || '').trim(),
        invoiceType: self.invoice.invoiceType
      }
      createGroupOrder(payload).then(function(resp) {
        var id = resp.data && resp.data.id ? resp.data.id : ''
        uni.showToast({ title: '团报单已创建', icon: 'success' })
        setTimeout(function() {
          if (id) {
            uni.redirectTo({ url: '/pages/group-order/detail?id=' + id })
          } else {
            uni.redirectTo({ url: '/pages/group-order/index' })
          }
        }, 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; }
.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; }
.picker-value { height: 72rpx; line-height: 72rpx; border: 2rpx solid #E2E8F0; border-radius: 8rpx; padding: 0 16rpx; font-size: 28rpx; color: #1E293B; background: #F8FAFC; }
.picker-value.placeholder { color: #94A3B8; }
.unit-tip { font-size: 24rpx; color: #F97316; margin-top: 12rpx; }
.member-item { display: flex; align-items: center; margin-bottom: 16rpx; }
.member-name { width: 200rpx; height: 64rpx; border: 2rpx solid #E2E8F0; border-radius: 8rpx; padding: 0 12rpx; font-size: 26rpx; background: #F8FAFC; margin-right: 12rpx; }
.member-phone { flex: 1; height: 64rpx; border: 2rpx solid #E2E8F0; border-radius: 8rpx; padding: 0 12rpx; font-size: 26rpx; background: #F8FAFC; margin-right: 12rpx; }
.member-del { font-size: 24rpx; color: #EF4444; padding: 8rpx; }
.add-member { display: block; font-size: 26rpx; color: #F97316; font-weight: 600; margin-top: 8rpx; }
.check-group { display: flex; }
.check-item { display: flex; align-items: center; margin-right: 40rpx; }
.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; }
.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>