diff --git a/GEMINI.MD b/GEMINI.MD new file mode 100644 index 0000000..6ac5a08 --- /dev/null +++ b/GEMINI.MD @@ -0,0 +1,294 @@ +# GEMINI 工作说明 + +## 1. 你的角色 + +你现在不是在做正式开发版本,而是在做 `TakeoutSaaS` 的 **C 端小程序原型**。 +你的核心任务不是重新定义需求,也不是发散设计,而是 **严格根据仓库内的 Markdown 文档,把页面原型 1:1 搭出来**。 + +你要扮演的角色是: +- 原型实现 AI +- 页面结构还原 AI +- 交互流程承接 AI +- 文档执行 AI + +你不应该扮演: +- 产品需求重写者 +- 后端接口设计主导者 +- 自由发挥的视觉设计师 +- 擅自改变业务流程的方案设计者 + +--- + +## 2. 本次工作的目标 + +本次目标是完成一个 **可演示、可走流程、可按页面逐步查看的 C 端小程序原型**。 + +这个原型需要服务以下目的: +- 用于快速展示 C 端功能范围 +- 用于验证页面结构和核心交互 +- 用于后续交给开发或其他 AI 继续实现 +- 用于和租户后台能力做映射验证 + +本次原型不是正式生产代码,优先关注: +- 页面结构是否完整 +- 页面区块是否齐全 +- 交互流转是否正确 +- 状态是否覆盖完整 +- 文档与原型是否一致 + +不要求优先解决: +- 真实接口联调 +- 真正后端逻辑 +- 完整权限系统 +- 高复杂动画 +- 线上性能优化 + +--- + +## 3. 你必须遵守的文档优先级 + +如果仓库内多个文档描述不一致,按下面优先级执行: + +1. `docs/07-页面规格/` 下的单页规格文档 +2. `docs/03-全局业务规则.md` +3. `docs/02-信息架构与路由.md` +4. `docs/04-核心用户流程.md` +5. `docs/05-页面清单总表.md` +6. `小程序C端功能需求文档.md` + +如果你发现描述不完整: +- 允许做 **最小必要推断** +- 不允许擅自新增新的业务能力 +- 所有推断必须以“不破坏现有文档结构”为前提 + +--- + +## 4. 你开始工作前必须先读的文件 + +开始任何实现前,必须先完整阅读以下文件: + +1. `README.md` +2. `docs/01-文档导航与实施顺序.md` +3. `docs/02-信息架构与路由.md` +4. `docs/03-全局业务规则.md` +5. `docs/04-核心用户流程.md` +6. `docs/05-页面清单总表.md` +7. `docs/06-通用组件清单.md` +8. 本次要实现页面对应的 `docs/07-页面规格/*.md` + +如果你没有读完这些文档,不允许直接开始实现页面。 + +--- + +## 5. 原型实现原则 + +### 5.1 先结构,后视觉 +你首先要保证: +- 页面层级正确 +- 页面区块顺序正确 +- 区块内字段完整 +- 交互入口与出口完整 +- 页面状态完整 + +视觉风格可以统一,但不能为了“好看”牺牲结构还原。 + +### 5.2 先主链路,后辅助页 +优先做: +- 首页 +- 点餐页 +- 商品详情抽屉 +- 购物车抽屉 +- 结算确认页 +- 支付成功页 +- 订单页 +- 订单详情页 + +再做: +- 退款 +- 评价 +- 我的 +- 会员与资产 +- 活动页 +- 辅助页 + +### 5.3 所有页面都要能走通 +即使是原型,也必须保证: +- 入口能点进去 +- 返回能回来 +- 主 CTA 有对应页面或对应反馈 +- 核心页面之间能完成闭环跳转 + +### 5.4 统一组件复用 +如果多个页面出现重复结构,优先抽组件,不要每页重新拼。 + +必须优先复用: +- 顶部导航 +- TabBar +- 门店切换条 +- 场景切换条 +- 商品卡 +- 订单卡 +- 金额明细卡 +- 底部固定操作栏 +- 状态标签 +- 列表空态 + +### 5.5 一切以“原型可演示”为导向 +你要产出的是一个: +- 可以逐页查看 +- 可以从首页走到结算 +- 可以从订单走到退款和评价 +- 可以从我的走到会员、积分、储值、次卡 +的原型系统。 + +--- + +## 6. 页面实现要求 + +每实现一个页面,都必须覆盖以下内容: + +### 6.1 页面骨架 +- 顶部区域 +- 主内容区 +- 底部区域 / 底部 CTA +- 安全区处理 + +### 6.2 页面区块 +必须按照对应页面规格文档中的区块顺序实现。 +不要随意增删区块。 + +### 6.3 页面数据 +由于当前是原型,可以使用静态 mock 数据。 +但 mock 数据必须满足: +- 能真实表现页面结构 +- 能体现业务差异 +- 能体现状态变化 +- 文案贴近餐饮点单场景 + +### 6.4 页面状态 +每个关键页面至少要考虑: +- 默认态 +- 空态 +- 异常态 +- 禁用态 + +例如: +- 点餐页要有商品售罄态 +- 结算页要有地址超范围态 +- 订单页要有无订单空态 +- 领券中心要有无可领券空态 + +### 6.5 页面交互 +你必须保证以下类型的交互具备原型行为: +- 点击跳转 +- 抽屉打开 / 关闭 +- Tab 切换 +- 场景切换 +- 数量加减 +- 状态筛选 +- 返回上页 + +--- + +## 7. 禁止事项 + +你不允许做以下事情: + +### 7.1 不允许擅自改变信息架构 +例如: +- 把 `堂食扫码确认页` 改成 Tab 页面 +- 把 `购物车抽屉` 改成完整页面,且没有理由 +- 把 `会员中心` 合并进 `我的` 而取消独立页面 + +### 7.2 不允许擅自删减关键业务页面 +以下页面是必须存在的: +- 首页 +- 点餐页 +- 订单页 +- 我的页 +- 商品详情抽屉 +- 购物车抽屉 +- 结算确认页 +- 支付成功页 +- 订单详情页 +- 退款申请页 +- 评价页 +- 会员中心页 +- 积分商城页 +- 储值充值页 +- 次卡页 +- 堂食扫码确认页 + +### 7.3 不允许引入不必要的业务创新 +例如: +- 社交分享裂变体系 +- 拼团、砍价、盲盒、社区内容 +- 与文档无关的推荐算法逻辑 +- 与文档无关的新支付方式 + +### 7.4 不允许只做静态截图式页面 +原型必须能点击流转,不是只拼静态画面。 + +--- + +## 8. 推荐工作方式 + +### 第一步:先做壳层 +先搭: +- 全局路由 +- TabBar +- 顶部导航 +- 通用容器 +- 安全区处理 + +### 第二步:先做核心组件 +先做: +- 商品卡 +- 订单卡 +- 金额明细卡 +- 状态标签 +- 购物车底栏 +- 抽屉容器 + +### 第三步:按 `plan.md` 的顺序做页面 +严格按 `plan.md` 的阶段执行。 +一个阶段完成后再进入下一个阶段。 + +### 第四步:每完成一个页面就自检 +自检内容: +- 路由是否正确 +- 区块是否完整 +- 交互是否能走通 +- 状态是否覆盖 +- 文档是否对齐 + +--- + +## 9. 完成标准 + +只有满足以下条件,才算页面完成: + +- 页面区块完整 +- 页面交互可用 +- 页面状态可切换或可表达 +- 页面和文档一致 +- 页面能接入主流程 + +只有满足以下条件,才算整套原型完成: + +- 首页 → 点餐 → 结算 → 支付成功 → 订单详情 能闭环 +- 订单 → 退款 / 评价 能闭环 +- 我的 → 会员 / 积分 / 储值 / 次卡 / 消息 / 帮助 能闭环 +- 堂食扫码 → 堂食点餐 → 结算 → 订单详情 能闭环 + +--- + +## 10. 本次你最终应该交付什么 + +你最终应该交付的是: +- 一套可点击的小程序原型 +- 页面结构与文档高度一致 +- 页面命名、路由、交互路径可被开发继续接手 +- 另一位开发或 AI 能在此基础上继续做真实代码实现 + +你当前的目标不是把代码做复杂,而是把原型做准确。 diff --git a/README.md b/README.md new file mode 100644 index 0000000..7756f6c --- /dev/null +++ b/README.md @@ -0,0 +1,49 @@ +# TakeoutSaaS C 端小程序原型文档仓库 + +本仓库用于承载 `TakeoutSaaS` 小程序 C 端的产品需求拆分文档。 +目标不是只描述“有什么功能”,而是让另一个 AI 或工程师可以直接照着 Markdown 文档,把页面结构 `1:1` 搭出来。 + +## 使用顺序 + +建议按下面顺序阅读并实施: + +1. `docs/01-文档导航与实施顺序.md` +2. `docs/02-信息架构与路由.md` +3. `docs/03-全局业务规则.md` +4. `docs/04-核心用户流程.md` +5. `docs/05-页面清单总表.md` +6. `docs/06-通用组件清单.md` +7. `docs/07-页面规格/` 下的单页文档 +8. `小程序C端功能需求文档.md` 作为总需求母文档补充参考 + +## 文档优先级 + +当文档之间出现描述差异时,按以下优先级处理: + +1. `docs/07-页面规格/` 单页规格 +2. `docs/03-全局业务规则.md` +3. `docs/02-信息架构与路由.md` +4. `小程序C端功能需求文档.md` + +## 当前仓库内容 + +- `小程序C端功能需求文档.md`:原始总需求文档 +- `docs/`:拆分后的实施文档 + +## 实施目标 + +另一个 AI 接手时,应至少能根据本仓库完成: + +- 小程序整体信息架构 +- Tab 页和二级页面结构 +- 弹层 / 抽屉 / 购物车等交互组件 +- 外卖、自提、堂食三场景页面切换 +- 会员、优惠、积分、储值、次卡等资产页面 +- 订单、退款、评价等履约和售后页面 + +## 当前约定 + +- 底部 Tab 固定为:`首页`、`点餐`、`订单`、`我的` +- 堂食采用 `扫码直达 + 二级页面确认`,不作为独立 Tab +- 本仓库当前只包含文档,不包含前端代码 + diff --git a/docs/01-文档导航与实施顺序.md b/docs/01-文档导航与实施顺序.md new file mode 100644 index 0000000..ba20f25 --- /dev/null +++ b/docs/01-文档导航与实施顺序.md @@ -0,0 +1,88 @@ +# 文档导航与实施顺序 + +## 1. 文档目的 + +本套文档的目标是把一份较大的总需求,拆成可执行的页面与组件规格。 +要求是:另一个 AI 在不反复追问的情况下,可以根据这里的 Markdown 文件直接搭页面骨架、组织路由、规划交互和状态。 + +## 2. 推荐阅读顺序 + +### 第一步:先理解范围 +- `小程序C端功能需求文档.md` +- `docs/02-信息架构与路由.md` +- `docs/03-全局业务规则.md` + +### 第二步:再理解链路 +- `docs/04-核心用户流程.md` +- `docs/05-页面清单总表.md` + +### 第三步:开始搭页面 +- `docs/06-通用组件清单.md` +- `docs/07-页面规格/` 下的单页文档 + +## 3. 页面实施建议顺序 + +建议另一位 AI 按下面顺序实现: + +1. 先搭全局骨架 + - TabBar + - 页面导航框架 + - 顶部导航 + - 通用按钮、卡片、列表、状态标签 +2. 再搭交易主链路 + - 首页 + - 点餐页 + - 商品详情抽屉 + - 购物车抽屉 + - 结算确认页 + - 支付成功页 +3. 再搭履约与售后 + - 订单页 + - 订单详情页 + - 退款申请页 + - 退款详情页 + - 评价页 +4. 再搭资产与增长 + - 我的页 + - 领券中心页 + - 会员中心页 + - 积分商城页 + - 储值充值页 + - 次卡页 +5. 最后搭辅助页 + - 门店选择页 + - 地址管理页 + - 消息中心页 + - 帮助中心页 + - 堂食扫码确认页 + - 秒杀活动页 + - 限时折扣活动页 + +## 4. 文档使用规则 + +### 4.1 页面规格优先 +如果某个页面的单页规格文档与总文档描述不同,以单页规格为准。 + +### 4.2 结构先于视觉 +本套文档优先定义: +- 页面区块顺序 +- 页面承载的业务对象 +- 关键交互 +- 页面状态 + +视觉风格可以后续统一,但结构不能偏离。 + +### 4.3 先还原,再优化 +另一位 AI 的任务优先是“把页面按规格还原出来”,而不是先做风格创新。 +如果规格没有要求,不要擅自增加新的业务功能。 + +## 5. 交付标准 + +如果页面是按本套文档完成的,应满足以下要求: + +- 页面层级、路由、入口与出口清晰 +- 页面从上到下的区块顺序与文档一致 +- 每个区块具备文档要求的字段与交互 +- 页面具备默认态、空态、异常态、禁用态等必要状态 +- 业务对象和后台配置关系清晰可追溯 + diff --git a/docs/02-信息架构与路由.md b/docs/02-信息架构与路由.md new file mode 100644 index 0000000..e11401a --- /dev/null +++ b/docs/02-信息架构与路由.md @@ -0,0 +1,86 @@ +# 信息架构与路由 + +## 1. 顶层信息架构 + +小程序采用 `4 个 Tab + 若干二级页面 + 若干弹层 / 抽屉组件` 的结构。 + +### 1.1 Tab 页面 + +| 编码 | 页面名称 | 路由建议 | 页面层级 | 说明 | +| --- | --- | --- | --- | --- | +| `T01` | 首页 | `pages/tab/home/index` | Tab | 选店、活动导流、推荐 | +| `T02` | 点餐 | `pages/tab/menu/index` | Tab | 商品浏览、加购、结算入口 | +| `T03` | 订单 | `pages/tab/orders/index` | Tab | 订单列表、履约、售后 | +| `T04` | 我的 | `pages/tab/me/index` | Tab | 资产、消息、服务、复购 | + +### 1.2 二级页面 + +| 编码 | 页面名称 | 路由建议 | 页面层级 | 入口来源 | +| --- | --- | --- | --- | --- | +| `P01` | 门店选择页 | `pages/store/select/index` | 二级页 | 首页、点餐页 | +| `P02` | 地址管理页 | `pages/address/list/index` | 二级页 | 我的、结算页 | +| `P03` | 结算确认页 | `pages/checkout/index` | 二级页 | 点餐页 | +| `P04` | 支付成功页 | `pages/payment/success/index` | 二级页 | 结算确认页 | +| `P05` | 订单详情页 | `pages/order/detail/index` | 二级页 | 订单页、支付成功页 | +| `P06` | 退款申请页 | `pages/order/refund/apply/index` | 二级页 | 订单详情页 | +| `P07` | 退款详情页 | `pages/order/refund/detail/index` | 二级页 | 订单页、订单详情页 | +| `P08` | 评价页 | `pages/review/create/index` | 二级页 | 订单详情页 | +| `P09` | 领券中心页 | `pages/coupon/center/index` | 二级页 | 首页、我的 | +| `P10` | 秒杀活动页 | `pages/activity/seckill/index` | 二级页 | 首页、点餐页 | +| `P11` | 限时折扣活动页 | `pages/activity/flash-sale/index` | 二级页 | 首页、点餐页 | +| `P12` | 会员中心页 | `pages/member/center/index` | 二级页 | 我的 | +| `P13` | 积分商城页 | `pages/points/mall/index` | 二级页 | 我的 | +| `P14` | 储值充值页 | `pages/prepaid/index` | 二级页 | 我的 | +| `P15` | 次卡页 | `pages/pass-card/index` | 二级页 | 我的 | +| `P16` | 消息中心页 | `pages/message/center/index` | 二级页 | 我的 | +| `P17` | 帮助中心页 | `pages/help/center/index` | 二级页 | 我的 | +| `P18` | 堂食扫码确认页 | `pages/dine-in/confirm/index` | 二级页 | 扫码入口、首页 | + +### 1.3 弹层 / 抽屉 / 组件级页面 + +| 编码 | 名称 | 建议形态 | 所属页面 | 说明 | +| --- | --- | --- | --- | --- | +| `C01` | 商品详情抽屉 | 底部抽屉 / 右滑抽屉 | 点餐页 | 规格、加料、数量选择 | +| `C02` | 购物车抽屉 | 底部抽屉 | 点餐页 | 已选商品清单 | +| `C03` | 登录授权弹层 | 中央弹窗 / 底部弹层 | 全局 | 订单与资产前拦截 | +| `C04` | 优惠选择弹层 | 底部抽屉 | 结算页 | 券、积分、余额选择 | +| `C05` | 支付方式弹层 | 底部抽屉 | 结算页 | 微信支付 / 余额支付 | +| `C06` | 地址选择抽屉 | 底部抽屉 | 结算页 | 快捷切换地址 | + +## 2. 页面层级关系 + +### 2.1 主链路关系 + +`首页 / 点餐 / 我的` → `门店选择` +`点餐` → `商品详情抽屉` → `购物车抽屉` → `结算确认页` → `支付成功页` → `订单详情页` +`订单页` → `订单详情页` → `退款申请页 / 评价页` +`我的` → `会员中心 / 积分商城 / 储值充值 / 次卡 / 消息中心 / 帮助中心` + +### 2.2 堂食链路关系 + +`扫码` → `堂食扫码确认页` → `点餐页(堂食场景)` → `商品详情抽屉` → `购物车抽屉` → `结算确认页` → `订单详情页` + +## 3. Tab 与二级页切换规则 + +- Tab 页面之间通过底部导航切换 +- 二级页面统一采用顶部导航栏返回 +- `商品详情抽屉` 和 `购物车抽屉` 不单独占用路由栈 +- `结算确认页`、`订单详情页`、`会员中心页` 等重要业务页使用完整页面承载 + +## 4. 页面显示规则 + +### 4.1 Tab 页面 +- 保持底部 TabBar 可见 +- 顶部导航不显示返回按钮 +- 页面滚动位置可按产品需要保留 + +### 4.2 二级页面 +- 显示顶部导航和返回按钮 +- 进入后覆盖当前 Tab 内容 +- 返回时回到来源页面 + +### 4.3 抽屉与弹层 +- 不应中断当前页面上下文 +- 应支持手势关闭 / 点击遮罩关闭(支付与关键确认除外) +- 关闭后保留当前页面已选状态 + diff --git a/docs/03-全局业务规则.md b/docs/03-全局业务规则.md new file mode 100644 index 0000000..da56526 --- /dev/null +++ b/docs/03-全局业务规则.md @@ -0,0 +1,164 @@ +# 全局业务规则 + +## 1. 用户身份与登录 + +### 1.1 可匿名浏览的范围 +- 首页 +- 门店选择页 +- 点餐页基础浏览 +- 商品详情查看 + +### 1.2 必须登录 / 绑定手机号的动作 +- 提交订单 +- 使用优惠券、积分、储值、次卡 +- 查看“我的”资产 +- 查看消息中心 +- 提交退款申请 +- 提交评价 + +### 1.3 登录拦截方式 +- 优先使用 `C03 登录授权弹层` +- 拦截后登录成功,应返回原业务场景继续执行 + +## 2. 门店与场景规则 + +### 2.1 场景枚举 + +| 值 | 名称 | 说明 | +| --- | --- | --- | +| `delivery` | 外卖配送 | 需要地址、配送范围和配送费 | +| `pickup` | 到店自提 | 需要取餐时间、取餐人信息 | +| `dine_in` | 堂食扫码 | 需要门店和桌号 | + +### 2.2 门店选择规则 +- 顾客必须在“某一家门店”下点单 +- 同一时间购物车只属于一个门店 + 一个场景 +- 切换门店时,应提示当前购物车可能清空 + +### 2.3 堂食规则 +- 堂食优先由扫码进入 +- 扫码后自动识别门店与桌号 +- 堂食场景默认不展示配送地址与配送费模块 + +## 3. 商品与价格规则 + +### 3.1 商品展示规则 +- 商品按分类展示 +- 支持热销、招牌、新品、推荐等标签 +- 商品在以下情况下显示不可售: + - 售罄 + - 下架 + - 超出供应时段 + - 当前场景不可售 + +### 3.2 SKU 与规格规则 +- 规格做法与加料均在商品详情抽屉中完成 +- 当商品启用多规格时,价格与库存以 SKU 为准 +- 如果规格变化导致库存不足,应立即提示 + +### 3.3 费用结构 + +结算时至少展示以下金额项: +- 商品金额 +- 打包费 +- 餐具费 +- 配送费 +- 优惠减免 +- 实付金额 + +## 4. 优惠与资产规则 + +### 4.1 资产类型 + +| 类型 | 说明 | +| --- | --- | +| 优惠券 | 满减券、折扣券、免配送费券 | +| 积分 | 获取、抵扣、兑换 | +| 储值余额 | 充值后可支付订单 | +| 次卡 | 对特定商品或分类核销 | +| 会员等级 | 折扣、积分倍率、生日权益、会员日权益 | + +### 4.2 资产使用原则 +- 顾客端只负责展示可用资产和命中结果 +- 具体叠加、互斥、优先级由后台规则决定 +- 若资产不可用,必须给出原因说明 + +### 4.3 典型不可用原因 +- 未达到金额门槛 +- 不适用当前门店 +- 不适用当前场景 +- 不适用当前商品 +- 已过期 +- 已使用 + +## 5. 订单状态规则 + +### 5.1 订单状态定义 + +| 状态值 | 中文名称 | 说明 | +| --- | --- | --- | +| `pending_pay` | 待支付 | 已提交订单,未完成支付 | +| `paid_wait_accept` | 已支付待接单 | 等待商家处理 | +| `preparing` | 制作中 | 商家已接单,正在备餐 | +| `delivering` | 配送中 | 外卖场景履约中 | +| `wait_pickup` | 待自提 | 自提场景等待到店取餐 | +| `dine_in_serving` | 堂食进行中 | 堂食场景订单进行中 | +| `finished` | 已完成 | 订单已履约完成 | +| `refunding` | 退款中 | 售后处理中 | +| `refunded` | 已退款 | 退款已完成 | +| `closed` | 已关闭 | 超时取消或主动取消 | + +### 5.2 订单动作与状态对应 +- `待支付`:可继续支付、取消订单 +- `已支付待接单 / 制作中`:可查看详情、催单、部分场景可申请退款 +- `配送中 / 待自提 / 堂食进行中`:可查看履约信息 +- `已完成`:可评价、再来一单 +- `退款中 / 已退款`:可查看退款详情 + +## 6. 消息通知规则 + +### 6.1 消息分类 + +| 类型 | 内容范围 | +| --- | --- | +| 订单消息 | 支付成功、接单、出餐、配送、退款处理 | +| 营销消息 | 发券提醒、活动开始、会员日提醒 | +| 系统通知 | 门店公告、规则更新、服务通知 | + +### 6.2 消息行为 +- 未读消息需要角标或红点提示 +- 进入消息详情或打开消息中心后,消息可置为已读 +- 消息应能跳转到对应业务页面 + +## 7. 页面通用状态 + +所有列表页和详情页都要考虑以下状态: + +- 加载态 +- 空态 +- 错误态 +- 禁用态 +- 网络重试态 + +### 7.1 典型空态 +- 无门店可选 +- 当前分类无商品 +- 无可用优惠券 +- 无历史订单 +- 无消息 + +### 7.2 典型错误态 +- 网络异常 +- 定位失败 +- 支付失败 +- 加载订单失败 +- 退款提交失败 + +## 8. 通用交互约束 + +- 金额统一用 `¥` 展示 +- 主要 CTA 按钮固定在页面底部或区块底部 +- 结算相关页面必须把金额明细解释清楚 +- 场景切换、门店切换、地址切换属于高风险动作,需要在必要时提示购物车清空 +- 同一页面的主要操作按钮文案要稳定,不同页面不要频繁变形 + diff --git a/docs/04-核心用户流程.md b/docs/04-核心用户流程.md new file mode 100644 index 0000000..97f9482 --- /dev/null +++ b/docs/04-核心用户流程.md @@ -0,0 +1,113 @@ +# 核心用户流程 + +## 1. F01 外卖下单流程 + +### 流程目标 +让用户从“选门店”顺利进入“外卖点餐”,完成地址校验、优惠结算和支付。 + +### 流程步骤 +1. 用户进入首页 +2. 系统尝试定位并推荐最近门店 +3. 用户确认或切换门店 +4. 用户选择 `外卖` 场景 +5. 用户进入点餐页浏览商品 +6. 用户打开商品详情抽屉选择规格、加料、数量 +7. 用户加入购物车 +8. 用户打开购物车并点击去结算 +9. 进入结算确认页 +10. 选择或新增配送地址 +11. 系统校验配送范围、起送价、配送费 +12. 用户选择优惠券 / 积分 / 储值等资产 +13. 用户确认金额并支付 +14. 进入支付成功页 +15. 跳转订单详情查看履约进度 + +### 核心判断点 +- 地址是否在配送范围内 +- 是否达到起送门槛 +- 优惠是否可用 +- 当前门店是否营业 + +## 2. F02 自提下单流程 + +### 流程目标 +让用户选择门店和自提时间,完成到店取餐订单。 + +### 流程步骤 +1. 用户进入首页或点餐页 +2. 选择 `自提` 场景 +3. 浏览商品并加入购物车 +4. 进入结算确认页 +5. 选择自提时间段 +6. 填写取餐人信息 +7. 使用优惠资产 +8. 完成支付 +9. 支付成功页展示取餐时间与取餐入口 +10. 订单详情页展示取餐码和门店信息 + +### 核心判断点 +- 当前门店是否支持自提 +- 所选时间段是否可预约 +- 是否满足活动与优惠使用条件 + +## 3. F03 堂食扫码点餐流程 + +### 流程目标 +让顾客通过扫码快速绑定桌号,进入堂食点餐和加菜流程。 + +### 流程步骤 +1. 用户扫码进入小程序 +2. 进入堂食扫码确认页 +3. 系统展示门店、桌号、当前桌台信息 +4. 用户确认进入堂食点餐 +5. 点餐页切换为 `堂食` 场景 +6. 用户选择商品、规格、加料并加入购物车 +7. 进入结算确认页 +8. 页面默认带出堂食门店与桌号 +9. 用户确认订单并支付 +10. 订单详情展示桌号和堂食状态 +11. 用户可再次进入点餐页继续加菜 + +### 核心判断点 +- 桌号是否有效 +- 当前桌是否可继续点单 +- 当前场景是否需要合单或追加订单展示 + +## 4. F04 售后与评价流程 + +### 流程目标 +让用户在订单完成后可以评价,在履约异常时可以申请退款。 + +### 流程步骤 A:退款 +1. 用户进入订单详情页 +2. 点击申请退款 +3. 进入退款申请页 +4. 填写退款原因与说明 +5. 提交退款申请 +6. 跳转退款详情页查看处理状态 + +### 流程步骤 B:评价 +1. 用户进入订单详情页 +2. 点击去评价 +3. 进入评价页 +4. 选择星级、输入评价、上传图片、选择匿名 +5. 提交评价 +6. 评价成功后返回订单详情或订单列表 + +## 5. F05 会员与资产流程 + +### 流程目标 +让用户在“我的”中查看和使用所有可用资产,并引导复购。 + +### 流程步骤 +1. 用户进入我的页 +2. 查看会员等级、优惠券、积分、储值、次卡摘要 +3. 按需进入二级页面 + - 领券中心 + - 会员中心 + - 积分商城 + - 储值充值 + - 次卡页 +4. 用户领取、充值、兑换或购买资产 +5. 返回点餐页或结算页使用资产 + diff --git a/docs/05-页面清单总表.md b/docs/05-页面清单总表.md new file mode 100644 index 0000000..403d21a --- /dev/null +++ b/docs/05-页面清单总表.md @@ -0,0 +1,72 @@ +# 页面清单总表 + +## 1. 页面总表 + +| 编码 | 页面名称 | 层级 | 优先级 | 场景 | 规格文件 | +| --- | --- | --- | --- | --- | --- | +| `T01` | 首页 | Tab | P0 | 全场景 | `docs/07-页面规格/01-Tab-首页.md` | +| `T02` | 点餐页 | Tab | P0 | 外卖 / 自提 / 堂食 | `docs/07-页面规格/02-Tab-点餐页.md` | +| `T03` | 订单页 | Tab | P0 | 全场景 | `docs/07-页面规格/03-Tab-订单页.md` | +| `T04` | 我的页 | Tab | P0 | 全场景 | `docs/07-页面规格/04-Tab-我的页.md` | +| `P01` | 门店选择页 | 二级页 | P1 | 全场景 | `docs/07-页面规格/05-门店选择页.md` | +| `P02` | 地址管理页 | 二级页 | P1 | 外卖 | `docs/07-页面规格/06-地址管理页.md` | +| `C01` | 商品详情抽屉 | 抽屉 | P0 | 点餐 | `docs/07-页面规格/07-商品详情抽屉.md` | +| `C02` | 购物车抽屉 | 抽屉 | P0 | 点餐 | `docs/07-页面规格/08-购物车抽屉.md` | +| `P03` | 结算确认页 | 二级页 | P0 | 外卖 / 自提 / 堂食 | `docs/07-页面规格/09-结算确认页.md` | +| `P04` | 支付成功页 | 二级页 | P0 | 全场景 | `docs/07-页面规格/10-支付成功页.md` | +| `P05` | 订单详情页 | 二级页 | P0 | 全场景 | `docs/07-页面规格/11-订单详情页.md` | +| `P06` | 退款申请页 | 二级页 | P1 | 订单售后 | `docs/07-页面规格/12-退款申请页.md` | +| `P07` | 退款详情页 | 二级页 | P1 | 订单售后 | `docs/07-页面规格/13-退款详情页.md` | +| `P08` | 评价页 | 二级页 | P1 | 已完成订单 | `docs/07-页面规格/14-评价页.md` | +| `P09` | 领券中心页 | 二级页 | P1 | 会员营销 | `docs/07-页面规格/15-领券中心页.md` | +| `P10` | 秒杀活动页 | 二级页 | P1 | 营销活动 | `docs/07-页面规格/16-秒杀活动页.md` | +| `P11` | 限时折扣活动页 | 二级页 | P1 | 营销活动 | `docs/07-页面规格/17-限时折扣活动页.md` | +| `P12` | 会员中心页 | 二级页 | P1 | 会员 | `docs/07-页面规格/18-会员中心页.md` | +| `P13` | 积分商城页 | 二级页 | P1 | 积分 | `docs/07-页面规格/19-积分商城页.md` | +| `P14` | 储值充值页 | 二级页 | P1 | 储值 | `docs/07-页面规格/20-储值充值页.md` | +| `P15` | 次卡页 | 二级页 | P1 | 次卡 | `docs/07-页面规格/21-次卡页.md` | +| `P16` | 消息中心页 | 二级页 | P1 | 全场景 | `docs/07-页面规格/22-消息中心页.md` | +| `P17` | 帮助中心页 | 二级页 | P2 | 全场景 | `docs/07-页面规格/23-帮助中心页.md` | +| `P18` | 堂食扫码确认页 | 二级页 | P0 | 堂食 | `docs/07-页面规格/24-堂食扫码确认页.md` | + +## 2. 组件级清单 + +| 编码 | 名称 | 优先级 | 规格文件 | +| --- | --- | --- | --- | +| `C01` | 商品详情抽屉 | P0 | `docs/07-页面规格/07-商品详情抽屉.md` | +| `C02` | 购物车抽屉 | P0 | `docs/07-页面规格/08-购物车抽屉.md` | + +## 3. 推荐实现顺序 + +### 第一阶段:交易闭环 +- `T01` 首页 +- `T02` 点餐页 +- `C01` 商品详情抽屉 +- `C02` 购物车抽屉 +- `P03` 结算确认页 +- `P04` 支付成功页 +- `T03` 订单页 +- `P05` 订单详情页 + +### 第二阶段:履约与售后 +- `P06` 退款申请页 +- `P07` 退款详情页 +- `P08` 评价页 + +### 第三阶段:资产与增长 +- `T04` 我的页 +- `P09` 领券中心页 +- `P10` 秒杀活动页 +- `P11` 限时折扣活动页 +- `P12` 会员中心页 +- `P13` 积分商城页 +- `P14` 储值充值页 +- `P15` 次卡页 + +### 第四阶段:辅助页 +- `P01` 门店选择页 +- `P02` 地址管理页 +- `P16` 消息中心页 +- `P17` 帮助中心页 +- `P18` 堂食扫码确认页 + diff --git a/docs/06-通用组件清单.md b/docs/06-通用组件清单.md new file mode 100644 index 0000000..34031cb --- /dev/null +++ b/docs/06-通用组件清单.md @@ -0,0 +1,69 @@ +# 通用组件清单 + +## 1. 说明 + +以下组件建议在实现时先抽象出来,避免每个页面重复拼装。 +页面规格文档会引用这些通用组件。 + +## 2. 全局组件 + +| 编码 | 组件名称 | 用途 | 必备状态 | +| --- | --- | --- | --- | +| `G01` | 顶部导航栏 | 二级页面返回、标题展示 | 默认态 | +| `G02` | 底部 TabBar | Tab 页面切换 | 选中 / 未选中 | +| `G03` | 页面空态卡片 | 列表为空时提示 | 图标 / 文案 / CTA | +| `G04` | 页面错误卡片 | 网络错误、加载失败时提示 | 错误文案 / 重试 | +| `G05` | 状态标签 Tag | 订单状态、活动状态、会员状态 | 多色标签 | + +## 3. 门店与场景组件 + +| 编码 | 组件名称 | 用途 | 使用页面 | +| --- | --- | --- | --- | +| `G10` | 门店切换条 | 显示当前门店,点击切换 | 首页、点餐页 | +| `G11` | 场景切换条 | 外卖 / 自提 / 堂食切换 | 首页、点餐页 | +| `G12` | 门店信息卡 | 地址、营业、距离、电话 | 首页、结算页、堂食确认页 | +| `G13` | 服务规则条 | 起送价、配送费、自提规则等 | 首页、点餐页、结算页 | + +## 4. 商品与购物车组件 + +| 编码 | 组件名称 | 用途 | 使用页面 | +| --- | --- | --- | --- | +| `G20` | 分类侧边栏 / 顶部分类条 | 分类浏览商品 | 点餐页 | +| `G21` | 商品卡片 | 展示图片、价格、标签、加购按钮 | 点餐页、活动页 | +| `G22` | 数量步进器 | 商品数量增减 | 点餐页、商品详情、购物车 | +| `G23` | 规格选项组 | 规格做法单选/多选 | 商品详情抽屉 | +| `G24` | 加料选项组 | 附加项选择 | 商品详情抽屉 | +| `G25` | 底部购物车栏 | 已选数量、金额、去结算按钮 | 点餐页 | +| `G26` | 购物车商品行 | 展示已选商品和规格组合 | 购物车抽屉 | + +## 5. 结算与订单组件 + +| 编码 | 组件名称 | 用途 | 使用页面 | +| --- | --- | --- | --- | +| `G30` | 地址卡片 | 展示收货地址或取餐信息 | 结算页 | +| `G31` | 费用明细卡 | 展示金额构成 | 结算页、订单详情页 | +| `G32` | 优惠资产单元格 | 展示优惠券 / 积分 / 余额入口 | 结算页 | +| `G33` | 订单摘要卡 | 展示门店、商品、金额、状态 | 订单页 | +| `G34` | 订单时间轴 | 展示履约节点 | 订单详情页、退款详情页 | +| `G35` | 固定底部操作栏 | 继续支付、催单、退款、评价等 CTA | 结算页、订单详情页 | + +## 6. 资产与服务组件 + +| 编码 | 组件名称 | 用途 | 使用页面 | +| --- | --- | --- | --- | +| `G40` | 用户头部卡 | 头像、昵称、会员等级 | 我的页、会员中心 | +| `G41` | 资产总览卡 | 券、积分、余额、次卡摘要 | 我的页 | +| `G42` | 资产列表项 | 进入券、积分、储值、次卡详情 | 我的页 | +| `G43` | 活动券卡片 | 满减券、折扣券、免配送费券 | 领券中心 | +| `G44` | 充值方案卡 | 展示充值金额、赠送金额、到账金额 | 储值充值页 | +| `G45` | 次卡卡片 | 展示次卡名称、剩余次数、有效期 | 次卡页 | +| `G46` | 消息列表项 | 展示消息标题、摘要、时间、未读状态 | 消息中心 | + +## 7. 通用实现要求 + +- 所有卡片组件需要支持禁用态或不可点击态 +- 列表项需要支持右侧箭头、辅助文案、角标等变化 +- 底部固定操作栏需要考虑安全区 +- 金额展示组件统一格式化 +- 状态标签颜色语义在整个应用中保持一致 + diff --git a/docs/07-页面规格/01-Tab-首页.md b/docs/07-页面规格/01-Tab-首页.md new file mode 100644 index 0000000..de5a44d --- /dev/null +++ b/docs/07-页面规格/01-Tab-首页.md @@ -0,0 +1,101 @@ +# T01 首页 + +- 页面编码:`T01` +- 页面层级:`Tab` +- 适用场景:`外卖 / 自提 / 堂食导流` +- 页面目标:完成选店、选场景、看活动、快速进入点餐 +- 主要依赖组件:`G02`、`G10`、`G11`、`G12`、`G13`、`G21` + +## 1. 页面结构(从上到下) + +1. 顶部信息区 +2. 门店切换条 +3. 场景切换条 +4. Banner 活动区 +5. 快捷入口区 +6. 推荐商品区 +7. 门店服务信息区 + +## 2. 区块说明 + +### 2.1 顶部信息区 +- 左侧显示当前位置 / 当前门店简称 +- 右侧显示消息入口 +- 点击门店或位置进入 `P01 门店选择页` +- 点击消息入口进入 `P16 消息中心页` + +### 2.2 门店切换条 +- 使用 `G10` +- 显示当前门店名称、营业状态、距离 +- 支持点击切换门店 + +### 2.3 场景切换条 +- 使用 `G11` +- 固定提供 `外卖`、`自提`、`堂食` 三项 +- 切换后刷新下方活动和推荐内容 + +### 2.4 Banner 活动区 +- 展示门店主推活动轮播 +- Banner 点击可跳转: + - `P09 领券中心页` + - `P10 秒杀活动页` + - `P11 限时折扣活动页` + - `P12 会员中心页` + +### 2.5 快捷入口区 +- 建议 2 行网格或 1 行宫格 +- 包含以下入口: + - 新客有礼 + - 领券中心 + - 满减活动 + - 秒杀专区 + - 限时折扣 + - 储值充值 + - 次卡专区 + - 会员中心 + +### 2.6 推荐商品区 +- 按顺序展示: + - 热销推荐 + - 套餐推荐 + - 复购推荐 + - 猜你喜欢 +- 每个区块使用横滑或纵向卡片列表 +- 商品卡点击进入 `C01 商品详情抽屉` + +### 2.7 门店服务信息区 +- 使用 `G12` + `G13` +- 展示: + - 营业时间 + - 配送范围 / 起送价 / 配送费 + - 自提规则 + - 堂食规则 + - 联系门店 + - 到店导航 + +## 3. 页面主动作 + +- 切换门店 +- 切换场景 +- 进入点餐页 +- 进入活动页 +- 打开商品详情 + +## 4. 页面状态 + +### 默认态 +- 有门店、有活动、有推荐商品 + +### 空态 +- 无可用门店时展示空态,并提供重新定位 +- 无活动时隐藏活动区,保留推荐区 + +### 异常态 +- 定位失败时提示手动选店 +- 门店休息时展示“休息中”,但可保留浏览 + +## 5. 实现备注 + +- 首页优先是“导流页”,不是深度浏览页 +- 推荐商品只展示摘要,不在首页直接承载复杂选配 + diff --git a/docs/07-页面规格/02-Tab-点餐页.md b/docs/07-页面规格/02-Tab-点餐页.md new file mode 100644 index 0000000..8489f71 --- /dev/null +++ b/docs/07-页面规格/02-Tab-点餐页.md @@ -0,0 +1,94 @@ +# T02 点餐页 + +- 页面编码:`T02` +- 页面层级:`Tab` +- 适用场景:`外卖 / 自提 / 堂食` +- 页面目标:完成商品浏览、选配、加购和进入结算 +- 主要依赖组件:`G10`、`G11`、`G20`、`G21`、`G22`、`G25` + +## 1. 页面结构(从上到下) + +1. 顶部门店条 +2. 场景切换条 +3. 搜索与活动提示条 +4. 菜单主区域 +5. 底部购物车栏 + +## 2. 区块说明 + +### 2.1 顶部门店条 +- 显示当前门店名称、营业状态 +- 点击进入 `P01 门店选择页` +- 门店切换需要提示购物车风险 + +### 2.2 场景切换条 +- 显示 `外卖 / 自提 / 堂食` +- 切换时刷新: + - 商品可售状态 + - 服务规则说明 + - 价格与优惠提示 + +### 2.3 搜索与活动提示条 +- 搜索框:按商品名搜索 +- 活动条:显示当前命中的满减、秒杀、折扣等活动摘要 + +### 2.4 菜单主区域 +- 左侧或顶部为分类导航 `G20` +- 右侧或主体为商品列表 +- 每个商品卡 `G21` 展示: + - 图片 + - 名称 + - 描述摘要 + - 标签 + - 价格 / 划线价 + - 加购按钮 +- 点击商品卡进入 `C01 商品详情抽屉` +- 直接点击步进器可快速加购默认 SKU + +### 2.5 底部购物车栏 +- 使用 `G25` +- 展示: + - 已选商品件数 + - 当前总金额 + - 差多少起送 / 差多少免配送费 + - 去结算按钮 +- 点击购物车区域打开 `C02 购物车抽屉` + +## 3. 场景差异规则 + +### 外卖场景 +- 突出显示配送费、起送价、预计送达 + +### 自提场景 +- 突出显示自提优惠、自提时段说明 + +### 堂食场景 +- 突出显示桌号、当前门店、可加菜提示 + +## 4. 页面主动作 + +- 切换门店 +- 切换场景 +- 搜索商品 +- 打开商品详情抽屉 +- 打开购物车抽屉 +- 进入结算确认页 + +## 5. 页面状态 + +### 默认态 +- 有分类、有商品、有活动提示 + +### 空态 +- 某分类无商品时,右侧显示空态 +- 搜索无结果时,提供清空搜索入口 + +### 异常态 +- 当前门店休息:商品可浏览但不能结算 +- 商品售罄:显示禁用状态,不能加购 + +## 6. 实现备注 + +- 点餐页是整套小程序最核心页面,需要优先保证信息密度和操作效率 +- 商品详情、购物车应通过抽屉承载,尽量不跳转新页面 + diff --git a/docs/07-页面规格/03-Tab-订单页.md b/docs/07-页面规格/03-Tab-订单页.md new file mode 100644 index 0000000..48f0f33 --- /dev/null +++ b/docs/07-页面规格/03-Tab-订单页.md @@ -0,0 +1,64 @@ +# T03 订单页 + +- 页面编码:`T03` +- 页面层级:`Tab` +- 适用场景:`全场景` +- 页面目标:让用户快速找到订单,并查看履约、售后和复购入口 +- 主要依赖组件:`G05`、`G33` + +## 1. 页面结构(从上到下) + +1. 顶部状态筛选区 +2. 场景筛选区(可选) +3. 订单列表区 + +## 2. 区块说明 + +### 2.1 顶部状态筛选区 +- 建议分段控件或横向标签 +- 至少包含: + - 全部 + - 待支付 + - 进行中 + - 已完成 + - 退款售后 + +### 2.2 场景筛选区 +- 可按 `外卖 / 自提 / 堂食` 进行二次筛选 +- 也可与状态整合为一个过滤区 + +### 2.3 订单列表区 +- 每张订单卡使用 `G33` +- 订单卡必须展示: + - 门店名称 + - 订单状态 + - 场景标签 + - 商品摘要 + - 订单金额 + - 下单时间 + - 主要操作按钮 +- 订单卡点击进入 `P05 订单详情页` + +## 3. 订单卡动作规则 + +- `待支付`:继续支付、取消订单 +- `进行中`:查看详情、催单、查看取餐码 +- `已完成`:评价、再来一单 +- `退款售后`:查看退款详情 + +## 4. 页面状态 + +### 默认态 +- 有订单列表 + +### 空态 +- 某筛选条件下无订单时,展示空态和“去点餐” CTA + +### 异常态 +- 加载失败时展示重试 + +## 5. 实现备注 + +- 订单页重点是列表可扫读性 +- 一屏内要能快速看懂状态、门店、金额和下一步动作 + diff --git a/docs/07-页面规格/04-Tab-我的页.md b/docs/07-页面规格/04-Tab-我的页.md new file mode 100644 index 0000000..4ca05f2 --- /dev/null +++ b/docs/07-页面规格/04-Tab-我的页.md @@ -0,0 +1,78 @@ +# T04 我的页 + +- 页面编码:`T04` +- 页面层级:`Tab` +- 适用场景:`全场景` +- 页面目标:集中展示用户身份、资产、服务和复购入口 +- 主要依赖组件:`G40`、`G41`、`G42` + +## 1. 页面结构(从上到下) + +1. 用户头部卡 +2. 资产总览区 +3. 订单快捷入口区 +4. 会员与增长入口区 +5. 服务入口区 +6. 复购推荐区 + +## 2. 区块说明 + +### 2.1 用户头部卡 +- 使用 `G40` +- 展示: + - 头像 + - 昵称 + - 会员等级 + - 成长值进度摘要 + +### 2.2 资产总览区 +- 使用 `G41` +- 展示: + - 优惠券数量 + - 积分余额 + - 储值余额 + - 次卡数量 / 剩余次数摘要 + +### 2.3 订单快捷入口区 +- 展示: + - 待支付 + - 进行中 + - 已完成 + - 售后 / 退款 +- 点击后跳转 `T03 订单页` 对应筛选状态 + +### 2.4 会员与增长入口区 +- 使用 `G42` +- 入口包含: + - 会员中心 + - 领券中心 + - 积分商城 + - 储值充值 + - 次卡页 + +### 2.5 服务入口区 +- 包含: + - 地址管理 + - 消息中心 + - 帮助中心 + - 联系客服 + - 协议与隐私 + +### 2.6 复购推荐区 +- 展示最近订单和常点商品 +- 提供“再来一单”入口 + +## 3. 页面状态 + +### 登录态 +- 展示完整资产与服务 + +### 未登录态 +- 展示基础入口 +- 资产卡片改为“登录后查看” + +## 4. 实现备注 + +- “我的”页要兼顾资产页和服务页 +- 顶部头部卡与资产总览区需要在视觉上形成核心焦点 + diff --git a/docs/07-页面规格/05-门店选择页.md b/docs/07-页面规格/05-门店选择页.md new file mode 100644 index 0000000..e0f91cf --- /dev/null +++ b/docs/07-页面规格/05-门店选择页.md @@ -0,0 +1,52 @@ +# P01 门店选择页 + +- 页面编码:`P01` +- 页面层级:`二级页` +- 页面目标:让用户选择合适门店,并明确当前场景是否可服务 +- 主要依赖组件:`G01`、`G12` + +## 1. 页面结构(从上到下) + +1. 顶部导航栏 +2. 搜索区 +3. 场景筛选区 +4. 当前定位结果区 +5. 门店列表区 + +## 2. 区块说明 + +### 2.1 搜索区 +- 支持按门店名称、商圈关键词搜索 + +### 2.2 场景筛选区 +- 按 `外卖 / 自提 / 堂食` 过滤门店 + +### 2.3 当前定位结果区 +- 显示当前定位城市 / 坐标结果 +- 提供重新定位动作 + +### 2.4 门店列表区 +- 每个门店卡展示: + - 门店名称 + - 距离 + - 营业状态 + - 地址 + - 场景支持标签 + - 起送价 / 配送费 / 自提 / 堂食提示 +- 点击门店即切换当前门店并返回来源页 + +## 3. 页面状态 + +### 默认态 +- 有门店列表 + +### 空态 +- 搜索无结果或当前区域无门店 + +### 异常态 +- 定位失败时只展示手动选店模式 + +## 4. 实现备注 + +- 门店列表要把“能否下单”说清楚,不仅展示名字 + diff --git a/docs/07-页面规格/06-地址管理页.md b/docs/07-页面规格/06-地址管理页.md new file mode 100644 index 0000000..fce82cc --- /dev/null +++ b/docs/07-页面规格/06-地址管理页.md @@ -0,0 +1,47 @@ +# P02 地址管理页 + +- 页面编码:`P02` +- 页面层级:`二级页` +- 页面目标:管理顾客常用收货地址,并服务外卖结算 +- 主要依赖组件:`G01` + +## 1. 页面结构(从上到下) + +1. 顶部导航栏 +2. 地址列表区 +3. 新增地址按钮 + +## 2. 区块说明 + +### 2.1 地址列表区 +- 每个地址项展示: + - 收货人姓名 + - 手机号 + - 详细地址 + - 默认地址标签 + - 适用范围提示(可选) +- 支持动作: + - 设为默认 + - 编辑 + - 删除 + - 选择用于本次结算 + +### 2.2 新增地址按钮 +- 固定在页面底部或列表底部 +- 点击后进入编辑态(可独立页或表单弹层) + +## 3. 页面状态 + +### 默认态 +- 展示已有地址 + +### 空态 +- 无地址时展示空态和新增 CTA + +### 异常态 +- 地址保存失败 / 删除失败时需要提示 + +## 4. 实现备注 + +- 如果另一位 AI 需要拆成“地址列表页 + 地址编辑页”,可以追加子页面,但当前文档以一个管理页为主 + diff --git a/docs/07-页面规格/07-商品详情抽屉.md b/docs/07-页面规格/07-商品详情抽屉.md new file mode 100644 index 0000000..2ed5933 --- /dev/null +++ b/docs/07-页面规格/07-商品详情抽屉.md @@ -0,0 +1,58 @@ +# C01 商品详情抽屉 + +- 页面编码:`C01` +- 页面层级:`组件级抽屉` +- 页面目标:完成商品选配,并把用户送入购物车 +- 主要依赖组件:`G22`、`G23`、`G24` + +## 1. 抽屉结构(从上到下) + +1. 商品图片区 +2. 商品基础信息区 +3. 规格做法区 +4. 加料区 +5. 数量与金额区 +6. 底部主操作区 + +## 2. 区块说明 + +### 2.1 商品图片区 +- 展示主图,允许左右切换附图(可选) + +### 2.2 商品基础信息区 +- 展示: + - 商品名称 + - 标签 + - 描述 + - 售价 + - 划线价 + - 月售 / 热销信息(可选) + +### 2.3 规格做法区 +- 使用 `G23` +- 支持单选 / 多组单选 +- 选择后实时刷新价格和库存 + +### 2.4 加料区 +- 使用 `G24` +- 支持多选和附加价格 + +### 2.5 数量与金额区 +- 使用 `G22` +- 实时展示当前组合总价 + +### 2.6 底部主操作区 +- 主按钮:加入购物车 +- 次按钮:立即购买(可选) + +## 3. 状态规则 + +- 规格未选全时,主按钮不可用 +- 商品售罄时,显示不可售状态 +- 库存不足时,数量步进器受限 + +## 4. 实现备注 + +- 抽屉应保留当前点餐页上下文 +- 关闭抽屉不应导致列表位置丢失 + diff --git a/docs/07-页面规格/08-购物车抽屉.md b/docs/07-页面规格/08-购物车抽屉.md new file mode 100644 index 0000000..139c678 --- /dev/null +++ b/docs/07-页面规格/08-购物车抽屉.md @@ -0,0 +1,51 @@ +# C02 购物车抽屉 + +- 页面编码:`C02` +- 页面层级:`组件级抽屉` +- 页面目标:集中展示当前已选商品,并提供进入结算的最后一步确认 +- 主要依赖组件:`G22`、`G26` + +## 1. 抽屉结构(从上到下) + +1. 购物车头部 +2. 商品列表区 +3. 优惠与凑单提示区 +4. 底部结算区 + +## 2. 区块说明 + +### 2.1 购物车头部 +- 显示当前门店名 +- 显示“已选商品”标题 +- 提供清空购物车按钮 + +### 2.2 商品列表区 +- 每个商品行使用 `G26` +- 展示: + - 商品名 + - 规格摘要 + - 加料摘要 + - 单价 + - 数量步进器 + +### 2.3 优惠与凑单提示区 +- 展示: + - 满减差额 + - 起送差额 + - 免配送费差额 + - 已命中活动摘要 + +### 2.4 底部结算区 +- 展示总金额 +- 主按钮:去结算 + +## 3. 状态规则 + +- 空购物车时展示空态 +- 商品失效时需标记并禁止结算,或提示清理失效商品 + +## 4. 实现备注 + +- 购物车抽屉必须支持快速修改数量 +- 去结算按钮应只保留一个主路径,不做复杂分支 + diff --git a/docs/07-页面规格/09-结算确认页.md b/docs/07-页面规格/09-结算确认页.md new file mode 100644 index 0000000..5a1237d --- /dev/null +++ b/docs/07-页面规格/09-结算确认页.md @@ -0,0 +1,72 @@ +# P03 结算确认页 + +- 页面编码:`P03` +- 页面层级:`二级页` +- 适用场景:`外卖 / 自提 / 堂食` +- 页面目标:让用户确认履约信息、优惠和金额,并完成支付 +- 主要依赖组件:`G01`、`G30`、`G31`、`G32`、`G35` + +## 1. 页面结构(从上到下) + +1. 顶部导航栏 +2. 场景信息卡 +3. 商品清单区 +4. 优惠资产区 +5. 备注与附加信息区 +6. 费用明细区 +7. 底部支付栏 + +## 2. 区块说明 + +### 2.1 场景信息卡 +- 外卖:展示收货地址、预计送达 +- 自提:展示门店、自提时间、取餐人信息 +- 堂食:展示门店、桌号、堂食说明 + +### 2.2 商品清单区 +- 展示商品、规格、加料、数量、小计 + +### 2.3 优惠资产区 +- 使用 `G32` +- 入口包含: + - 优惠券选择 + - 积分抵扣 + - 储值余额支付 + - 次卡核销(适用时) + +### 2.4 备注与附加信息区 +- 订单备注 +- 餐具选择 +- 其他补充字段(按场景可选) + +### 2.5 费用明细区 +- 使用 `G31` +- 必须清楚展示所有金额构成 + +### 2.6 底部支付栏 +- 使用 `G35` +- 左侧显示实付金额 +- 右侧主按钮:提交订单并支付 + +## 3. 场景差异 + +### 外卖 +- 必须完成地址校验、起送价校验 + +### 自提 +- 必须完成自提时间选择和取餐人信息校验 + +### 堂食 +- 必须展示桌号,不展示配送相关字段 + +## 4. 页面状态 + +- 优惠不可用时展示原因 +- 地址超范围时禁止提交 +- 门店休息时禁止支付 + +## 5. 实现备注 + +- 结算页核心是“信息确认 + 金额确认” +- 所有会影响实付金额的项目都必须可见 + diff --git a/docs/07-页面规格/10-支付成功页.md b/docs/07-页面规格/10-支付成功页.md new file mode 100644 index 0000000..e6b5eba --- /dev/null +++ b/docs/07-页面规格/10-支付成功页.md @@ -0,0 +1,42 @@ +# P04 支付成功页 + +- 页面编码:`P04` +- 页面层级:`二级页` +- 页面目标:明确告诉用户支付已完成,并引导后续查看订单或继续点单 +- 主要依赖组件:`G01` + +## 1. 页面结构(从上到下) + +1. 成功状态区 +2. 订单摘要区 +3. 场景关键信息区 +4. 后续动作区 + +## 2. 区块说明 + +### 2.1 成功状态区 +- 成功图标 +- 标题:支付成功 +- 副文案:订单已提交,等待商家处理 + +### 2.2 订单摘要区 +- 展示订单号、门店名称、支付金额 + +### 2.3 场景关键信息区 +- 外卖:预计送达时间 +- 自提:取餐时间和取餐说明 +- 堂食:桌号与用餐状态 + +### 2.4 后续动作区 +- 查看订单详情 +- 继续点餐 / 再逛逛 + +## 3. 页面状态 + +- 支付成功为唯一主状态 +- 若返回支付结果异常,应回退到结算页或订单详情页校验状态 + +## 4. 实现备注 + +- 成功页停留时间不宜过长,应明确给出下一步 CTA + diff --git a/docs/07-页面规格/11-订单详情页.md b/docs/07-页面规格/11-订单详情页.md new file mode 100644 index 0000000..f1ab0e8 --- /dev/null +++ b/docs/07-页面规格/11-订单详情页.md @@ -0,0 +1,71 @@ +# P05 订单详情页 + +- 页面编码:`P05` +- 页面层级:`二级页` +- 页面目标:完整承接订单履约、售后和复购动作 +- 主要依赖组件:`G01`、`G31`、`G34`、`G35` + +## 1. 页面结构(从上到下) + +1. 顶部状态头图区 +2. 场景信息区 +3. 履约时间轴区 +4. 商品清单区 +5. 费用明细区 +6. 订单基础信息区 +7. 底部操作栏 + +## 2. 区块说明 + +### 2.1 顶部状态头图区 +- 展示当前状态文案与辅助说明 +- 示例: + - 待支付 + - 商家已接单 + - 制作中 + - 配送中 + - 待自提 + - 已完成 + - 退款中 + +### 2.2 场景信息区 +- 外卖:收货地址、骑手状态、预计送达 +- 自提:取餐码、取餐时间、门店信息 +- 堂食:桌号、门店、是否可继续加菜 + +### 2.3 履约时间轴区 +- 使用 `G34` +- 展示订单关键节点时间 + +### 2.4 商品清单区 +- 展示商品、规格、加料、数量 + +### 2.5 费用明细区 +- 使用 `G31` +- 展示所有金额构成 + +### 2.6 订单基础信息区 +- 展示订单号、下单时间、支付方式、支付时间等 + +### 2.7 底部操作栏 +- 使用 `G35` +- 动作随状态变化: + - 继续支付 + - 取消订单 + - 催单 + - 申请退款 + - 去评价 + - 再来一单 + +## 3. 页面状态 + +- 待支付态 +- 履约进行态 +- 已完成态 +- 退款中态 +- 已退款态 + +## 4. 实现备注 + +- 订单详情页是强状态页面,顶部状态区必须足够明确 + diff --git a/docs/07-页面规格/12-退款申请页.md b/docs/07-页面规格/12-退款申请页.md new file mode 100644 index 0000000..ab411c4 --- /dev/null +++ b/docs/07-页面规格/12-退款申请页.md @@ -0,0 +1,46 @@ +# P06 退款申请页 + +- 页面编码:`P06` +- 页面层级:`二级页` +- 页面目标:让用户提交退款原因与说明,进入售后流程 +- 主要依赖组件:`G01` + +## 1. 页面结构(从上到下) + +1. 顶部导航栏 +2. 可退款订单摘要区 +3. 退款原因区 +4. 补充说明区 +5. 提交按钮区 + +## 2. 区块说明 + +### 2.1 可退款订单摘要区 +- 展示门店、订单号、商品摘要、当前可退金额 + +### 2.2 退款原因区 +- 提供预设原因列表 +- 例如: + - 商品与描述不符 + - 配送超时 + - 少送漏送 + - 不想要了 + - 其他原因 + +### 2.3 补充说明区 +- 文本输入框 +- 可选上传凭证图片(如另一位 AI 需要扩展) + +### 2.4 提交按钮区 +- 主按钮:提交退款申请 + +## 3. 页面状态 + +- 原因未选时按钮不可提交 +- 提交中显示 loading +- 提交成功后跳转 `P07 退款详情页` + +## 4. 实现备注 + +- 页面目标是低阻力提交,不宜放过多冗余字段 + diff --git a/docs/07-页面规格/13-退款详情页.md b/docs/07-页面规格/13-退款详情页.md new file mode 100644 index 0000000..f881fdd --- /dev/null +++ b/docs/07-页面规格/13-退款详情页.md @@ -0,0 +1,47 @@ +# P07 退款详情页 + +- 页面编码:`P07` +- 页面层级:`二级页` +- 页面目标:展示退款申请的当前处理状态、时间轴和处理结果 +- 主要依赖组件:`G01`、`G34` + +## 1. 页面结构(从上到下) + +1. 顶部导航栏 +2. 退款状态头图区 +3. 退款金额与原因区 +4. 退款时间轴区 +5. 订单关联信息区 + +## 2. 区块说明 + +### 2.1 退款状态头图区 +- 展示当前退款状态: + - 已提交 + - 处理中 + - 已退款 + - 已拒绝 +- 同时展示简要说明文案 + +### 2.2 退款金额与原因区 +- 展示退款金额 +- 展示退款原因与用户补充说明 + +### 2.3 退款时间轴区 +- 使用 `G34` +- 展示:申请时间、商家处理时间、退款完成时间等 + +### 2.4 订单关联信息区 +- 展示订单号、门店、商品摘要 +- 提供返回订单详情的入口 + +## 3. 页面状态 + +- 处理中 +- 已退款 +- 已拒绝 + +## 4. 实现备注 + +- 拒绝状态必须明确展示驳回原因 + diff --git a/docs/07-页面规格/14-评价页.md b/docs/07-页面规格/14-评价页.md new file mode 100644 index 0000000..8a92463 --- /dev/null +++ b/docs/07-页面规格/14-评价页.md @@ -0,0 +1,56 @@ +# P08 评价页 + +- 页面编码:`P08` +- 页面层级:`二级页` +- 页面目标:完成订单评价,并引导商家回复与评价奖励闭环 +- 主要依赖组件:`G01` + +## 1. 页面结构(从上到下) + +1. 顶部导航栏 +2. 订单摘要区 +3. 星级评分区 +4. 快捷评价标签区 +5. 文本评价区 +6. 图片上传区 +7. 匿名开关区 +8. 提交按钮区 + +## 2. 区块说明 + +### 2.1 订单摘要区 +- 展示门店名称和商品摘要 + +### 2.2 星级评分区 +- 选择 1-5 星 +- 星级变化可联动文案提示 + +### 2.3 快捷评价标签区 +- 根据评分展示标签 +- 例如: + - 味道不错 + - 包装精致 + - 配送很快 + - 分量足 + +### 2.4 文本评价区 +- 支持自由输入评价内容 + +### 2.5 图片上传区 +- 支持晒单图片上传 + +### 2.6 匿名开关区 +- 允许用户匿名评价 + +### 2.7 提交按钮区 +- 主按钮:提交评价 + +## 3. 页面状态 + +- 未评分时按钮不可提交 +- 提交成功后提示是否返回订单详情或继续浏览 + +## 4. 实现备注 + +- 评价成功后可弹出“获得积分”提示,但不应阻塞主流程 + diff --git a/docs/07-页面规格/15-领券中心页.md b/docs/07-页面规格/15-领券中心页.md new file mode 100644 index 0000000..4b7e161 --- /dev/null +++ b/docs/07-页面规格/15-领券中心页.md @@ -0,0 +1,42 @@ +# P09 领券中心页 + +- 页面编码:`P09` +- 页面层级:`二级页` +- 页面目标:集中展示可领取优惠券,并引导回到点餐使用 +- 主要依赖组件:`G01`、`G43` + +## 1. 页面结构(从上到下) + +1. 顶部导航栏 +2. 券分类筛选区 +3. 优惠券列表区 +4. 底部引导区 + +## 2. 区块说明 + +### 2.1 券分类筛选区 +- 可按全部、满减券、折扣券、免配送费券筛选 + +### 2.2 优惠券列表区 +- 使用 `G43` +- 每张券卡必须展示: + - 券名称 + - 金额 / 折扣 + - 使用门槛 + - 有效期 + - 适用门店 / 场景 + - 领取状态 + +### 2.3 底部引导区 +- 提供“去点餐”入口 + +## 3. 页面状态 + +- 默认态:有可领取券 +- 空态:无券可领 +- 已领取态:按钮改为已领取或去使用 + +## 4. 实现备注 + +- 领取动作应尽量轻量,领取成功后不强制跳转 + diff --git a/docs/07-页面规格/16-秒杀活动页.md b/docs/07-页面规格/16-秒杀活动页.md new file mode 100644 index 0000000..5d1e577 --- /dev/null +++ b/docs/07-页面规格/16-秒杀活动页.md @@ -0,0 +1,41 @@ +# P10 秒杀活动页 + +- 页面编码:`P10` +- 页面层级:`二级页` +- 页面目标:承接强时效抢购活动,提升转化 +- 主要依赖组件:`G01`、`G21` + +## 1. 页面结构(从上到下) + +1. 顶部导航栏 +2. 秒杀头图区 +3. 场次切换区 +4. 秒杀商品列表区 + +## 2. 区块说明 + +### 2.1 秒杀头图区 +- 展示活动标题、主视觉、倒计时 + +### 2.2 场次切换区 +- 展示当前场次、即将开始场次、已结束场次 + +### 2.3 秒杀商品列表区 +- 商品卡展示: + - 商品图片 + - 秒杀价 + - 原价 + - 剩余库存 / 已售比例 + - 每单限购 + - 立即抢购 + +## 3. 页面状态 + +- 未开始态 +- 进行中态 +- 已结束态 + +## 4. 实现备注 + +- 秒杀页要突出时间紧迫感和库存稀缺感 + diff --git a/docs/07-页面规格/17-限时折扣活动页.md b/docs/07-页面规格/17-限时折扣活动页.md new file mode 100644 index 0000000..026199f --- /dev/null +++ b/docs/07-页面规格/17-限时折扣活动页.md @@ -0,0 +1,43 @@ +# P11 限时折扣活动页 + +- 页面编码:`P11` +- 页面层级:`二级页` +- 页面目标:承接限时折扣活动,集中展示折扣商品 +- 主要依赖组件:`G01`、`G21` + +## 1. 页面结构(从上到下) + +1. 顶部导航栏 +2. 活动头图区 +3. 活动时间筛选区 +4. 折扣商品列表区 + +## 2. 区块说明 + +### 2.1 活动头图区 +- 展示活动标题、当前折扣主题、时间说明 + +### 2.2 活动时间筛选区 +- 当前进行中 +- 即将开始 +- 已结束 + +### 2.3 折扣商品列表区 +- 商品卡展示: + - 图片 + - 商品名称 + - 折扣价 + - 原价 + - 折扣力度 + - 立即购买 + +## 3. 页面状态 + +- 进行中:可购买 +- 未开始:展示开始时间 +- 已结束:置灰展示 + +## 4. 实现备注 + +- 与秒杀页相比,限时折扣页要弱化“抢”,强化“省” + diff --git a/docs/07-页面规格/18-会员中心页.md b/docs/07-页面规格/18-会员中心页.md new file mode 100644 index 0000000..2756984 --- /dev/null +++ b/docs/07-页面规格/18-会员中心页.md @@ -0,0 +1,47 @@ +# P12 会员中心页 + +- 页面编码:`P12` +- 页面层级:`二级页` +- 页面目标:展示会员等级、成长值、权益和升级路径 +- 主要依赖组件:`G01`、`G40` + +## 1. 页面结构(从上到下) + +1. 顶部导航栏 +2. 会员头部卡 +3. 成长值进度区 +4. 权益总览区 +5. 等级说明区 +6. 会员日 / 生日权益区 + +## 2. 区块说明 + +### 2.1 会员头部卡 +- 展示头像、昵称、当前会员等级、等级标识 + +### 2.2 成长值进度区 +- 展示当前成长值 +- 展示距离下一等级差值 + +### 2.3 权益总览区 +- 展示当前可享权益: + - 会员折扣 + - 积分倍率 + - 生日权益 + - 会员日权益 + +### 2.4 等级说明区 +- 展示各等级及对应权益 + +### 2.5 会员日 / 生日权益区 +- 单独说明会员日和生日特权 + +## 3. 页面状态 + +- 已登录会员态 +- 未登录提示态 + +## 4. 实现备注 + +- 会员中心要重点突出“当前能享受什么”和“如何升级” + diff --git a/docs/07-页面规格/19-积分商城页.md b/docs/07-页面规格/19-积分商城页.md new file mode 100644 index 0000000..b44d497 --- /dev/null +++ b/docs/07-页面规格/19-积分商城页.md @@ -0,0 +1,44 @@ +# P13 积分商城页 + +- 页面编码:`P13` +- 页面层级:`二级页` +- 页面目标:展示积分余额、可兑换商品和兑换记录 +- 主要依赖组件:`G01` + +## 1. 页面结构(从上到下) + +1. 顶部导航栏 +2. 积分余额头部区 +3. Tab 切换区 +4. 兑换商品列表区 / 兑换记录区 + +## 2. 区块说明 + +### 2.1 积分余额头部区 +- 展示当前积分余额 +- 展示积分获取说明入口(可选) + +### 2.2 Tab 切换区 +- 兑换商品 +- 兑换记录 + +### 2.3 兑换商品列表区 +- 商品卡展示: + - 商品图片 + - 商品名称 + - 所需积分 + - 库存 / 数量说明 + - 立即兑换 + +### 2.4 兑换记录区 +- 展示兑换时间、兑换内容、状态 + +## 3. 页面状态 + +- 默认态:有商品可兑 +- 空态:暂无可兑换商品 + +## 4. 实现备注 + +- 积分商城强调“积分能干什么”,不要只展示数值 + diff --git a/docs/07-页面规格/20-储值充值页.md b/docs/07-页面规格/20-储值充值页.md new file mode 100644 index 0000000..3711ff1 --- /dev/null +++ b/docs/07-页面规格/20-储值充值页.md @@ -0,0 +1,44 @@ +# P14 储值充值页 + +- 页面编码:`P14` +- 页面层级:`二级页` +- 页面目标:展示储值余额、充值方案和充值记录 +- 主要依赖组件:`G01`、`G44` + +## 1. 页面结构(从上到下) + +1. 顶部导航栏 +2. 储值余额区 +3. 充值方案区 +4. 充值记录区 +5. 底部支付区 + +## 2. 区块说明 + +### 2.1 储值余额区 +- 展示当前可用余额 +- 可补充说明实充与赠送余额(如有) + +### 2.2 充值方案区 +- 使用 `G44` +- 每张方案卡展示: + - 充值金额 + - 赠送金额 + - 到账金额 + +### 2.3 充值记录区 +- 展示最近充值记录 +- 包含:时间、支付方式、到账金额 + +### 2.4 底部支付区 +- 主按钮:立即充值 + +## 3. 页面状态 + +- 默认态:有方案可选 +- 空态:暂无充值方案 + +## 4. 实现备注 + +- 充值金额、赠送金额、到账金额三者必须同时可见 + diff --git a/docs/07-页面规格/21-次卡页.md b/docs/07-页面规格/21-次卡页.md new file mode 100644 index 0000000..0414e76 --- /dev/null +++ b/docs/07-页面规格/21-次卡页.md @@ -0,0 +1,38 @@ +# P15 次卡页 + +- 页面编码:`P15` +- 页面层级:`二级页` +- 页面目标:展示可购买次卡、已购次卡和核销记录 +- 主要依赖组件:`G01`、`G45` + +## 1. 页面结构(从上到下) + +1. 顶部导航栏 +2. Tab 切换区 +3. 次卡列表区 + +## 2. 区块说明 + +### 2.1 Tab 切换区 +- 可购买次卡 +- 我的次卡 +- 使用记录(可选) + +### 2.2 次卡列表区 +- 使用 `G45` +- 次卡卡片展示: + - 次卡名称 + - 适用范围 + - 有效期 + - 剩余次数 / 总次数 + - 购买或查看详情按钮 + +## 3. 页面状态 + +- 默认态:有可购或已购次卡 +- 空态:暂无次卡 + +## 4. 实现备注 + +- 次卡页需要把“适用什么商品”和“还剩几次”表达清楚 + diff --git a/docs/07-页面规格/22-消息中心页.md b/docs/07-页面规格/22-消息中心页.md new file mode 100644 index 0000000..50cbc06 --- /dev/null +++ b/docs/07-页面规格/22-消息中心页.md @@ -0,0 +1,39 @@ +# P16 消息中心页 + +- 页面编码:`P16` +- 页面层级:`二级页` +- 页面目标:集中查看订单消息、营销消息和系统通知 +- 主要依赖组件:`G01`、`G46` + +## 1. 页面结构(从上到下) + +1. 顶部导航栏 +2. 消息分类切换区 +3. 消息列表区 + +## 2. 区块说明 + +### 2.1 消息分类切换区 +- 全部 +- 订单消息 +- 营销消息 +- 系统通知 + +### 2.2 消息列表区 +- 使用 `G46` +- 每条消息展示: + - 标题 + - 摘要 + - 时间 + - 未读状态 +- 点击消息跳转到对应业务页面 + +## 3. 页面状态 + +- 默认态:有消息 +- 空态:暂无消息 + +## 4. 实现备注 + +- 消息要支持按读写状态区分,但不需要复杂会话系统 + diff --git a/docs/07-页面规格/23-帮助中心页.md b/docs/07-页面规格/23-帮助中心页.md new file mode 100644 index 0000000..414bd1a --- /dev/null +++ b/docs/07-页面规格/23-帮助中心页.md @@ -0,0 +1,44 @@ +# P17 帮助中心页 + +- 页面编码:`P17` +- 页面层级:`二级页` +- 页面目标:承接常见问题、规则说明和客服联系 +- 主要依赖组件:`G01` + +## 1. 页面结构(从上到下) + +1. 顶部导航栏 +2. 常见问题区 +3. 专题帮助区 +4. 联系客服区 + +## 2. 区块说明 + +### 2.1 常见问题区 +- 以折叠列表形式展示 +- 建议覆盖: + - 如何下单 + - 如何使用优惠券 + - 如何申请退款 + - 如何查看取餐码 + +### 2.2 专题帮助区 +- 支付帮助 +- 配送帮助 +- 自提帮助 +- 堂食帮助 +- 会员与资产帮助 + +### 2.3 联系客服区 +- 在线客服入口 +- 电话客服入口 + +## 3. 页面状态 + +- 默认态即可 +- 若帮助内容为空,则展示联系客服入口 + +## 4. 实现备注 + +- 帮助中心主要作为兜底服务页,不需要复杂交互 + diff --git a/docs/07-页面规格/24-堂食扫码确认页.md b/docs/07-页面规格/24-堂食扫码确认页.md new file mode 100644 index 0000000..023ae06 --- /dev/null +++ b/docs/07-页面规格/24-堂食扫码确认页.md @@ -0,0 +1,47 @@ +# P18 堂食扫码确认页 + +- 页面编码:`P18` +- 页面层级:`二级页` +- 页面目标:在扫码后确认门店与桌号,并把用户送入堂食点餐页 +- 主要依赖组件:`G01`、`G12` + +## 1. 页面结构(从上到下) + +1. 顶部导航栏 +2. 扫码结果确认卡 +3. 堂食规则说明区 +4. 当前桌台状态区(可选) +5. 主操作区 + +## 2. 区块说明 + +### 2.1 扫码结果确认卡 +- 展示: + - 门店名称 + - 桌号 / 桌台编号 + - 是否可点餐 + +### 2.2 堂食规则说明区 +- 展示: + - 是否先付款 + - 是否支持加菜 + - 是否支持合单 + - 结账方式说明 + +### 2.3 当前桌台状态区 +- 如已有订单,可提示当前桌存在进行中订单 + +### 2.4 主操作区 +- 主按钮:进入堂食点餐 +- 次按钮:重新扫码 / 切换桌号(如需要) + +## 3. 页面状态 + +- 正常可入桌 +- 桌号失效 +- 当前桌不可用 + +## 4. 实现备注 + +- 该页要尽量减少用户输入,优先自动确认门店和桌号 + diff --git a/plan.md b/plan.md new file mode 100644 index 0000000..a10c749 --- /dev/null +++ b/plan.md @@ -0,0 +1,459 @@ +# 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`: +- 一阶段一阶段推进 +- 一页面一页面落地 +- 每完成一个页面就自检 +- 每完成一个阶段再进入下一个阶段 + +本计划不是参考建议,而是执行顺序。