5个让咖啡店老板说‘明天就放桌上’的「扫码点单」网页模板（无WiFi密码、不注册、不跳转）
昨天下午，我带着打印好的二维码，走进巷口那家开了8年的‘慢时光咖啡’。老板老张只看了30秒，就说：“就这个！今晚打烊前，我要把它贴在收银台旁边。”
他没看代码，没问技术，只确认了3件事：
今天，公开这5个被12家小店验证过的网页模板——全部纯HTML/CSS/JS，单文件，无依赖，Vercel/GitHub Pages一键部署。
---
🧩 模板1：极简美式——3款咖啡+价格+下单按钮（适合吧台小黑板）
适用场景：单品咖啡馆、写字楼快取店
生成单页：「美式点单页」。仅显示3个卡片：「经典美式 22元」「燕麦拿铁 28元」「冷萃冰美 32元」。每个卡片含小图标（☕）、名称、价格、加购按钮。底部固定栏：「共选 X 件｜¥XX｜微信支付」。全页白底黑字，大字号，适配手机横屏。
🧩 模板2：奶茶DIY——基底+配料+甜度冰度滑动选择（适合连锁茶饮）
适用场景：喜茶/奈雪平价替代店
生成单页奶茶DIY页：顶部下拉选「基底（红茶/绿茶/乌龙茶）」，中间「配料（珍珠/芋圆/椰果）」多选，底部「甜度（无糖/少糖/正常）」「冰度（去冰/少冰/正常）」单选。实时计算总价，底部「下单」按钮唤起微信支付链接（用testpay参数模拟）。
<select multiple>+onchange实时计算，总价写死在按钮href里（例：wechat://pay?price=38），实际收款用线下扫码。🧩 模板3：烘焙套餐——图片轮播+套餐组合+备注框（适合面包房）
适用场景：家庭烘焙工作室、早市摊位
生成单页：「今日烘焙套餐」。顶部3图轮播（用img标签+CSS动画），下方3个套餐卡片（「早餐组合 ¥25」「下午茶礼盒 ¥58」「生日蛋糕 ¥198」），每张卡有「立即预订」按钮和「备注（如：不要奶油）」输入框。提交后弹出「已收到！老板会在10分钟内微信联系您」。
alert()或<div id="success">控制显隐，数据存在localStorage供店主每日导出。🧩 模板4：会员储值——扫码充100送10，余额实时显示（适合老客维系）
适用场景：社区咖啡馆、常驻客户多的店
生成单页储值页：标题「会员充值享优惠」，输入框「充值金额」，按钮「立即充值」，下方显示「当前余额：¥0（首次充值送¥10）」。充值后余额本地存储，刷新不丢失。
🧩 模板5：外卖地址——3步收货信息+自动复制（适合无配送系统小店）
适用场景：只做周边3公里骑手配送的店
生成单页外卖页：「1. 姓名 2. 电话 3. 详细地址（含门牌号）」三行输入框，「提交」按钮。提交后自动复制「【订单】姓名：张三｜电话：138****｜地址：梧桐苑5栋201」到剪贴板，并弹出「已复制！请微信发给老板」。
navigator.clipboard.writeText()，Cursor自动补全兼容性处理。---
🚀 部署指南（5分钟搞定）
order.html；✅ 老张店实测：首日扫码23人次，成交17单，其中8单是新客。“以前他们嫌连WiFi麻烦，现在扫完就点，连抬头看我都省了。”
---
💡 接单提示：怎么把模板变成生意？
> 🌟 最后一句：最好的产品，是让用户感觉不到你在卖技术——只觉得“这玩意儿真顺手”。
---
立即行动：打开Claude，把本文任一Prompt中的「美式」「奶茶」「烘焙」换成你身边小店的品类，生成属于你的第一版网页。