扫码点餐系统 - 完整扫码逻辑 源码示例外卖点餐 | 连锁店 | 餐饮生鲜 | 奶茶 | 店内扫码点餐 | 同城外卖 | 校园外卖 扫码业务场景总览场景扫码后行为核心逻辑️ 店内扫码点餐进入店铺菜单页识别店铺ID → 加载菜单 外卖下单进入外卖店铺页识别店铺位置 → 计算配送费 营销活动领券/红包页识别活动ID → 发放优惠券 员工登录员工管理后台识别员工ID → 权限验证 自取码取餐码页面识别订单ID → 显示取餐码 一、后端扫码逻辑 (Java Spring Boot)1️⃣ 扫码码生成规则java/** * 二维码内容格式: * 店内点餐: CAMPUS://SHOP?id1001tableA05 * 外卖下单: CAMPUS://DELIVERY?shopId1001address宿舍3号楼 * 营销活动: CAMPUS://COUPON?id2001type1 * 取餐码: CAMPUS://PICKUP?orderNoTX20240101001 */ Service public class QRCodeService { Autowired private ShopMapper shopMapper; /** * 生成店内点餐二维码 */ public String generateShopQRCode(Long shopId, String tableNo) { // 格式: CAMPUS://SHOP?id1001tableA05 String content String.format(CAMPUS://SHOP?id%dtable%s, shopId, tableNo); // 使用ZXing生成二维码图片(Base64) return QRCodeUtil.generateBase64(content, 300, 300); } /** * 生成外卖店铺二维码 */ public String generateDeliveryQRCode(Long shopId, String address) { String content String.format(CAMPUS://DELIVERY?shopId%daddress%s, shopId, URLEncoder.encode(address, StandardCharsets.UTF_8)); return QRCodeUtil.generateBase64(content, 300, 300); } /** * 生成营销活动二维码 */ public String generateCouponQRCode(Long activityId, Integer type) { String content String.format(CAMPUS://COUPON?id%dtype%d, activityId, type); return QRCodeUtil.generateBase64(content, 300, 300); } /** * 生成取餐码二维码 */ public String generatePickupQRCode(String orderNo) { String content String.format(CAMPUS://PICKUP?orderNo%s, orderNo); return QRCodeUtil.generateBase64(content, 300, 300); } }2️⃣ 扫码解析Controller ⭐⭐⭐javaRestController RequestMapping(/api/scan) CrossOrigin public class ScanController { Autowired private ShopService shopService; Autowired private CouponService couponService; Autowired private OrderService orderService; /** * 核心扫码后统一入口 * 前端传入: ?codeCAMPUS://SHOP?id1001tableA05 */ GetMapping(/parse) public Result? parseQRCode(RequestParam String code) { log.info(扫码内容: {}, code); // 1. 解析协议头 if (!code.startsWith(CAMPUS://)) { return Result.error(无效的二维码); } String path code.substring(11); // 去掉 CAMPUS:// String[] parts path.split(\\?); String type parts[0]; // SHOP / DELIVERY / COUPON / PICKUP switch (type) { case SHOP: return parseShopQRCode(parts[1]); case DELIVERY: return parseDeliveryQRCode(parts[1]); case COUPON: return parseCouponQRCode(parts[1]); case PICKUP: return parsePickupQRCode(parts[1]); default: return Result.error(未知的二维码类型); } } /** * ️ 店内点餐二维码解析 */ private Result? parseShopQRCode(String params) { MapString, String paramMap parseParams(params); Long shopId Long.parseLong(paramMap.get(id)); String tableNo paramMap.get(table); // 1. 查询店铺信息 Shop shop shopService.getById(shopId); if (shop null) { return Result.error(店铺不存在); } // 2. 查询店铺菜单 ListMenuItem menuList shopService.getMenuByShopId(shopId); // 3. 查询桌台信息(可选) TableInfo table null; if (StringUtils.isNotBlank(tableNo)) { table tableService.getByTableNo(shopId, tableNo); } // 4. 返回前端所需数据 MapString, Object data new HashMap(); data.put(shop, shop); data.put(menu, menuList); data.put(table, table); data.put(scanTime, LocalDateTime.now()); // 记录扫码时间(用于统计) // 5. 记录扫码日志(用于数据分析) scanLogService.save(shopId, tableNo, SHOP); return Result.success(data); } /** * 外卖下单二维码解析 */ private Result? parseDeliveryQRCode(String params) { MapString, String paramMap parseParams(params); Long shopId Long.parseLong(paramMap.get(shopId)); String address paramMap.get(address); Shop shop shopService.getById(shopId); if (shop null) { return Result.error(店铺不存在); } // 计算配送费 BigDecimal deliveryFee calculateDeliveryFee(shopId, address); MapString, Object data new HashMap(); data.put(shop, shop); data.put(deliveryFee, deliveryFee); data.put(address, address); data.put(isDelivery, true); // 标记为外卖模式 return Result.success(data); } /** * 营销活动二维码解析 */ private Result? parseCouponQRCode(String params) { MapString, String paramMap parseParams(params); Long activityId Long.parseLong(paramMap.get(id)); Integer type Integer.parseInt(paramMap.get(type)); CouponActivity activity couponService.getById(activityId); if (activity null || activity.getStatus() ! 1) { return Result.error(活动不存在或已结束); } // 检查是否已领取 boolean alreadyReceived couponService.hasReceived(activityId); MapString, Object data new HashMap(); data.put(activity, activity); data.put(alreadyReceived, alreadyReceived); return Result.success(data); } /** * 取餐码二维码解析 */ private Result? parsePickupQRCode(String params) { MapString, String paramMap parseParams(params); String orderNo paramMap.get(orderNo); Order order orderService.getByOrderNo(orderNo); if (order null) { return Result.error(订单不存在); } // 生成6位取餐码 String pickupCode generatePickupCode(); order.setPickupCode(pickupCode); order.setStatus(3); // 已完成待取餐 orderMapper.updateById(order); MapString, Object data new HashMap(); data.put(order, order); data.put(pickupCode, pickupCode); return Result.success(data); } /** * 工具解析URL参数 */ private MapString, String parseParams(String params) { MapString, String map new HashMap(); String[] pairs params.split(); for (String pair : pairs) { String[] kv pair.split(); if (kv.length 2) { map.put(kv[0], kv[1]); } } return map; } /** * 计算配送费(根据距离) */ private BigDecimal calculateDeliveryFee(Long shopId, String address) { // 简化逻辑3km内5元每超1km加1元 Double distance 2.5; // 实际应调用地图API计算 if (distance 3) { return new BigDecimal(5.00); } else { int extraKm (int) Math.ceil(distance - 3); return new BigDecimal(5.00).add(new BigDecimal(extraKm)); } } /** * 生成6位取餐码 */ private String generatePickupCode() { return String.format(%06d, new Random().nextInt(1000000)); } }3️⃣ 店铺菜单查询ShopService.javajavaService public class ShopServiceImpl implements ShopService { Autowired private ShopMapper shopMapper; Autowired private MenuMapper menuMapper; /** * 根据店铺ID查询菜单(店内点餐用) */ Override public ListMenuItem getMenuByShopId(Long shopId) { LambdaQueryWrapperMenuItem wrapper new LambdaQueryWrapper(); wrapper.eq(MenuItem::getShopId, shopId) .eq(MenuItem::getStatus, 1) // 上架 .orderByAsc(MenuItem::getSort); ListMenuItem list menuMapper.selectList(wrapper); // 按分类分组 MapLong, ListMenuItem grouped list.stream() .collect(Collectors.groupingBy(MenuItem::getCategoryId)); // 转换为前端需要的格式 ListCategoryVO categories grouped.entrySet().stream() .map(entry - { CategoryVO vo new CategoryVO(); vo.setCategoryId(entry.getKey()); vo.setItems(entry.getValue()); return vo; }) .collect(Collectors.toList()); return categories; } } 二、UniApp前端扫码逻辑 ⭐⭐⭐1️⃣pages/scan/scan.vue- 扫码入口页vuetemplate view classscan-page !-- 顶部提示 -- view classheader text classtitle扫码点餐/text text classsubtitle扫描桌上二维码开始点餐/text /view !-- 区域 -- view classscan-area clickstartScan camera v-if!scanResult classcamera device-positionback flashoff erroronCameraError view classscan-frame view classcorner top-left/view view classcorner top-right/view view classcorner bottom-left/view view classcorner bottom-right/view text classscan-tip将二维码放入框内/text /view /camera !-- 扫码成功 -- view v-ifscanResult classresult-card uni-icons typecheckbox-filled size60 color#07c160/uni-icons text classresult-text扫码成功/text button classbtn-confirm clickgoToPage进入点餐/button /view /view !-- 备选方案手动输入 -- view classmanual-input text classdivider或者/text input v-modelmanualCode placeholder输入桌号如A05 classinput confirmmanualSearch / button classbtn-search clickmanualSearch查询/button /view /view /template script export default { data() { return { scanResult: null, manualCode: , shopData: null } }, methods: { // 核心调用微信扫码API startScan() { uni.scanCode({ onlyFromCamera: true, // 只从相机扫码 success: (res) { console.log(扫码结果:, res.result) this.scanResult res.result this.parseQRCode(res.result) }, fail: (err) { console.error(扫码失败:, err) uni.showToast({ title: 扫码失败, icon: none }) } }) }, // 解析二维码内容请求后端 async parseQRCode(code) { uni.showLoading({ title: 解析中... }) try { const res await uni.request({ url: http://localhost:8080/api/scan/parse, method: GET, data: { code } }) if (res.data.code 200) { this.shopData res.data.data // 根据类型跳转不同页面 if (this.shopData.isDelivery) { // 外卖模式 uni.navigateTo({ url: /pages/delivery/delivery?shopId${this.shopData.shop.id} }) } else { // 店内点餐模式 uni.navigateTo({ url: /pages/order/order?shopId${this.shopData.shop.id}table${this.shopData.table?.tableNo || } }) } } else { uni.showToast({ title: res.data.message, icon: none }) } } catch (e) { console.error(e) } finally { uni.hideLoading() } }, // 手动输入桌号查询 async manualSearch() { if (!this.manualCode) { return uni.showToast({ title: 请输入桌号, icon: none }) } uni.showLoading({ title: 查询中... }) try { const res await uni.request({ url: http://localhost:8080/api/shop/getByTable, method: GET, data: { tableNo: this.manualCode } }) if (res.data.code 200) { this.shopData res.data.data uni.navigateTo({ url: /pages/order/order?shopId${this.shopData.shop.id}table${this.manualCode} }) } } catch (e) { console.error(e) } finally { uni.hideLoading() } }, goToPage() { if (this.shopData.isDelivery) { uni.navigateTo({ url: /pages/delivery/delivery?shopId${this.shopData.shop.id} }) } else { uni.navigateTo({ url: /pages/order/order?shopId${this.shopData.shop.id} }) } }, onCameraError(e) { console.error(相机错误:, e) uni.showModal({ title: 提示, content: 无法打开相机请检查权限设置, showCancel: false }) } } } /script style scoped .scan-page { min-height: 100vh; background: #f5f5f5; padding: 40rpx; } .header { text-align: center; margin-bottom: 60rpx; } .title { font-size: 48rpx; font-weight: bold; color: #333; display: block; } .subtitle { font-size: 28rpx; color: #999; margin-top: 16rpx; } .scan-area { width: 100%; height: 600rpx; background: #000; border-radius: 20rpx; overflow: hidden; position: relative; } .camera { width: 100%; height: 100%; } .scan-frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400rpx; height: 400rpx; border: 4rpx solid rgba(255,255,255,0.5); border-radius: 20rpx; } .corner { position: absolute; width: 60rpx; height: 60rpx; border-color: #07c160; border-style: solid; } .top-left { top: 0; left: 0; border-width: 6rpx 0 0 6rpx; border-radius: 10rpx 0 0 0; } .top-right { top: 0; right: 0; border-width: 6rpx 6rpx 0 0; border-radius: 0 10rpx 0 0; } .bottom-left { bottom: 0; left: 0; border-width: 0 0 6rpx 6rpx; border-radius: 0 0 0 10rpx; } .bottom-right { bottom: 0; right: 0; border-width: 0 6rpx 6rpx 0; border-radius: 0 0 10rpx 0; } .scan-tip { position: absolute; bottom: -60rpx; left: 50%; transform: translateX(-50%); color: #fff; font-size: 28rpx; white-space: nowrap; } .result-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255,255,255,0.95); padding: 60rpx; border-radius: 20rpx; text-align: center; } .result-text { display: block; font-size: 32rpx; color: #333; margin: 20rpx 0 40rpx; } .btn-confirm { background: #07c160; color: #fff; border: none; border-radius: 50rpx; padding: 20rpx 80rpx; font-size: 32rpx; } .manual-input { margin-top: 60rpx; text-align: center; } .divider { color: #999; font-size: 28rpx; margin: 0 20rpx; } .input { display: inline-block; width: 300rpx; background: #fff; border-radius: 40rpx; padding: 16rpx 30rpx; font-size: 28rpx; } .btn-search { display: inline-block; margin-left: 20rpx; background: #07c160; color: #fff; border: none; border-radius: 40rpx; padding: 16rpx 40rpx; font-size: 28rpx; } /style2️⃣pages/order/order.vue- 扫码后的点餐页 ⭐vuetemplate view classorder-page !-- 店铺信息 -- view classshop-header image :srcshop.coverImg classshop-cover modeaspectFill/image view classshop-info text classshop-name{{ shop.name }}/text text classtable-info v-iftable桌号: {{ table }}/text text classshop-desc{{ shop.description }}/text /view /view !-- 菜单列表 -- view classmenu-container view v-forcategory in menuList :keycategory.categoryId classcategory-section :idcat- category.categoryId text classcategory-title{{ category.categoryName }}/text view v-foritem in category.items :keyitem.id classmenu-item clickshowItemDetail(item) image :srcitem.image classitem-img modeaspectFill/image view classitem-info text classitem-name{{ item.name }}/text text classitem-desc{{ item.description }}/text view classitem-bottom text classitem-price¥{{ item.price }}/text view classcart-control click.stopaddToCart(item) uni-icons v-ifgetCartCount(item.id) 0 typecheckbox-filled size20 color#07c160/uni-icons text v-ifgetCartCount(item.id) 0 classcount {{ getCartCount(item.id) }} /text uni-icons v-else typeplus-filled size20 color#999/uni-icons /view /view /view /view /view /view !-- 底部购物车栏 -- view classcart-bar v-ifcartList.length 0 view classcart-info clickshowCartPopup true view classcart-icon-wrap uni-icons typecart-filled size32 color#fff/uni-icons text classcart-badge{{ totalCount }}/text /view view classcart-price text classtotal-label合计:/text text classtotal-amount¥{{ totalPrice }}/text /view /view button classbtn-submit clicksubmitOrder去结算/button /view !-- 购物车弹窗 -- uni-popup refcartPopup typebottom view classcart-popup view classpopup-header text classpopup-title购物车/text text classclear-btn clickclearCart清空/text /view scroll-view scroll-y classcart-list view v-foritem in cartList :keyitem.id classcart-item text classcart-item-name{{ item.name }}/text view classcart-item-control view classminus-btn clickremoveFromCart(item.id)-/view text classcart-item-count{{ item.count }}/text view classplus-btn clickaddToCart(item)/view /view text classcart-item-price¥{{ (item.price * item.count).toFixed(2) }}/text /view /scroll-view /view /uni-popup /view /template script export default { data() { return { shopId: null, table: , shop: {}, menuList: [], cartList: [], // { id, name, price, count, image } showCartPopup: false, totalPrice: 0.00, totalCount: 0 } }, onLoad(options) { this.shopId options.shopId this.table options.table || this.loadShopData() }, methods: { async loadShopData() { uni.showLoading({ title: 加载中... }) try { const res await uni.request({ url: http://localhost:8080/api/scan/parse, method: GET, data: { code: CAMPUS://SHOP?id${this.shopId}table${this.table} } }) if (res.data.code 200) { this.shop res.data.data.shop this.menuList res.data.data.menu } } catch (e) { console.error(e) } finally { uni.hideLoading() } }, addToCart(item) { const exist this.cartList.find(c c.id item.id) if (exist) { exist.count } else { this.cartList.push({ id: item.id, name: item.name, price: item.price, count: 1, image: item.image }) } this.calcTotal() }, removeFromCart(id) { const item this.cartList.find(c c.id id) if (item) { item.count-- if (item.count 0) { this.cartList this.cartList.filter(c c.id ! id) } } this.calcTotal() }, getCartCount(id) { const item this.cartList.find(c c.id id) return item ? item.count : 0 }, calcTotal() { this.totalCount this.cartList.reduce((sum, item) sum item.count, 0) this.totalPrice this.cartList.reduce( (sum, item) sum item.price * item.count, 0 ).toFixed(2) }, async submitOrder() { if (this.cartList.length 0) return uni.showLoading({ title: 提交中... }) try { const res await uni.request({ url: http://localhost:8080/api/errand/publish, method: POST, header: { Authorization: Bearer uni.getStorageSync(token) }, data: { shopId: this.shopId, tableNo: this.table, items: this.cartList.map(item ({ menuId: item.id, count: item.count, price: item.price })), totalPrice: this.totalPrice } }) if (res.data.code 200) { uni.showModal({ title: 下单成功, content: 订单号: ${res.data.data.orderNo}, showCancel: false, success: () { uni.redirectTo({ url: /pages/orderDetail/orderDetail?orderNo${res.data.data.orderNo} }) } }) } } catch (e) { console.error(e) } finally { uni.hideLoading() } }, clearCart() { this.cartList [] this.calcTotal() this.showCartPopup false } } } /script style scoped .order-page { padding-bottom: 140rpx; } .shop-header { background: #fff; padding: 30rpx; display: flex; gap: 20rpx; } .shop-cover { width: 160rpx; height: 160rpx; border-radius: 16rpx; } .shop-info { flex: 1; display: flex; flex-direction: column; justify-content: center; } .shop-name { font-size: 34rpx; font-weight: bold; color: #333; } .table-info { font-size: 24rpx; color: #07c160; margin-top: 8rpx; } .shop-desc { font-size: 24rpx; color: #999; margin-top: 8rpx; } .menu-container { background: #fff; margin-top: 20rpx; padding: 0 30rpx; } .category-title { font-size: 30rpx; font-weight: bold; color: #333; padding: 30rpx 0 20rpx; display: block; border-bottom: 1rpx solid #f0f0f0; } .menu-item { display: flex; padding: 24rpx 0; border-bottom: 1rpx solid #f5f5f5; } .item-img { width: 160rpx; height: 160rpx; border-radius: 12rpx; margin-right: 20rpx; } .item-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .item-name { font-size: 28rpx; font-weight: bold; color: #333; } .item-desc { font-size: 24rpx; color: #999; margin-top: 8rpx; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .item-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 16rpx; } .item-price { font-size: 32rpx; color: #ff4d4f; font-weight: bold; } .cart-control { display: flex; align-items: center; gap: 16rpx; } .count { font-size: 28rpx; color: #07c160; font-weight: bold; min-width: 40rpx; text-align: center; } .cart-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 120rpx; background: #2d2d2d; display: flex; align-items: center; justify-content: space-between; padding: 0 30rpx; box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.1); } .cart-info { display: flex; align-items: center; gap: 20rpx; } .cart-icon-wrap { position: relative; width: 80rpx; height: 80rpx; background: #07c160; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: -40rpx; } .cart-badge { position: absolute; top: -10rpx; right: -10rpx; background: #ff4d4f; color: #fff; font-size: 20rpx; padding: 4rpx 12rpx; border-radius: 20rpx; } .total-label { font-size: 28rpx; color: #999; } .total-amount { font-size: 36rpx; color: #ff4d4f; font-weight: bold; margin-left: 10rpx; } .btn-submit { background: linear-gradient(135deg, #07c160, #06ad56); color: #fff; border: none; border-radius: 50rpx; padding: 24rpx 60rpx; font-size: 32rpx; font-weight: bold; } .cart-popup { background: #fff; border-radius: 30rpx 30rpx 0 0; padding: 30rpx; max-height: 60vh; } .popup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; } .popup-title { font-size: 34rpx; font-weight: bold; color: #333; } .clear-btn { font-size: 28rpx; color: #999; } .cart-item { display: flex; align-items: center; padding: 20rpx 0; border-bottom: 1rpx solid #f0f0f0; } .cart-item-name { flex: 1; font-size: 28rpx; color: #333; } .cart-item-control { display: flex; align-items: center; gap: 24rpx; margin: 0 20rpx; } .minus-btn, .plus-btn { width: 48rpx; height: 48rpx; border-radius: 50%; background: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 32rpx; color: #333; } .cart-item-count { font-size: 28rpx; font-weight: bold; min-width: 40rpx; text-align: center; } .cart-item-price { font-size: 28rpx; color: #ff4d4f; font-weight: bold; min-width: 120rpx; text-align: right; } /style️ 三、数据库表设计sql-- 店铺表 CREATE TABLE shop ( id BIGINT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100) NOT NULL COMMENT 店铺名, cover_img VARCHAR(500) COMMENT 封面图, description TEXT COMMENT 描述, address VARCHAR(200) COMMENT 地址, phone VARCHAR(20) COMMENT 电话, business_hours VARCHAR(50) COMMENT 营业时间, status TINYINT DEFAULT 1 COMMENT 1-营业 0-休业, qrcode_content TEXT COMMENT 二维码内容(JSON), create_time DATETIME DEFAULT CURRENT_TIMESTAMP ) COMMENT 店铺表; -- 桌台表 CREATE TABLE table_info ( id BIGINT PRIMARY KEY AUTO_INCREMENT, shop_id BIGINT NOT NULL COMMENT 店铺ID, table_no VARCHAR(20) NOT NULL COMMENT 桌号 A01, qrcode_content VARCHAR(500) COMMENT 桌台二维码内容, status TINYINT DEFAULT 1 COMMENT 1-空闲 0-占用, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY uk_shop_table (shop_id, table_no) ) COMMENT 桌台表; -- 扫码记录表(用于数据分析) CREATE TABLE scan_log ( id BIGINT PRIMARY KEY AUTO_INCREMENT, shop_id BIGINT NOT NULL, table_no VARCHAR(20) COMMENT 桌号, scan_type VARCHAR(20) COMMENT SHOP/DELIVERY/COUPON, user_id BIGINT COMMENT 用户ID(可选), openid VARCHAR(100) COMMENT 微信openid, scan_time DATETIME DEFAULT CURRENT_TIMESTAMP, INDEX idx_shop_time (shop_id, scan_time) ) COMMENT 扫码记录表; 四、扫码流程总结用户扫码 ↓ uni.scanCode() 获取二维码内容 ↓ 请求后端 /api/scan/parse?codexxx ↓ 后端解析协议头 CAMPUS:// ↓ 根据类型(SHOP/DELIVERY/COUPON/PICKUP)分发 ↓ 返回对应数据(店铺菜单/配送费/优惠券/取餐码) ↓ 前端跳转对应页面 关键技术点技术用途✅uni.scanCode()微信扫码API✅ 协议头识别CAMPUS://区分业务类型✅ URL参数解析提取店铺ID、桌号等✅ Redis记录扫码日志数据统计分析✅ 分布式锁防止重复接单✅ JWT认证用户身份验证需要完整的连锁店多店铺管理、奶茶点餐特殊逻辑(规格选择)、同城外卖配送系统代码吗请告诉我