mock-data-complete-summary.md 9.49 KB

Raw Blame History Permalink



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
✅ 已完成


每个页面的修改内容


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 条


全局测试步骤


1. 启动开发服务器

pnpm dev:weapp


2. 测试每个页面


周热门资料页


导航到"周热门资料"页
查看首次加载(20 条数据)
向下滚动,触发加载更多
查看 Console: [Mock] weekHotAPI - 第X页,共Y条

滚动到底,显示"没有更多了"


资料列表页


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


产品中心页


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


搜索页


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


消息列表页


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


3. 查看 Console 日志

正常情况下会看到:

[Mock] weekHotAPI - 第0页,共20条
[Mock] fileListAPI - 第0页,共20条
[Mock] listAPI - 第0页,共10条
[Mock] searchAPI - 第0页,产品10条,资料10条
[Mock] myListAPI - 第1页,共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


手动切换

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

// 修改前
const USE_MOCK_DATA = true

// 修改后
const USE_MOCK_DATA = false


需要修改的 5 个文件:


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


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"


常见问题


Q: Mock 数据不生效?

检查:


确认对应页面的 USE_MOCK_DATA = true

确认已正确导入 mock 函数
查看 console 是否有 [Mock] 日志输出
检查网络请求是否调用了 mock 函数


Q: 数据格式不对?

检查:


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


Q: 想修改数据量?

修改:


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


Q: 想增加总页数?

修改 src/utils/mockData.js:

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


Q: 搜索功能不工作?

检查:


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


验收清单

测试完成后,请确认:


 周热门资料页滚动加载正常

 资料列表页滚动加载正常

 资料列表页分类切换正常

 资料列表页搜索功能正常

 产品中心页滚动加载正常

 产品中心页分类切换正常

 产品中心页搜索功能正常

 搜索页关键词搜索正常

 搜索页产品/资料切换正常

 搜索页滚动加载正常

 消息列表页滚动加载正常

 所有页面 Console 日志正确输出

 所有页面"没有更多了"正常显示

 数据格式正确,无报错


下一步


测试: 逐个测试所有页面的滚动加载功能

验证: 确认数据格式和功能正常

调试: 如有问题,查看 Console 日志定位

切换: 测试完成后,切换回真实 API

提交: 将修改提交到代码仓库


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