cfc/cfc-frontend/pages/family/add-member.vue

<template>
<view class="container">
<view class="form-container">
<view class="page-title">{{ isEdit ? '编辑成员' : '添加家庭成员' }}</view>

<!-- 昵称（必填） -->
<view class="form-item required">
<text class="label"><text class="required-mark">*</text>成员昵称</text>
<input class="input" v-model="form.nickname" placeholder="请输入成员昵称" maxlength="20" />
</view>

<!-- 辈分关系（必填，替代关系类型） -->
<view class="form-item required">
<text class="label"><text class="required-mark">*</text>辈分关系</text>
<generation-picker ref="generationPicker" v-model:generationLevel="form.generationLevel" v-model:peerType="form.peerType" :showLabel="false" />
</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 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">
<text class="label">年龄</text>
<view class="age-display">{{ calculatedAge || '根据出生日期自动计算' }}</view>
</view>

<!-- 出生时辰（选填） -->
<view class="form-item">
<text class="label">出生时辰（选填）</text>
<picker :range="birthHourOptions" @change="onBirthHourChange">
<view class="picker">
{{ form.birthHourName || '请选择出生时辰' }}
</view>
</picker>
</view>

<!-- 出生体重（选填） -->
<view class="form-item">
<text class="label">出生体重（选填，克）</text>
<input class="input" type="number" v-model="form.birthWeight" placeholder="如: 3500" maxlength="5" />
</view>

<!-- 出生地（选填） -->
<view class="form-item">
<text class="label">出生地（选填）</text>
<input class="input" v-model="form.birthPlace" placeholder="如: 北京市" maxlength="30" />
</view>

<!-- 是否剖腹产（选填） -->
<view class="form-item">
<text class="label">是否剖腹产（选填）</text>
<picker :range="cesareanOptions" range-key="label" @change="onCesareanChange">
<view class="picker">
{{ form.cesareanLabel || '请选择' }}
</view>
</picker>
</view>

<!-- 手机号（选填） -->
<view class="form-item">
<text class="label">手机号（选填）</text>
<input class="input" type="number" v-model="form.phone" placeholder="填写手机号可关联已有账号" maxlength="11" />
<text class="hint">若手机号已注册，将自动关联该账号</text>
</view>

<!-- 保存按钮 -->
<button class="btn-primary" :loading="submitting" @click="submit">保存</button>

<!-- 监护人同意弹窗 -->
<view class="modal-overlay" v-if="showConsentModal">
  <view class="modal-content">
    <text class="modal-title">儿童个人信息保护确认</text>
    <text class="modal-desc">您添加的家庭成员年龄小于14周岁。根据《中华人民共和国个人信息保护法》及《儿童个人信息网络保护规定》，作为法定监护人，您需要确认同意我们收集和使用该儿童的个人信息（包括姓名、性别、出生日期、身高体重、学校信息等），用于提供成长测评、健康分析、任务管理等相关服务。</text>
    <text class="modal-link" @click="viewPrivacy">查看完整《隐私政策》中儿童个人信息保护章节</text>
    <view class="modal-checkbox">
      <label>
        <checkbox :checked="consentChecked" @click="consentChecked = !consentChecked" />
        <text class="checkbox-label">我已阅读并同意上述内容，作为法定监护人授权平台处理该儿童的个人信息</text>
      </label>
    </view>
    <view class="modal-buttons">
      <button class="modal-btn-cancel" @click="showConsentModal = false">取消</button>
      <button class="modal-btn-confirm" :disabled="!consentChecked" @click="confirmConsent">确认并继续</button>
    </view>
  </view>
</view>
</view>
</view>
</view>
</template>

<script>
import { addFamilyMember, updateFamilyMember, recordConsent } from '../../utils/api.js'
import GenerationPicker from '../../components/GenerationPicker.vue'
import { parseDate } from '../../utils/format.js'

export default {
components: { GenerationPicker },
data() {
return {
submitting: false,
isEdit: false,
editMemberId: null,
form: {
nickname: '',
generationLevel: '',
peerType: '',
gender: '',
birthday: '',
phone: '',
birthHour: '',
birthHourName: '',
birthWeight: '',
birthPlace: '',
isCesarean: null,
cesareanLabel: ''
},
genderOptions: [
{ value: 'male', label: '男' },
{ value: 'female', label: '女' }
],
birthHourOptions: ['', '子时(23-1点)', '丑时(1-3点)', '寅时(3-5点)', '卯时(5-7点)', '辰时(7-9点)', '巳时(9-11点)', '午时(11-13点)', '未时(13-15点)', '申时(15-17点)', '酉时(17-19点)', '戌时(19-21点)', '亥时(21-23点)'],
cesareanOptions: [
{ value: 0, label: '顺产' },
{ value: 1, label: '剖腹产' }
],
todayDate: '',
showConsentModal: false,
consentChecked: false,
pendingSubmitPayload: null
}
},
computed: {
genderLabel() {
var gender = this.genderOptions.find(function(g) { return g.value === this.form.gender }.bind(this))
return gender ? gender.label : ''
},
calculatedAge() {
if (!this.form.birthday) return ''
var birth = parseDate(this.form.birthday)
if (!birth) return ''
var today = new Date()
var age = today.getFullYear() - birth.getFullYear()
var monthDiff = today.getMonth() - birth.getMonth()
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
age--
}
return age >= 0 ? age + '岁' : ''
}
},
onLoad(options) {
  var today = new Date()
  this.todayDate = today.getFullYear() + '-' + String(today.getMonth() + 1).padStart(2, '0') + '-' + String(today.getDate()).padStart(2, '0')
  if (options && options.memberId) {
    this.isEdit = true
    this.editMemberId = Number(options.memberId)
    if (options.nickname) this.form.nickname = decodeURIComponent(options.nickname)
    if (options.gender) this.form.gender = options.gender
    if (options.phone) this.form.phone = options.phone
    if (options.birthday) this.form.birthday = options.birthday
  }
},
methods: {
onGenderChange(e) {
this.form.gender = this.genderOptions[e.detail.value].value
},
onBirthdayChange(e) {
this.form.birthday = e.detail.value
},
onBirthHourChange(e) {
var idx = e.detail.value
if (idx === 0) {
this.form.birthHour = ''
this.form.birthHourName = ''
} else {
this.form.birthHour = this.birthHourOptions[idx]
this.form.birthHourName = this.birthHourOptions[idx]
}
},
onCesareanChange(e) {
var idx = e.detail.value
this.form.isCesarean = this.cesareanOptions[idx].value
this.form.cesareanLabel = this.cesareanOptions[idx].label
},
async submit() {
  if (this.submitting) return
  if (!this.form.nickname || !this.form.nickname.trim()) {
uni.showToast({ title: '请输入成员昵称', icon: 'none' })
return
}
if (!this.isEdit && (!this.$refs.generationPicker || !this.$refs.generationPicker.selectedGen)) {
  uni.showToast({ title: '请选择辈分关系', icon: 'none' })
  return
}
if (!this.form.gender) {
uni.showToast({ title: '请选择性别', icon: 'none' })
return
}
if (!this.form.birthday) {
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
}

// 检查是否为14岁以下儿童 -> 显示监护人同意弹窗
if (!this.isEdit) {
  var genLevel = (this.$refs.generationPicker && this.$refs.generationPicker.selectedGen) || this.form.generationLevel
  // 辈分负值表示晚辈（孩子），且年龄 < 14
  var age = this.calculatedAge ? parseInt(this.calculatedAge) : 0
  if (genLevel < 0 && age < 14) {
    this.pendingSubmitPayload = null
    this.consentChecked = false
    this.showConsentModal = true
    return
  }
}

this.doSubmit()
},
viewPrivacy() {
  uni.navigateTo({ url: '/pages/policy/privacy' })
},
async confirmConsent() {
  if (!this.consentChecked) return
  this.showConsentModal = false
  try {
    await recordConsent({ consentType: 'children_data', version: '2026-08-v1' })
  } catch (e) {
    console.log('记录同意失败', e)
  }
  this.doSubmit()
},
async doSubmit() {
try {
this.submitting = true
if (this.isEdit) {
  var updatePayload = {
    memberId: this.editMemberId,
    nickname: this.form.nickname.trim()
  }
  if (this.form.gender) updatePayload.gender = this.form.gender
  if (this.form.birthday) updatePayload.birthday = this.form.birthday
  if (this.form.phone) updatePayload.phone = this.form.phone
  var res = await updateFamilyMember(updatePayload)
  if (res.code === 200) {
    uni.showToast({ title: '已更新', icon: 'success' })
    setTimeout(function() { uni.navigateBack() }, 1500)
  } else {
    uni.showToast({ title: res.message || '更新失败', icon: 'none' })
  }
} else {
var genLevel = (this.$refs.generationPicker && this.$refs.generationPicker.selectedGen) || this.form.generationLevel
var genPeerType = (this.$refs.generationPicker && this.$refs.generationPicker.selectedPeer) || this.form.peerType
var payload = {
nickname: this.form.nickname.trim(),
generationLevel: genLevel,
peerType: genPeerType || null,
gender: this.form.gender,
birthday: this.form.birthday
}
if (this.form.phone) {
payload.phone = this.form.phone
}
if (this.form.birthHour) {
payload.birthHour = this.form.birthHour
}
if (this.form.birthWeight) {
payload.birthWeight = parseInt(this.form.birthWeight)
}
if (this.form.birthPlace) {
payload.birthPlace = this.form.birthPlace
}
if (this.form.isCesarean !== null && this.form.isCesarean !== undefined) {
payload.isCesarean = this.form.isCesarean
}
var res = await addFamilyMember(payload)
if (res.code === 200) {
uni.showToast({ title: '添加成功，已发放优惠券', icon: 'none', duration: 2000 })
setTimeout(function() { uni.navigateBack() }, 1600)
} else {
uni.showToast({ title: res.message || '添加失败', icon: 'none' })
}
}
} catch (e) {
uni.showToast({ title: this.isEdit ? '更新失败' : '添加失败', 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-top: 8rpx; display: block; }
.btn-primary { background: #F97316; color: #fff; border-radius: 20rpx; margin-top: 40rpx; }

/* 监护人同意弹窗 */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.modal-content {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  margin: 40rpx;
  max-height: 80vh;
  overflow-y: auto;
}
.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  text-align: center;
  margin-bottom: 20rpx;
}
.modal-desc {
  font-size: 26rpx;
  color: #666;
  display: block;
  line-height: 1.7;
  margin-bottom: 16rpx;
}
.modal-link {
  font-size: 24rpx;
  color: #667eea;
  display: block;
  text-align: center;
  margin-bottom: 24rpx;
  text-decoration: underline;
}
.modal-checkbox {
  margin-bottom: 32rpx;
}
.checkbox-label {
  font-size: 24rpx;
  color: #333;
  margin-left: 8rpx;
}
.modal-buttons {
  display: flex;
  gap: 20rpx;
}
.modal-btn-cancel {
  flex: 1;
  background: #f5f5f5;
  color: #666;
  border-radius: 44rpx;
  font-size: 28rpx;
  padding: 20rpx;
  text-align: center;
}
.modal-btn-confirm {
  flex: 1;
  background: #F97316;
  color: #fff;
  border-radius: 44rpx;
  font-size: 28rpx;
  padding: 20rpx;
  text-align: center;
}
.modal-btn-confirm[disabled] {
  background: #ccc;
}
</style>