我把抽奖系统改成了扫码版:手机报名,电脑开奖

我主要补的是开奖前后的流程：来宾用手机报名，主持人在电脑上确认名单、设置奖项，报名结束再切到大屏。电脑和手机连同一个可以互访的 Wi-Fi，整套程序不用外网，数据也留在主持电脑上。

01报名这一步，尽量简单

表单只留了姓名和手机号。来宾扫码填完，会拿到一个参与编号。相同号码不能重复报名，遇到重名，就用编号区分。

手机号做了格式检查，没有接短信验证。所以它能帮忙去重，兑奖时仍得核对填写的信息，不能把填了号码当成已经验证过身份。

我把手机端的功能也收在报名这件事上。全体名单、奖项配置和导出都只在主持电脑本机开放。信息填错了，就在报名结束前请主持人删除原记录，再填一次。

图 2｜手机端只留姓名和手机号两个输入框。

02准备工作都放到主持台

二维码、报名人数和名单，我放在了同一页。有人提交，名单会自动更新；有错误记录，报名开放时可以移除。确认人到齐了，再关闭报名，锁定这一场参与抽奖的范围。

奖项里我把总名额和每轮人数分开了。比如六份礼物，想分三轮发，每轮就设成两人。页面会根据剩余名额和未中奖人数限制本轮数量，活动名称和奖品说明也能一起修改。

重抽和换一场活动也分成了两个操作：重置结果会保留名单、重新开放报名；开始新活动才清空名单和结果、更换二维码，活动名称与奖项继续沿用。

03抽完以后，结果要留下来

原来的 Three.js 球体动画继续保留。开始时名牌转动，停止后展示中奖卡片，大屏支持全屏和空格控制，音乐可以单独开关。

我把开奖顺序定成了先保存、再展示：服务器从锁定名单里随机选人，把结果写好，再交给前端播放动画。同一条报名记录在整场活动里只会中奖一次，后面的奖项也会排除它。

请求失败时可以重试，但同一轮用的是固定编号。如果第一次已经保存，只是响应没传回来，重试拿到的还是原来那批人。开始新活动后，迟到的旧请求也不能再写进来。

记录存在本机文件里，刷新页面或重启程序后还能读取。报名名单和中奖名单可以分别导出 Excel，留给后续兑奖。页面会隐藏手机号的中间几位，导出文件保留完整号码，需要妥善保存。

04目前做到这里

前端用 Vue 3、Vite 和 Three.js，后端是 Node.js 与 Express。动画和交互留在页面，报名、抽取和保存交给后端。Windows 电脑装好 Node.js 20 或更新版本，用完整运行包就可以双击“启动抽奖.cmd”打开主持台；从 GitHub 下载源码则需要先安装依赖、构建页面。

目前做过自动测试和浏览器联调，还没有用实体手机完成真实活动扫码验证。带去现场前，我还需要用那里的 Wi-Fi 试报一人，走完开奖和导出。有些路由器会隔离设备，同一个 Wi-Fi 也未必互通；主持电脑也得保持运行，不能中途休眠。

项目来源：基于 moshang-ax/lottery 的 Vue 3 版本改造，保留上游 Three.js 抽奖效果与本地资源，沿用 MIT 许可。分发时需保留原有版权和许可声明，详见随附 LICENSE。