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

小程序端与管理端页面结构,按业务模块分组,每个页面详细说明功能点与对应 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
点击查看大图
← 返回文档总览