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