cfc/cfc-frontend/pages/profile/edit-child.vue

<template>
  <view class="container">
    <view class="form-container">
      <view class="page-title">编辑孩子信息</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>

      <!-- 对家庭成员可见 -->
      <view class="form-item">
        <text class="label">对家庭成员可见</text>
        <switch :checked="form.showToFamily !== 0" @change="onShowToFamilyChange" color="#5B9BD5" />
        <text class="hint">关闭后，其他家庭成员将看不到此孩子</text>
      </view>

      <!-- 主题风格 -->
      <view class="form-item">
        <text class="label">主题风格</text>
        <picker :range="themes" range-key="label" @change="onThemeChange">
          <view class="picker">
            {{ currentThemeLabel || '请选择主题' }}
          </view>
        </picker>
      </view>

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

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

export default {
  data() {
    return {
      childId: '',
      submitting: false,
      form: {
        nickname: '',
        birthday: '',
        gender: '',
        age: '',
        phone: '',
        idCard: '',
        penaltyEnabled: 1,
        showToFamily: 1,
        theme: 'default'
      },
      genderOptions: [
        { value: 'male', label: '男' },
        { value: 'female', label: '女' }
      ],
      themes: [
        { value: 'default', label: '默认' },
        { value: 'ocean', label: '海洋' },
        { value: 'forest', label: '森林' },
        { value: 'sunset', label: '日落' }
      ]
    }
  },
  computed: {
    currentThemeLabel() {
      const theme = this.themes.find(t => t.value === this.form.theme)
      return theme ? theme.label : '默认'
    },
    genderLabel() {
      const gender = this.genderOptions.find(g => g.value === this.form.gender)
      return gender ? gender.label : ''
    },
    todayDate() {
      return new Date().toISOString().split('T')[0]
    },
    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) {
    this.childId = options.childId || ''
    if (!this.childId) {
      uni.showToast({ title: '参数错误', icon: 'none' })
      setTimeout(() => uni.navigateBack(), 1500)
      return
    }
    this.loadChildData()
  },
  methods: {
    async loadChildData() {
      try {
        const res = await getChildren()
        const children = res.data || []
        const child = children.find(c => c.id == this.childId)
        if (child) {
          this.form = {
            nickname: child.nickname || '',
            birthday: child.birthday || '',
            gender: child.gender || '',
            age: child.age || '',
            phone: child.phone || '',
            idCard: child.idCard || '',
            penaltyEnabled: child.penaltyEnabled !== 0 ? 1 : 0,
            showToFamily: child.showToFamily !== 0 ? 1 : 0,
            theme: child.theme || 'default'
          }
        }
      } catch (e) {
        console.error('加载孩子数据失败', e)
        uni.showToast({ title: '加载失败', icon: 'none' })
      }
    },
    onBirthdayChange(e) {
      this.form.birthday = e.detail.value
      // 根据出生日期自动计算年龄
      const birth = new Date(e.detail.value)
      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--
      }
      this.form.age = age
    },
    onGenderChange(e) {
      this.form.gender = this.genderOptions[e.detail.value].value
    },
    onPenaltyChange(e) {
      this.form.penaltyEnabled = e.detail.value ? 1 : 0
    },
    onShowToFamilyChange(e) {
      this.form.showToFamily = e.detail.value ? 1 : 0
    },
    onThemeChange(e) {
      this.form.theme = this.themes[e.detail.value].value
    },
    async submit() {
      if (!this.form.nickname) {
        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
      }

      this.submitting = true
      try {
        await updateChild(this.childId, {
          nickname: this.form.nickname,
          birthday: this.form.birthday,
          gender: this.form.gender,
          age: this.form.age,
          phone: this.form.phone,
          idCard: this.form.idCard,
          penaltyEnabled: this.form.penaltyEnabled,
          showToFamily: this.form.showToFamily,
          theme: this.form.theme
        })
        uni.showToast({ title: '保存成功', icon: 'success' })
        setTimeout(() => uni.navigateBack(), 1500)
      } catch (e) {
        console.error('保存失败', e)
        uni.showToast({ title: '保存失败', 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: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
}

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

.form-item.required .label {
  font-weight: bold;
}

.required-mark {
  color: #F97316;
  margin-right: 8rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.input, .picker {
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
}

.age-display {
  font-size: 28rpx;
  color: #666;
  padding: 20rpx;
}

.hint {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.btn-primary {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  margin-top: 40rpx;
}
</style>