hookehuyr

feat(plan): 优化年龄与出生年月日联动逻辑

- 调整字段顺序:年龄在前,出生年月日在后
- 实现年龄 → 出生年月日自动计算(默认1月1日)
- 保留出生年月日 → 年龄双向联动
- 简化占位符文案,避免用户理解混乱
- 修复 AgePicker 组件不触发 change 事件的问题
- 添加调试日志便于排查问题

影响文件:
- src/components/PlanFields/AgePicker.vue: 添加 change 事件支持
- src/components/PlanTemplates/LifeInsuranceTemplate.vue: 调整逻辑
- src/components/PlanTemplates/CriticalIllnessTemplate.vue: 调整逻辑
- src/components/PlanTemplates/SavingsTemplate.vue: 调整逻辑

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
......@@ -109,6 +109,12 @@ const emit = defineEmits([
*/
'update:modelValue',
/**
* 值变化事件
* @event change
* @param {number} value - 选中的年龄(数字)
*/
'change',
/**
* 弹窗打开事件
* @event open
*/
......@@ -245,7 +251,9 @@ const onConfirm = ({ selectedValue, selectedOptions }) => {
if (h !== undefined && t !== undefined && u !== undefined) {
const age = parseInt(h) * 100 + parseInt(t) * 10 + parseInt(u)
if (!Number.isNaN(age)) {
console.log('[AgePicker] 确认选择年龄:', age)
emit('update:modelValue', age)
emit('change', age) // 触发 change 事件,供父组件监听
} else {
console.error('[AgePicker] 计算结果为 NaN', { h, t, u })
}
......
......@@ -9,22 +9,23 @@
class="mb-5"
/>
<!-- 出生年月日 -->
<PlanFieldDatePicker
v-model="form.birthday"
label="出生年月日"
placeholder="请选择日期"
<!-- 年龄(主字段,选择后自动计算出生年月日) -->
<PlanFieldAgePicker
v-model="form.age"
label="年龄"
placeholder="请选择年龄"
:required="true"
@change="onBirthdayChange"
@change="onAgeChange"
class="mb-5"
/>
<!-- 年龄(根据出生日期自动计算,可编辑 -->
<PlanFieldAgePicker
v-model="form.age"
label="年龄"
placeholder="请选择出生日期自动计算"
<!-- 出生年月日(根据年龄自动计算,可手动调整 -->
<PlanFieldDatePicker
v-model="form.birthday"
label="出生年月日"
placeholder="请选择年月日"
:required="true"
@change="onBirthdayChange"
class="mb-5"
/>
......@@ -142,6 +143,40 @@ watch(
)
/**
* 年龄变化时自动计算出生年月日
* @param {number} age - 年龄
*
* @description 用户选择年龄后,自动计算并填充出生日期字段
* 计算公式:当前年份 - 年龄 = 出生年份(默认1月1日)
*/
const onAgeChange = (age) => {
console.log('[CriticalIllnessTemplate] onAgeChange 触发,接收到的 age:', age, 'type:', typeof age)
if (age !== undefined && age !== null && age !== '') {
const currentYear = new Date().getFullYear()
const birthYear = currentYear - age
console.log('[CriticalIllnessTemplate] 计算出生年份:', {
currentYear,
age,
birthYear
})
// 格式化为 YYYY-MM-DD,默认使用1月1日
const month = String(1).padStart(2, '0')
const day = String(1).padStart(2, '0')
const birthday = `${birthYear}-${month}-${day}`
console.log('[CriticalIllnessTemplate] 设置出生日期:', birthday)
form.birthday = birthday
console.log('[CriticalIllnessTemplate] form.birthday 设置后:', form.birthday)
} else {
console.log('[CriticalIllnessTemplate] age 无效,跳过计算')
}
}
/**
* 出生日期变化时自动计算年龄
* @param {string} birthday - 出生日期(格式:YYYY-MM-DD)
*
......
......@@ -9,22 +9,23 @@
class="mb-5"
/>
<!-- 出生年月日 -->
<PlanFieldDatePicker
v-model="form.birthday"
label="出生年月日"
placeholder="请选择日期"
<!-- 年龄(主字段,选择后自动计算出生年月日) -->
<PlanFieldAgePicker
v-model="form.age"
label="年龄"
placeholder="请选择年龄"
:required="true"
@change="onBirthdayChange"
@change="onAgeChange"
class="mb-5"
/>
<!-- 年龄(根据出生日期自动计算,可编辑 -->
<PlanFieldAgePicker
v-model="form.age"
label="年龄"
placeholder="请选择出生日期自动计算"
<!-- 出生年月日(根据年龄自动计算,可手动调整 -->
<PlanFieldDatePicker
v-model="form.birthday"
label="出生年月日"
placeholder="请选择年月日"
:required="true"
@change="onBirthdayChange"
class="mb-5"
/>
......@@ -142,6 +143,40 @@ watch(
)
/**
* 年龄变化时自动计算出生年月日
* @param {number} age - 年龄
*
* @description 用户选择年龄后,自动计算并填充出生日期字段
* 计算公式:当前年份 - 年龄 = 出生年份(默认1月1日)
*/
const onAgeChange = (age) => {
console.log('[LifeInsuranceTemplate] onAgeChange 触发,接收到的 age:', age, 'type:', typeof age)
if (age !== undefined && age !== null && age !== '') {
const currentYear = new Date().getFullYear()
const birthYear = currentYear - age
console.log('[LifeInsuranceTemplate] 计算出生年份:', {
currentYear,
age,
birthYear
})
// 格式化为 YYYY-MM-DD,默认使用1月1日
const month = String(1).padStart(2, '0')
const day = String(1).padStart(2, '0')
const birthday = `${birthYear}-${month}-${day}`
console.log('[LifeInsuranceTemplate] 设置出生日期:', birthday)
form.birthday = birthday
console.log('[LifeInsuranceTemplate] form.birthday 设置后:', form.birthday)
} else {
console.log('[LifeInsuranceTemplate] age 无效,跳过计算')
}
}
/**
* 出生日期变化时自动计算年龄
* @param {string} birthday - 出生日期(格式:YYYY-MM-DD)
*
......
......@@ -9,22 +9,23 @@
class="mb-5"
/>
<!-- 出生年月日 -->
<PlanFieldDatePicker
v-model="form.birthday"
label="出生年月日"
placeholder="请选择日期"
<!-- 年龄(主字段,选择后自动计算出生年月日) -->
<PlanFieldAgePicker
v-model="form.age"
label="年龄"
placeholder="请选择年龄"
:required="true"
@change="onBirthdayChange"
@change="onAgeChange"
class="mb-5"
/>
<!-- 年龄(根据出生日期自动计算,可编辑 -->
<PlanFieldAgePicker
v-model="form.age"
label="年龄"
placeholder="请选择出生日期自动计算"
<!-- 出生年月日(根据年龄自动计算,可手动调整 -->
<PlanFieldDatePicker
v-model="form.birthday"
label="出生年月日"
placeholder="请选择年月日"
:required="true"
@change="onBirthdayChange"
class="mb-5"
/>
......@@ -304,6 +305,40 @@ const withdrawalPeriods = computed(() => {
})
/**
* 年龄变化时自动计算出生年月日
* @param {number} age - 年龄
*
* @description 用户选择年龄后,自动计算并填充出生日期字段
* 计算公式:当前年份 - 年龄 = 出生年份(默认1月1日)
*/
const onAgeChange = (age) => {
console.log('[SavingsTemplate] onAgeChange 触发,接收到的 age:', age, 'type:', typeof age)
if (age !== undefined && age !== null && age !== '') {
const currentYear = new Date().getFullYear()
const birthYear = currentYear - age
console.log('[SavingsTemplate] 计算出生年份:', {
currentYear,
age,
birthYear
})
// 格式化为 YYYY-MM-DD,默认使用1月1日
const month = String(1).padStart(2, '0')
const day = String(1).padStart(2, '0')
const birthday = `${birthYear}-${month}-${day}`
console.log('[SavingsTemplate] 设置出生日期:', birthday)
form.birthday = birthday
console.log('[SavingsTemplate] form.birthday 设置后:', form.birthday)
} else {
console.log('[SavingsTemplate] age 无效,跳过计算')
}
}
/**
* 出生日期变化时自动计算年龄
* @param {string} birthday - 出生日期(格式:YYYY-MM-DD)
*
......@@ -479,7 +514,4 @@ defineExpose({
<style lang="less" scoped>
/* 提取计划区域样式 */
.withdrawal-plan-section {
/* 可以在这里添加特殊的样式 */
}
</style>
......