460 lines
11 KiB
Markdown
460 lines
11 KiB
Markdown
# TakeoutSaaS C 端小程序原型执行总计划
|
||
|
||
- 文档版本：`V1.0`
|
||
- 适用仓库：`TakeoutSaas.C-end.MiniProgram.Prototype`
|
||
- 执行对象：`Gemini 或其他页面实现 AI`
|
||
- 执行目标：基于当前 Markdown 文档体系，逐步完成一套可演示、可流转、可继续交接开发的小程序 C 端原型
|
||
|
||
---
|
||
|
||
## 1. 总目标
|
||
|
||
本计划用于指导原型实现 AI，按固定顺序逐步完成 C 端小程序原型。
|
||
最终结果必须满足：
|
||
|
||
1. 页面结构完整
|
||
2. 页面之间可跳转
|
||
3. 三种场景可切换
|
||
4. 订单链路完整
|
||
5. 会员资产链路完整
|
||
6. 页面与文档一致
|
||
|
||
本次原型范围包括：
|
||
- 首页
|
||
- 点餐
|
||
- 订单
|
||
- 我的
|
||
- 门店、地址、结算、支付成功、订单详情、退款、评价
|
||
- 领券中心、秒杀、限时折扣、会员中心、积分商城、储值、次卡
|
||
- 消息中心、帮助中心、堂食扫码确认
|
||
|
||
本次原型不包括：
|
||
- 后端接口联调
|
||
- 后台运营端页面
|
||
- 财务、报表、库存后台
|
||
- 实际支付能力
|
||
- 实际地图配送算法
|
||
|
||
---
|
||
|
||
## 2. 执行总原则
|
||
|
||
### 2.1 严格按文档实现
|
||
必须以以下文件为依据：
|
||
- `README.md`
|
||
- `docs/01-文档导航与实施顺序.md`
|
||
- `docs/02-信息架构与路由.md`
|
||
- `docs/03-全局业务规则.md`
|
||
- `docs/04-核心用户流程.md`
|
||
- `docs/05-页面清单总表.md`
|
||
- `docs/06-通用组件清单.md`
|
||
- `docs/07-页面规格/*.md`
|
||
|
||
### 2.2 优先做闭环，不优先做边缘页
|
||
先保证主交易链路可跑，再做资产页和辅助页。
|
||
|
||
### 2.3 一个阶段只解决一个问题
|
||
不要同时做太多方向：
|
||
- 阶段 1 做壳层
|
||
- 阶段 2 做交易闭环
|
||
- 阶段 3 做履约售后
|
||
- 阶段 4 做我的与资产
|
||
- 阶段 5 做辅助页与活动页
|
||
- 阶段 6 做全局联调与检查
|
||
|
||
### 2.4 页面先可用，再精修
|
||
只要页面结构、交互、状态、流转正确，就算阶段合格。
|
||
视觉细修可以放在最后统一处理。
|
||
|
||
---
|
||
|
||
## 3. 阶段计划
|
||
|
||
## 阶段 1：搭建原型基础骨架
|
||
|
||
### 目标
|
||
搭建整套原型的基础结构，让后续页面可以稳定挂接。
|
||
|
||
### 必做事项
|
||
1. 建立全局目录结构
|
||
2. 建立路由结构
|
||
3. 建立底部 TabBar
|
||
4. 建立顶部导航栏
|
||
5. 建立页面容器和安全区规则
|
||
6. 建立统一色彩、字体、间距和按钮规范
|
||
7. 建立通用组件基础版本
|
||
|
||
### 本阶段必须产出
|
||
- 全局应用壳层
|
||
- 4 个 Tab 入口占位
|
||
- 二级页面跳转能力
|
||
- 抽屉 / 弹层容器
|
||
- 通用状态标签与卡片组件
|
||
|
||
### 本阶段完成标准
|
||
- 可以从 TabBar 切换到 4 个主页面占位
|
||
- 可以从任意页面进入一个二级页再返回
|
||
- 可以打开和关闭抽屉组件
|
||
|
||
---
|
||
|
||
## 阶段 2：完成交易主链路原型
|
||
|
||
### 目标
|
||
跑通首页 → 点餐 → 商品详情 → 购物车 → 结算 → 支付成功 → 订单详情的完整闭环。
|
||
|
||
### 页面实施顺序
|
||
1. `T01 首页`
|
||
2. `T02 点餐页`
|
||
3. `C01 商品详情抽屉`
|
||
4. `C02 购物车抽屉`
|
||
5. `P03 结算确认页`
|
||
6. `P04 支付成功页`
|
||
7. `T03 订单页`
|
||
8. `P05 订单详情页`
|
||
|
||
### 每个页面必须完成的内容
|
||
- 页面区块
|
||
- 页面 CTA
|
||
- 页面状态
|
||
- 页面跳转
|
||
- mock 数据
|
||
|
||
### 场景要求
|
||
#### 外卖
|
||
- 门店选择
|
||
- 地址校验占位
|
||
- 配送费 / 起送价说明
|
||
- 预计送达展示
|
||
|
||
#### 自提
|
||
- 自提时间选择
|
||
- 取餐人信息
|
||
- 取餐码展示入口
|
||
|
||
#### 堂食
|
||
- 桌号显示
|
||
- 堂食场景切换
|
||
- 后续加菜入口预留
|
||
|
||
### 本阶段完成标准
|
||
- 首页可以进入点餐
|
||
- 点餐可以加购商品
|
||
- 商品可通过抽屉选规格和加料
|
||
- 购物车可修改数量并去结算
|
||
- 结算页可以展示金额明细和优惠入口
|
||
- 支付成功后能进入订单详情
|
||
- 订单详情能反映不同场景信息
|
||
|
||
---
|
||
|
||
## 阶段 3：完成履约、退款、评价链路
|
||
|
||
### 目标
|
||
补全支付后的用户行为，让订单链路具备售后和评价能力。
|
||
|
||
### 页面实施顺序
|
||
1. `P06 退款申请页`
|
||
2. `P07 退款详情页`
|
||
3. `P08 评价页`
|
||
4. 回补 `T03 订单页`
|
||
5. 回补 `P05 订单详情页`
|
||
|
||
### 必做事项
|
||
- 为订单详情页补齐操作态
|
||
- 根据不同状态展示不同按钮
|
||
- 打通退款申请 → 退款详情
|
||
- 打通订单详情 → 评价页
|
||
- 支持订单完成后再来一单
|
||
|
||
### 状态要求
|
||
- 待支付
|
||
- 已支付待接单
|
||
- 制作中
|
||
- 配送中
|
||
- 待自提
|
||
- 堂食进行中
|
||
- 已完成
|
||
- 退款中
|
||
- 已退款
|
||
- 已关闭
|
||
|
||
### 本阶段完成标准
|
||
- 用户可从订单详情发起退款
|
||
- 用户可看到退款结果
|
||
- 用户可提交评价
|
||
- 用户可看到订单的状态变化表达
|
||
|
||
---
|
||
|
||
## 阶段 4：完成“我的”与用户资产链路
|
||
|
||
### 目标
|
||
让用户能在“我的”中查看资产、进入会员相关页面，并回流到点餐和结算。
|
||
|
||
### 页面实施顺序
|
||
1. `T04 我的页`
|
||
2. `P12 会员中心页`
|
||
3. `P13 积分商城页`
|
||
4. `P14 储值充值页`
|
||
5. `P15 次卡页`
|
||
6. `P09 领券中心页`
|
||
|
||
### 必做事项
|
||
- 我的页搭建用户头部卡、资产总览和服务区
|
||
- 会员中心展示等级、权益、成长值
|
||
- 积分商城展示积分余额和可兑换内容
|
||
- 储值充值页展示方案和充值记录
|
||
- 次卡页展示购买、已购和使用状态
|
||
- 领券中心展示券列表、领取状态和去使用入口
|
||
|
||
### 本阶段完成标准
|
||
- 我的页能跳转到全部资产页
|
||
- 资产页结构完整
|
||
- 资产页数据能回流到结算页的使用语境
|
||
- 优惠券、积分、储值、次卡在结算页有承接入口
|
||
|
||
---
|
||
|
||
## 阶段 5：完成活动页与辅助页
|
||
|
||
### 目标
|
||
补全活动承接页、服务页和场景辅助页，完善整套原型可展示性。
|
||
|
||
### 页面实施顺序
|
||
1. `P10 秒杀活动页`
|
||
2. `P11 限时折扣活动页`
|
||
3. `P01 门店选择页`
|
||
4. `P02 地址管理页`
|
||
5. `P16 消息中心页`
|
||
6. `P17 帮助中心页`
|
||
7. `P18 堂食扫码确认页`
|
||
|
||
### 必做事项
|
||
- 活动页展示活动头图、列表、状态变化
|
||
- 门店选择页支持定位、筛选和切店
|
||
- 地址管理页支持默认地址、新增编辑逻辑原型
|
||
- 消息中心支持分类切换
|
||
- 帮助中心支持 FAQ 和客服入口
|
||
- 堂食扫码确认页支持桌号确认与入桌
|
||
|
||
### 本阶段完成标准
|
||
- 首页活动入口全部有承接页
|
||
- 门店与地址能力完整
|
||
- 堂食扫码流程可演示
|
||
- 消息与帮助体系可展示
|
||
|
||
---
|
||
|
||
## 阶段 6：统一联调与整体检查
|
||
|
||
### 目标
|
||
把前面分阶段完成的页面整理成一套完整、统一、可交付的原型。
|
||
|
||
### 必做事项
|
||
1. 检查所有页面路由是否连通
|
||
2. 检查所有主要 CTA 是否都有跳转结果
|
||
3. 检查所有页面标题、命名、入口是否统一
|
||
4. 检查所有状态标签颜色和文案是否一致
|
||
5. 检查三场景差异是否表达完整
|
||
6. 检查结算页金额逻辑表达是否统一
|
||
7. 检查“我的”页与资产页是否能相互跳转
|
||
8. 检查所有空态与异常态是否补齐
|
||
|
||
### 最终联调清单
|
||
- 首页 → 点餐 → 结算 → 支付成功 → 订单详情
|
||
- 订单 → 退款申请 → 退款详情
|
||
- 订单详情 → 评价页
|
||
- 我的 → 会员中心
|
||
- 我的 → 积分商城
|
||
- 我的 → 储值充值
|
||
- 我的 → 次卡页
|
||
- 首页 → 秒杀活动页
|
||
- 首页 → 限时折扣活动页
|
||
- 扫码 → 堂食扫码确认 → 点餐页（堂食）
|
||
|
||
### 本阶段完成标准
|
||
- 页面可完整演示
|
||
- 路由不死链
|
||
- 页面结构和文档一致
|
||
- 可交由下一个 AI 或开发继续接手
|
||
|
||
---
|
||
|
||
## 4. 页面级执行模板
|
||
|
||
Gemini 每做一个页面，必须遵守以下步骤：
|
||
|
||
### Step 1：先读规格
|
||
- 读取对应 `docs/07-页面规格/*.md`
|
||
- 同时读取依赖的全局规则和组件文档
|
||
|
||
### Step 2：先搭骨架
|
||
- 先按区块顺序搭页面结构
|
||
- 不要一开始就处理细节视觉
|
||
|
||
### Step 3：接入交互
|
||
- 接 CTA
|
||
- 接跳转
|
||
- 接抽屉 / 弹层
|
||
- 接状态切换
|
||
|
||
### Step 4：补状态
|
||
- 默认态
|
||
- 空态
|
||
- 异常态
|
||
- 禁用态
|
||
|
||
### Step 5：对照文档自检
|
||
检查：
|
||
- 区块是否缺失
|
||
- 交互是否缺失
|
||
- 页面是否越权扩展功能
|
||
- 页面命名是否和文档一致
|
||
|
||
---
|
||
|
||
## 5. 统一 mock 数据策略
|
||
|
||
为了让原型可演示，需要统一准备 mock 数据。
|
||
所有 mock 数据都要贴近餐饮小程序真实场景。
|
||
|
||
### 建议 mock 数据域
|
||
- 门店数据
|
||
- 分类数据
|
||
- 商品数据
|
||
- SKU 数据
|
||
- 加料数据
|
||
- 购物车数据
|
||
- 地址数据
|
||
- 优惠券数据
|
||
- 积分数据
|
||
- 储值数据
|
||
- 次卡数据
|
||
- 订单数据
|
||
- 退款数据
|
||
- 消息数据
|
||
|
||
### mock 数据要求
|
||
- 能反映三场景差异
|
||
- 能反映活动状态差异
|
||
- 能反映订单状态差异
|
||
- 能反映资产是否可用
|
||
|
||
---
|
||
|
||
## 6. 视觉与交互约束
|
||
|
||
### 6.1 视觉方向
|
||
本次原型建议保持：
|
||
- 移动端优先
|
||
- 餐饮类产品风格
|
||
- 清晰、轻快、信息密度适中
|
||
- 优惠信息突出但不杂乱
|
||
|
||
### 6.2 交互方向
|
||
- 主要操作尽量底部固定
|
||
- 商品加购尽量少跳页
|
||
- 抽屉优先承载短流程
|
||
- 二级页承载完整流程
|
||
|
||
### 6.3 文案方向
|
||
- 以直接、明确、可操作为主
|
||
- 不用过度营销化表达
|
||
- 状态文案必须稳定统一
|
||
|
||
---
|
||
|
||
## 7. 阶段交付物清单
|
||
|
||
### 阶段 1 交付物
|
||
- 全局壳层
|
||
- 路由骨架
|
||
- 通用组件第一版
|
||
|
||
### 阶段 2 交付物
|
||
- 交易主链路页面
|
||
- 购物车与结算闭环
|
||
- 三场景基本表达
|
||
|
||
### 阶段 3 交付物
|
||
- 退款链路
|
||
- 评价链路
|
||
- 订单状态链路
|
||
|
||
### 阶段 4 交付物
|
||
- 我的页
|
||
- 会员与资产页
|
||
- 资产承接链路
|
||
|
||
### 阶段 5 交付物
|
||
- 活动页
|
||
- 辅助页
|
||
- 堂食扫码辅助页
|
||
|
||
### 阶段 6 交付物
|
||
- 完整演示版原型
|
||
- 全链路可点击
|
||
- 页面命名与结构统一
|
||
|
||
---
|
||
|
||
## 8. 最终验收标准
|
||
|
||
只有当下面全部满足时，本计划才算执行完成：
|
||
|
||
1. 所有 `docs/05-页面清单总表.md` 中列出的页面都已实现
|
||
2. 所有主 CTA 都有去向
|
||
3. 外卖、自提、堂食三场景均可演示
|
||
4. 结算、订单、退款、评价链路可演示
|
||
5. 会员、积分、储值、次卡、领券链路可演示
|
||
6. 页面状态具备最基本的空态和异常态
|
||
7. 页面结构与文档一致
|
||
8. 另一个开发或 AI 接手时，不需要重新猜测页面应该长什么样
|
||
|
||
---
|
||
|
||
## 9. 执行顺序简表
|
||
|
||
按下面固定顺序执行，不要跳步：
|
||
|
||
1. 全局骨架
|
||
2. 首页
|
||
3. 点餐页
|
||
4. 商品详情抽屉
|
||
5. 购物车抽屉
|
||
6. 结算确认页
|
||
7. 支付成功页
|
||
8. 订单页
|
||
9. 订单详情页
|
||
10. 退款申请页
|
||
11. 退款详情页
|
||
12. 评价页
|
||
13. 我的页
|
||
14. 会员中心页
|
||
15. 积分商城页
|
||
16. 储值充值页
|
||
17. 次卡页
|
||
18. 领券中心页
|
||
19. 秒杀活动页
|
||
20. 限时折扣活动页
|
||
21. 门店选择页
|
||
22. 地址管理页
|
||
23. 消息中心页
|
||
24. 帮助中心页
|
||
25. 堂食扫码确认页
|
||
26. 全局联调与统一修正
|
||
|
||
---
|
||
|
||
## 10. 最后要求
|
||
|
||
如果你是 Gemini，请不要一上来就做全部页面。
|
||
请严格按照本 `plan.md`：
|
||
- 一阶段一阶段推进
|
||
- 一页面一页面落地
|
||
- 每完成一个页面就自检
|
||
- 每完成一个阶段再进入下一个阶段
|
||
|
||
本计划不是参考建议，而是执行顺序。
|