hotProducts.js
8.96 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
/**
* 热卖产品 Mock 数据
*
* @description 包含项目所有保险类型的产品 mock 数据,用于测试计划书模板显示
* 涵盖人寿保险、重疾保险、储蓄型产品三大类
* @module mock/hotProducts
* @author Claude Code
* @created 2026-02-09
*/
/**
* 热卖产品 Mock 数据列表
*
* @description 包含 9 种产品,覆盖所有计划书模板类型:
* - 人寿保险 (2 种): WIOP3E、WIOP3
* - 重疾保险 (3 种): MPC、MBC PRO、MBC2
* - 储蓄型产品 (4 种): GS、GC、FA、LV2
*/
export const hotProductsMockData = [
// ====== 人寿保险 (LifeInsuranceTemplate) ======
{
id: 1,
product_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',
created_time: '2026-01-01 00:00:00'
},
{
id: 2,
product_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',
created_time: '2026-01-02 00:00:00'
},
// ====== 重疾保险 (CriticalIllnessTemplate) ======
{
id: 3,
product_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',
created_time: '2026-01-03 00:00:00'
},
{
id: 4,
product_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',
created_time: '2026-01-04 00:00:00'
},
{
id: 5,
product_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',
created_time: '2026-01-05 00:00:00'
},
// ====== 储蓄型产品 (SavingsTemplate) ======
{
id: 6,
product_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',
created_time: '2026-01-06 00:00:00'
},
{
id: 7,
product_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',
created_time: '2026-01-07 00:00:00'
},
{
id: 8,
product_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',
created_time: '2026-01-08 00:00:00'
},
{
id: 9,
product_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',
created_time: '2026-01-09 00:00:00'
}
]
/**
* 获取热卖产品 Mock 数据
*
* @description 模拟 API 返回格式,包含完整的产品列表数据
* @returns {Object} 模拟的 API 响应对象
* @example
* const mockResponse = getHotProductsMock()
* // 返回: { code: 1, data: { list: [...], total: 9 }, msg: 'success' }
*/
export function getHotProductsMock() {
return {
code: 1,
msg: 'success',
data: {
list: hotProductsMockData,
total: hotProductsMockData.length,
// 分类统计(可选,用于筛选)
categories: [
{ id: 'life', name: '人寿保险' },
{ id: 'critical', name: '重疾保险' },
{ id: 'savings', name: '储蓄保险' }
]
}
}
}
/**
* 根据 form_sn 获取产品 Mock 数据
*
* @description 用于测试特定计划书模板
* @param {string} formSn - 表单模板标识
* @returns {Object|null} 产品对象,未找到返回 null
* @example
* const product = getProductByFormSn('life-insurance-wiop3e')
* // 返回: { id: 1, product_name: 'WIOP3E...', form_sn: 'life-insurance-wiop3e', ... }
*/
export function getProductByFormSn(formSn) {
return hotProductsMockData.find(p => p.form_sn === formSn) || null
}
/**
* 获取所有计划书模板类型
*
* @description 返回项目中所有支持的计划书模板类型
* @returns {Array} 模板类型列表
* @example
* const templates = getAllTemplateTypes()
* // 返回: ['life-insurance-wiop3e', 'life-insurance-wiop3', 'critical-illness-mpc', ...]
*/
export function getAllTemplateTypes() {
return hotProductsMockData.map(p => ({
form_sn: p.form_sn,
product_name: p.product_name,
category: p.categories[0]?.name
}))
}
/**
* Mock 数据使用说明
*
* @description 在开发环境中使用 mock 数据测试计划书功能
*
* ## 使用方式
*
* ### 方式 1: 直接替换 API 调用(推荐)
* ```javascript
* // src/pages/index/index.vue
* import { getHotProductsMock } from '@/mock/hotProducts'
*
* const fetchHotProducts = async () => {
* // 开发环境使用 mock 数据
* if (process.env.NODE_ENV === 'development') {
* const res = getHotProductsMock()
* if (res.code === 1 && res.data) {
* hotProducts.value = res.data.list
* }
* return
* }
*
* // 生产环境调用真实 API
* const res = await listAPI({ recommend: 'hot' })
* // ...
* }
* ```
*
* ### 方式 2: 使用环境变量控制
* ```javascript
* // config/index.js
* const config = {
* useMock: process.env.USE_MOCK === 'true' // 环境变量控制
* }
*
* // src/pages/index/index.vue
* const fetchHotProducts = async () => {
* if (config.useMock) {
* const res = getHotProductsMock()
* // ...
* }
* // ...
* }
* ```
*
* ## 测试覆盖
*
* Mock 数据覆盖以下计划书模板:
*
* ### 人寿保险 (LifeInsuranceTemplate)
* - ✅ life-insurance-wiop3e - WIOP3E 盈传创富保障计划 3 - 优选版
* - ✅ life-insurance-wiop3 - WIOP3 盈传创富保障计划 3
*
* ### 重疾保险 (CriticalIllnessTemplate)
* - ✅ critical-illness-mpc - MPC 守护无间重疾
* - ✅ critical-illness-mbc-pro - MBC PRO 活跃人生重疾保 PRO
* - ✅ critical-illness-mbc2 - MBC2 活跃人生重疾保 2
*
* ### 储蓄型产品 (SavingsTemplate)
* - ✅ savings-gs - GS 宏挚传承保障计划
* - ✅ savings-gc - GC 宏挚家传保险计划
* - ✅ savings-fa - FA 宏浚传承保障计划
* - ✅ savings-lv2 - LV2 赤霞珠终身寿险计划2
*
* ## 测试步骤
*
* 1. 在首页点击任意产品的"计划书"按钮
* 2. 验证弹窗标题是否正确显示产品名称
* 3. 验证表单字段是否与产品类型匹配
* 4. 测试表单提交功能
* 5. 验证错误提示和校验规则
*/