Initial commit: queue workspace
Made-with: Cursor
This commit is contained in:
1024
docs/OpenClaw_Agent_Config.md
Normal file
1024
docs/OpenClaw_Agent_Config.md
Normal file
File diff suppressed because it is too large
Load Diff
351
docs/PRD_V2.md
Normal file
351
docs/PRD_V2.md
Normal file
@@ -0,0 +1,351 @@
|
||||
# 黄精粉健康商城小程序 · 产品需求文档(PRD)V2.0
|
||||
|
||||
> **技术底座**:CRMEB Pro v3.5 二次开发
|
||||
> **文档日期**:2026年3月
|
||||
> **文档状态**:定稿
|
||||
|
||||
---
|
||||
|
||||
## 1. 文档说明
|
||||
|
||||
### 1.1 文档目的
|
||||
|
||||
本文档基于《黄精粉小程序方案》及《黄精粉项目概述》,以 CRMEB Pro v3.5 会员电商系统为二次开发底座,明确黄精粉健康商城微信小程序的全部产品功能需求、业务逻辑、二开改造清单及系统架构,为产品设计、前后端开发、测试及运营团队提供统一参考依据。
|
||||
|
||||
### 1.2 技术底座说明
|
||||
|
||||
| 维度 | 说明 |
|
||||
|---|---|
|
||||
| 基础系统 | CRMEB Pro v3.5 会员电商系统 |
|
||||
| 后端框架 | ThinkPHP 8 + Swoole 4 + Redis |
|
||||
| 前端框架 | uni-app (Vue 3) + iView Admin (后台) |
|
||||
| 数据库 | MySQL 8.0 |
|
||||
| 消息队列 | think-queue (Redis驱动) |
|
||||
| 定时任务 | Swoole Timer / Linux Crontab |
|
||||
| 小程序端 | 微信小程序 + H5 |
|
||||
|
||||
### 1.3 术语定义
|
||||
|
||||
| 术语 | 定义 |
|
||||
|---|---|
|
||||
| 公排池 | 所有购买报单商品的订单按付款时间顺序进入的全局排队队列 |
|
||||
| 进四退一 | 默认每进入4单触发退还最早入队第1单的购买款项(数量后台可配置) |
|
||||
| 报单商品 | 参与公排机制的指定商品,当前主要为3600元黄精粉套餐 |
|
||||
| 普通商品 | 不参与公排机制的商品,可使用积分购买 |
|
||||
| 待释放积分 | 已奖励但尚在冻结期的积分,按千分之四/天速率解冻 |
|
||||
| 已释放积分 | 已完成解冻的可用积分,可用于购买普通商品 |
|
||||
| 伞下 | 某会员通过裂变推荐关系树中,其直推及直推以下的所有下级成员 |
|
||||
| 直推 | 某会员直接邀请加入的一级下级成员 |
|
||||
| 创客 | 直推3单后自动升级的会员等级 |
|
||||
| 云店 | 伞下业绩30单后自动升级的会员等级(至少3个直推) |
|
||||
| 服务商 | 伞下业绩100单后自动升级的会员等级(至少3个直推) |
|
||||
| 分公司 | 伞下业绩1000单后自动升级的会员等级(至少3个直推) |
|
||||
| 级差 | 上级享受的积分奖励为下级等级对应奖励与该下级自身等级所扣除部分的差额 |
|
||||
|
||||
---
|
||||
|
||||
## 2. 产品概述
|
||||
|
||||
### 2.1 产品背景
|
||||
|
||||
黄精粉是一款以传统中草药黄精为核心原料的健康食品,定位于大健康消费赛道。本项目基于 CRMEB Pro v3.5 进行二次开发,通过微信小程序构建集商品销售、社交裂变、会员激励为一体的线上销售平台,通过独特的公排返利机制和多级会员积分体系,驱动用户自发传播,形成去中心化的分销网络。
|
||||
|
||||
### 2.2 产品定位
|
||||
|
||||
| 维度 | 描述 |
|
||||
|---|---|
|
||||
| 产品类型 | 微信小程序 + PC管理后台(基于CRMEB Pro v3.5) |
|
||||
| 核心商品 | 黄精粉套餐(3600元/单)及周边健康产品 |
|
||||
| 商业模式 | 社交裂变电商 + 公排返利 + 会员积分分销 |
|
||||
| 目标市场 | 健康消费意识强、具备社交传播意愿的中青年用户群体 |
|
||||
| 核心差异化 | 公排退款机制降低用户试错成本,积分分级奖励激励持续推广 |
|
||||
|
||||
### 2.3 CRMEB Pro 功能复用与改造策略
|
||||
|
||||
| 策略 | 涉及模块 |
|
||||
|---|---|
|
||||
| **直接复用** | 微信登录/手机号授权、商品CRUD及上下架、订单管理及状态流转、微信支付/支付宝支付、优惠券管理、Banner/文章/公告管理、首页DIY装修、后台权限管理、数据统计看板、活动管理及核销、用户管理及标签 |
|
||||
| **改造复用** | 分销推荐关系绑定 → 加入公排关联、团队分销等级 → 改为五级会员等级体系、分销佣金冻结 → 改为积分待释放/按日释放、余额账户 → 增加公排退款入口、商品分类 → 增加报单商品标记、提现功能 → 调整手续费计算逻辑 |
|
||||
| **全新开发** | 公排池引擎(进N退1)、积分每日释放定时任务、级差计算引擎、伞下业绩统计(含级别隔离)、公排状态展示页面 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 核心业务逻辑
|
||||
|
||||
### 3.1 公排机制(进四退一)【全新开发】
|
||||
|
||||
#### 3.1.1 机制说明
|
||||
|
||||
公排机制是本平台核心的激励与信任建立机制。用户购买报单商品后进入公排池,按全平台购买时间顺序排队。当排队总单数达到设定倍数(默认4单进1单退),最早入队的用户获得退款。
|
||||
|
||||
#### 3.1.2 规则详述
|
||||
|
||||
- 每笔报单商品订单(3600元)付款成功后立即进入公排池
|
||||
- 公排池按付款时间全局排序,不区分用户等级
|
||||
- 当全平台新增 N 单时(N为可配置参数,默认为4),触发退还最早入队第1单的购买款项
|
||||
- 退款金额进入该用户的现金余额账户,可申请提现(扣除手续费7%)
|
||||
- 一次购买多单时,拆分为多个独立订单分别进入公排池
|
||||
- 已付款订单不可取消,退款仅通过公排机制解锁
|
||||
|
||||
> 可配置项:公排触发倍数(进 N 退 1),默认 N=4,后台可调整
|
||||
|
||||
#### 3.1.3 技术实现要点
|
||||
|
||||
- 新建 `eb_queue_pool` 数据表存储公排队列
|
||||
- 使用 Redis 分布式锁保证入队和退款的原子性
|
||||
- 退款写入 CRMEB 现有的用户余额账户(复用 `eb_user` 的 `now_money` 字段)
|
||||
- 通过 think-queue 异步处理退款,避免支付回调阻塞
|
||||
|
||||
### 3.2 会员等级体系【改造团队分销等级】
|
||||
|
||||
#### 3.2.1 等级定义与升级条件
|
||||
|
||||
| 等级 | 升级条件 | 直推奖励(积分/单) | 伞下奖励(积分/单) | 备注 |
|
||||
|---|---|---|---|---|
|
||||
| 普通会员 | 注册即获得 | — | — | 可参与公排 |
|
||||
| 创客 | 直推3单 | 500 | — | 直推单数可配置 |
|
||||
| 云店 | 伞下业绩30单(至少3直推) | 800 | 300 | 伞下云店分离计算 |
|
||||
| 服务商 | 伞下业绩100单(至少3直推) | 1000 | 200 | — |
|
||||
| 分公司 | 伞下业绩1000单(至少3直推) | 1300 | 300 | — |
|
||||
|
||||
> 所有奖励数值和升级门槛均支持后台配置(复用 CRMEB 系统配置表)
|
||||
|
||||
#### 3.2.2 改造说明
|
||||
|
||||
基于 CRMEB Pro 的团队分销等级功能进行改造:
|
||||
- 将原有的"分销员等级"概念替换为"会员等级"
|
||||
- 升级条件从"推广订单数/消费金额"改为"直推单数 + 伞下业绩单数"
|
||||
- 佣金计算从"按比例返佣"改为"按等级发放固定积分"
|
||||
- 新增"伞下业绩分离"逻辑:当下级升级为同等级或更高等级后,该下级的团队业绩不再计入上级
|
||||
|
||||
### 3.3 账户与积分体系【改造佣金冻结机制】
|
||||
|
||||
#### 3.3.1 账户类型
|
||||
|
||||
| 账户类型 | 来源 | 用途 | 提现 |
|
||||
|---|---|---|---|
|
||||
| 现金余额 | 公排退款、后台手动充值 | 购物、申请提现 | 可提现,扣除7%手续费 |
|
||||
| 待释放积分 | 会员推荐奖励 | 按天解冻后转为已释放积分 | 不可提现 |
|
||||
| 已释放积分 | 待释放积分每日解冻(0.4%/天) | 购买普通商品(不可买报单商品) | 不可提现 |
|
||||
|
||||
#### 3.3.2 改造说明
|
||||
|
||||
- **现金余额**:复用 CRMEB 的 `now_money` 字段,增加公排退款的入账来源
|
||||
- **待释放积分**:新增字段或复用 CRMEB 积分字段,增加"待释放"状态标记
|
||||
- **已释放积分**:新增字段,作为可消费积分
|
||||
- **每日释放**:新建定时任务,每天凌晨执行:待释放积分 × 0.4‰ → 转入已释放积分
|
||||
- **提现**:复用 CRMEB 提现功能,调整手续费率为7%(后台可配)
|
||||
|
||||
---
|
||||
|
||||
## 4. 用户端功能需求(小程序)
|
||||
|
||||
### 4.1 登录与注册【直接复用】
|
||||
|
||||
| 功能点 | 详细说明 | 优先级 | 复用/改造 |
|
||||
|---|---|---|---|
|
||||
| 微信授权登录 | 使用微信OAuth授权,获取用户基本信息 | P0 | 直接复用 |
|
||||
| 手机号一键登录 | 微信手机号授权组件,获取用户手机号完成绑定 | P0 | 直接复用 |
|
||||
| 推荐关系绑定 | 首次进入小程序时携带推荐人参数,自动绑定上下级关系,不可更改 | P0 | 改造复用 |
|
||||
| 新用户引导 | 首次登录展示平台介绍、公排规则说明页面 | P1 | 新开发 |
|
||||
|
||||
### 4.2 首页【改造复用DIY】
|
||||
|
||||
| 模块 | 内容说明 | 优先级 | 复用/改造 |
|
||||
|---|---|---|---|
|
||||
| Banner轮播图 | 展示主推套餐、最新活动,后台可更换图片和跳转链接 | P0 | 直接复用 |
|
||||
| 活动专区 | 展示最新线下活动卡片(品鉴会报名入口) | P0 | 直接复用 |
|
||||
| 商品推荐区 | 展示主推商品列表(报单商品+热门普通商品) | P1 | 改造复用 |
|
||||
| 公告通知 | 平台公告或活动通知 | P2 | 直接复用 |
|
||||
|
||||
### 4.3 商品与购买【改造复用】
|
||||
|
||||
#### 4.3.1 商品分类改造
|
||||
|
||||
在 CRMEB 商品管理基础上增加"报单商品"标记字段(`is_queue_goods`),报单商品参与公排机制,普通商品不参与。
|
||||
|
||||
#### 4.3.2 支付方式
|
||||
|
||||
| 支付方式 | 适用商品 | 配置权限 |
|
||||
|---|---|---|
|
||||
| 微信支付 | 所有商品 | 系统默认支持(复用) |
|
||||
| 支付宝 | 所有商品 | 系统默认支持(复用) |
|
||||
| 现金余额 | 指定商品 | 后台按商品设置(改造) |
|
||||
| 待释放积分 | 仅普通商品 | 后台按商品设置(新增) |
|
||||
| 已释放积分 | 仅普通商品 | 后台按商品设置(新增) |
|
||||
|
||||
> 报单商品不支持积分支付;普通商品支持哪种支付方式由后台商品管理中单独配置
|
||||
|
||||
#### 4.3.3 购买流程改造
|
||||
|
||||
在 CRMEB 标准购买流程基础上,支付回调后增加以下处理:
|
||||
|
||||
1. 检查商品是否为报单商品
|
||||
2. 若是报单商品:多单拆分 → 逐单写入公排池 → 检查是否触发退款 → 计算积分奖励
|
||||
3. 若是普通商品:走标准订单流程
|
||||
|
||||
### 4.4 裂变推荐机制【改造复用】
|
||||
|
||||
复用 CRMEB Pro 的分销推广海报/链接功能,改造推荐成功后的奖励逻辑:
|
||||
- 保持推荐关系绑定机制不变
|
||||
- 将"按比例返佣金"改为"按等级发固定积分"
|
||||
- 积分入账为"待释放"状态
|
||||
|
||||
### 4.5 个人中心【改造复用】
|
||||
|
||||
#### 4.5.1 我的订单【直接复用】
|
||||
|
||||
复用 CRMEB 订单列表、订单详情、售后申请功能,在订单详情中增加"公排状态"展示。
|
||||
|
||||
#### 4.5.2 我的资产【改造复用】
|
||||
|
||||
| 资产项 | 展示内容 | 可操作项 | 复用/改造 |
|
||||
|---|---|---|---|
|
||||
| 现金余额 | 当前可用余额金额 | 申请提现(填写金额,显示到账金额) | 改造复用 |
|
||||
| 待释放积分 | 待解冻积分总量、预计今日释放量 | 查看释放明细 | 新开发 |
|
||||
| 已释放积分 | 可用积分总量 | 查看使用记录 | 新开发 |
|
||||
| 优惠券 | 我的优惠券列表 | 使用(购物时选择) | 直接复用 |
|
||||
|
||||
#### 4.5.3 我的推荐【改造复用】
|
||||
|
||||
基于 CRMEB Pro 团队分销的推广人管理进行改造:
|
||||
- 推荐关系树:可视化展示自己的直推成员及伞下成员(显示等级、入团时间)
|
||||
- 推荐收益明细:每笔积分奖励的来源、时间、金额
|
||||
- 推荐数据统计:直推人数、伞下总人数、伞下总单数
|
||||
|
||||
#### 4.5.4 其他功能【直接复用】
|
||||
|
||||
- 收货地址管理
|
||||
- 账号设置
|
||||
- 帮助与客服
|
||||
|
||||
---
|
||||
|
||||
## 5. 管理后台功能需求(PC端)
|
||||
|
||||
### 5.1 概览仪表盘【改造复用】
|
||||
|
||||
在 CRMEB Pro 数据统计基础上增加公排相关数据:
|
||||
- 今日数据:新增用户数、今日订单数、今日销售额、公排触发次数
|
||||
- 趋势图:用户增长趋势、销售额趋势
|
||||
- 实时公排状态:当前公排池总单数、待退款订单数
|
||||
|
||||
### 5.2 用户管理【改造复用】
|
||||
|
||||
在 CRMEB 用户管理基础上增加:
|
||||
- 等级管理:手动调整用户等级(含降级),设置/取消"不考核"标记
|
||||
- 上下级关系树:可视化查看任意用户的推荐关系树
|
||||
- 账户操作:手动增减余额或积分
|
||||
|
||||
### 5.3 商品管理【改造复用】
|
||||
|
||||
在 CRMEB 商品管理基础上增加:
|
||||
- 报单商品设置:标记某商品为报单商品(参与公排机制)
|
||||
- 支付方式设置:为每个商品独立配置允许的支付方式(含积分支付选项)
|
||||
|
||||
### 5.4 订单管理【改造复用】
|
||||
|
||||
增加"公排订单视图":查看公排池中所有订单排队状态,查看历史公排退款记录。
|
||||
|
||||
### 5.5 财务管理【改造复用】
|
||||
|
||||
在 CRMEB 财务管理基础上增加:
|
||||
- 公排退款流水记录
|
||||
- 积分发放记录(来源订单、受益人、发放时间、积分类型)
|
||||
- 积分释放日志
|
||||
- 提现手续费调整为7%
|
||||
|
||||
### 5.6 活动管理【直接复用】
|
||||
|
||||
直接使用 CRMEB Pro 的活动管理功能。
|
||||
|
||||
### 5.7 营销中心(参数配置)【改造复用】
|
||||
|
||||
在 CRMEB 系统配置基础上新增以下配置项:
|
||||
|
||||
| 配置项 | 说明 | 默认值 |
|
||||
|---|---|---|
|
||||
| 公排触发倍数 | 进N单退1单(N值配置) | 4 |
|
||||
| 积分日释放比例 | 待释放积分每日解冻比例(‰) | 4(千分之四) |
|
||||
| 提现手续费率 | 提现时扣除的手续费百分比 | 7% |
|
||||
| 创客升级门槛 | 直推满N单升级创客 | 3 |
|
||||
| 云店升级门槛 | 伞下满N单升级云店 | 30 |
|
||||
| 服务商升级门槛 | 伞下满N单升级服务商 | 100 |
|
||||
| 分公司升级门槛 | 伞下满N单升级分公司 | 1000 |
|
||||
| 各等级直推积分奖励 | 各等级会员每直推1单获得的积分数 | 见等级表 |
|
||||
| 各等级伞下积分奖励 | 各等级会员伞下每入1单获得的积分数 | 见等级表 |
|
||||
|
||||
### 5.8 内容管理【直接复用】
|
||||
|
||||
直接使用 CRMEB Pro 的 Banner管理、文章管理、公告管理。
|
||||
|
||||
### 5.9 数据统计【改造复用】
|
||||
|
||||
在 CRMEB 数据统计基础上增加:
|
||||
- 公排统计:公排池当前状态、历史退款总额、触发频率分析
|
||||
- 积分统计:总发放积分、总释放积分、积分使用情况
|
||||
|
||||
---
|
||||
|
||||
## 6. 数据库改造方案
|
||||
|
||||
### 6.1 新增表
|
||||
|
||||
#### eb_queue_pool(公排池表)
|
||||
|
||||
| 字段 | 类型 | 说明 |
|
||||
|---|---|---|
|
||||
| id | INT UNSIGNED AUTO_INCREMENT | 主键 |
|
||||
| uid | INT UNSIGNED | 用户ID(关联eb_user) |
|
||||
| order_id | VARCHAR(64) | 原始订单号 |
|
||||
| amount | DECIMAL(10,2) | 金额,默认3600.00 |
|
||||
| queue_no | BIGINT UNSIGNED | 全局排队序号 |
|
||||
| status | TINYINT | 0排队中 1已退款 |
|
||||
| refund_time | INT UNSIGNED | 退款时间戳 |
|
||||
| trigger_batch | INT UNSIGNED | 触发退款的批次号 |
|
||||
| add_time | INT UNSIGNED | 入队时间戳 |
|
||||
|
||||
#### eb_points_release_log(积分释放日志表)
|
||||
|
||||
| 字段 | 类型 | 说明 |
|
||||
|---|---|---|
|
||||
| id | INT UNSIGNED AUTO_INCREMENT | 主键 |
|
||||
| uid | INT UNSIGNED | 用户ID |
|
||||
| frozen_before | BIGINT | 释放前待释放积分 |
|
||||
| release_amount | BIGINT | 本次释放积分数 |
|
||||
| frozen_after | BIGINT | 释放后待释放积分 |
|
||||
| release_date | DATE | 释放日期 |
|
||||
| add_time | INT UNSIGNED | 记录时间 |
|
||||
|
||||
### 6.2 修改表
|
||||
|
||||
#### eb_user(用户表)新增字段
|
||||
|
||||
| 字段 | 类型 | 说明 |
|
||||
|---|---|---|
|
||||
| member_level | TINYINT DEFAULT 0 | 会员等级:0普通 1创客 2云店 3服务商 4分公司 |
|
||||
| no_assess | TINYINT DEFAULT 0 | 不考核标记:0正常 1不考核 |
|
||||
| frozen_points | BIGINT DEFAULT 0 | 待释放积分 |
|
||||
| available_points | BIGINT DEFAULT 0 | 已释放积分 |
|
||||
|
||||
#### eb_system_config(系统配置表)
|
||||
|
||||
新增上述营销中心的各项配置键值对。
|
||||
|
||||
---
|
||||
|
||||
## 7. 非功能性需求
|
||||
|
||||
### 7.1 性能要求
|
||||
|
||||
- 公排入队响应时间 < 200ms
|
||||
- 积分每日释放任务在5分钟内完成(10万用户规模)
|
||||
- 支持 1000 并发用户同时访问
|
||||
- 利用 Swoole 协程处理公排并发
|
||||
|
||||
### 7.2 安全要求
|
||||
|
||||
- 公排退款使用 Redis 分布式锁,防止重复退款
|
||||
- 积分操作使用数据库事务,保证一致性
|
||||
- 所有金额计算使用 bcmath 扩展,避免浮点误差
|
||||
- 支付回调验签,防止伪造
|
||||
19
docs/README.md
Normal file
19
docs/README.md
Normal file
@@ -0,0 +1,19 @@
|
||||
# 项目文档
|
||||
|
||||
黄精粉小程序相关文档
|
||||
|
||||
## 文档列表
|
||||
|
||||
| 文档 | 说明 |
|
||||
|------|------|
|
||||
| [PRD-v1.0.md](./PRD-v1.0.md) | 产品需求文档 v1.0 |
|
||||
|
||||
## 设计稿
|
||||
|
||||
- UI 设计稿(待补充)
|
||||
- 原型图(待补充)
|
||||
|
||||
## 数据库设计
|
||||
|
||||
- ER 图(待补充)
|
||||
- SQL 脚本(待补充)
|
||||
289
docs/execution-plan.md
Normal file
289
docs/execution-plan.md
Normal file
@@ -0,0 +1,289 @@
|
||||
# 黄精粉健康商城 · 剩余开发任务执行方案
|
||||
|
||||
> 基于 PRD_V2.md + openclaw-frontend-tasks.md 的现状分析
|
||||
> 制定日期:2026-03-15
|
||||
> 当前分支:claude/hjf-queue-admin-apis-hsymG
|
||||
|
||||
---
|
||||
|
||||
## 一、现状盘点(已完成 vs 待完成)
|
||||
|
||||
### ✅ 已完成的任务
|
||||
|
||||
| 阶段 | 任务 | 说明 |
|
||||
|------|------|------|
|
||||
| Phase 0 | P0-01, P0-02 | UniApp + Admin Mock 数据文件 |
|
||||
| Stage 1A | P1A-01~06 | 全部6个 API 模块(uniapp + admin) |
|
||||
| Stage 1B | P1B-01~04 | 全部4个公共组件(QueueProgress / AssetCard / MemberBadge / RefundNotice) |
|
||||
| Stage 1C | P1C-01~06 | 全部6个新 UniApp 页面(公排状态/历史/规则 + 资产总览/积分明细 + 引导页) |
|
||||
| Stage 1D | P1D-02 | 商品详情页:`is_queue_goods` 角标 + 公排提示条 |
|
||||
| Stage 1D | P1D-03 | 购买确认页:多单拆分提示 + 公排入队说明 |
|
||||
| Stage 1D | P1D-04 | 支付结果页:公排入队成功提示 + 查看公排入口 |
|
||||
| Stage 1D | P1D-06 | 提现页:7% 手续费动态计算 + 提示文案 |
|
||||
| Stage 1E | P1E-01~06 | 全部6个 Admin 新页面(公排订单/财务/配置 + 会员管理/配置 + 积分日志) |
|
||||
| Stage 1F | P1F-01~07 | 全部路由注册(pages.json + Admin hjfQueue.js 路由模块 + index.js 导入) |
|
||||
| Stage 1G | P1G-01 | Admin 用户管理列表:`member_level`、`no_assess` 列和筛选项 |
|
||||
|
||||
---
|
||||
|
||||
### ⏳ 待完成的任务(本方案覆盖范围)
|
||||
|
||||
```
|
||||
Phase 1 尾单(4项)
|
||||
├── P1D-01 首页:报单商品角标 + 公排入口Banner
|
||||
├── P1D-05 推荐收益页:积分替换佣金显示
|
||||
├── P1D-07 个人中心:HjfMemberBadge等级徽章嵌入
|
||||
└── P1G-02 Admin商品编辑:报单标记 + 积分支付白名单
|
||||
|
||||
Phase 2 数据库迁移(5项)
|
||||
Phase 3 后端 API 开发(16项)
|
||||
Phase 4 前后端联调集成(5项)
|
||||
Phase 5 完整测试(8项)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 二、执行方案
|
||||
|
||||
### 阶段 A:Phase 1 收尾(前端,可立即执行)
|
||||
|
||||
> 依赖:无。可在当前 Mock 模式下独立完成。
|
||||
> 目标:让 Phase 1 所有38个任务全部 `[x]`,解锁 CP-01 评审检查点。
|
||||
|
||||
---
|
||||
|
||||
#### 任务 A1 — P1D-01:首页报单商品角标
|
||||
|
||||
**文件**:`pro_v3.5.1/view/uniapp/pages/index/index.vue`
|
||||
|
||||
**改造内容**:
|
||||
1. 在商品列表卡片的商品名/图片处,检查 `item.is_queue_goods == 1`,叠加渲染 `报单` 角标(红色标签,参考 goods_details 中已有的 `.queue-goods-tag` 样式)。
|
||||
2. 在首页 Banner 区或活动专区下方,增加"公排进度"快捷入口行(复用 `HjfQueueProgress` 组件缩略版,或仅放文字按钮跳转 `/pages/queue/status`)。
|
||||
3. 无需新增 API 调用,角标从商品列表字段 `is_queue_goods` 读取即可。
|
||||
|
||||
**验收标准**:报单商品卡片右上角出现红色"报单"角标;点击公排入口可跳转公排状态页。
|
||||
|
||||
---
|
||||
|
||||
#### 任务 A2 — P1D-05:推荐收益页积分替换佣金
|
||||
|
||||
**文件**:`pro_v3.5.1/view/uniapp/pages/users/user_spread_money/index.vue`
|
||||
|
||||
**改造内容**:
|
||||
1. 将列表中"佣金"字样统一替换为"积分",金额字段从 `money`/`commission` 改为读取 `points`。
|
||||
2. 展示积分类型标签:`reward_direct`(直推奖励)/ `reward_umbrella`(伞下奖励)。
|
||||
3. 导入 `import { getTeamIncome } from '@/api/hjfMember.js'`,替换原有 API 调用。
|
||||
4. 数值格式:整数积分,不保留小数;去掉 `¥` 符号,改为"积分"后缀。
|
||||
|
||||
**验收标准**:推荐收益列表显示积分数量而非金额,类型标签正确区分直推/伞下。
|
||||
|
||||
---
|
||||
|
||||
#### 任务 A3 — P1D-07:个人中心会员等级徽章
|
||||
|
||||
**文件**:`pro_v3.5.1/view/uniapp/pages/user/index.vue`
|
||||
|
||||
**改造内容**:
|
||||
1. 引入 `HjfMemberBadge` 组件,在用户头像/昵称旁嵌入等级徽章。
|
||||
```js
|
||||
import HjfMemberBadge from '@/components/HjfMemberBadge.vue'
|
||||
```
|
||||
2. 从 `getMemberInfo` API(已有 Mock)获取 `member_level`,传入组件 `:level` prop。
|
||||
3. 在资产快捷入口区域已有的 `hjf-nav-row` 基础上,补充"待释放积分"数值预览(展示 `frozen_points`,不换页即可看到大数字)。
|
||||
4. 已有的公排查询 + 资产入口导航行保持不变,不重复建设。
|
||||
|
||||
**验收标准**:昵称旁出现对应等级的彩色徽章;资产行显示待释放积分数。
|
||||
|
||||
---
|
||||
|
||||
#### 任务 A4 — P1G-02:Admin 商品编辑-报单标记与支付方式
|
||||
|
||||
**文件**:`pro_v3.5.1/view/admin/src/pages/product/creatProduct/index.vue`
|
||||
|
||||
**改造内容**:
|
||||
1. 在商品基本信息 Tab 中增加"报单商品"开关(iView `i-switch`),绑定 `formValidate.is_queue_goods`,默认 `false`。
|
||||
2. 在支付方式 Tab / 销售设置区域,增加复选框组"允许积分支付"(`allow_pay_types`),选项:`待释放积分`、`已释放积分`;报单商品开关开启时,此项置灰并强制清空。
|
||||
3. 表单提交时将 `is_queue_goods`(0/1)和 `allow_pay_types`(数组序列化)一并提交。
|
||||
4. 编辑回显时正确反填两个字段。
|
||||
|
||||
**验收标准**:新建/编辑商品可设置报单标记;报单商品自动禁用积分支付选项。
|
||||
|
||||
---
|
||||
|
||||
### 阶段 B:Phase 2 数据库迁移
|
||||
|
||||
> 依赖:后端开发环境就绪(ThinkPHP 8 + MySQL 8.0)。
|
||||
> 建议由后端工程师执行,前端工程师无需等待此阶段。
|
||||
|
||||
| 任务 | 操作 | 目标 |
|
||||
|------|------|------|
|
||||
| P2-01 | CREATE TABLE | `eb_queue_pool`(公排池,9个字段,含复合索引) |
|
||||
| P2-02 | CREATE TABLE | `eb_points_release_log`(积分释放日志,7个字段) |
|
||||
| P2-03 | ALTER TABLE | `eb_user` 增加4字段:`member_level`、`no_assess`、`frozen_points`、`available_points` |
|
||||
| P2-04 | ALTER TABLE | `eb_store_product` 增加2字段:`is_queue_goods`、`allow_pay_types` |
|
||||
| P2-05 | INSERT | `eb_system_config` 插入9项系统配置键值对(公排倍数、释放比例、手续费率、各等级门槛和奖励) |
|
||||
|
||||
**关键索引(P2-01)**:
|
||||
```sql
|
||||
INDEX idx_uid (uid),
|
||||
INDEX idx_status_add_time (status, add_time),
|
||||
INDEX idx_queue_no (queue_no),
|
||||
INDEX idx_trigger_batch (trigger_batch)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 阶段 C:Phase 3 后端 API 开发
|
||||
|
||||
> 依赖:Phase 2 完成。
|
||||
> 开发顺序:先核心引擎,再外围接口,最后定时任务。
|
||||
|
||||
#### C1 — 公排引擎(优先级最高)
|
||||
|
||||
| 任务 | 文件/类 | 内容 |
|
||||
|------|---------|------|
|
||||
| P3-01 | `QueuePool` Service | 入队逻辑(写 `eb_queue_pool`,Redis 分布式锁防并发) |
|
||||
| P3-02 | `QueueRefund` Service | 退款触发逻辑(每入N单检查退款,使用 think-queue 异步处理) |
|
||||
| P3-03 | `QueueController` | 用户端接口:`GET /hjf/queue/status`、`GET /hjf/queue/history` |
|
||||
| P3-04 | `AdminQueueController` | Admin接口:`GET /hjf/queue/order`、`GET /hjf/queue/config`、`POST /hjf/queue/config`、`GET /hjf/queue/finance` |
|
||||
|
||||
**核心逻辑要点**:
|
||||
- 支付回调成功后:判断 `is_queue_goods` → 多单拆分 → 逐单调用 `QueuePool::enqueue()` → 检查触发条件
|
||||
- Redis Key:`hjf:queue:lock`(分布式锁),`hjf:queue:pending_count`(待触发计数)
|
||||
- 退款写入 `eb_user.now_money`(复用 CRMEB 余额字段),记录 `eb_user_bill`
|
||||
|
||||
#### C2 — 积分奖励引擎
|
||||
|
||||
| 任务 | 文件/类 | 内容 |
|
||||
|------|---------|------|
|
||||
| P3-05 | `PointsReward` Service | 级差计算:按会员等级发放直推/伞下积分,写入 `frozen_points` |
|
||||
| P3-06 | `PointsRelease` Job | 每日凌晨定时任务:`frozen_points × 0.4‰ → available_points`,写 `eb_points_release_log` |
|
||||
| P3-07 | `PointsController` | 用户端接口:`GET /hjf/points/detail`(5类型筛选,分页) |
|
||||
| P3-08 | `AdminPointsController` | Admin接口:`GET /hjf/points/release-log` |
|
||||
|
||||
**每日释放公式**:`release_amount = FLOOR(frozen_points × rate / 1000)`,`rate` 取系统配置 `hjf_release_rate`(默认 4)。
|
||||
|
||||
#### C3 — 会员等级体系
|
||||
|
||||
| 任务 | 文件/类 | 内容 |
|
||||
|------|---------|------|
|
||||
| P3-09 | `MemberLevel` Service | 升级判断:直推单数 / 伞下业绩单数达标后自动升级;伞下业绩分离逻辑 |
|
||||
| P3-10 | `AdminMemberController` | Admin接口:`GET /hjf/member/list`、`PUT /hjf/member/level/:uid`、`GET/POST /hjf/member/config` |
|
||||
|
||||
**升级触发时机**:每次订单支付回调完成后,对推荐链上的所有上级异步检查升级条件。
|
||||
|
||||
#### C4 — 资产接口
|
||||
|
||||
| 任务 | 文件/类 | 内容 |
|
||||
|------|---------|------|
|
||||
| P3-11 | `AssetsController` | `GET /hjf/assets/overview`:返回余额 + 积分汇总(复用 `eb_user` 字段) |
|
||||
| P3-12 | `AssetsController` | `GET /hjf/assets/cash/detail`:现金流水(分页,复用 `eb_user_bill`) |
|
||||
|
||||
#### C5 — 路由注册
|
||||
|
||||
| 任务 | 内容 |
|
||||
|------|------|
|
||||
| P3-13 | `route/api.php`:注册用户端全部 hjf 路由(含鉴权中间件) |
|
||||
| P3-14 | `route/admin.php`:注册 Admin 端全部 hjf 路由(含权限中间件) |
|
||||
|
||||
#### C6 — 单元测试桩
|
||||
|
||||
| 任务 | 内容 |
|
||||
|------|------|
|
||||
| P3-15 | 公排引擎单元测试:入队/触发退款/分布式锁 |
|
||||
| P3-16 | 积分计算单元测试:级差计算/每日释放精度(bcmath) |
|
||||
|
||||
---
|
||||
|
||||
### 阶段 D:Phase 4 前后端联调集成
|
||||
|
||||
> 依赖:Phase 2 + Phase 3 完成,测试环境可访问真实 API。
|
||||
|
||||
| 任务 | 内容 | 操作 |
|
||||
|------|------|------|
|
||||
| P4-01 | 关闭 Mock 开关 | 将所有 `const USE_MOCK = true` 改为 `false`(UniApp + Admin 共8个文件) |
|
||||
| P4-02 | UniApp 冒烟测试 | 登录 → 查看公排状态 → 资产总览 → 积分明细 → 推荐收益 |
|
||||
| P4-03 | Admin 冒烟测试 | 公排订单列表 → 公排配置保存 → 会员等级调整 → 积分日志查询 |
|
||||
| P4-04 | 支付回调联调 | 测试购买报单商品 → 公排入队 → 积分发放 → 等级升级完整链路 |
|
||||
| P4-05 | 定时任务验证 | 手动触发每日积分释放任务,验证 `release_log` 记录正确 |
|
||||
|
||||
**Mock 关闭检查清单**:
|
||||
```
|
||||
uniapp/api/hjfQueue.js USE_MOCK → false
|
||||
uniapp/api/hjfAssets.js USE_MOCK → false
|
||||
uniapp/api/hjfMember.js USE_MOCK → false
|
||||
admin/src/api/hjfQueue.js USE_MOCK → false
|
||||
admin/src/api/hjfMember.js USE_MOCK → false
|
||||
admin/src/api/hjfPoints.js USE_MOCK → false
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 阶段 E:Phase 5 完整测试
|
||||
|
||||
> 依赖:Phase 4 联调通过。
|
||||
|
||||
| 任务 | 类型 | 内容 |
|
||||
|------|------|------|
|
||||
| P5-01 | 前端渲染测试 | 所有新页面在3个Mock场景(A/B/C)下截图验收 |
|
||||
| P5-02 | 后端接口测试 | 用 Postman/Apifox 验证所有 P3 接口的响应格式和边界值 |
|
||||
| P5-03 | 公排边界测试 | 精确触发:第4单入队时退款到第1单;多人同时入队(并发锁) |
|
||||
| P5-04 | 积分精度测试 | bcmath 计算:`1000000 × 4 / 1000 = 4000`(无浮点误差) |
|
||||
| P5-05 | 会员升级测试 | 直推3单后自动升级创客;伞下30单升云店;业绩分离逻辑 |
|
||||
| P5-06 | 并发压测 | 1000并发用户同时访问公排状态页;公排入队 200 TPS |
|
||||
| P5-07 | E2E 全流程 | 新用户注册 → 引导页 → 购买报单商品 → 等待公排退款 → 申请提现 |
|
||||
| P5-08 | 回归测试 | CRMEB 原有功能(登录/商品/订单/支付)未被改造影响 |
|
||||
|
||||
---
|
||||
|
||||
## 三、执行优先级与分工建议
|
||||
|
||||
```
|
||||
立即可执行(无依赖,Agent 可直接实施)
|
||||
├── A1 首页报单角标 ← 最简单,约30分钟
|
||||
├── A2 推荐收益页积分替换 ← 约45分钟
|
||||
├── A3 个人中心等级徽章 ← 约30分钟
|
||||
└── A4 Admin商品编辑改造 ← 约60分钟
|
||||
|
||||
等待后端就绪(并行推进)
|
||||
├── B 数据库迁移 ← DBA/后端工程师
|
||||
├── C 后端API开发 ← 后端工程师(C1优先)
|
||||
└── D 联调集成 ← 前后端协作
|
||||
|
||||
最终验收
|
||||
└── E 完整测试 ← 测试工程师
|
||||
```
|
||||
|
||||
**关键路径**:`A1~A4 完成` → `CP-01 评审` → `B+C 并行` → `D 联调` → `E 测试`
|
||||
|
||||
---
|
||||
|
||||
## 四、风险点与注意事项
|
||||
|
||||
| 风险 | 描述 | 应对措施 |
|
||||
|------|------|---------|
|
||||
| 公排并发竞争 | 多单同时入队可能重复触发退款 | Redis `SET NX EX` 分布式锁,退款前二次检查状态 |
|
||||
| 积分浮点误差 | `3600 × 0.4‰` 在 PHP 中存在精度问题 | 全程使用 `bcmath`:`bcmul($points, '4', 0)` → `bcdiv(..., '1000', 0)` |
|
||||
| 伞下业绩分离 | 下级升级后业绩需从上级扣除 | 升级事件写入消息队列,异步重算上级业绩;加数据库事务 |
|
||||
| Admin 路由权限 | hjf 新路由需配置到角色权限表 | P3-14 后端路由注册时同步写 `eb_system_menus` |
|
||||
| CRMEB 原生字段冲突 | `eb_user` 新增字段可能影响原有查询 | ALTER TABLE 使用 `DEFAULT 0`,不破坏现有 NULL 约束 |
|
||||
|
||||
---
|
||||
|
||||
## 五、当前可立即下达的指令(Agent 参考)
|
||||
|
||||
按优先级排序,每条指令对应一个独立任务,完成后 `git commit` 即可:
|
||||
|
||||
```
|
||||
1. feat(P1D-01): 首页报单商品角标与公排快捷入口
|
||||
文件: pages/index/index.vue
|
||||
|
||||
2. feat(P1D-05): 推荐收益页积分替换佣金
|
||||
文件: pages/users/user_spread_money/index.vue
|
||||
|
||||
3. feat(P1D-07): 个人中心嵌入HjfMemberBadge等级徽章
|
||||
文件: pages/user/index.vue
|
||||
|
||||
4. feat(P1G-02): Admin商品编辑报单标记与积分支付配置
|
||||
文件: admin/src/pages/product/creatProduct/index.vue
|
||||
```
|
||||
1974
docs/frontend-new-pages-spec.md
Normal file
1974
docs/frontend-new-pages-spec.md
Normal file
File diff suppressed because it is too large
Load Diff
11
docs/issues-0311-1.md
Normal file
11
docs/issues-0311-1.md
Normal file
@@ -0,0 +1,11 @@
|
||||
# 个人中心页面修改
|
||||
|
||||
## 修改原**改动点清单**:
|
||||
1. 去除新增的”引入 HjfMemberBadge 显示会员等级“,class="hjf-member-badge-bar"的部分,
|
||||
2. class=“vip flex-center”中的会员等级改成等级名称
|
||||
3. "我的资产"、"公排查询"导航项的样式修改成和class=“acea-row member-points”一样,保持完全一致风格,
|
||||
|
||||
# 我的资产页面
|
||||
|
||||
1.去除class=“hjf-member-badge size-normal”部分
|
||||
2.美化"我的资产"、"公排查询"页面
|
||||
436
docs/mock-demo-walkthrough.md
Normal file
436
docs/mock-demo-walkthrough.md
Normal file
@@ -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
|
||||
2428
docs/openclaw-frontend-tasks.md
Normal file
2428
docs/openclaw-frontend-tasks.md
Normal file
File diff suppressed because it is too large
Load Diff
BIN
docs/黄精粉小程序PRD_V1.1.docx
Normal file
BIN
docs/黄精粉小程序PRD_V1.1.docx
Normal file
Binary file not shown.
647
docs/黄精粉小程序_Figma_UI设计说明文档.md
Normal file
647
docs/黄精粉小程序_Figma_UI设计说明文档.md
Normal file
@@ -0,0 +1,647 @@
|
||||
# 黄精粉健康商城小程序 · Figma UI 界面设计说明文档
|
||||
|
||||
> **基于 CRMEB Pro v3.5 移动端(uni-app)二次开发**
|
||||
> **源码位置**:`/Users/a123/huangjingfen/pro_v3.5.1/`
|
||||
> **版本**:V1.0 · 2026年3月
|
||||
|
||||
---
|
||||
|
||||
## 1. 设计总则
|
||||
|
||||
### 1.1 设计目标
|
||||
|
||||
本文档指导 Figma 设计师完成微信小程序全部页面的 UI 设计。核心原则是**最大化复用 CRMEB Pro v3.5 现有的移动端页面和组件**,仅对需要新增或改造的页面进行独立设计,降低设计和开发成本。
|
||||
|
||||
### 1.2 设计方针
|
||||
|
||||
- **直接复用的页面**:截图现有 CRMEB Pro 小程序页面作为 Figma 中的参考图层,仅标注需要替换的文案/图片/颜色,不做结构性改动
|
||||
- **改造复用的页面**:以现有页面为基线,在 Figma 中标注新增/修改/隐藏的元素区域
|
||||
- **全新设计的页面**:严格遵循 CRMEB Pro 的设计语言(圆角、间距、字号、配色),保证视觉一致性
|
||||
|
||||
### 1.3 设计规范(对齐 CRMEB Pro v3.5)
|
||||
|
||||
| 维度 | 规范 | 说明 |
|
||||
|---|---|---|
|
||||
| 画布尺寸 | 375 × 812 pt | iPhone X 标准,适配微信小程序 |
|
||||
| 栅格系统 | 左右边距 12pt,列间距 8pt | 与 CRMEB Pro 移动端一致 |
|
||||
| 主题色 | 由后台 DIY 主题配置决定 | 建议使用健康绿(#4CAF50)或品牌金(#C8A86B) |
|
||||
| 辅助色 | 警告 #FF5722 / 成功 #4CAF50 / 链接 #2196F3 | — |
|
||||
| 背景色 | 页面背景 #F5F5F5 / 卡片背景 #FFFFFF | — |
|
||||
| 文字色 | 主文字 #333333 / 次文字 #666666 / 辅助 #999999 | — |
|
||||
| 标题字号 | 页面标题 18pt / 区域标题 16pt / 列表标题 14pt | — |
|
||||
| 正文字号 | 正文 14pt / 辅助 12pt / 极小 10pt | — |
|
||||
| 圆角 | 卡片 12pt / 按钮 20pt(胶囊)/ 头像 50% | — |
|
||||
| 间距 | 模块间距 12pt / 内边距 12-16pt | — |
|
||||
| 底部 TabBar | 4个Tab:首页、分类、购物车、我的 | 复用 CRMEB 的 TabBar 样式 |
|
||||
| 状态栏 | 适配刘海屏安全区 | uni-app 自动处理 |
|
||||
|
||||
### 1.4 Figma 项目结构建议
|
||||
|
||||
```
|
||||
黄精粉商城小程序 UI/
|
||||
├── 🎨 设计规范 Design System
|
||||
│ ├── 颜色 Colors
|
||||
│ ├── 字体 Typography
|
||||
│ ├── 图标 Icons
|
||||
│ ├── 通用组件 Components(按钮、卡片、弹窗、输入框等)
|
||||
│ └── 公排专用组件 Queue Components
|
||||
├── 📱 TabBar 主页面(4页)
|
||||
│ ├── P01 首页 Index
|
||||
│ ├── P02 分类页 Category
|
||||
│ ├── P03 购物车 Cart
|
||||
│ └── P04 个人中心 Mine
|
||||
├── 🛒 商品模块(3页)
|
||||
│ ├── P05 商品列表 GoodsList
|
||||
│ ├── P06 商品详情-报单商品 GoodsDetail-Queue
|
||||
│ └── P07 商品详情-普通商品 GoodsDetail-Normal
|
||||
├── 📦 订单模块(4页)
|
||||
│ ├── P08 确认订单 OrderConfirm
|
||||
│ ├── P09 支付方式选择 PaySelect
|
||||
│ ├── P10 订单列表 OrderList
|
||||
│ └── P11 订单详情(含公排状态)OrderDetail
|
||||
├── 🔄 公排模块(3页) ⭐ 全新设计
|
||||
│ ├── P12 公排状态页 QueueStatus
|
||||
│ ├── P13 公排历史记录 QueueHistory
|
||||
│ └── P14 公排规则说明 QueueRules
|
||||
├── 💰 资产模块(4页) ⭐ 全新/改造
|
||||
│ ├── P15 我的资产总览 Assets
|
||||
│ ├── P16 提现页 Withdraw
|
||||
│ ├── P17 余额明细 BalanceDetail
|
||||
│ └── P18 积分明细 PointsDetail
|
||||
├── 👥 团队模块(3页) ⭐ 改造设计
|
||||
│ ├── P19 我的推荐(团队)Team
|
||||
│ ├── P20 推荐收益明细 TeamIncome
|
||||
│ └── P21 推广海报 SharePoster
|
||||
├── 🔐 登录模块(2页)
|
||||
│ ├── P22 授权登录 Login
|
||||
│ └── P23 新用户引导 Guide ⭐ 全新设计
|
||||
├── ⚙️ 其他页面(4页)
|
||||
│ ├── P24 收货地址管理 Address
|
||||
│ ├── P25 帮助与客服 Help
|
||||
│ ├── P26 账号设置 Setting
|
||||
│ └── P27 活动详情/报名 Activity
|
||||
└── 📋 弹窗与浮层
|
||||
├── C01 支付方式弹窗 PayModal
|
||||
├── C02 提现确认弹窗 WithdrawModal
|
||||
├── C03 公排退款通知弹窗 RefundNotice
|
||||
└── C04 等级升级祝贺弹窗 LevelUpModal
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. 逐页设计说明
|
||||
|
||||
---
|
||||
|
||||
### P01 首页 Index
|
||||
|
||||
**复用策略**:改造复用(基于 CRMEB Pro 首页 DIY 装修)
|
||||
|
||||
**CRMEB 源码对应**:`uni-app/pages/index/index.vue`
|
||||
|
||||
**页面结构**(从上到下):
|
||||
|
||||
| 区域 | 内容 | 复用方式 | 设计要点 |
|
||||
|---|---|---|---|
|
||||
| 顶部搜索栏 | 搜索框 + 消息图标 | 直接复用 | 保持 CRMEB 原样 |
|
||||
| Banner 轮播 | 3-5 张轮播图 | 直接复用 | 后台 DIY 配置,设计师提供轮播图素材模板(3600元套餐主图、品鉴会活动图) |
|
||||
| 公告栏 | 滚动公告文字 | 直接复用 | 后台配置文案 |
|
||||
| 快捷入口 | 图标导航(公排查询、我的团队、我的资产、活动报名) | **改造** | 替换 CRMEB 默认的金刚区图标,设计4个自定义图标,风格统一 |
|
||||
| 活动专区 | 品鉴会/线下活动卡片 | 直接复用 | 使用 CRMEB 图片魔方或图文组件 |
|
||||
| 报单商品推荐 | 黄精粉套餐大卡片 | **改造** | 在商品卡片上增加"参与公排"标签角标,设计一个小的绿色/金色角标 |
|
||||
| 普通商品推荐 | 2列商品网格 | 直接复用 | 后台 DIY 商品组件 |
|
||||
| 底部 TabBar | 首页/分类/购物车/我的 | 直接复用 | 替换 icon 图标为健康主题风格 |
|
||||
|
||||
**Figma 设计交付物**:
|
||||
- 4个金刚区自定义图标(公排查询、我的团队、我的资产、活动报名)
|
||||
- "参与公排"角标组件
|
||||
- 2-3套 Banner 轮播图模板(含黄精粉主视觉)
|
||||
- TabBar 图标(选中态+未选中态)共8个
|
||||
|
||||
---
|
||||
|
||||
### P02 分类页 Category
|
||||
|
||||
**复用策略**:直接复用
|
||||
|
||||
**CRMEB 源码对应**:`uni-app/pages/goods_cate/goods_cate.vue`
|
||||
|
||||
**设计要点**:完全复用 CRMEB Pro 的分类页面,后台配置分类即可。左侧为一级分类(如"报单商品""健康食品""养生茶饮"),右侧为商品列表。无需设计新页面。
|
||||
|
||||
**Figma 处理**:截图现有页面,标注分类名称和图片资源即可。
|
||||
|
||||
---
|
||||
|
||||
### P03 购物车 Cart
|
||||
|
||||
**复用策略**:直接复用
|
||||
|
||||
**CRMEB 源码对应**:`uni-app/pages/order_addcart/order_addcart.vue`
|
||||
|
||||
**设计要点**:完全复用 CRMEB Pro 购物车页面。无结构改动。
|
||||
|
||||
**Figma 处理**:截图参考,无需出新图。
|
||||
|
||||
---
|
||||
|
||||
### P04 个人中心 Mine
|
||||
|
||||
**复用策略**:改造复用
|
||||
|
||||
**CRMEB 源码对应**:`uni-app/pages/user/index.vue`
|
||||
|
||||
**页面结构**:
|
||||
|
||||
| 区域 | 内容 | 复用方式 | 设计要点 |
|
||||
|---|---|---|---|
|
||||
| 顶部用户信息卡 | 头像、昵称、会员等级标签 | **改造** | 增加等级标签(普通/创客/云店/服务商/分公司),设计5种等级 Badge 样式,用不同颜色区分 |
|
||||
| 资产概览条 | 余额 / 待释放积分 / 已释放积分 / 优惠券 | **改造** | 原 CRMEB 是"余额/积分/优惠券",改为4列展示,增加"待释放积分"和"已释放积分"两项 |
|
||||
| 我的订单 | 待付款/待发货/待收货/已完成/售后 图标行 | 直接复用 | 保持原样 |
|
||||
| 功能入口列表 | 我的资产、公排查询、我的推荐、收货地址、帮助客服、设置 | **改造** | 在 CRMEB 的"我的服务"配置中增加"公排查询""我的推荐""我的资产"入口,设计对应的列表 icon |
|
||||
|
||||
**Figma 设计交付物**:
|
||||
- 5种会员等级 Badge 组件(普通会员-灰色、创客-蓝色、云店-绿色、服务商-橙色、分公司-金色)
|
||||
- 4列资产概览条布局
|
||||
- "公排查询""我的推荐""我的资产"菜单 icon(3个)
|
||||
|
||||
---
|
||||
|
||||
### P05 商品列表 GoodsList
|
||||
|
||||
**复用策略**:改造复用
|
||||
|
||||
**CRMEB 源码对应**:`uni-app/pages/goods_list/index.vue`
|
||||
|
||||
**设计要点**:复用 CRMEB 商品列表页面结构。在报单商品的卡片左上角增加"公排商品"角标。普通商品如支持积分支付,在价格下方显示"可用积分"标签。
|
||||
|
||||
**Figma 设计交付物**:
|
||||
- "公排商品"角标组件
|
||||
- "可用积分"标签组件
|
||||
|
||||
---
|
||||
|
||||
### P06 商品详情 — 报单商品 GoodsDetail-Queue
|
||||
|
||||
**复用策略**:改造复用
|
||||
|
||||
**CRMEB 源码对应**:`uni-app/pages/goods_details/index.vue`
|
||||
|
||||
**页面结构**:
|
||||
|
||||
| 区域 | 内容 | 复用方式 | 设计要点 |
|
||||
|---|---|---|---|
|
||||
| 商品轮播图 | 商品主图 | 直接复用 | — |
|
||||
| 价格区域 | ¥3600 + "公排商品"标签 | **改造** | 价格右侧增加"公排商品"标签,下方增加一行文案:"购买后进入公排池,每进4单退1单" |
|
||||
| 公排信息卡 | 当前公排池状态 | **新增** | ⭐ 设计一个信息卡片:显示"当前排队总数 xxx 单""预计第 xxx 位退款",卡片内有"查看详情"链接跳转公排状态页 |
|
||||
| 商品规格 | 规格选择 | 直接复用 | 购买数量选择器,一次可买多单 |
|
||||
| 商品详情 | 图文详情 | 直接复用 | — |
|
||||
| 底部购买栏 | 加入购物车 + 立即购买 | **改造** | 隐藏"加入购物车"按钮(报单商品只能直接购买),仅保留"立即购买"按钮 |
|
||||
|
||||
**Figma 设计交付物**:
|
||||
- 公排信息卡片组件(含排队数、预计位置)
|
||||
- 报单商品专属购买栏(单按钮版)
|
||||
|
||||
---
|
||||
|
||||
### P07 商品详情 — 普通商品 GoodsDetail-Normal
|
||||
|
||||
**复用策略**:改造复用
|
||||
|
||||
**CRMEB 源码对应**:同 P06
|
||||
|
||||
**与 P06 的区别**:无公排信息卡、有加入购物车按钮、价格区域如支持积分支付则显示"xxx积分可兑"。其余完全复用 CRMEB 原页面。
|
||||
|
||||
**Figma 设计交付物**:
|
||||
- "积分可兑"价格标签组件
|
||||
|
||||
---
|
||||
|
||||
### P08 确认订单 OrderConfirm
|
||||
|
||||
**复用策略**:改造复用
|
||||
|
||||
**CRMEB 源码对应**:`uni-app/pages/goods/order_confirm/index.vue`
|
||||
|
||||
**设计要点**:复用 CRMEB 确认订单页面。如果是报单商品,在页面顶部增加一条提示条:"本商品为公排商品,付款后将进入公排池"。支付方式区域根据商品类型动态展示。
|
||||
|
||||
**Figma 设计交付物**:
|
||||
- 公排商品提示条组件(黄色/橙色背景提示条)
|
||||
|
||||
---
|
||||
|
||||
### P09 支付方式选择 PaySelect
|
||||
|
||||
**复用策略**:改造复用
|
||||
|
||||
**CRMEB 源码对应**:CRMEB 原有支付弹窗
|
||||
|
||||
**设计要点**:底部弹窗形式。根据商品类型展示不同支付选项。报单商品:微信支付、支付宝、现金余额。普通商品(后台配置决定):微信支付、支付宝、现金余额、待释放积分、已释放积分。
|
||||
|
||||
**Figma 设计交付物**:
|
||||
- 支付方式选择弹窗(含5种支付方式的icon和布局)
|
||||
|
||||
---
|
||||
|
||||
### P10 订单列表 OrderList
|
||||
|
||||
**复用策略**:直接复用
|
||||
|
||||
**CRMEB 源码对应**:`uni-app/pages/goods/order_list/index.vue`
|
||||
|
||||
**设计要点**:完全复用 CRMEB 订单列表。Tab 筛选(全部/待付款/待发货/待收货/已完成),订单卡片展示商品图、名称、价格、状态。无新增设计。
|
||||
|
||||
---
|
||||
|
||||
### P11 订单详情 OrderDetail
|
||||
|
||||
**复用策略**:改造复用
|
||||
|
||||
**CRMEB 源码对应**:`uni-app/pages/goods/order_details/index.vue`
|
||||
|
||||
**设计要点**:复用 CRMEB 订单详情页面。如果是报单商品订单,在订单状态区域下方增加"公排状态模块"。
|
||||
|
||||
| 新增区域 | 内容 | 设计要点 |
|
||||
|---|---|---|
|
||||
| 公排状态卡片 | 排队序号、当前位置、状态(排队中/已退款) | 使用进度条组件展示"已退 x 单 / 共需 N 单",绿色进度条 |
|
||||
|
||||
**Figma 设计交付物**:
|
||||
- 公排进度条组件(嵌入订单详情)
|
||||
|
||||
---
|
||||
|
||||
### P12 公排状态页 QueueStatus ⭐ 全新设计
|
||||
|
||||
**复用策略**:全新设计
|
||||
|
||||
**对应路由**:`uni-app/pages/queue/status.vue`
|
||||
|
||||
**页面结构**(从上到下):
|
||||
|
||||
| 区域 | 内容 | 设计要点 |
|
||||
|---|---|---|
|
||||
| 页面标题栏 | "公排状态" | 使用 CRMEB 通用导航栏样式 |
|
||||
| 数据概览卡 | 3个数据指标:我的排队单数、已退款单数、排队中单数 | 横向3列布局,数字大字体加粗,标签在下方小字 |
|
||||
| 我的排队列表 | 每条记录:排队序号、入队时间、金额、状态(排队中/已退款)、预计进度 | 卡片列表,每条卡片左侧圆形序号,右侧状态标签。排队中=橙色,已退款=绿色 |
|
||||
| 空状态 | 无排队记录时 | "您暂无公排记录,购买报单商品即可参与" + 跳转商品列表按钮 |
|
||||
|
||||
**Figma 设计交付物**:
|
||||
- 完整公排状态页面设计稿
|
||||
- 数据概览卡组件
|
||||
- 排队记录卡片组件(排队中态 + 已退款态)
|
||||
- 空状态插画
|
||||
|
||||
---
|
||||
|
||||
### P13 公排历史记录 QueueHistory ⭐ 全新设计
|
||||
|
||||
**复用策略**:全新设计
|
||||
|
||||
**对应路由**:`uni-app/pages/queue/history.vue`
|
||||
|
||||
**页面结构**:
|
||||
|
||||
| 区域 | 内容 | 设计要点 |
|
||||
|---|---|---|
|
||||
| 顶部 Tab | 全部 / 排队中 / 已退款 | 使用 CRMEB 通用 Tab 组件样式 |
|
||||
| 记录列表 | 每条:订单号、入队时间、金额、状态、退款时间(如已退款) | 列表样式参考 CRMEB 的交易流水列表 |
|
||||
| 下拉加载 | 分页加载 | 使用 CRMEB 通用加载更多组件 |
|
||||
|
||||
**Figma 设计交付物**:
|
||||
- 公排历史记录页面设计稿
|
||||
|
||||
---
|
||||
|
||||
### P14 公排规则说明 QueueRules ⭐ 全新设计
|
||||
|
||||
**复用策略**:全新设计
|
||||
|
||||
**对应路由**:`uni-app/pages/queue/rules.vue`
|
||||
|
||||
**页面结构**:图文说明页面,包含以下内容模块:
|
||||
|
||||
1. **什么是公排**:简明文字 + 示意图(4单进入→退1单的流程图)
|
||||
2. **公排流程**:步骤图(购买→入队→排队→退款→到账)
|
||||
3. **常见问题**:折叠式 FAQ 列表
|
||||
|
||||
**设计风格**:参考 CRMEB 的文章详情页面,使用图文混排。流程图需要设计师设计一张简洁的矢量插图。
|
||||
|
||||
**Figma 设计交付物**:
|
||||
- 公排规则说明页面完整设计稿
|
||||
- 公排流程示意图插画
|
||||
- FAQ 折叠组件
|
||||
|
||||
---
|
||||
|
||||
### P15 我的资产总览 Assets ⭐ 全新设计
|
||||
|
||||
**复用策略**:全新设计(参考 CRMEB 余额/佣金页面的布局风格)
|
||||
|
||||
**对应路由**:`uni-app/pages/assets/index.vue`
|
||||
|
||||
**页面结构**:
|
||||
|
||||
| 区域 | 内容 | 设计要点 |
|
||||
|---|---|---|
|
||||
| 资产总览卡 | 大卡片,3行展示:现金余额(可点击提现)、待释放积分(显示今日预计释放)、已释放积分 | 深色渐变背景卡片(参考 CRMEB 的佣金卡片风格),金额大字体白色 |
|
||||
| 提现按钮 | "申请提现" | 卡片内右上角或余额行右侧,白色胶囊按钮 |
|
||||
| 功能入口 | 余额明细 / 积分明细 / 提现记录 | 横向3个图标入口 |
|
||||
| 今日动态 | 今日积分释放 xxx、今日公排退款 xxx | 小卡片或信息条展示 |
|
||||
|
||||
**Figma 设计交付物**:
|
||||
- 资产总览卡片组件(深色渐变背景)
|
||||
- 功能入口图标(3个)
|
||||
- 完整资产页面设计稿
|
||||
|
||||
---
|
||||
|
||||
### P16 提现页 Withdraw
|
||||
|
||||
**复用策略**:改造复用
|
||||
|
||||
**CRMEB 源码对应**:`uni-app/pages/users/user_cash/index.vue`
|
||||
|
||||
**设计要点**:复用 CRMEB 提现页面布局。顶部显示"可提现余额 ¥xxxx",输入提现金额,下方实时计算"手续费 7%,实际到账 ¥xxxx"。提交按钮。
|
||||
|
||||
**改造点**:增加手续费实时计算显示行。
|
||||
|
||||
**Figma 设计交付物**:
|
||||
- 手续费计算显示组件
|
||||
|
||||
---
|
||||
|
||||
### P17 余额明细 BalanceDetail
|
||||
|
||||
**复用策略**:改造复用
|
||||
|
||||
**CRMEB 源码对应**:`uni-app/pages/users/user_bill/index.vue`(账单明细)
|
||||
|
||||
**设计要点**:复用 CRMEB 账单流水页面。增加"公排退款"类型的流水标识。每条记录:时间、类型(公排退款/购物消费/提现)、金额(+/-)、余额。
|
||||
|
||||
**Figma 设计交付物**:
|
||||
- "公排退款"类型标签样式
|
||||
|
||||
---
|
||||
|
||||
### P18 积分明细 PointsDetail ⭐ 全新设计
|
||||
|
||||
**复用策略**:全新设计(参考 CRMEB 积分明细页面风格)
|
||||
|
||||
**对应路由**:`uni-app/pages/assets/detail.vue`
|
||||
|
||||
**页面结构**:
|
||||
|
||||
| 区域 | 内容 | 设计要点 |
|
||||
|---|---|---|
|
||||
| 顶部 Tab | 待释放积分 / 已释放积分 | 两个 Tab 切换 |
|
||||
| 待释放 Tab | 每条:积分数、来源("张三购买,直推奖励")、时间、状态"释放中" | 每条记录下方显示小进度条(已释放比例) |
|
||||
| 已释放 Tab | 每条:积分数、来源("每日释放"或"购物消费")、时间 | 与 CRMEB 账单明细相同布局 |
|
||||
|
||||
**Figma 设计交付物**:
|
||||
- 积分明细页面完整设计稿
|
||||
- 积分释放进度条组件
|
||||
|
||||
---
|
||||
|
||||
### P19 我的推荐(团队)Team ⭐ 改造设计
|
||||
|
||||
**复用策略**:改造复用
|
||||
|
||||
**CRMEB 源码对应**:CRMEB Pro 分销推广人页面 / 团队分销页面
|
||||
|
||||
**页面结构**:
|
||||
|
||||
| 区域 | 内容 | 设计要点 |
|
||||
|---|---|---|
|
||||
| 数据概览 | 3列:直推人数、伞下总人数、伞下总单数 | 使用 CRMEB 分销数据卡片样式 |
|
||||
| 我的等级 | 当前等级 + 升级进度 | 显示当前等级名称和 Badge,下方进度条"距下一级还需 xx 单" |
|
||||
| 直推列表 | 我直推的成员列表:头像、昵称、等级、加入时间、贡献单数 | 列表卡片,使用 CRMEB 推广人列表的样式 |
|
||||
| 查看伞下 | 点击某个直推成员可展开其下级(树状结构) | 树状展开或跳转新页面,初期可用列表嵌套实现 |
|
||||
|
||||
**Figma 设计交付物**:
|
||||
- 等级进度条组件
|
||||
- 团队成员卡片组件(含等级 Badge)
|
||||
- 完整团队页面设计稿
|
||||
|
||||
---
|
||||
|
||||
### P20 推荐收益明细 TeamIncome
|
||||
|
||||
**复用策略**:改造复用
|
||||
|
||||
**CRMEB 源码对应**:CRMEB Pro 分销佣金明细页面
|
||||
|
||||
**设计要点**:复用 CRMEB 佣金明细的列表布局。每条记录展示:获得积分数、来源类型(直推奖励/伞下奖励)、来源成员昵称、关联订单、时间。
|
||||
|
||||
**Figma 设计交付物**:
|
||||
- 收益记录卡片组件(标注"直推奖励"和"伞下奖励"用不同颜色标签区分)
|
||||
|
||||
---
|
||||
|
||||
### P21 推广海报 SharePoster
|
||||
|
||||
**复用策略**:直接复用
|
||||
|
||||
**CRMEB 源码对应**:CRMEB Pro 分销海报生成页面
|
||||
|
||||
**设计要点**:复用 CRMEB 的海报生成和分享功能。设计师需提供1-2套海报模板素材(包含黄精粉产品图、品牌logo、小程序码占位区域)。
|
||||
|
||||
**Figma 设计交付物**:
|
||||
- 2套推广海报模板(竖版,适合微信朋友圈)
|
||||
|
||||
---
|
||||
|
||||
### P22 授权登录 Login
|
||||
|
||||
**复用策略**:直接复用
|
||||
|
||||
**CRMEB 源码对应**:`uni-app/pages/users/wechat_login/index.vue`
|
||||
|
||||
**设计要点**:完全复用 CRMEB 的微信授权登录页面。Logo 图标替换为黄精粉品牌 Logo。
|
||||
|
||||
---
|
||||
|
||||
### P23 新用户引导 Guide ⭐ 全新设计
|
||||
|
||||
**复用策略**:全新设计
|
||||
|
||||
**对应路由**:`uni-app/pages/queue/rules.vue`(可与规则说明合并或独立)
|
||||
|
||||
**页面结构**:Swiper 轮播式引导页(3-4页)
|
||||
|
||||
| 步骤 | 内容 | 设计要点 |
|
||||
|---|---|---|
|
||||
| 第1页 | 欢迎来到黄精粉商城 + 品牌介绍 | 品牌插画 + 简短文案 |
|
||||
| 第2页 | "公排进四退一"规则图解 | 流程示意图 + 简短说明 |
|
||||
| 第3页 | 推荐好友赚积分,多级会员体系说明 | 等级图谱 + 奖励概览 |
|
||||
| 第4页 | 立即开始 | CTA 按钮"进入商城" |
|
||||
|
||||
**Figma 设计交付物**:
|
||||
- 4页引导页完整设计稿
|
||||
- 3张引导页插画
|
||||
|
||||
---
|
||||
|
||||
### P24 收货地址管理 Address
|
||||
|
||||
**复用策略**:直接复用
|
||||
|
||||
**CRMEB 源码对应**:`uni-app/pages/users/user_address/index.vue` 及 `user_address_list/index.vue`
|
||||
|
||||
**设计要点**:完全复用,无改动。
|
||||
|
||||
---
|
||||
|
||||
### P25 帮助与客服 Help
|
||||
|
||||
**复用策略**:直接复用
|
||||
|
||||
**CRMEB 源码对应**:CRMEB 在线客服系统
|
||||
|
||||
**设计要点**:完全复用 CRMEB 客服聊天功能。
|
||||
|
||||
---
|
||||
|
||||
### P26 账号设置 Setting
|
||||
|
||||
**复用策略**:直接复用
|
||||
|
||||
**CRMEB 源码对应**:`uni-app/pages/users/user_set/index.vue`
|
||||
|
||||
**设计要点**:复用 CRMEB 设置页。包含头像/昵称修改、手机号管理、退出登录。
|
||||
|
||||
---
|
||||
|
||||
### P27 活动详情/报名 Activity
|
||||
|
||||
**复用策略**:直接复用
|
||||
|
||||
**CRMEB 源码对应**:CRMEB Pro 活动管理的移动端展示页面
|
||||
|
||||
**设计要点**:复用 CRMEB 活动详情页(封面图、活动信息、报名按钮)。后台创建活动时填写具体信息。
|
||||
|
||||
---
|
||||
|
||||
## 3. 弹窗与浮层组件
|
||||
|
||||
### C01 支付方式弹窗 PayModal
|
||||
|
||||
**复用策略**:改造复用
|
||||
|
||||
**设计要点**:底部弹出式半屏弹窗。5种支付方式纵向排列,每种带 radio 单选。报单商品时灰置禁用积分选项。
|
||||
|
||||
### C02 提现确认弹窗 WithdrawModal
|
||||
|
||||
**复用策略**:新增组件
|
||||
|
||||
**设计要点**:居中弹窗。内容:提现金额、手续费(7%)、实际到账金额。两个按钮"取消""确认提现"。
|
||||
|
||||
### C03 公排退款通知弹窗 RefundNotice ⭐ 全新
|
||||
|
||||
**设计要点**:居中弹窗,带喜庆感。顶部🎉图标,主文案"恭喜,您的公排订单已退款!",显示退款金额"¥3600已到账余额",按钮"查看详情""我知道了"。
|
||||
|
||||
### C04 等级升级祝贺弹窗 LevelUpModal ⭐ 全新
|
||||
|
||||
**设计要点**:居中弹窗。顶部等级 Badge 图标,"恭喜升级为【云店】!",展示新等级对应的奖励权益摘要。按钮"查看权益""好的"。
|
||||
|
||||
---
|
||||
|
||||
## 4. 设计师交付物清单
|
||||
|
||||
### 4.1 全新设计页面(7页,需完整设计稿)
|
||||
|
||||
| 编号 | 页面 | 优先级 |
|
||||
|---|---|---|
|
||||
| P12 | 公排状态页 | P0 |
|
||||
| P14 | 公排规则说明 | P1 |
|
||||
| P15 | 我的资产总览 | P0 |
|
||||
| P18 | 积分明细 | P0 |
|
||||
| P19 | 我的推荐(团队) | P0 |
|
||||
| P23 | 新用户引导(4页) | P1 |
|
||||
| C03/C04 | 退款通知+升级祝贺弹窗 | P0 |
|
||||
|
||||
### 4.2 改造设计页面(8页,基于截图标注改动区域)
|
||||
|
||||
| 编号 | 页面 | 改动要点 |
|
||||
|---|---|---|
|
||||
| P01 | 首页 | 金刚区图标、公排角标 |
|
||||
| P04 | 个人中心 | 等级Badge、资产4列展示 |
|
||||
| P05 | 商品列表 | 公排商品角标 |
|
||||
| P06 | 商品详情-报单 | 公排信息卡、单按钮购买栏 |
|
||||
| P08 | 确认订单 | 公排提示条 |
|
||||
| P09 | 支付方式 | 5种支付方式弹窗 |
|
||||
| P11 | 订单详情 | 公排进度条 |
|
||||
| P16 | 提现页 | 手续费计算行 |
|
||||
|
||||
### 4.3 直接复用页面(12页,无需设计稿)
|
||||
|
||||
P02 分类、P03 购物车、P07 普通商品详情、P10 订单列表、P13 公排历史、P17 余额明细、P20 推荐收益、P21 推广海报、P22 登录、P24 地址、P25 客服、P26 设置、P27 活动
|
||||
|
||||
### 4.4 通用组件清单
|
||||
|
||||
| 组件 | 说明 | 使用页面 |
|
||||
|---|---|---|
|
||||
| 会员等级 Badge | 5种等级的彩色标签 | P04/P11/P19 |
|
||||
| 公排商品角标 | "公排商品"小标签 | P01/P05/P06 |
|
||||
| 公排进度条 | 显示 x/N 进度 | P06/P11/P12 |
|
||||
| 积分释放进度条 | 小型进度条 | P18 |
|
||||
| 资产卡片 | 深色渐变背景 | P15 |
|
||||
| 数据指标卡 | 3列数字展示 | P12/P19 |
|
||||
| 提示条 | 黄色/橙色背景提示 | P06/P08 |
|
||||
|
||||
### 4.5 插画与素材需求
|
||||
|
||||
| 素材 | 说明 | 数量 |
|
||||
|---|---|---|
|
||||
| 品牌 Logo | 黄精粉商城标识 | 1套(含白底/透明底) |
|
||||
| Banner 模板 | 轮播图素材 | 3张 |
|
||||
| 引导页插画 | 新用户引导页配图 | 3张 |
|
||||
| 公排流程图 | 进四退一的流程示意 | 1张 |
|
||||
| 空状态插画 | 无数据时展示 | 2张(公排空/团队空) |
|
||||
| 推广海报模板 | 分享到朋友圈的海报 | 2套 |
|
||||
| TabBar 图标 | 选中+未选中 | 8个 |
|
||||
| 金刚区图标 | 首页快捷入口 | 4个 |
|
||||
| 菜单 icon | 个人中心功能列表 | 3个 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 开发对接说明
|
||||
|
||||
### 5.1 CRMEB Pro 现有页面路径参考
|
||||
|
||||
设计师和开发者可以参考以下现有页面路径,理解页面结构:
|
||||
|
||||
```
|
||||
本地代码路径:/Users/a123/huangjingfen/pro_v3.5.1/
|
||||
|
||||
移动端前端代码:
|
||||
uni-app/pages/index/index.vue → 首页
|
||||
uni-app/pages/goods_cate/goods_cate.vue → 分类页
|
||||
uni-app/pages/order_addcart/order_addcart.vue → 购物车
|
||||
uni-app/pages/user/index.vue → 个人中心
|
||||
uni-app/pages/goods_details/index.vue → 商品详情
|
||||
uni-app/pages/goods_list/index.vue → 商品列表
|
||||
uni-app/pages/goods/order_confirm/index.vue → 确认订单
|
||||
uni-app/pages/goods/order_list/index.vue → 订单列表
|
||||
uni-app/pages/goods/order_details/index.vue → 订单详情
|
||||
uni-app/pages/users/user_cash/index.vue → 提现
|
||||
uni-app/pages/users/user_bill/index.vue → 账单明细
|
||||
uni-app/pages/users/user_address/index.vue → 地址管理
|
||||
uni-app/pages/users/user_address_list/index.vue → 地址列表
|
||||
uni-app/pages/users/user_set/index.vue → 账号设置
|
||||
uni-app/pages/users/wechat_login/index.vue → 微信登录
|
||||
|
||||
全局样式文件:
|
||||
uni-app/uni.scss → 全局 SCSS 变量
|
||||
uni-app/static/ → 静态资源(图片/图标)
|
||||
|
||||
组件目录:
|
||||
uni-app/components/ → 公共组件
|
||||
```
|
||||
|
||||
### 5.2 设计→开发交接流程
|
||||
|
||||
1. 设计师在 Figma 中完成设计后,标注每个页面对应的 CRMEB 源码路径
|
||||
2. 对于直接复用的页面:无需标注,开发者直接使用现有代码
|
||||
3. 对于改造页面:在 Figma 中用红色标注框标出"新增区域"和"修改区域",注释具体改动内容
|
||||
4. 对于全新页面:输出完整设计稿 + 切图 + 标注(使用 Figma 的 Dev Mode)
|
||||
5. 所有自定义组件导出 Design Tokens(颜色/字号/间距),确保开发一致性
|
||||
Reference in New Issue
Block a user