Files
TakeoutSaaS.Prototypes/Cend-MiniProgram-Prototype/docs/02-信息架构与路由.md

4.2 KiB

信息架构与路由

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 抽屉与弹层

  • 不应中断当前页面上下文
  • 应支持手势关闭 / 点击遮罩关闭(支付与关键确认除外)
  • 关闭后保留当前页面已选状态