顾客使用场景:
├─ 堂食点餐 → 扫码下单 / 店员代客下单
├─ 外卖配送 → 在线点餐 + 配送到家
├─ 到店自取 → 提前下单 + 预约取餐
├─ 预订餐桌 → 预约时间 + 预点餐
├─ 会员中心 → 积分兑换 + 优惠券使用
├─ 酒水寄存 → 存酒管理 + 扫码取酒
└─ 订单管理 → 查看进度 + 评价退款
门店运营场景:
├─ 商品管理 → 分类展示 + 规格选择
├─ 订单处理 → 接单制作 + 配送安排
├─ 会员服务 → 等级管理 + 积分发放
├─ 餐桌管理 → 预订确认 + 座位安排
├─ 资质展示 → 许可证公示 + 品牌宣传
└─ 客服支持 → 多渠道联系 + 问题处理
1️⃣ 首页展示
└─ 门店信息 + Banner 主图 + 品牌调性
2️⃣ 商品浏览
└─ 左侧分类导航 + 右侧商品列表 + 规格选择
3️⃣ 购物车
└─ 加减数量 + 费用明细 + 去结算
4️⃣ 订单提交
├─ 外卖模式 → 地址选择 + 配送费计算
└─ 自取模式 → 取餐时间选择
5️⃣ 支付结果
└─ 支付成功 + 奖励展示 (积分/优惠券)
6️⃣ 订单列表
└─ 状态筛选 (全部/待使用/已完成) + 订单卡片
7️⃣ 订单详情
├─ 配送进度 + 骑手信息
├─ 待支付/已退款状态
└─ 评价入口 + 退款申请
8️⃣ 个人中心
└─ 会员等级 + 资产展示 + 功能导航
📦 架构设计:
设计系统:
- CSS 变量系统 (Design Token)
- 慢生活·胶片质感配色
- 间距/圆角/阴影/字体系统
- 磨砂玻璃效果 + 胶片滤镜
页面结构:
- 手机框架模拟 (412px 宽度)
- 状态栏 + 导航栏 + 内容区 + 底部导航
- 卡片式布局 + 渐变主题色
交互实现:
- onclick 事件跳转
- localStorage 数据存储 (模拟后端)
- alert 弹窗模拟 (支付/地图等功能)
- 自动激活底部导航状态
评论