这是我去年写的代码和文章，眼看又到年底抽奖季了，翻出来洗洗还能再用
背景
临近年末，又到了各大公司举办年会的时候了。对于年会，大家最关心的应该就是抽奖了吧？虽然中奖概率通常不高，但总归是个机会，期待一下也是好的。
最近，我们部门举办了年会，也有抽奖环节。临近年会的前几天，Boss 突然找到我，说要做一个抽奖程序，部门年会要用。我当时都懵了：就三天时间，万一做的程序有bug，岂不是要被现场百十号人的唾沫给淹死？没办法，Boss 看起来对我很有信心，我也只能硬着头皮上了。
需求
- 要一个设置页面，包括设置奖项、参与人员名单等。
- 如果单个奖项中奖人数过多，可分批抽取，每批人数可设置。
- 默认按奖项顺序抽奖，也可选定某个奖项开始。
- 可删除没到场的中奖者，同时可再次抽取以作替补。
- 可在任意奖项之间切换，可查中奖记录名单
- 支持撤销当前轮次的抽奖结果，重新抽取。
实现
身为Web前端开发，自然想到用Web技术来实现。本着不重复造轮子的原则，首先求助Google，Github。搜了一圈好像没有找到特别好用的程序能直接用的。后来看到一个Github上的一个项目，用 TagCanvas 做的抽奖程序，界面挺好，就是逻辑有问题，点几次就崩溃了。代码是不能拿来用了，标签云这种抽奖形式倒是可以借鉴。于是找来文档看了下基本用法，很快就集成到页面里了。
由于设置页面涉及多种交互，纯手写太费时间了，直接用框架。平时 Element UI 用得比较多，自然就用它了。考虑到年会现场可能没有网络，就把框架相关的JS和CSS都下载到本地，直接引用。为了快速开发，也没搭建webpack构建工具了，直接在浏览器里引入JS。
<link rel="stylesheet" href="css/reset.css" />
<link
rel="stylesheet"
href="js/element-ui@2.4.11/lib/theme-chalk/index.css"
/>
<script src="js/polyfill.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/element-ui@2.4.11/lib/index.js"></script>
<script src="js/member.js"></script>
- 先设计数据结构。
奖项列表
awards
[{
"name": "二等奖",
"count": 25,
"award": "办公室一日游"
}, {
"name": "一等奖",
"count": 10,
"award": "BMW X5"
}, {
"name": "特等奖",
"count": 1,
"award": "深圳湾一号"
}]
参与人列表 members
[{
"id": 1,
"name": "张三"
}, {
"id": 2,
"name": "李四"
}]
待抽奖人员列表players，是members 的子集
[{
"id": 1,
"name": "张三"
}]
抽奖结果列表result，按奖项顺序索引
[[{
"id": 1,
"name": "张三"
}], [{
"id": 2,
"name": "李四"
}]]
- 设置页面 包括奖项设置和参与人员列表。
- 抽奖页面
具体代码可以去我的Github项目 查看，方便的话可以点个 star。也可以现在体验一下。由于时间仓促，代码写得比较将就。
年会当天抽中了四等奖：1000元购物卡。我是不是该庆幸自己没中特等奖……
有个小小的请求
在掘金已经写了20多篇技术文章了，承蒙大家厚爱，有过几篇阅读数过万的文章，总阅读数也突破了10万。在这里非常感谢各位的金手指！但是也有个小小的遗憾，每篇文章后面我都留了我的微信公众号1024译站二维码，但不知道为什么关注的人非常少。要是每篇读者有10%的人来关注，估我计做梦都会笑醒吧，哈哈……像极了小时候的梦想“要是全国每人给我一块钱，我就有好多个亿了！”如果发生了，只能说是个奇迹。现在我就有这个疯狂的想法，想邀请你来一起创造这个奇迹！只要动动你的金手指，关注下1024译站这个公众号，就能第一时间收到我用心创作的技术干货！不花一分钱！微信最近也推出了付费阅读的功能，说明优质内容收费是大趋势，以后免费的优质内容越来越少了！我也建了微信粉丝群，如果真的发生奇迹，必定倾情回馈！二维码就在下面，手机扫起来，一起见证奇迹！
