Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
5f8e3756 1 parent 1d1349be

feat(plan): 新增多阶段提取方案功能 

- 新增产品：宏挚传承保障计划(多阶段) (savings-gs-multistage)
- 年龄 < 12岁：固定显示 3 个阶段
- 年龄 ≥ 12岁：初始 1 个阶段，可添加至 4 个
- 提取期新增"一笔过"选项
- 递增百分比改为可选字段（不填传 null）
- 提交数据格式：withdrawal_stages 数组
- 删除冗余的 mock 文件 (src/api/mock/hotProducts.js)
- 文档归档到 docs/tasks/2026-02-25/archive/

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Expand all
Inline Side-by-side
Showing 7 changed files with 349 additions and 210 deletions
......@@ -2,6 +2,29 @@
记录项目开发过程中的重要变更和完成任务。
## 2026-02-25
### 21:00:00 - feat(plan): 新增多阶段提取方案功能
**影响文件**:
- `src/config/plan-templates.js` - 新增多阶段产品配置和 `savings-gs-multistage` 产品
- `src/components/plan/PlanTemplates/SavingsTemplate.vue` - 实现多阶段提取渲染和交互逻辑
- `src/api/mock/mock/hotProducts.js` - 添加多阶段产品 mock 数据
**变更摘要**:
- 新增产品：宏挚传承保障计划(多阶段) (`savings-gs-multistage`)
- 多阶段功能：
- 年龄 < 12岁：固定显示 3 个阶段
- 年龄 ≥ 12岁：初始 1 个阶段，可添加至 4 个
- 提取期新增"一笔过"选项
- 递增百分比改为可选字段（不填传 null）
- 提交数据格式：`withdrawal_stages` 数组
- 样式优化：阶段卡片白色背景
**相关文档**:
- `docs/tasks/2026-02-25/archive/多阶段提取方案设计.md`
- `docs/tasks/2026-02-25/archive/客户新需求-2026-02-25.md`
## 2026-02-24
### 23:59:18 - 完成任务
......@@ -15,3 +38,48 @@
**变更摘要**:
- 无详细描述
## 2026-02-25
### 20:09:02 - 完成任务
**影响文件**:
- `src/components/plan/PlanTemplates/CriticalIllnessTemplate.vue`
- `src/components/plan/PlanTemplates/LifeInsuranceTemplate.vue`
- `src/components/plan/PlanTemplates/SavingsTemplate.vue`
- `src/config/plan-templates.js`
**变更摘要**:
- 无详细描述
### 20:11:21 - 完成任务
**影响文件**:
- `src/components/plan/PlanTemplates/CriticalIllnessTemplate.vue`
- `src/components/plan/PlanTemplates/LifeInsuranceTemplate.vue`
- `src/components/plan/PlanTemplates/SavingsTemplate.vue`
- `src/config/plan-templates.js`
**变更摘要**:
- 无详细描述
### 20:12:04 - 完成任务
**影响文件**:
- `src/components/plan/PlanTemplates/CriticalIllnessTemplate.vue`
- `src/components/plan/PlanTemplates/LifeInsuranceTemplate.vue`
- `src/components/plan/PlanTemplates/SavingsTemplate.vue`
- `src/config/plan-templates.js`
**变更摘要**:
- 无详细描述
### 20:14:14 - 完成任务
**影响文件**:
- `src/components/plan/PlanTemplates/CriticalIllnessTemplate.vue`
- `src/components/plan/PlanTemplates/LifeInsuranceTemplate.vue`
- `src/components/plan/PlanTemplates/SavingsTemplate.vue`
- `src/config/plan-templates.js`
**变更摘要**:
- 无详细描述
......
# 客户新需求记录（2026-02-25）
> **创建时间**: 2026-02-25
> **状态**: ⏳ 待确认方案
> **优先级**: 中
---
## 📋 需求清单
### 需求 1：重疾类产品缴费年期新增选项
**描述**：重疾类产品申请时，模板内"缴费年期"增加"直至65岁"选项
**影响产品**：
- ✅ MPC 守护无间重疾（已有产品）
- ✅ MBC PRO 活跃人生重疾保 PRO（已有产品）
- ✅ MBC2 活跃人生重疾保 2（已有产品）
**当前状态**：
- 现有缴费年期选项：10年、20年、25年
- 需要新增：直至65岁
**技术实现**：
- 文件：`src/config/plan-templates.js`
- 修改三款重疾产品的 `payment_periods` 配置
---
### 需求 2：年龄与出生年月日二选一填写
**描述**：所有产品申请时，年龄与出生年月日改为二选一进行填写
**影响范围**：
- ✅ 所有产品类型（人寿、重疾、储蓄）
**当前状态**：
- 现有：必填出生年月日，年龄自动计算
- 需求：二选一填写（填年龄自动计算生日，或填生日自动计算年龄）
**UI 交互设计**：
```
┌─────────────────────────────────┐
│ 出生日期（二选一） │
├─────────────────────────────────┤
│ ○ 填写年龄 │
│ 年龄: [ 30 ] 岁 │
│ │
│ ○ 填写出生年月日 │
│ 生日: [ 1990-01-01 ] │
└─────────────────────────────────┘
```
**技术实现**：
- 新增表单字段：`age_input_mode`
- 修改 Schema：条件显示年龄或生日输入
- 添加自动计算逻辑
---
### 需求 3：储蓄类产品多阶段提取方案
**描述**：储蓄类产品的提取方案改为可设置多阶段
**客户确认**：
- ✅ 一份计划书里只有一个提取方案，不会有多个
- ✅ 需要支持在一个方案中设置多个不同阶段的提取计划
**示例**（教育+创业+退休组合）：
```
┌──────────────────────────────────────────┐
│ 方案一：多阶段分时提取 │
├──────────────────────────────────────────┤
│ 阶段1: 教育基金 │
│ 18-21岁，每年提取 5万 │
│ │
│ 阶段2: 创业金/婚嫁金 │
│ 30岁，一笔过提取 40万 │
│ │
│ 阶段3: 退休养老年金 │
│ 50-100岁，每年提取 7万 │
└──────────────────────────────────────────┘
```
**设计文档**：参见本目录下的 `多阶段提取方案设计.md`
---
## 📊 实施计划
### 优先级排序
| 优先级 | 需求 | 预估工时 | 依赖 |
|--------|------|----------|------|
| **P1** | 需求1：重疾缴费年期 | 30分钟 | 无 |
| **P2** | 需求2：年龄生日二选一 | 2-3小时 | 无 |
| **P3** | 需求3：多阶段提取 | 4-5小时 | 需求2 |
### 实施步骤
#### 第 1 步：重疾缴费年期新增选项（30分钟）
**文件**：`src/config/plan-templates.js`
**修改内容**：
```javascript
// 为三款重疾产品的 payment_periods 添加 "直至65岁" 选项
payment_periods: [
'10 年（15 日 - 65 岁）',
'20 年（15 日 - 65 岁）',
'25 年（15 日 - 60 岁）',
'直至65岁' // 新增
]
```
---
#### 第 2 步：年龄与出生年月日二选一（2-3小时）
**涉及文件**：
1. `src/config/plan-templates.js` - Schema 配置
2. `src/components/plan/PlanFields/` - 新增组件
3. `src/components/plan/PlanTemplates/` - 模板组件逻辑
**Schema 扩展**：
```javascript
base_fields: [
// 新增：年龄输入模式选择
{
id: 'age_input_mode',
key: 'age_input_mode',
type: 'radio',
label: '请选择输入方式',
options: ['填写年龄', '填写出生年月日'],
required: true,
default: '填写出生年月日'
},
// 年龄输入（条件显示）
{
id: 'age',
key: 'age',
type: 'age',
label: '年龄',
placeholder: '请输入年龄',
required: true,
show_when: { field: 'age_input_mode', op: 'eq', value: '填写年龄' },
clear_when_hidden: true
},
// 出生年月日输入（条件显示）
{
id: 'birthday',
key: 'birthday',
type: 'date',
label: '出生年月日',
placeholder: '请选择年月日',
required: true,
show_when: { field: 'age_input_mode', op: 'eq', value: '填写出生年月日' },
clear_when_hidden: true
}
]
```
**自动计算逻辑**：
- 填写年龄 → 自动计算出生年月日（默认当年生日）
- 填写出生年月日 → 自动计算年龄（当前年份 - 出生年份）
---
#### 第 3 步：多阶段提取方案（4-5小时）
详见 `多阶段提取方案设计.md`
---
## 📝 待确认事项
### 客户确认
- [ ] **需求1确认**：
- [ ] 确认"直至65岁"选项文字表述
- [ ] 确认是否需要年龄限制（如：最大投保年龄）
- [ ] **需求2确认**：
- [ ] 确认默认选项（建议：填写出生年月日）
- [ ] 确认填写年龄时的默认生日（建议：当年生日）
- [ ] **需求3确认**：
- [ ] 确认阶段数量上限（设计方案：1-5个）
- [ ] 确认预设方案模板（教育+创业+退休、退休年金、财富传承）
### 技术确认
- [ ] 后端能否接收新增字段：
- `age_input_mode`
- `withdrawal_stages_json`
- [ ] 后端年龄计算逻辑是否与前端一致
---
## 🔗 相关文档
- [多阶段提取方案设计](./多阶段提取方案设计.md)
- [计划书架构文档](../../plan/plan-entry-architecture.md)
- [Schema 配置规范](../../plan/plan-config-schema-reference.md)
---
**文档版本**: 1.0.0
**最后更新**: 2026-02-25
/**
* 热卖产品 Mock 数据
*
* @description 包含项目所有保险类型的产品 mock 数据，用于测试计划书模板显示
* 遵循项目 mock 数据规范，集成到 src/utils/mockData.js
* @module api/mock/hotProducts
* @author Claude Code
* @created 2026-02-09
*/
/**
* 热卖产品 Mock 数据列表
* @description 包含 9 种产品，覆盖所有计划书模板类型
*/
const HOT_PRODUCTS = [
// ====== 人寿保险 (LifeInsuranceTemplate) ======
{
id: 1,
product_name: 'WIOP3E 盈传创富保障计划 3 - 优选版',
name: 'WIOP3E 盈传创富保障计划 3 - 优选版',
recommend: 'hot',
form_sn: 'life-insurance-wiop3e', // 对应 LifeInsuranceTemplate
categories: [
{ id: 'life', name: '人寿保险' }
],
tags: [
{ id: 't1', name: '终身寿险', bg_color: '#DBEAFE', text_color: '#1E40AF' },
{ id: 't2', name: '美元产品', bg_color: '#DCFCE7', text_color: '#166534' }
],
cover_image: 'https://picsum.photos/seed/wiop3e/400/300'
},
{
id: 2,
product_name: 'WIOP3 盈传创富保障计划 3',
name: 'WIOP3 盈传创富保障计划 3',
recommend: 'hot',
form_sn: 'life-insurance-wiop3', // 对应 LifeInsuranceTemplate
categories: [
{ id: 'life', name: '人寿保险' }
],
tags: [
{ id: 't1', name: '终身寿险', bg_color: '#DBEAFE', text_color: '#1E40AF' },
{ id: 't2', name: '美元产品', bg_color: '#DCFCE7', text_color: '#166534' }
],
cover_image: 'https://picsum.photos/seed/wiop3/400/300'
},
// ====== 重疾保险 (CriticalIllnessTemplate) ======
{
id: 3,
product_name: 'MPC 守护无间重疾',
name: 'MPC 守护无间重疾',
recommend: 'hot',
form_sn: 'critical-illness-mpc', // 对应 CriticalIllnessTemplate
categories: [
{ id: 'critical', name: '重疾保险' }
],
tags: [
{ id: 't1', name: '重疾保障', bg_color: '#FEF3C7', text_color: '#92400E' },
{ id: 't2', name: '终身保障', bg_color: '#E0E7FF', text_color: '#3730A3' }
],
cover_image: 'https://picsum.photos/seed/mpc/400/300'
},
{
id: 4,
product_name: 'MBC PRO 活跃人生重疾保 PRO',
name: 'MBC PRO 活跃人生重疾保 PRO',
recommend: 'hot',
form_sn: 'critical-illness-mbc-pro', // 对应 CriticalIllnessTemplate
categories: [
{ id: 'critical', name: '重疾保险' }
],
tags: [
{ id: 't1', name: '重疾保障', bg_color: '#FEF3C7', text_color: '#92400E' },
{ id: 't2', name: 'PRO 版本', bg_color: '#FEE2E2', text_color: '#991B1B' }
],
cover_image: 'https://picsum.photos/seed/mbc-pro/400/300'
},
{
id: 5,
product_name: 'MBC2 活跃人生重疾保 2',
name: 'MBC2 活跃人生重疾保 2',
recommend: 'hot',
form_sn: 'critical-illness-mbc2', // 对应 CriticalIllnessTemplate
categories: [
{ id: 'critical', name: '重疾保险' }
],
tags: [
{ id: 't1', name: '重疾保障', bg_color: '#FEF3C7', text_color: '#92400E' },
{ id: 't2', name: '升级版', bg_color: '#DCFCE7', text_color: '#166534' }
],
cover_image: 'https://picsum.photos/seed/mbc2/400/300'
},
// ====== 储蓄型产品 (SavingsTemplate) ======
{
id: 6,
product_name: 'GS 宏挚传承保障计划',
name: 'GS 宏挚传承保障计划',
recommend: 'hot',
form_sn: 'savings-gs', // 对应 SavingsTemplate
categories: [
{ id: 'savings', name: '储蓄保险' }
],
tags: [
{ id: 't1', name: '储蓄型', bg_color: '#E0E7FF', text_color: '#3730A3' },
{ id: 't2', name: '传承规划', bg_color: '#F3E8FF', text_color: '#6B21A8' }
],
cover_image: 'https://picsum.photos/seed/gs/400/300'
},
{
id: 7,
product_name: 'GC 宏挚家传保险计划',
name: 'GC 宏挚家传保险计划',
recommend: 'hot',
form_sn: 'savings-gc', // 对应 SavingsTemplate
categories: [
{ id: 'savings', name: '储蓄保险' }
],
tags: [
{ id: 't1', name: '储蓄型', bg_color: '#E0E7FF', text_color: '#3730A3' },
{ id: 't2', name: '家庭保障', bg_color: '#FEE2E2', text_color: '#991B1B' }
],
cover_image: 'https://picsum.photos/seed/gc/400/300'
},
{
id: 8,
product_name: 'FA 宏浚传承保障计划',
name: 'FA 宏浚传承保障计划',
recommend: 'hot',
form_sn: 'savings-fa', // 对应 SavingsTemplate
categories: [
{ id: 'savings', name: '储蓄保险' }
],
tags: [
{ id: 't1', name: '储蓄型', bg_color: '#E0E7FF', text_color: '#3730A3' },
{ id: 't2', name: '财富传承', bg_color: '#FEF3C7', text_color: '#92400E' }
],
cover_image: 'https://picsum.photos/seed/fa/400/300'
},
{
id: 9,
product_name: 'LV2 赤霞珠终身寿险计划2',
name: 'LV2 赤霞珠终身寿险计划2',
recommend: 'hot',
form_sn: 'savings-lv2', // 对应 SavingsTemplate
categories: [
{ id: 'savings', name: '储蓄保险' }
],
tags: [
{ id: 't1', name: '储蓄型', bg_color: '#E0E7FF', text_color: '#3730A3' },
{ id: 't2', name: '终身寿险', bg_color: '#DBEAFE', text_color: '#1E40AF' }
],
cover_image: 'https://picsum.photos/seed/lv2/400/300'
}
]
/**
* Mock: listAPI (热卖产品)
* @description 专门用于首页热卖产品的 Mock API，支持 form_sn 字段
* @param {Object} params - 请求参数
* @param {string} params.recommend - 推荐位（必须为 'hot'）
* @returns {Promise<Object>} 模拟的 API 响应
*/
export async function mockHotProductsListAPI(params) {
const { recommend } = params
// 只返回热卖产品
if (recommend !== 'hot') {
return { code: 0, msg: '只支持热卖产品查询', data: { list: [], total: 0 } }
}
// 模拟网络延迟
await new Promise(resolve => setTimeout(resolve, 200))
console.log('[Mock] hotProductsListAPI - 返回热卖产品', HOT_PRODUCTS.length, '条')
return {
code: 1,
msg: 'success',
data: {
list: HOT_PRODUCTS,
total: HOT_PRODUCTS.length,
categories: [
{ id: 'life', name: '人寿保险' },
{ id: 'critical', name: '重疾保险' },
{ id: 'savings', name: '储蓄保险' }
]
}
}
}
/**
* 导出 Mock API 函数供其他模块使用
*/
export default {
mockHotProductsListAPI
}
......@@ -11,10 +11,10 @@
/**
* 热卖产品 Mock 数据列表
*
* @description 包含 9 种产品，覆盖所有计划书模板类型：
* @description 包含 10 种产品，覆盖所有计划书模板类型：
* - 人寿保险 (2 种): WIOP3E、WIOP3
* - 重疾保险 (3 种): MPC、MBC PRO、MBC2
* - 储蓄型产品 (4 种): GS、GC、FA、LV2
* - 储蓄型产品 (5 种): GS、GC、FA、LV2、GS(多阶段)
*/
export const hotProductsMockData = [
// ====== 人寿保险 (LifeInsuranceTemplate) ======
......@@ -165,6 +165,25 @@ export const hotProductsMockData = [
],
cover_image: 'https://picsum.photos/seed/lv2/400/300',
created_time: '2026-01-09 00:00:00'
},
// ====== 储蓄型产品 - 多阶段提取（新增 2026-02-25） ======
{
id: 10,
product_name: 'GS 宏挚传承保障计划(多阶段)',
recommend: 'hot',
form_sn: 'savings-gs-multistage', // 对应 SavingsTemplate 多阶段模式
categories: [
{ id: 'savings', name: '储蓄保险' }
],
tags: [
{ id: 't1', name: '多阶段提取', bg_color: '#F3E8FF', text_color: '#6B21A8' },
{ id: 't2', name: '新品', bg_color: '#DCFCE7', text_color: '#166534' },
{ id: 't3', name: '灵活规划', bg_color: '#FEF3C7', text_color: '#92400E' }
],
cover_image: 'https://picsum.photos/seed/gs-multistage/400/300',
created_time: '2026-02-25 00:00:00'
}
]
......@@ -288,6 +307,7 @@ export function getAllTemplateTypes() {
* - ✅ savings-gc - GC 宏挚家传保险计划
* - ✅ savings-fa - FA 宏浚传承保障计划
* - ✅ savings-lv2 - LV2 赤霞珠终身寿险计划2
* - ✅ savings-gs-multistage - GS 宏挚传承保障计划(多阶段) - 支持多阶段提取
*
* ## 测试步骤
*
......
......@@ -111,6 +111,23 @@ const savingsFormSchema = {
// 当 withdrawal_mode 切换时，不可见的字段会自动清空
}
/**
* 多阶段提取计划配置
* @description 用于"宏挚传承保障计划(多阶段)"等支持多阶段提取的产品
* @updated 2026-02-25 - 新增多阶段提取功能
*/
const multiStageWithdrawalConfig = {
enabled: true,
stage_limit: 4, // 阶段上限（预留修改空间）
age_threshold: 12, // 年龄阈值（<12岁固定3组，≥12岁可添加）
withdrawal_periods: [
'1年', '2年', '3年', '5年',
'10年', '15年', '20年', '终身',
'一笔过' // 新增：一次性提取选项
],
percentage_optional: true // 递增百分比可选
}
export const PLAN_TEMPLATES = {
// 人寿保险产品 - WIOP3E
'life-insurance-wiop3e': {
......@@ -208,7 +225,7 @@ export const PLAN_TEMPLATES = {
// ====== 储蓄型产品（统一逻辑） ======
// GS - 宏挚传承保障计划
// GS - 宏挚传承保障计划（普通模式）
'savings-gs': {
name: '宏挚传承保障计划',
component: 'SavingsTemplate',
......@@ -351,6 +368,38 @@ export const PLAN_TEMPLATES = {
submit_mapping: savingsSubmitMapping
}
},
// GS - 宏挚传承保障计划（多阶段模式）⭐ 新增
// @description 支持多阶段提取计划，根据年龄控制阶段数量
// @updated 2026-02-25 - 新增多阶段提取功能
'savings-gs-multistage': {
name: '宏挚传承保障计划(多阶段)',
component: 'SavingsTemplate',
category: 'savings',
config: {
currency: 'USD',
payment_periods: [
'整付',
'3 年',
'5 年',
'10 年',
'15 年',
],
age_range: { min: 0, max: 100 },
insurance_period: '终身',
// 多阶段提取计划配置
multi_stage_withdrawal: multiStageWithdrawalConfig,
withdrawal_plan: {
enabled: true,
currencies: ['HKD', 'USD', 'CNY'],
default_currency: 'USD',
withdrawal_modes: ['指定提取金额'], // 多阶段模式只支持指定提取金额
withdrawal_periods: multiStageWithdrawalConfig.withdrawal_periods
},
form_schema: savingsFormSchema,
submit_mapping: savingsSubmitMapping
}
},
}
/**
......