cfc/cfc-frontend/pages/profile-extra/create-child.vue

<template>
  <view class="container">
    <view class="form-container">
      <view class="page-title">{{ isEditMode ? '编辑孩子信息' : '添加孩子' }}</view>

      <!-- 姓名（必填） -->
      <view class="form-item required">
        <text class="label"><text class="required-mark">*</text>孩子姓名</text>
        <input class="input" v-model="form.nickname" placeholder="请输入孩子姓名" />
      </view>

      <!-- 出生日期（必填） -->
      <view class="form-item required">
        <text class="label"><text class="required-mark">*</text>出生日期</text>
        <picker mode="date" :value="form.birthday" @change="onBirthdayChange" :end="todayDate">
          <view class="picker">
            {{ form.birthday || '请选择出生日期' }}
          </view>
        </picker>
      </view>

      <!-- 性别（必填） -->
      <view class="form-item required">
        <text class="label"><text class="required-mark">*</text>性别</text>
        <picker :range="genderOptions" range-key="label" @change="onGenderChange">
          <view class="picker">
            {{ genderLabel || '请选择性别' }}
          </view>
        </picker>
      </view>

      <!-- 年龄（根据出生日期自动计算） -->
      <view class="form-item">
        <text class="label">年龄</text>
        <view class="age-display">{{ calculatedAge || '根据出生日期自动计算' }}</view>
      </view>

      <!-- 手机号（非必填） -->
      <view class="form-item">
        <text class="label">手机号（选填）</text>
        <input class="input" type="number" v-model="form.phone" placeholder="请输入手机号" maxlength="11" />
      </view>

      <!-- 身份证号（非必填） -->
      <view class="form-item">
        <text class="label">身份证号（选填）</text>
        <input class="input" v-model="form.idCard" placeholder="请输入身份证号" maxlength="18" />
      </view>

      <!-- 扣分开关 -->
      <view class="form-item">
        <text class="label">扣分开关</text>
        <switch :checked="form.penaltyEnabled === 1" @change="onPenaltyChange" color="#F97316" />
        <text class="hint">开启后，超时未完成任务将扣减积分</text>
      </view>

      <button class="btn-primary" :loading="submitting" @click="submit">{{ isEditMode ? '保存修改' : '保存' }}</button>
    </view>
  </view>
</template>

<script>
import { createChild, getChildren, updateChild } from '../../utils/api.js'

export default {
  data() {
    return {
      childId: '',
      isEditMode: false,
      submitting: false,
      form: {
        nickname: '',
        birthday: '',
        gender: '',
        age: '',
        phone: '',
        idCard: '',
        penaltyEnabled: 0
      },
      genderOptions: [
        { value: 'male', label: '男' },
        { value: 'female', label: '女' }
      ],
      todayDate: ''
    }
  },
  computed: {
    genderLabel() {
      const gender = this.genderOptions.find(g => g.value === this.form.gender)
      return gender ? gender.label : ''
    },
    calculatedAge() {
      if (!this.form.birthday) return ''
      const birth = new Date(this.form.birthday)
      const today = new Date()
      let age = today.getFullYear() - birth.getFullYear()
      const monthDiff = today.getMonth() - birth.getMonth()
      if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
        age--
      }
      return age >= 0 ? age + '岁' : ''
    }
  },
  onLoad(options) {
    // 设置今天的日期作为选择器结束日期
    const today = new Date()
    this.todayDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
    
    this.isEditMode = options.mode === 'edit'
    this.childId = options.childId || ''

    if (this.isEditMode && this.childId) {
      uni.setNavigationBarTitle({ title: '编辑孩子' })
      this.loadChildDetail()
    } else {
      uni.setNavigationBarTitle({ title: '添加孩子' })
    }
  },
  methods: {
    async loadChildDetail() {
      try {
        const res = await getChildren()
        const children = res.data || []
        const targetChild = children.find(child => String(child.id) === String(this.childId))

        if (!targetChild) {
          uni.showToast({ title: '未找到孩子信息', icon: 'none' })
          setTimeout(() => uni.navigateBack(), 1200)
          return
        }

        this.form.nickname = targetChild.nickname || ''
        this.form.birthday = targetChild.birthday || ''
        this.form.gender = targetChild.gender || ''
        this.form.age = targetChild.age != null ? String(targetChild.age) : ''
        this.form.phone = targetChild.phone || ''
        this.form.idCard = targetChild.idCard || ''
        this.form.penaltyEnabled = targetChild.penaltyEnabled != null ? targetChild.penaltyEnabled : 0
      } catch (e) {
        uni.showToast({ title: '加载孩子信息失败', icon: 'none' })
      }
    },
    onBirthdayChange(e) {
      this.form.birthday = e.detail.value
    },
    onGenderChange(e) {
      this.form.gender = this.genderOptions[e.detail.value].value
    },
    onPenaltyChange(e) {
      this.form.penaltyEnabled = e.detail.value ? 1 : 0
    },
    async submit() {
      // 必填校验
      if (!this.form.nickname || !this.form.nickname.trim()) {
        uni.showToast({ title: '请输入孩子姓名', icon: 'none' })
        return
      }
      if (!this.form.birthday) {
        uni.showToast({ title: '请选择出生日期', icon: 'none' })
        return
      }
      if (!this.form.gender) {
        uni.showToast({ title: '请选择性别', icon: 'none' })
        return
      }

      // 手机号格式校验（如果填写了）
      if (this.form.phone && !/^1[3-9]\d{9}$/.test(this.form.phone)) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
        return
      }

      // 身份证格式校验（如果填写了）
      if (this.form.idCard && !/^\d{15}$|^\d{17}[\dXx]$/.test(this.form.idCard)) {
        uni.showToast({ title: '请输入正确的身份证号', icon: 'none' })
        return
      }

      // 计算年龄
      const birth = new Date(this.form.birthday)
      const today = new Date()
      let age = today.getFullYear() - birth.getFullYear()
      const monthDiff = today.getMonth() - birth.getMonth()
      if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
        age--
      }

      try {
        this.submitting = true
        const payload = {
          nickname: this.form.nickname.trim(),
          birthday: this.form.birthday,
          gender: this.form.gender,
          age: age >= 0 ? age : 0,
          phone: this.form.phone || null,
          idCard: this.form.idCard || null,
          penaltyEnabled: this.form.penaltyEnabled
        }

        if (this.isEditMode) {
          await updateChild(this.childId, payload)
        } else {
          await createChild(payload)
        }

        uni.showToast({ title: this.isEditMode ? '修改成功' : '添加成功', icon: 'success' })
        setTimeout(() => uni.navigateBack(), 1500)
      } catch (e) {
        uni.showToast({ title: this.isEditMode ? '修改失败' : '添加失败', icon: 'none' })
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style scoped>
.container { padding: 30rpx; }
.form-container { background: #fff; border-radius: 20rpx; padding: 30rpx; }
.page-title { font-size: 34rpx; font-weight: bold; color: #333; margin-bottom: 30rpx; }
.form-item { margin-bottom: 30rpx; }
.form-item.required .label { font-weight: bold; }
.label { display: block; font-size: 28rpx; color: #333; margin-bottom: 10rpx; }
.required-mark { color: #F97316; margin-right: 4rpx; }
.input { border: 1rpx solid #ddd; border-radius: 10rpx; padding: 20rpx; font-size: 28rpx; }
.picker { border: 1rpx solid #ddd; border-radius: 10rpx; padding: 20rpx; font-size: 28rpx; color: #666; }
.age-display { border: 1rpx solid #ddd; border-radius: 10rpx; padding: 20rpx; font-size: 28rpx; color: #999; background: #f9f9f9; }
.hint { font-size: 24rpx; color: #999; margin-left: 20rpx; }
.btn-primary { background: #F97316; color: #fff; border-radius: 20rpx; margin-top: 40rpx; }
</style>