🐟

5个让早餐店老板抢着放桌上的「扫码点餐核销」网页模板：不联网、不注册、不跳转，连阿姨都能操作

站

站长

2026年4月20日 · 阅读 3062 · 点赞 86 · 预计 4 分钟

☕ 早餐店不需要小程序——需要一张‘会认钱’的二维码

老张的煎饼摊在地铁口摆了12年。去年儿子给他装了某品牌扫码点餐系统，结果：

早高峰WiFi断3次，订单卡在‘支付中’

阿姨不会看后台，漏打5单豆浆

顾客扫完码，跳出公众号关注页，转身走了

上月，我帮他做了个网页：

顾客扫桌上二维码 → 进入菜单页 → 点‘煎饼果子+豆浆’→ 付钱（微信原生支付）

老张手机扫同一个二维码 → 页面自动变‘待核销列表’→ 点一下‘完成’，喇叭响一声

全程不联网、不注册、不跳转，连微信都不用登录（用H5支付直连）

3天后，隔壁包子铺王姐拿着保温桶来找我：「你给老张做的那个‘响一声’的，能给我也做一个吗？」

今天，公开5个已验证的模板核心逻辑（全部开源，复制即用）。

---

🧩 模板1：极简核销页（适合1人摊位）

特点：单页双模式，扫码即切换

实现原理：

URL带参数 ?mode=customer（顾客）或 ?mode=owner（老板）

顾客页：商品列表+微信JSAPI支付（用wx.config注入，无需后端）

老板页：读取同一localStorage订单队列，点「完成」清空该单

✅ 顾客扫 https://xxx.netlify.app/?mode=customer → 点单付款
✅ 老板扫 https://xxx.netlify.app/?mode=owner → 核销

---

🧩 模板2：语音播报核销（防漏单神器）

加一行代码，让老板专注摊饼不盯手机：

// 在核销成功后触发
const audio = new Audio('data:audio/wav;base64,UklGRigAAABXQVZFZm10IBAAAAABAAEARKwAAIJsAAACAAABAAEAQB8AAEAfAAABAAgAZGF0YQAAAAA=');
audio.play();

这是1秒‘叮’音效的base64编码，无需外链、不耗流量。

---

🧩 模板3：离线订单缓存（WiFi断了也不丢单）

用localStorage存未核销订单：

// 顾客付款成功后
const order = { id: Date.now(), items: ['煎饼', '豆浆'], time: new Date().toLocaleString() };
const list = JSON.parse(localStorage.getItem('orders') || '[]');
list.push(order);
localStorage.setItem('orders', JSON.stringify(list));

老板页启动时自动读取：JSON.parse(localStorage.getItem('orders'))

---

🧩 模板4：手写签名核销（防纠纷）

老板页加canvas签名区：

用toDataURL()转为图片存入订单，打印小票时可附签名截图。

---

🧩 模板5：自动轮播待核销（解放双眼）

老板页加自动轮播：

setInterval(() => {
  const orders = JSON.parse(localStorage.getItem('orders') || '[]');
  if (orders.length) {
    document.querySelector('.current-order').textContent = 
      第${orders.length}单：${orders[0].items.join('+')} | ${orders[0].time};
  }
}, 3000);

每3秒刷新一条，老板抬头看一眼就行。

---