Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
Switch branch/tag
Mock 数据完整总结.md 12.9 KB

Mock 数据配置完成总结

日期: 2026-02-08 状态: ✅ 所有页面已配置完成

已添加 Mock 数据的页面

# 页面 文件路径 Mock 函数 状态
1 周热门资料 src/pages/week-hot-material/index.vue mockWeekHotAPI ✅ 已完成
2 资料列表 src/pages/material-list/index.vue mockFileListAPI ✅ 已完成
3 产品中心 src/pages/product-center/index.vue mockProductListAPI ✅ 已完成
4 搜索页 src/pages/search/index.vue mockSearchAPI ✅ 已完成
5 消息列表 src/pages/message/index.vue mockMessageListAPI ✅ 已完成
6 收藏列表 src/pages/favorites/index.vue mockFavoriteListAPI ✅ 已完成
7 意见反馈列表 src/pages/feedback-list/index.vue mockFeedbackListAPI ✅ 已完成

每个页面的修改内容

1. 周热门资料页 ✅

文件: src/pages/week-hot-material/index.vue

修改:

  • ✅ 导入 mockWeekHotAPI
  • ✅ 添加 USE_MOCK_DATA = true 开关 (第 76 行)
  • ✅ 修改 fetchWeekHotList 函数 (第 110-112 行)

使用:

// 第 76 行
const USE_MOCK_DATA = true  // ✅ 已启用

2. 资料列表页 ✅

文件: src/pages/material-list/index.vue

修改:

  • ✅ 导入 mockFileListAPI
  • ✅ 添加 USE_MOCK_DATA = true 开关 (第 128 行)
  • ✅ 修改主 API 调用 (第 283-289 行)
  • ✅ 修改搜索 API 调用 (第 573-579 行)

使用:

// 第 128 行
const USE_MOCK_DATA = true  // ✅ 已启用

特性:

  • ✅ 支持分类过滤 (cid)
  • ✅ 支持关键词搜索 (keyword)
  • ✅ 8 页数据，每页 20 条

3. 产品中心页 ✅

文件: src/pages/product-center/index.vue

修改:

  • ✅ 导入 mockProductListAPI
  • ✅ 添加 USE_MOCK_DATA = true 开关 (第 158 行)
  • ✅ 修改 fetchProducts 函数 (第 217-222 行)

使用:

// 第 158 行
const USE_MOCK_DATA = true  // ✅ 已启用

特性:

  • ✅ 4 种产品分类(人寿保险、健康保险、意外保险、财产保险)
  • ✅ 4 种标签(热销、新品、推荐、限时)
  • ✅ 支持分类过滤 (cid)
  • ✅ 支持关键词搜索 (keyword)
  • ✅ 10 页数据，每页 10 条

4. 搜索页 ✅

文件: src/pages/search/index.vue

修改:

  • ✅ 导入 mockSearchAPI
  • ✅ 添加 USE_MOCK_DATA = true 开关 (第 151 行)
  • ✅ 修改 performSearch 函数 (第 229-234 行)

使用:

// 第 151 行
const USE_MOCK_DATA = true  // ✅ 已启用

特性:

  • ✅ 同时搜索产品和资料
  • ✅ 支持关键词过滤
  • ✅ 自动选择有数据的 tab
  • ✅ 5 页数据，每页 20 条

5. 消息列表页 ✅

文件: src/pages/message/index.vue

修改:

  • ✅ 导入 mockMessageListAPI
  • ✅ 添加 USE_MOCK_DATA = true 开关 (第 56 行)
  • ✅ 修改 fetchMessageList 函数 (第 79-89 行)

使用:

// 第 56 行
const USE_MOCK_DATA = true  // ✅ 已启用

特性:

  • ✅ 15 种消息标题模板
  • ✅ 随机创建时间(最近30天内)
  • ✅ 50%概率已读
  • ✅ 两种消息类型(通知、系统)
  • ✅ 8 页数据，每页 10 条

6. 收藏列表页 ✅

文件: src/pages/favorites/index.vue

修改:

  • ✅ 导入 mockFavoriteListAPI
  • ✅ 添加 USE_MOCK_DATA = true 开关 (第 73 行)
  • ✅ 使用 LoadMoreList 组件重构
  • ✅ 修改 fetchFavoritesList 函数 (第 122-180 行)
  • ✅ 添加 handleLoadMore 函数 (第 246-257 行)

使用:

// 第 73 行
const USE_MOCK_DATA = true  // ✅ 已启用

特性:

  • ✅ 20 种收藏资料模板
  • ✅ 随机创建时间(最近90天内)
  • ✅ 随机文件大小和类型
  • ✅ 支持查看和删除操作
  • ✅ 3 页数据，每页 20 条

7. 意见反馈列表页 ✅

文件: src/pages/feedback-list/index.vue

修改:

  • ✅ 导入 mockFeedbackListAPI
  • ✅ 添加 USE_MOCK_DATA = true 开关 (第 96 行)
  • ✅ 使用 LoadMoreList 组件重构
  • ✅ 修改 loadFeedbackList 函数 (第 184-236 行)
  • ✅ 添加 handleLoadMore 函数 (第 243-254 行)

使用:

// 第 96 行
const USE_MOCK_DATA = true  // ✅ 已启用

特性:

  • ✅ 20 种反馈内容模板
  • ✅ 3 种反馈分类(功能建议、问题反馈、其他问题)
  • ✅ 60%概率已处理
  • ✅ 已处理的反馈有70%概率有回复
  • ✅ 30%概率包含截图
  • ✅ 5 页数据，每页 10 条

全局测试步骤

1. 启动开发服务器

pnpm dev:weapp

2. 测试每个页面

周热门资料页

  1. 导航到"周热门资料"页
  2. 查看首次加载(20 条数据)
  3. 向下滚动,触发加载更多
  4. 查看 Console: [Mock] weekHotAPI - 第X页,共Y条
  5. 滚动到底,显示"没有更多了"

资料列表页

  1. 导航到"资料列表"页
  2. 查看首次加载
  3. 测试切换分类 tab
  4. 测试搜索功能
  5. 向下滚动加载更多

产品中心页

  1. 导航到"产品中心"页
  2. 查看首次加载(10 条数据)
  3. 测试切换分类 tab(人寿保险、健康保险等)
  4. 测试搜索功能
  5. 向下滚动加载更多

搜索页

  1. 导航到"搜索"页
  2. 输入关键词(如"保险"、"产品"等)
  3. 点击搜索或按回车
  4. 查看产品和资料结果
  5. 切换产品/资料 tab
  6. 向下滚动加载更多

消息列表页

  1. 导航到"我的消息"页
  2. 查看首次加载(10 条数据)
  3. 向下滚动加载更多
  4. 查看消息时间格式(YYYY-MM-DD)
  5. 滚动到底,显示"没有更多了"

收藏列表页

  1. 导航到"我的收藏"页
  2. 查看首次加载(20 条数据)
  3. 向下滚动加载更多
  4. 查看收藏时间格式(YYYY-MM-DD)
  5. 滚动到底,显示"没有更多了"
  6. 测试删除功能(Mock模式)

意见反馈列表页

  1. 导航到"意见反馈"页
  2. 查看首次加载(10 条数据)
  3. 向下滚动加载更多
  4. 查看反馈分类标签(功能建议、问题反馈、其他问题)
  5. 查看处理状态(已处理/待处理)
  6. 滚动到底,显示"没有更多了"

3. 查看 Console 日志

正常情况下会看到:

[Mock] weekHotAPI - 第0页,共20条
[Mock] fileListAPI - 第0页,共20条
[Mock] listAPI - 第0页,共10条
[Mock] searchAPI - 第0页,产品10条,资料10条
[Mock] myListAPI - 第1页,共10条
[Mock] favoriteListAPI - 第0页,共20条
[Mock] feedbackListAPI - 第0页,共10条

切换回真实 API

测试完成后,需要将所有页面的开关改为 false:

快速切换脚本

# 使用 sed 批量替换
sed -i '' 's/const USE_MOCK_DATA = true/const USE_MOCK_DATA = false/g' \
  src/pages/week-hot-material/index.vue \
  src/pages/material-list/index.vue \
  src/pages/product-center/index.vue \
  src/pages/search/index.vue \
  src/pages/message/index.vue \
  src/pages/favorites/index.vue \
  src/pages/feedback-list/index.vue

手动切换

修改每个页面文件中的 USE_MOCK_DATA 常量:

// 修改前
const USE_MOCK_DATA = true

// 修改后
const USE_MOCK_DATA = false

需要修改的 7 个文件:

  1. src/pages/week-hot-material/index.vue
  2. src/pages/material-list/index.vue
  3. src/pages/product-center/index.vue
  4. src/pages/search/index.vue
  5. src/pages/message/index.vue
  6. src/pages/favorites/index.vue
  7. src/pages/feedback-list/index.vue

Mock 数据字段对照表

周热门资料

字段 类型 说明 示例
meta_id integer 文件ID 1, 2, 3...
name string 文件名称 "财富管理基础知识指南 PDF文档"
src string 文件URL "https://cdn.example.com/files/1.pdf"
size string 文件大小 "2.5MB"
read_people_count integer 学习人数 1234
read_people_percent number 学习百分比 75
is_favorite string 收藏状态 "1" 或 "0"
extension string 文件扩展名 "pdf"

资料列表

字段 类型 说明 示例
id integer 资料ID 1, 2, 3...
name string 资料名称 "2024年保险行业发展趋势报告"
title string 资料标题 "2024年保险行业发展趋势报告"
fileName string 文件名 "报告.pdf"
size string 文件大小 "2.5MB"
extension string 文件扩展名 "pdf"
collected boolean 是否已收藏 true/false
src string 文件URL "https://cdn.example.com/materials/1.pdf"
downloadUrl string 下载URL "https://cdn.example.com/materials/1.pdf"

产品列表

字段 类型 说明 示例
id integer 产品ID 1, 2, 3...
product_name string 产品名称 "百万年金保险计划"
name string 产品名称(别名) "百万年金保险计划"
cover_image string 封面图URL "https://cdn.example.com/products/1.jpg"
recommend string 推荐标识 "hot" 或 ""
tags Array 标签数组 [{id: 1, name: "热销", bg_color: "#FEE2E2", text_color: "#DC2626"}]
description string 产品描述 "这是一款优质的保险产品..."
premium number 保费 5000
category_id integer 分类ID 1

搜索结果

字段 类型 说明
products Array 产品列表(同产品列表字段)
files Array 资料列表(同资料列表字段)

消息列表

字段 类型 说明 示例
id integer 消息ID 1, 2, 3...
title string 消息标题 "关于2024年新产品上线通知"
intro string 消息简介 "这是一条关于..."
content string 消息内容 "这是一条关于..."
create_time string 创建时间 "2024-01-15"
is_read integer 是否已读 0 或 1
type string 消息类型 "notice" 或 "system"

收藏列表

字段 类型 说明 示例
meta_id integer 文件ID 1, 2, 3...
name string 文件名称（含扩展名） "财富管理基础知识指南.pdf"
size string 文件大小 "2.5MB"
src string 文件URL "https://cdn.example.com/files/1.pdf"
created_time string 收藏时间 "2024-01-15"

意见反馈列表

字段 类型 说明 示例
id integer 反馈ID 1, 2, 3...
category string 反馈分类 "1"=功能建议, "3"=问题反馈, "7"=其他问题
status integer 处理状态 1=待处理, 5=已处理
note string 反馈内容 "希望能够增加资料下载功能"
images Array 截图URL列表 ["https://placehold.co/200x200/..."]
contact string 联系方式 "138****8888"
reply string 客服回复 "感谢您的宝贵建议..."
reply_time string 回复时间 "2024-01-15"

常见问题

Q: Mock 数据不生效?

检查:

  1. 确认对应页面的 USE_MOCK_DATA = true
  2. 确认已正确导入 mock 函数
  3. 查看 console 是否有 [Mock] 日志输出
  4. 检查网络请求是否调用了 mock 函数

Q: 数据格式不对?

检查:

  1. 查看 src/utils/mockData.js 中的字段定义
  2. 对照页面代码中的字段映射逻辑
  3. 在 browser console 查看返回的数据结构

Q: 想修改数据量?

修改:

  • 修改页面的 pageSize 或 limit 变量
  • Mock 数据会自动适应请求的数量

Q: 想增加总页数?

修改 src/utils/mockData.js:

// 修改 totalPages 值
const totalPages = 10  // 从 5 改为 10

Q: 搜索功能不工作?

检查:

  1. 确认输入了关键词
  2. 确认 mock 数据中有包含该关键词的数据
  3. 查看 console 日志确认请求参数

验收清单

测试完成后,请确认:

  • 周热门资料页滚动加载正常
  • 资料列表页滚动加载正常
  • 资料列表页分类切换正常
  • 资料列表页搜索功能正常
  • 产品中心页滚动加载正常
  • 产品中心页分类切换正常
  • 产品中心页搜索功能正常
  • 搜索页关键词搜索正常
  • 搜索页产品/资料切换正常
  • 搜索页滚动加载正常
  • 消息列表页滚动加载正常
  • 收藏列表页滚动加载正常
  • 收藏列表页删除功能正常(Mock模式)
  • 意见反馈列表页滚动加载正常
  • 意见反馈列表页分类和状态显示正常
  • 所有页面 Console 日志正确输出
  • 所有页面"没有更多了"正常显示
  • 数据格式正确,无报错

下一步

  1. 测试: 逐个测试所有页面的滚动加载功能
  2. 验证: 确认数据格式和功能正常
  3. 调试: 如有问题,查看 Console 日志定位
  4. 切换: 测试完成后,切换回真实 API
  5. 提交: 将修改提交到代码仓库

最后更新: 2026-02-08 维护者: Claude Code