悦食记 · 餐饮门店扫码点餐小程序产品系统

餐饮门店堂食数字化：顾客扫码自助点餐、会员储值复购、本地生活团购券到店核销的一体化经营场景

面向餐饮门店的一体化扫码点餐小程序，覆盖"堂食点餐 → 购物车 → 优惠券 → 多方式支付 → 订单履约"完整闭环，并延伸到门店会员营销与拉新获客：

1. 扫码点餐：左侧菜品分类与右侧菜单联动，支持加购步进器、数量增减、购物车展开编辑、清空，底部悬浮实时合计金额；
2. 确认订单：就餐桌号/人数、菜品清单、订单备注、优惠券选择，支持微信支付、储值余额、支付宝三种方式及支付结果反馈；
3. 订单中心：全部/进行中/已完成状态筛选、订单详情、制作进度、实付金额；
4. 会员储值：电子会员卡（等级/余额/积分/成长值）、6 档储值赠送方案、自定义充值、会员专享权益、储值记录；
5. 团购核销：店铺优惠券，以及美团、饿了么、抖音团购券到店扫码核销；
6. 预约到店：选择到店日期与时段、就餐人数、联系电话、备注及预约须知；
7. 分销中心：二级分销返佣（一级 5%/二级 2%）、累计与可提现佣金、邀请好友、贡献订单、佣金明细、邀请海报。

基于 uni-app + Vue3（script setup 组合式 API）+ Vite 构建，一套代码同时编译到微信小程序与 H5 两端，纯前端 Mock 数据驱动、可独立演示。

1. 架构分层：10 个页面 + 6 个可复用基础组件（卡片/按钮/标签/步进器/空状态/购物车栏），数据通过 Pinia 的 cart、order、member 三个 store 集中管理，Mock 数据单独封装在 api 层，后续替换真实接口仅需改数据层；
2. 设计系统：用 SCSS 沉淀全局 Design Tokens（主色、字号、间距、圆角、阴影），所有页面与组件引用统一变量，无硬编码色值，保证跨页风格一致；
3. 多端适配：处理微信胶囊按钮与刘海屏安全区，购物车悬浮栏通过 CSS 变量 --window-bottom 自动避开原生 tabBar，并开启组件按需注入（lazyCodeLoading）优化小程序启动；
4. 交互体验：实现加购小球抛物线飞入购物车、购物车图标弹跳等动效；微信、支付宝支付采用真实品牌 SVG 图标，以 data URI 方案兼容 H5 与小程序双端渲染；
5. 工程化：Vite 热更新开发，微信小程序端通过代码质量检测（组件按需注入、无依赖文件、代码压缩等）。