计划书功能测试实现记录
日期: 2026-02-06 目的: 前端测试计划书录入功能（后端接口尚未准备好）
📋 已完成的任务
✅ 任务1: 添加计划书按钮
1.1 首页热卖产品卡片
文件: src/pages/index/index.vue
修改内容:
- 替换了旧的
PlanPopup+SchemeA/SchemeB系统 - 集成新的
PlanFormContainer组件 - 添加了计划书弹窗状态管理 (
showPlanPopup,selectedProduct) - 更新了
openPlanPopup()函数，根据产品ID查找产品对象 - 更新了
handlePlanSubmit()函数
计划书按钮: 已存在（第84-91行），无需新增
1.2 产品中心列表卡片
文件: src/pages/knowledge-base/index.vue
修改内容:
- 在产品卡片上添加了"详情"和"计划书"两个按钮
- 集成
PlanFormContainer组件 - 添加了计划书弹窗状态管理
- 添加了
openPlanPopup(product)函数 - 添加了
handlePlanSubmit(formData)函数
按钮布局:
[详情] [计划书]
1.3 产品详情页
文件: src/pages/product-detail/index.vue
修改内容:
- 在页面底部添加了固定定位的"制作计划书"按钮
- 集成
PlanFormContainer组件 - 添加了计划书弹窗状态管理
- 添加了
openPlanPopup()函数 - 添加了
handlePlanSubmit(formData)函数
按钮样式: 全宽按钮，固定在页面底部
✅ 任务3: Mock 数据（热卖产品）
文件: src/pages/index/index.vue
函数: fetchHotProducts()
Mock 数据包含全部7种产品类型:
人寿保险（2种）
-
WIOP3E 盈传创富保障计划 3 - 优选版
- form_sn:
life-insurance-wiop3e - 标签: 终身寿险、美元
- form_sn:
-
WIOP3 - 盈传创富保障计划 3
- form_sn:
life-insurance-wiop3 - 标签: 终身寿险、美元
- form_sn:
重疾保险（3种）
-
MPC 守护无间重疾
- form_sn:
critical-illness-mpc - 标签: 重疾保障、人民币
- form_sn:
-
MBC PRO 活跃人生重疾保 PRO
- form_sn:
critical-illness-mbc-pro - 标签: 重疾保障、人民币
- form_sn:
-
MBC2 活跃人生重疾保 2
- form_sn:
critical-illness-mbc2 - 标签: 重疾保障、人民币
- form_sn:
储蓄型产品（4种）
-
GS - 宏摯傳承保障計劃
- form_sn:
savings-gs - 标签: 储蓄分红、美元
- form_sn:
-
GC - 宏摯家傳承保險計劃
- form_sn:
savings-gc - 标签: 储蓄分红、美元
- form_sn:
-
FA - 宏浚傳承保障計劃
- form_sn:
savings-fa - 标签: 储蓄分红、美元
- form_sn:
-
LV2 - 赤霞珠終身壽險計劃2
- form_sn:
savings-lv2 - 标签: 储蓄型终身寿险、美元
- form_sn:
🚫 待清理的测试数据
⚠️ 重要提醒
测试完成后需要移除以下内容:
1. 首页 Mock 数据
文件: src/pages/index/index.vue
位置: fetchHotProducts() 函数
清理步骤:
// 删除测试数据部分（⚠️ 测试数据开始 - 测试完成后需要移除 ⚠️）
// 恢复真实API调用：
const res = await listAPI({
recommend: 'hot'
});
if (res.code === 1 && res.data && res.data.list) {
hotProducts.value = res.data.list;
}
2. 提交 API 接口对接
文件: src/pages/index/index.vue, src/pages/product-detail/index.vue, src/pages/knowledge-base/index.vue
当前状态:
// TODO: 后端接口还没有准备好，暂时不调用API
// 测试完成后需要对接 submitPlanAPI
对接步骤:
- 导入 API:
import { submitPlanAPI } from '@/api/plan' - 替换
handlePlanSubmit()中的 TODO 部分： ```javascript const res = await submitPlanAPI({ product_id: selectedProduct.value.id, template: selectedProduct.value.form_sn, form_data: formData });
if (res.code === 1) { // 跳转到成功页面 go('/pages/plan-submit-result/index', { success: 'true', plan_id: res.data.plan_id }); }
---
## 📊 测试覆盖范围
### 模版类型测试
- ✅ **LifeInsuranceTemplate**: WIOP3E, WIOP3
- ✅ **CriticalIllnessTemplate**: MPC, MBC PRO, MBC2
- ✅ **SavingsTemplate**: GS, GC, FA, LV2
### 功能测试
- ✅ 计划书按钮显示在多个页面
- ✅ 点击按钮打开对应产品的计划书表单
- ✅ 根据产品的 `form_sn` 自动加载正确的模版
- ✅ 表单数据结构和验证
### 页面集成测试
- ✅ 首页 → 热卖产品卡片 → 计划书按钮
- ✅ 产品中心 → 产品列表卡片 → 计划书按钮
- ✅ 产品详情页 → 制作计划书按钮
---
## 🔍 后端接口需求
### 必需字段
产品 API 需要返回以下字段：
```javascript
{
id: 1,
product_name: "产品名称",
form_sn: "life-insurance-wiop3e", // 关键：计划书模版标识
recommend: "hot", // 可选：推荐标识
tags: [ // 可选：产品标签
{
id: 1,
name: "终身寿险",
bg_color: "#DBEAFE",
text_color: "#1E40AF"
}
]
}
提交计划书 API
端点: /srv/?a=submit_plan&t=submit
方法: POST
参数:
{
product_id: number, // 产品ID
template: string, // form_sn
form_data: {
// 基础字段（所有模版）
gender: string, // "男" | "女"
age: number, // 年龄
birthday: string, // "YYYY-MM-DD"
smoker: string, // "是" | "否"
coverage: number, // 保额（分）
payment_period: string, // 缴费年期
// 储蓄产品专用字段
withdrawal_plan: {
mode: string, // "年龄指定金额" | "最高固定金额"
start_age: number, // 开始年龄
withdrawal_period: string, // 提取年期
// mode = "年龄指定金额" 时的额外字段
annual_amount: number, // 每年提取金额（分）
currency: string, // 币种
increase_rate: number // 增加率
}
}
}
📝 清理清单
测试完成后，按以下顺序清理：
- 步骤1: 移除首页 Mock 数据，恢复真实 API
- 步骤2: 对接提交计划书 API
-
步骤3: 移除所有
TODO: 后端接口还没有准备好的注释 -
步骤4: 移除
console.log('⚠️ 使用测试数据...')等调试日志 - 步骤5: 测试完整的提交流程
- 步骤6: 删除本测试文档（或归档）
🧪 测试指南
手动测试步骤
-
首页测试:
- 打开首页，查看"热卖产品"区域
- 应显示9个产品卡片（2人寿 + 3重疾 + 4储蓄）
- 点击任意产品的"计划书"按钮
- 应打开对应的计划书表单模版
-
产品中心测试:
- 进入"产品中心"页面
- 选择任意分类或搜索
- 点击产品卡片上的"计划书"按钮
- 应打开对应的计划书表单模版
-
产品详情页测试:
- 进入任意产品详情页
- 点击底部"制作计划书"按钮
- 应打开对应的计划书表单模版
-
表单测试:
- 人寿保险模版：填写性别、年龄、出生年月日等
- 重疾保险模版：填写基础字段
- 储蓄产品模版：填写基础字段 + 提取计划功能
最后更新: 2026-02-06 维护者: Claude Code