餐饮数字化转型必备：微信扫码点餐&外卖小程序源码（支持多店铺数据统计）
原创
餐饮数字化转型必备：微信扫码点餐&外卖小程序源码（支持多店铺数据统计）
原创
用户11831480
发布于 2025-09-11 11:28:44
发布于 2025-09-11 11:28:44
代码可运行
运行总次数：0
代码可运行
在数字化浪潮席卷各行各业的当下，餐饮行业的数字化转型已不再是 “选择题”，而是关乎生存与发展的 “必答题”。其中，微信扫码点餐与外卖小程序凭借其低门槛、高触达、强粘性的优势，成为餐饮商家数字化转型的核心工具。本文将深入解析这一系统的核心价值，并附上部分关键源代码，助力餐饮从业者快速搭建适配多店铺运营的数字化解决方案。
微信扫码点餐 & 外卖小程序核心功能设计
1. 前端用户端（微信小程序）
- 源码及演示：s.ymzan.top
- 扫码点餐：用户扫描桌码后自动进入对应店铺页面，支持菜品分类浏览、规格选择（如微辣 / 中辣）、购物车编辑、订单提交；
- 外卖功能：支持定位附近店铺、查看店铺评分与评价、在线下单、选择配送 / 自提、多种支付方式（微信支付集成）；
- 个人中心：订单查询（待支付 / 待发货 / 待收货 / 已完成）、优惠券领取与使用、地址管理、历史评价。
2. 商家管理端（Web / 小程序）
- 店铺管理：支持单商家多门店创建，设置门店地址、营业时间、配送范围与费用；
- 菜品管理：菜品上下架、库存修改、价格调整、分类编辑（如热菜 / 凉菜 / 饮品）；
- 订单管理：实时接收堂食 / 外卖订单，支持订单状态修改（已接单 / 制作中 / 已完成 / 已取消）、订单详情导出；
- 营销工具：优惠券生成（满减券 / 折扣券）、会员积分规则设置、节日活动推送。
3. 多店铺数据统计端（Web）
- 核心数据看板：展示所有店铺的总订单量、总营业额、平均客单价、用户新增数，支持按日 / 周 / 月筛选；
- 店铺对比分析：按营业额、订单量、复购率对各店铺排序，直观呈现门店经营差距；
- 用户画像分析：统计用户性别、年龄、消费频次、偏好菜品，为营销活动提供数据支撑；
- 库存预警提醒：当某店铺菜品库存低于阈值时，自动发送提醒至商家，避免缺货问题。
##系统技术架构与优势
1. 技术栈选择
- 前端：微信小程序原生框架（WXML/WXSS/JS）+ Vant Weapp 组件库（提升 UI 美观度与开发效率）；
- 后端：Node.js（Express 框架）/ Java（Spring Boot 框架），支持高并发订单处理；
- 数据库：MySQL（存储订单、用户、菜品等结构化数据）+ Redis（缓存高频访问数据，如菜品库存、用户会话）；
- 第三方集成：微信支付 SDK（实现支付功能）、腾讯地图 API（实现定位与配送范围计算）。
2. 核心优势
- 多店铺适配：一套系统支持多个独立店铺运营，总部可统一管理与数据监控；
- 轻量化部署：基于微信生态，用户无需下载 APP，扫码即可使用，降低用户使用门槛；
- 数据安全可靠：用户支付数据通过微信支付加密传输，订单与用户数据定期备份，避免数据丢失；
- 低成本迭代：前后端分离架构，支持功能模块单独升级，无需整体重构系统。
关键功能源代码示例
以下为系统核心模块的部分源代码（以微信小程序前端 + Node.js 后端为例），助力开发者快速理解实现逻辑。
1. 微信小程序端：扫码点餐页面（菜品列表渲染）
\<!-- pages/scanOrder/scanOrder.wxml -->
\<view class="container">
  \<!-- 菜品分类导航 -->
  \<scroll-view class="category-scroll" scroll-x>
  \<view 
  wx:for="{{categoryList}}" 
  wx:key="categoryId"
  class="category-item {{currentCategory === item.categoryId ? 'active' : ''}}"
  bindtap="switchCategory"
  data-categoryid="{{item.categoryId}}"
  \>
  {{item.categoryName}}
  \</view>
  \</scroll-view>
  \<!-- 菜品列表 -->
  \<view class="dish-list">
  \<view wx:for="{{dishList}}" wx:key="dishId" class="dish-item">
  \<image src="{{dish.imageUrl}}" mode="widthFix" class="dish-img">\</image>
  \<view class="dish-info">
  \<view class="dish-name">{{dish.dishName}}\</view>
  \<view class="dish-price">¥{{dish.price.toFixed(2)}}\</view>
  \<view class="dish-desc">{{dish.description}}\</view>
  \</view>
  \<view class="dish-action">
  \<button 
  class="add-btn" 
  bindtap="addCart" 
  data-dishid="{{dish.dishId}}"
  disabled="{{dish.stock <= 0}}"
  \>
  {{dish.stock <= 0 ? '已售罄' : '加入购物车'}}
  \</button>
  \</view>
  \</view>
  \</view>
  \<!-- 购物车悬浮按钮 -->
  \<view class="cart-btn" bindtap="goToCart">
  \<image src="/images/cart.png" mode="widthFix" class="cart-icon">\</image>
  \<view class="cart-count" wx:if="{{cartCount > 0}}">{{cartCount}}\</view>
  \</view>
\</view>// pages/scanOrder/scanOrder.js
Page({
  data: {
  categoryList: \[], // 菜品分类列表
  dishList: \[], // 当前分类下的菜品列表
  currentCategory: 1, // 默认选中第一个分类
  cartCount: 0, // 购物车商品数量
  shopId: '' // 当前店铺ID（通过扫码参数获取）
  },
  onLoad(options) {
  // 从扫码参数中获取店铺ID
  this.setData({ shopId: options.shopId });
  // 加载菜品分类与默认分类菜品
  this.getCategoryList();
  this.getDishListByCategory(this.data.currentCategory);
  // 加载购物车数量
  this.getCartCount();
  },
  // 获取菜品分类列表
  getCategoryList() {
  const { shopId } = this.data;
  wx.request({
  url: 'https://your-domain.com/api/category/list',
  data: { shopId },
  success: (res) => {
  if (res.data.code === 200) {
  this.setData({ categoryList: res.data.data });
  }
  }
  });
  },
  // 切换菜品分类
  switchCategory(e) {
  const categoryId = e.currentTarget.dataset.categoryid;
  this.setData({ currentCategory: categoryId });
  this.getDishListByCategory(categoryId);
  },
  // 根据分类ID获取菜品列表
  getDishListByCategory(categoryId) {
  const { shopId } = this.data;
  wx.request({
  url: 'https://your-domain.com/api/dish/list',
  data: { shopId, categoryId },
  success: (res) => {
  if (res.data.code === 200) {
  this.setData({ dishList: res.data.data });
  }
  }
  });
  },
  // 加入购物车
  addCart(e) {
  const dishId = e.currentTarget.dataset.dishid;
  const userId = wx.getStorageSync('userId'); // 从本地缓存获取用户ID
  wx.request({
  url: 'https://your-domain.com/api/cart/add',
  method: 'POST',
  data: { userId, dishId, shopId: this.data.shopId, quantity: 1 },
  success: (res) => {
  if (res.data.code === 200) {
  wx.showToast({ title: '加入购物车成功' });
  // 更新购物车数量
  this.getCartCount();
  }
  }
  });
  },
  // 获取购物车数量
  getCartCount() {
  const userId = wx.getStorageSync('userId');
  wx.request({
  url: 'https://your-domain.com/api/cart/count',
  data: { userId, shopId: this.data.shopId },
  success: (res) => {
  if (res.data.code === 200) {
  this.setData({ cartCount: res.data.data });
  }
  }
  });
  },
  // 前往购物车页面
  goToCart() {
  wx.navigateTo({ url: \`/pages/cart/cart?shopId=\${this.data.shopId}\` });
  }
});
2. Node.js 后端：多店铺数据统计接口（总营业额查询）
// router/statistic.js
const express = require('express');
const router = express.Router();
const statisticService = require('../service/statisticService');
const { checkAdminToken } = require('../middleware/auth'); // 管理员权限校验
// 多店铺总营业额查询（需管理员权限）
router.get('/totalRevenue', checkAdminToken, async (req, res) => {
  try {
  const { startTime, endTime } = req.query;
  // 校验时间参数
  if (!startTime || !endTime) {
  return res.json({ code: 400, message: '请传入开始时间与结束时间' });
  }
  // 调用服务层获取数据
  const result = await statisticService.getTotalRevenue(startTime, endTime);
  res.json({ code: 200, message: '查询成功', data: result });
  } catch (error) {
  console.error('统计接口异常:', error);
  res.json({ code: 500, message: '服务器内部错误' });
  }
});
// 多店铺订单量对比查询
router.get('/shopOrderCompare', checkAdminToken, async (req, res) => {
  try {
  const { dateType } = req.query; // dateType: day/week/month
  const result = await statisticService.getShopOrderCompare(dateType);
  res.json({ code: 200, message: '查询成功', data: result });
  } catch (error) {
  console.error('店铺订单对比接口异常:', error);
  res.json({ code: 500, message: '服务器内部错误' });
  }
});
module.exports = router;// service/statisticService.js
const db = require('../config/db'); // 数据库连接配置
/\*\*
 \* 获取多店铺总营业额
 \* @param {string} startTime - 开始时间（YYYY-MM-DD）
 \* @param {string} endTime - 结束时间（YYYY-MM-DD）
 \* @returns {Promise\<Array>} 各店铺营业额数据
 \*/
exports.getTotalRevenue = async (startTime, endTime) => {
  const sql = \`
  SELECT 
  s.shop\_id, 
  s.shop\_name, 
  IFNULL(SUM(o.order\_amount), 0) AS total\_revenue,
  COUNT(o.order\_id) AS total\_order
  FROM 
  shop s
  LEFT JOIN 
  \\\`order\\\` o ON s.shop\_id = o.shop\_id 
  AND o.order\_time BETWEEN ? AND ? 
  AND o.order\_status = 4 -- 4表示已完成订单
  GROUP BY 
  s.shop\_id, s.shop\_name
  ORDER BY 
  total\_revenue DESC
  \`;
  const \[rows] = await db.query(sql, \[startTime, endTime]);
  return rows;
};
/\*\*
 \* 获取多店铺订单量对比
 \* @param {string} dateType - 时间类型（day/week/month）
 \* @returns {Promise\<Array>} 各店铺订单量数据
 \*/
exports.getShopOrderCompare = async (dateType) => {
  let dateSql = '';
  // 根据时间类型拼接SQL
  if (dateType === 'day') {
  dateSql = 'DATE(o.order\_time) = CURDATE()';
  } else if (dateType === 'week') {
  dateSql = 'YEARWEEK(DATE(o.order\_time), 1) = YEARWEEK(CURDATE(), 1)';
  } else if (dateType === 'month') {
  dateSql = 'DATE\_FORMAT(o.order\_time, "%Y-%m") = DATE\_FORMAT(CURDATE(), "%Y-%m")';
  }
  const sql = \`
  SELECT 
  s.shop\_id, 
  s.shop\_name, 
  COUNT(o.order\_id) AS order\_count
  FROM 
  shop s
  LEFT JOIN 
  \\\`order\\\` o ON s.shop\_id = o.shop\_id 
  AND \${dateSql} 
  AND o.order\_status = 4
  GROUP BY 
  s.shop\_id, s.shop\_name
  ORDER BY 
  order\_count DESC
  \`;
  const \[rows] = await db.query(sql);
  return rows;
};总结
微信扫码点餐 & 外卖小程序是餐饮行业数字化转型的 “基础设施”，它不仅能解决传统餐饮的效率痛点，还能通过数据驱动帮助商家实现精细化运营。本文提供的功能设计与源代码示例，可作为商家自主开发或选择第三方系统的参考依据。在数字化转型的道路上，餐饮商家需结合自身规模与需求，选择合适的系统方案，并持续迭代优化，才能在激烈的市场竞争中占据优势。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
作者已关闭评论
推荐阅读
目录
腾讯云开发者
