feat: 黄精粉前端功能集成 + 个人中心/资产/公排页面优化 + 去除admin copyright

主要改动: - 个人中心: 去除HjfMemberBadge徽章, 会员等级改显示vip_name, "我的资产"/"公排查询"导航项改为与member-points一致风格 - 我的资产页面: 去除HjfMemberBadge, 美化卡片圆角和阴影 - 公排查询页面: 美化顶部渐变和订单卡片样式 - Admin登录页和后台布局: 彻底删除footer copyright信息 - 新增黄精粉业务页面/组件/API/Mock数据(Phase 1) - 新增PHP环境配置文档和启动脚本 Made-with: Cursor
2026-03-13 00:49:22 +08:00
parent 21f9cc2c0a
commit f6227c0253
70 changed files with 23359 additions and 1176 deletions
--- a/docs/mock-demo-walkthrough.md
+++ b/docs/mock-demo-walkthrough.md
@@ -0,0 +1,436 @@
+# 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