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>
</view>
</view>
</template>

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

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: ''
}
},
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 = new Date(this.form.birthday)
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.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
}

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: 'success' })
setTimeout(function() { uni.navigateBack() }, 1500)
} 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; }
</style>