烘焙预约小程序 - 页面结构

小程序端与管理端页面结构，按业务模块分组，每个页面详细说明功能点与对应 API 接口。

模块 A：用户点单

商品浏览、购物车、下单流程

🍰
点餐页
/pages/index/goods
功能说明
  • 左侧商品分类菜单，支持滚动定位
  • 右侧商品列表，显示图片、名称、价格、销量
  • 点击商品弹出规格选择（单选/多选规格）
  • 底部购物车悬浮栏，显示数量和总价
  • 购物车展开列表，可增减商品数量
接口列表
  • GET/app/goods/type/list
  • GET/app/goods/info/list
  • GET/app/goods/info/info
点击查看大图
🔍
商品搜索
/pages/goods/search
功能说明
  • 搜索输入框，支持关键词搜索
  • 热门搜索词展示（后台配置）
  • 历史搜索记录，可清空
  • 搜索结果列表展示
接口列表
  • GET/app/goods/search/hot
  • GET/app/goods/info/list?keyword=
点击查看大图
📦
确认订单
/pages/order/submit
功能说明
  • 选择自取/外卖/堂食配送方式
  • 选择/新增收货地址（外卖时）
  • 座位号输入框（堂食可选）
  • 支持扫码点餐 URL 参数 ?seatNo=xxx 自动填充
  • 商品列表展示（含规格）
  • 选择优惠券抵扣
  • 填写订单备注
  • 显示商品金额、配送费、优惠、应付金额
  • 提交订单按钮
堂食座位号
座位号可选填写，支持扫桌码携带、手动输入或不填（通过取餐号取餐）
接口列表
  • GET/app/user/address/list
  • GET/app/market/coupon/user/available
  • POST/app/order/info/create
点击查看大图

模块 B：外卖配送

订单支付、配送、退款流程

🛒
订单列表
/pages/index/order
功能说明
  • Tab 状态筛选：全部/待付款/待发货/待收货/待评价
  • 订单卡片展示：门店名、商品图、商品名、金额
  • 操作按钮：去付款/取消/确认收货/评价/再来一单
  • 下拉刷新、上拉加载更多
接口列表
  • POST/app/order/info/page
  • GET/app/order/info/userCount
点击查看大图
📄
订单详情
/pages/order/detail
功能说明
  • 订单状态展示（待付款/制作中/待取餐/已完成等）
  • 订单类型标签（自取/外卖/堂食）
  • 取餐号显示（A-自取/W-外卖/D-堂食前缀）
  • 座位号显示（堂食订单时）
  • 配送地址（外卖）
  • 商品列表详情
  • 金额明细：商品金额、配送费、优惠、实付
  • 订单信息：订单号、下单时间、支付时间
  • 操作按钮：联系客服、申请退款、确认收货
堂食订单显示
显示座位号信息（如有）、取餐号前缀 D、订单类型「堂食」标签
接口列表
  • GET/app/order/info/info?id=
  • POST/app/order/info/cancel
  • POST/app/order/info/confirm
点击查看大图
💰
申请退款
/pages/order/refund
功能说明
  • 显示退款金额
  • 选择退款原因（下拉选项）
  • 填写退款说明
  • 提交退款申请
接口列表
  • POST/app/order/info/refund
点击查看大图

模块 C：预约

预约表单、核销流程

📝
预约提交
/pages/reservation/submit
功能说明
  • 输入联系人姓名（必填）
  • 输入联系电话（必填，需验证手机号格式）
  • 选择取餐方式：自提 / 配送
  • 选择预约日期（日期选择器）
  • 选择预约时间段（时间选择器）
  • 配送时展示地址选择（复用 user/address）
  • 显示门店配送提示（根据门店配置）
  • 上传核销券码图片（图片上传）
  • 填写备注
  • 提交预约按钮
接口列表
  • GET/app/shop/info/info
  • GET/app/user/address/list
  • POST/app/bake/reservation/add
点击查看大图
📋
预约列表
/pages/reservation/list
功能说明
  • Tab 状态筛选：已预约 / 已完成 / 已取消
  • 预约卡片展示：门店名、预约时间、取餐方式、状态
  • 点击进入预约详情
  • 下拉刷新、上拉加载更多
接口列表
  • POST/app/bake/reservation/page
点击查看大图
📄
预约详情
/pages/reservation/detail
功能说明
  • 预约状态展示（已预约/已完成/已取消）
  • 门店信息展示
  • 预约信息：联系人、电话、日期、时间、取餐方式
  • 配送地址（配送时展示）
  • 核销券码图片查看
  • 备注信息
  • 操作按钮：取消预约（已预约状态可用）
接口列表
  • GET/app/bake/reservation/info
  • POST/app/bake/reservation/cancel
点击查看大图

公共模块

首页、用户、营销、客服

🏠
首页
/pages/index/home
功能说明
  • 顶部门店选择（根据定位匹配最近门店）
  • 轮播图展示（3-5张，门店介绍/活动宣传）
  • 预约入口按钮（跳转预约提交页）
  • 点单入口（跳转点餐页或其他小程序）
  • 用户优惠券入口
接口列表
  • GET/app/shop/info/list
  • GET/app/info/banner/list
  • GET/app/user/info/person
点击查看大图
🔐
登录
/pages/user/login
功能说明
  • 微信一键授权登录（获取头像昵称）
  • 手机号快捷登录（获取微信绑定手机号）
  • 用户协议与隐私政策勾选
接口列表
  • POST/app/user/login/mini
  • POST/app/user/login/phone
点击查看大图
👤
个人中心
/pages/index/my
功能说明
  • 用户头像、昵称、会员等级
  • 我的预约入口（跳转预约列表）
  • 我的订单入口（跳转订单列表）
  • 收货地址管理
  • 优惠券入口
  • 联系客服
  • 设置、关于我们
接口列表
  • GET/app/user/info/person
  • GET/app/order/info/userCount
点击查看大图
📍
地址列表
/pages/user/address-list
功能说明
  • 地址列表展示（联系人、电话、详细地址）
  • 默认地址标记
  • 编辑/删除地址
  • 新增地址按钮
  • 选择模式：从订单页进入时可选择地址
接口列表
  • GET/app/user/address/list
  • POST/app/user/address/delete
  • POST/app/user/address/setDefault
点击查看大图
🎫
优惠券
/pages/market/coupon
功能说明
  • Tab 切换：可领取 / 我的优惠券
  • 优惠券卡片展示：面额、类型、使用条件、有效期
  • 领取按钮（可领取列表）
  • 去使用按钮（我的优惠券）
  • 已使用/已过期标记
接口列表
  • POST/app/market/coupon/info/page
  • GET/app/market/coupon/user/my
  • POST/app/market/coupon/user/receive
点击查看大图
💬
客服聊天
/cool-cs/chat
功能说明
  • 消息列表展示（文本、图片）
  • 自动滚动到最新消息
  • 输入框发送文本消息
  • 发送图片功能
  • WebSocket 实时通讯
接口列表
  • POST/app/cs/session/create
  • POST/app/cs/msg/page
  • GET/app/cs/msg/unreadCount
点击查看大图
📣
意见反馈
/cool-app/feedback
功能说明
  • 反馈内容输入（多行文本）
  • 上传图片（最多 3-5 张）
  • 提交反馈按钮
接口列表
  • POST/app/app/feedback/submit
点击查看大图

页面统计：小程序端核心页面 15+，管理端页面 25+（详见 管理端页面结构）

线稿索引：完整线稿见 线稿页面索引（小程序 375×812，管理端 16:9）

文档版本：v2.1 · 2026-02-25

← 返回文档总览