f6227c0253
主要改动: - 个人中心: 去除HjfMemberBadge徽章, 会员等级改显示vip_name, "我的资产"/"公排查询"导航项改为与member-points一致风格 - 我的资产页面: 去除HjfMemberBadge, 美化卡片圆角和阴影 - 公排查询页面: 美化顶部渐变和订单卡片样式 - Admin登录页和后台布局: 彻底删除footer copyright信息 - 新增黄精粉业务页面/组件/API/Mock数据(Phase 1) - 新增PHP环境配置文档和启动脚本 Made-with: Cursor
437 lines
13 KiB
Markdown
437 lines
13 KiB
Markdown
# 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
|