🍜 煮粉点餐 — 微信小程序全栈项目

一个面向餐饮门店（米粉/煮粉）的微信小程序点餐系统，已上线运行，覆盖门店浏览、在线点餐、优惠券、微信支付、取餐核销等完整点餐闭环。

项目概览

核心功能模块

🏠 首页（门店选择）

• 展示门店列表，支持按名称搜索
• 门店距离显示（基于微信定位获取坐标，经 WGS-84 → BD-09 转换）
• 轮播图滚动展示
• 公告列表滚动通知
• 隐私合规弹窗（用户协议 + 隐私政策同意）

🍜 点餐系统

• 分类侧边栏：左侧分类导航，右侧商品列表联动
• 商品规格选择：支持多规格（如大碗/小碗）和加料选择
• 购物车：基于 LocalStorage 实现，单店锁定（限制跨店商品）
• 相同商品+规格+加料自动合并数量，实时计算总价
• 支持备注和优惠券挂载
• 自取/外卖切换：外卖模式需选择配送地址

💳 支付与订单

• 支付页：集中处理配送方式、地址选择、优惠券选择、支付方式
• 支付方式：微信支付（wx.requestPayment）+ 余额支付 + 支付宝（预留）
• 订阅消息：支付前请求模板消息授权，推送订单状态通知
• 取餐页：实时展示进行中订单（待支付/制作中/待取餐）
• 取餐码条形码显示（wxbarcode）
• 外卖配送物流状态展示
• 全部订单：按状态筛选，支持取消/删除/再次支付
• 订单详情：商品明细、退款申请、评价提交

👤 个人中心

• 用户信息展示与编辑（头像、昵称、手机号）
• 钱包系统：余额（本金+赠送金）展示、充值套餐选择、充值支付、交易流水
• 优惠券中心：可领取优惠券与已领取优惠券切换，支持领券操作
• 地址管理：常用收货地址 CRUD，级联省市区选择器

📍 门店详情

• 门店地图标记（百度坐标 → 火星坐标转换）
• 一键拨号 + 导航跳转（wx.openLocation）

📰 公告与内容

• 公告列表 + 富文本详情页（基于 parser 富文本组件渲染）
• 关于我们、用户协议、隐私政策等静态页面

技术架构亮点

1. JWT 双令牌认证与自动刷新

// 核心流程：微信登录 → 获取 tokens → 请求自动携带
wx.login() → POST /api/users/wechat-login/ → 存储 access + refresh token
→ 每次接口请求自动带 Authorization: Bearer <access_token>
→ 401 时自动用 refresh_token 刷新，重试原请求

• 全局拦截 401 状态码，静默刷新 Token，用户无感知
• 连接断开/登录过期时通过 wx.checkSession() 兜底检测

2. 统一的 API 适配层

api/
├── request.js    # HTTP 客户端（JWT 自动刷新、超时 5s）
├── auth.js       # 微信登录 + Token 管理
├── user.js       # 用户信息、地址、交易流水
├── shop.js       # 门店、商品、分类、规格、配料、优惠券
├── order.js      # 订单、支付、退款
├── content.js    # 轮播图、公告、反馈
└── system.js     # 系统配置、行政区划

所有 API 调用遵循 list → detail 两步模式（列表接口只返回 ID，详情单独获取），适配了后端 Django REST Framework 的 ListModelMixin 特性。

3. 完整的购物车状态机

购物车基于 LocalStorage 实现，具有以下设计：

• 单店强约束：添加不同门店商品时直接拒绝，保证订单一致性
• 深度相等合并：商品+规格+加料完全一致时自动合并数量
• 自动清理：数量减为 0 或移除最后一项时自动清空购物车
• 一键转换：cart.toOrderData() 将购物车数据转换为后端订单创建接口需要的完整 payload

4. 坐标系转换（多地图兼容）

// 三种坐标系互转，满足微信定位、百度地图后台、腾讯地图显示的兼容需求
utils/geo.js:  WGS-84 ⟷ GCJ-02 ⟷ BD-09

• 微信 wx.getLocation() → WGS-84
• 后端存储 → BD-09（百度地图）
• 小程序 map 组件 → GCJ-02（火星坐标系）

5. 隐私合规处理

• 首页启动时弹出隐私协议弹窗，用户同意后才能继续使用
• 地理位置、用户信息等敏感权限按需申请
• 支持微信最新的隐私接口规范

工程实践

测试驱动开发（TDD）

项目严格遵循 红-绿-重构 测试驱动开发流程：

红 (Red)     → 先编写失败测试，描述期望行为
绿 (Green)   → 编写最简代码让测试通过
重构 (Refactor) → 在测试保护下优化代码结构

测试覆盖情况

典型测试用例示例（购物车）：

// —— 测试跨店限制 ——
test('addItem should reject cross-shop items', () => {
  cart.addItem({ product: { id: 1 }, shop: 'A', name: '煮粉', ... })
  cart.addItem({ product: { id: 2 }, shop: 'B', name: '炒粉', ... })
  // 第二次添加被拒绝，购物车仍为第一个商品
  expect(cart.getCart().items.length).toBe(1)
})

// —— 测试相同商品合并 ——
test('addItem should merge identical items', () => {
  cart.addItem({ key: 'abc', product: { id: 1 }, num: 1, specs: [...], toppings: [...] })
  cart.addItem({ key: 'abc', product: { id: 1 }, num: 2, specs: [...], toppings: [...] })
  expect(cart.getCart().number).toBe(3)
})

代码质量

• 测试套件完整，每次提交前运行 npm run test 确保无回归
• Bug 修复前先写复现该 Bug 的测试用例
• 单元测试覆盖正常路径、边界情况和错误分支

依赖的技术栈

我作为开发者能带来什么

• 完整的小程序开发生命周期经验：从需求分析、设计、编码、测试到上线发布
• 严谨的工程习惯：TDD 驱动、测试覆盖、代码规范、模块化设计
• 全栈思维：不仅写前端，也理解后端 API 设计、数据库模型、认证流程
• 丰富的第三方集成经验：微信支付、微信登录、地图服务、消息订阅
• 踩坑经验：坐标系转换、JWT 双令牌刷新、小程序隐私合规、LocalStorage 边界处理
• 沟通与交付：注重代码可维护性和文档完整性，确保接手方能够平滑续接

关于我

• 邮箱：qinyu0504@163.com

• 微信：jasonqin2011

• 微信小程序全栈开发，熟悉原生小程序生态与 Vant Weapp 组件库

• TDD 践行者，重视代码质量与工程规范
• 能独立完成小程序从 0 到 1 的完整开发生命周期
• 如需进一步沟通或演示，欢迎联系