# Mock Data 前端交互流程演示 - 验收走查指南

> **版本**: V1.0  
> **日期**: 2026年3月11日  
> **目的**: 通过 Mock 数据场景切换器在前端完整演示黄精粉商城的核心业务流程

---

## 0. 如何运行开发环境查看效果

**推荐方式**：使用 **HBuilderX** 运行到浏览器（H5）。

1. 安装 [HBuilderX](https://www.dcloud.io/hbuilderx.html)。
2. 用 HBuilderX 打开目录：`pro_v3.5.1/view/uniapp`。
3. 菜单选择 **运行 → 运行到浏览器 → Chrome**。
4. 编译完成后会自动打开浏览器，在首页或个人中心右下角可见 **演示控制面板**（紫色悬浮按钮）。

更多说明（含命令行尝试方式）见：**pro_v3.5.1/view/uniapp/README-RUN.md**。

---

## 1. 实施完成清单

### ✅ 已完成任务

1. **补齐 order_pay_status 页面的公排入队成功 UI**
   - 文件: `pages/goods/order_pay_status/index.vue`
   - 新增公排入队成功提示卡片
   - 新增"查看公排"按钮
   - 自动加载并显示排队信息

2. **创建场景化 Mock 数据系统**
   - 文件: `utils/hjfMockData.js`
   - 场景 A: 新用户（空数据，member_level=0）
   - 场景 B: 活跃用户（原有数据，member_level=2）
   - 场景 C: VIP 用户（多退款记录，member_level=3）
   - 全局场景切换函数 `setMockScenario()`

3. **改造 API 文件为场景感知**
   - `api/hjfQueue.js` → 使用 `getMockQueueStatus()`
   - `api/hjfAssets.js` → 使用 `getMockAssetsOverview()`
   - `api/hjfMember.js` → 使用 `getMockMemberInfo()`

4. **创建演示控制面板组件**
   - 文件: `components/HjfDemoPanel.vue`
   - 悬浮按钮（紫色渐变，右下角）
   - 场景切换（A/B/C 三个场景）
   - 特殊操作（退款弹窗、重置引导）
   - 快捷跳转（10+ 页面导航）

5. **全局挂载演示面板**
   - 在 `main.js` 注册为全局组件
   - 在 `pages/index/index.vue` 挂载
   - 在 `pages/user/index.vue` 挂载
   - 仅开发环境显示

---

## 2. 演示走查路线

### 路线 1: 新用户完整旅程（场景 A）

**目标**: 演示从引导页到首次购买报单商品入队的完整流程

**前置操作**:
```bash
# 打开演示控制面板，切换到场景 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）

**目标**: 演示活跃用户查看公排进度和管理资产的流程

**前置操作**:
```bash
# 打开演示控制面板，切换到场景 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 用户刚收到退款和团队管理功能

**前置操作**:
```bash
# 打开演示控制面板，切换到场景 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 场景切换操作

1. 点击右下角紫色悬浮按钮
2. 面板展开后，选择场景 A/B/C
3. 系统自动刷新当前页面数据
4. 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. **路线 1**: 从新用户视角演示完整注册到购买流程
3. **路线 2**: 展示活跃用户的资产和公排管理
4. **路线 3**: 演示 VIP 用户的退款和团队收益
5. **总结**: 快速切换场景展示数据变化

### 10.2 演示技巧

- 提前准备好三个场景的关键截图
- 使用演示面板的快捷跳转加快演示节奏
- 重点展示退款弹窗和场景切换效果
- 适时展示控制台的 Mock 日志

### 10.3 演示亮点

- **可视化场景切换**: 一键切换三种用户角色
- **完整业务闭环**: 从注册到退款的全流程
- **真实交互体验**: 300ms 延迟模拟真实网络
- **便捷调试工具**: 演示面板支持快速跳转和状态重置

---

## 11. 后续优化建议

1. **场景扩展**: 增加更多中间状态场景（如首次购买但未退款）
2. **数据导出**: 支持导出当前场景数据为 JSON
3. **日志记录**: 记录场景切换和 API 调用历史
4. **自动化测试**: 基于三条路线编写 E2E 测试用例
5. **性能监控**: 统计各场景下的渲染时间和 API 耗时

---

## 附录：文件清单

### 新增文件
- `components/HjfDemoPanel.vue` - 演示控制面板
- `docs/mock-demo-walkthrough.md` - 本演示指南

### 修改文件
- `utils/hjfMockData.js` - 场景数据系统
- `api/hjfQueue.js` - 场景感知 API
- `api/hjfAssets.js` - 场景感知 API
- `api/hjfMember.js` - 场景感知 API
- `main.js` - 全局组件注册
- `pages/index/index.vue` - 挂载演示面板
- `pages/user/index.vue` - 挂载演示面板
- `pages/goods/order_pay_status/index.vue` - 公排入队 UI

---

**文档版本**: V1.0  
**最后更新**: 2026年3月11日  
**负责人**: OpenClaw Agent