奶茶点单小程序

奶茶点单小程序是一款面向茶饮门店与消费者的数字化点单解决方案，旨在打通"线上引流-线下履约"的完整消费链路。通过轻量化的小程序形态，帮助品牌降低获客成本、提升运营效率，同时为用户提供便捷、个性化的点单体验。业务核心聚焦于效率提升、会员沉淀与数据驱动三大价值维度，模块主要包含以下几个模块：
1. 智能点单系统
个性化定制：支持杯型、温度、糖度、小料等20+维度的自由搭配，实时计算价格与热量
智能推荐：基于用户历史偏好与天气场景，推送"猜你喜欢"与限时新品
多人拼单：生成分享链接，好友可同步编辑订单，自动合并结算
2. 会员与营销体系
积分成长体系：消费积分可兑换饮品券、周边商品，设置银卡/金卡/黑钻等级权益
精准营销工具：支持生日赠饮、第二杯半价、时段折扣等12种促销模板，可定向推送至特定人群标签
储值锁客：预充值享折扣，提升用户粘性与现金流
3. 订单履约管理
多模式取餐：支持"到店自取"（预约时段免排队）、"外卖配送"（对接第三方运力）、"堂食扫码"三种场景
实时进度追踪：制作状态可视化（接单→制作→完成），到店前5分钟推送取餐提醒
订单管理：历史订单一键复购、发票申请、售后申诉入口
4. 门店运营中台
智能排班看板：根据订单热力图预测备料需求，降低损耗
用户评价分析：NLP自动提取口味、服务、环境等维度差评关键词
数据驾驶舱：实时监控各门店客单价、复购率、高峰时段转化率等核心指标

一、采用 "跨端统一层 + 平台适配层 + 业务逻辑层" 的三层架构，详细设计如下：
1. 组件化与职责分离
展示组件（ProductCard）：纯 UI 渲染，通过 props 接收数据，便于 Storybook 独立测试
容器组件（MenuPage）：负责数据获取与状态分发，调用自定义 Hooks 处理业务逻辑
复合组件模式：SpecSelector 内部封装 TemperaturePicker、SugarPicker、ToppingPicker，对外暴露统一 onConfirm 接口
2. 状态管理策略
mbox 替代 Redux，轻量且无样板代码，支持 TypeScript 类型推导
持久化中间件：购物车状态自动同步至本地存储，杀进程后数据不丢失
分域存储：按业务域拆分 Store，避免单文件臃肿
3. 类型安全设计
// SKU 组合类型示例，确保规格选择无遗漏
interface ProductSKU {
id: string;
specs: {
temperature: 'hot' | 'warm' | 'ice' | 'less_ice';
sugar: '0' | '30' | '50' | '70' | '100';
toppings: Topping[];
};
price: number; // 单位：分，避免浮点运算
stock: number;
}
4. 样式架构（SCSS）
CSS 变量 + SCSS 变量双轨：运行时主题切换用 CSS 变量，编译时优化用 SCSS 变量
BEM 命名规范： .product-card__title--highlight 确保样式隔离
响应式适配：基于 Taro 的 pxTransform 实现 750 设计稿转各端 rpx
5. 性能优化
图片懒加载：商品列表使用 lazy-load 属性，首屏请求数减少 60%
虚拟列表：订单历史页采用 VirtualList 组件，千条数据流畅滚动
分包加载：按用户路径拆分 menu-package 、 order-package ，主包体积 < 2MB
二、关键业务流程时序
用户选择商品 → SpecSelector 校验库存 → 加入 cartStore
↓
购物车合并相同 SKU → 实时计算优惠（第二杯半价/会员折扣）
↓
提交订单 → 创建预支付单 → 调起微信支付 → 回调更新 orderStore
↓
WebSocket 推送制作进度 → 取餐码页面轮询状态 → 完成核销