f6227c0253
主要改动: - 个人中心: 去除HjfMemberBadge徽章, 会员等级改显示vip_name, "我的资产"/"公排查询"导航项改为与member-points一致风格 - 我的资产页面: 去除HjfMemberBadge, 美化卡片圆角和阴影 - 公排查询页面: 美化顶部渐变和订单卡片样式 - Admin登录页和后台布局: 彻底删除footer copyright信息 - 新增黄精粉业务页面/组件/API/Mock数据(Phase 1) - 新增PHP环境配置文档和启动脚本 Made-with: Cursor
13 KiB
13 KiB
Mock Data 前端交互流程演示 - 验收走查指南
版本: V1.0
日期: 2026年3月11日
目的: 通过 Mock 数据场景切换器在前端完整演示黄精粉商城的核心业务流程
0. 如何运行开发环境查看效果
推荐方式：使用 HBuilderX 运行到浏览器（H5）。
- 安装 HBuilderX。
- 用 HBuilderX 打开目录：
pro_v3.5.1/view/uniapp。 - 菜单选择 运行 → 运行到浏览器 → Chrome。
- 编译完成后会自动打开浏览器，在首页或个人中心右下角可见 演示控制面板（紫色悬浮按钮）。
更多说明（含命令行尝试方式）见：pro_v3.5.1/view/uniapp/README-RUN.md。
1. 实施完成清单
✅ 已完成任务
-
补齐 order_pay_status 页面的公排入队成功 UI
- 文件:
pages/goods/order_pay_status/index.vue - 新增公排入队成功提示卡片
- 新增"查看公排"按钮
- 自动加载并显示排队信息
- 文件:
-
创建场景化 Mock 数据系统
- 文件:
utils/hjfMockData.js - 场景 A: 新用户（空数据，member_level=0）
- 场景 B: 活跃用户（原有数据，member_level=2）
- 场景 C: VIP 用户（多退款记录，member_level=3）
- 全局场景切换函数
setMockScenario()
- 文件:
-
改造 API 文件为场景感知
api/hjfQueue.js→ 使用getMockQueueStatus()api/hjfAssets.js→ 使用getMockAssetsOverview()api/hjfMember.js→ 使用getMockMemberInfo()
-
创建演示控制面板组件
- 文件:
components/HjfDemoPanel.vue - 悬浮按钮（紫色渐变，右下角）
- 场景切换（A/B/C 三个场景）
- 特殊操作（退款弹窗、重置引导）
- 快捷跳转（10+ 页面导航）
- 文件:
-
全局挂载演示面板
- 在
main.js注册为全局组件 - 在
pages/index/index.vue挂载 - 在
pages/user/index.vue挂载 - 仅开发环境显示
- 在
2. 演示走查路线
路线 1: 新用户完整旅程（场景 A）
目标: 演示从引导页到首次购买报单商品入队的完整流程
前置操作:
# 打开演示控制面板，切换到场景 A
# 点击"重置引导"清除引导标记
步骤验收:
| # | 操作步骤 | 验收点 | 状态 |
|---|---|---|---|
| 1 | 打开小程序 | 自动跳转到 P23 引导页 | ⬜ |
| 2 | 滑动引导页（3屏） | 轮播正常，指示器同步 | ⬜ |
| 3 | 点击"立即体验" | 跳转到 P01 首页 | ⬜ |
| 4 | 浏览商品列表 | 报单商品显示绿色"参与公排"角标 | ⬜ |
| 5 | 点击报单商品 | 进入 P06 商品详情 | ⬜ |
| 6 | 查看商品详情 | 显示"报单商品"标签和公排提示 | ⬜ |
| 7 | 点击"立即购买" | 跳转到 P08 确认订单 | ⬜ |
| 8 | 查看订单确认 | 显示"公排商品提示"区域 | ⬜ |
| 9 | 点击支付（Mock） | 跳转到 P10 支付成功页 | ⬜ |
| 10 | 查看支付成功页 | 显示"已加入公排队列"提示 | ⬜ |
| 11 | 点击"查看公排" | 跳转到 P12 公排状态页 | ⬜ |
| 12 | 查看公排状态 | 显示第一条排队记录 | ⬜ |
数据验证 (场景 A):
- 会员等级: 普通会员 (0)
- 公排订单: 0 条（初始）
- 资产余额: ¥0.00
- 积分: 0
路线 2: 公排进度 & 资产管理（场景 B）
目标: 演示活跃用户查看公排进度和管理资产的流程
前置操作:
# 打开演示控制面板，切换到场景 B
步骤验收:
| # | 操作步骤 | 验收点 | 状态 |
|---|---|---|---|
| 1 | 切换到 P04 个人中心 | 显示"云店"会员徽章 | ⬜ |
| 2 | 点击"公排记录" | 跳转到 P12 公排状态页 | ⬜ |
| 3 | 查看顶部卡片 | 公排池 156 单，当前批次 2/4 | ⬜ |
| 4 | 查看排队列表 | 2 条排队中 + 1 条已退款 | ⬜ |
| 5 | 点击"历史记录" | 跳转到 P13 公排历史 | ⬜ |
| 6 | 切换 Tab（全部/排队中/已退款） | 列表正确过滤 | ⬜ |
| 7 | 点击"查看规则" | 跳转到 P14 公排规则页 | ⬜ |
| 8 | 查看规则页 | 进四退一图示 + FAQ 展开 | ⬜ |
| 9 | 返回个人中心 | - | ⬜ |
| 10 | 点击"我的资产" | 跳转到 P15 资产总览 | ⬜ |
| 11 | 查看资产卡片 | ¥7200 / 15000待释放 / 3200已释放 | ⬜ |
| 12 | 查看今日释放 | "今日预计释放 6 积分" | ⬜ |
| 13 | 点击"积分明细" | 跳转到 P18 积分明细 | ⬜ |
| 14 | 切换 Tab（全部/待释放/已释放） | 列表正确展示 | ⬜ |
| 15 | 返回资产页 | - | ⬜ |
| 16 | 点击"提现" | 跳转到 P16 提现页 | ⬜ |
| 17 | 输入提现金额 1000 | 实时显示：手续费 ¥70 / 到账 ¥930 | ⬜ |
数据验证 (场景 B):
- 会员等级: 云店 (2)
- 公排订单: 3 条（2排队 + 1退款）
- 资产余额: ¥7200.00
- 待释放积分: 15000
- 已释放积分: 3200
路线 3: 退款触发 & 团队收益（场景 C）
目标: 演示 VIP 用户刚收到退款和团队管理功能
前置操作:
# 打开演示控制面板，切换到场景 C
# 点击"退款弹窗"触发
步骤验收:
| # | 操作步骤 | 验收点 | 状态 |
|---|---|---|---|
| 1 | 演示面板点击"退款弹窗" | 自动跳转到 P12 公排状态页 | ⬜ |
| 2 | 页面加载 | 自动弹出 HjfRefundNotice | ⬜ |
| 3 | 查看弹窗内容 | "恭喜！公排退款 ¥3600.00 已到账" | ⬜ |
| 4 | 关闭弹窗 | 查看列表中新增"已退款"记录 | ⬜ |
| 5 | 跳转 P15 我的资产 | 余额显示 ¥25200（包含刚退款） | ⬜ |
| 6 | 点击推荐收益（或从个人中心进入） | 跳转到 P19 推荐收益页 | ⬜ |
| 7 | 查看团队数据卡片 | 直推 15人 / 伞下 80人 | ⬜ |
| 8 | 查看收益列表 | 显示直推/伞下奖励积分 | ⬜ |
| 9 | 返回个人中心 | 查看会员徽章 | ⬜ |
| 10 | 确认会员等级 | 显示"服务商"徽章 | ⬜ |
数据验证 (场景 C):
- 会员等级: 服务商 (3)
- 公排订单: 4 条（1刚退款 + 其他）
- 资产余额: ¥25200.00
- 待释放积分: 38500
- 已释放积分: 12600
- 直推人数: 15
- 伞下人数: 80
3. 场景切换验证
3.1 场景切换操作
- 点击右下角紫色悬浮按钮
- 面板展开后，选择场景 A/B/C
- 系统自动刷新当前页面数据
- Toast 提示"已切换到场景 X"
3.2 数据一致性检查
切换场景后，验证以下页面数据同步：
| 页面 | 验证数据项 | 场景 A | 场景 B | 场景 C |
|---|---|---|---|---|
| P04 个人中心 | 会员徽章 | 普通会员 | 云店 | 服务商 |
| P12 公排状态 | 排队订单数 | 0 | 3 | 4 |
| P15 我的资产 | 现金余额 | ¥0 | ¥7200 | ¥25200 |
| P15 我的资产 | 待释放积分 | 0 | 15000 | 38500 |
| P19 推荐收益 | 直推人数 | 0 | 8 | 15 |
4. 特殊功能验证
4.1 退款弹窗触发
操作: 演示面板 → 特殊操作 → 退款弹窗
验收点:
- Toast 提示"跳转到公排状态页查看退款弹窗"
- 1.5 秒后自动跳转到 P12
- URL 参数包含
show_refund=1 - HjfRefundNotice 弹窗自动显示
- 弹窗内容显示退款金额和订单号
4.2 重置引导标记
操作: 演示面板 → 特殊操作 → 重置引导
验收点:
- Toast 提示"引导标记已清除"
- 自动跳转到 P23 引导页
- 引导页可正常浏览
- 完成引导后标记重新写入
4.3 快捷跳转
操作: 演示面板 → 快捷跳转 → 选择任意页面
验收点:
- 所有页面链接可正常跳转
- TabBar 页面使用
switchTab - 普通页面使用
navigateTo - 面板自动收起
5. 页面组件验证
5.1 HjfMemberBadge 组件
位置: P04 个人中心
| 场景 | 等级 | 徽章样式 | 状态 |
|---|---|---|---|
| A | 0 - 普通会员 | 灰色圆形 | ⬜ |
| B | 2 - 云店 | 蓝色圆形 | ⬜ |
| C | 3 - 服务商 | 紫色圆形 | ⬜ |
5.2 HjfQueueProgress 组件
位置: P12 公排状态页顶部卡片
| 场景 | 当前批次 | 触发倍数 | 进度显示 | 状态 |
|---|---|---|---|---|
| A | 0/4 | 4 | 空进度 | ⬜ |
| B | 2/4 | 4 | 50% 进度 | ⬜ |
| C | 1/4 | 4 | 25% 进度 | ⬜ |
5.3 HjfAssetCard 组件
位置: P15 我的资产页
| 场景 | 现金余额 | 待释放 | 已释放 | 今日释放 | 状态 |
|---|---|---|---|---|---|
| A | ¥0.00 | 0 | 0 | 0 | ⬜ |
| B | ¥7200.00 | 15000 | 3200 | 6 | ⬜ |
| C | ¥25200.00 | 38500 | 12600 | 15 | ⬜ |
5.4 HjfRefundNotice 弹窗
位置: P12 公排状态页（URL 参数 show_refund=1）
验收点:
- 弹窗自动显示
- 显示退款金额 ¥3600.00
- 显示订单号
- "已入账到现金余额"提示
- 点击确定关闭弹窗
6. Mock 延迟体验
验收点:
- 所有 API 调用有 300ms 延迟
- 页面加载显示 loading 状态
- 延迟后数据正确渲染
- 模拟真实网络体验
7. 演示控制面板 UI
7.1 悬浮按钮
样式:
- 位置: 右下角（right: 30rpx, bottom: 200rpx）
- 尺寸: 100rpx × 100rpx
- 背景: 紫色渐变（#667eea → #764ba2）
- 图标: 设置图标（白色）
- 阴影: 0 8rpx 20rpx rgba(102, 126, 234, 0.4)
7.2 展开面板
样式:
- 宽度: 600rpx
- 最大高度: 1000rpx
- 背景: 白色
- 圆角: 24rpx
- 阴影: 0 20rpx 60rpx rgba(0, 0, 0, 0.3)
- 动画: slideIn (0.3s ease)
7.3 遮罩层
样式:
- 全屏覆盖
- 背景: rgba(0, 0, 0, 0.5)
- z-index: 9998
- 点击关闭面板
8. 常见问题排查
Q1: 场景切换后数据没有更新
解决方法:
- 检查页面是否实现了
onShow钩子 - 确认 API 文件已改为使用场景感知函数
- 尝试手动刷新页面或重新进入
Q2: 演示面板不显示
解决方法:
- 确认是开发环境（非生产环境）
- 检查
main.js是否已注册全局组件 - 检查
index.vue和user/index.vue是否挂载
Q3: 退款弹窗不显示
解决方法:
- 确认 URL 包含
show_refund=1参数 - 检查 P12 公排状态页的
onLoad方法 - 确认 HjfRefundNotice 组件已正确导入
Q4: Mock 数据没有生效
解决方法:
- 检查
USE_MOCK常量是否为true - 确认 API 文件导入了场景感知函数
- 查看控制台是否有错误信息
9. 验收标准
9.1 功能完整性
- ✅ 所有场景数据正确
- ✅ 所有页面可正常跳转
- ✅ 所有组件正确渲染
- ✅ 场景切换实时生效
9.2 UI 一致性
- ✅ 演示面板样式符合设计
- ✅ 组件样式符合规范
- ✅ 渐变色和主题色正确
- ✅ 响应式布局正常
9.3 交互流畅性
- ✅ 页面切换无卡顿
- ✅ 动画过渡自然
- ✅ Toast 提示及时
- ✅ Loading 状态清晰
9.4 数据准确性
- ✅ 场景 A 数据全为 0 或空
- ✅ 场景 B 数据为中等活跃度
- ✅ 场景 C 数据为高活跃度
- ✅ 场景切换后数据同步
10. 演示建议
10.1 演示顺序
- 开场: 介绍演示控制面板功能
- 路线 1: 从新用户视角演示完整注册到购买流程
- 路线 2: 展示活跃用户的资产和公排管理
- 路线 3: 演示 VIP 用户的退款和团队收益
- 总结: 快速切换场景展示数据变化
10.2 演示技巧
- 提前准备好三个场景的关键截图
- 使用演示面板的快捷跳转加快演示节奏
- 重点展示退款弹窗和场景切换效果
- 适时展示控制台的 Mock 日志
10.3 演示亮点
- 可视化场景切换: 一键切换三种用户角色
- 完整业务闭环: 从注册到退款的全流程
- 真实交互体验: 300ms 延迟模拟真实网络
- 便捷调试工具: 演示面板支持快速跳转和状态重置
11. 后续优化建议
- 场景扩展: 增加更多中间状态场景（如首次购买但未退款）
- 数据导出: 支持导出当前场景数据为 JSON
- 日志记录: 记录场景切换和 API 调用历史
- 自动化测试: 基于三条路线编写 E2E 测试用例
- 性能监控: 统计各场景下的渲染时间和 API 耗时
附录：文件清单
新增文件
components/HjfDemoPanel.vue- 演示控制面板docs/mock-demo-walkthrough.md- 本演示指南
修改文件
utils/hjfMockData.js- 场景数据系统api/hjfQueue.js- 场景感知 APIapi/hjfAssets.js- 场景感知 APIapi/hjfMember.js- 场景感知 APImain.js- 全局组件注册pages/index/index.vue- 挂载演示面板pages/user/index.vue- 挂载演示面板pages/goods/order_pay_status/index.vue- 公排入队 UI
文档版本: V1.0
最后更新: 2026年3月11日
负责人: OpenClaw Agent