公司年会用了个人抽奖程序，而后我中奖了……

这是我去年写的代码和文章，眼看又到年末抽奖季了，翻出来洗洗还能再用

背景

临近年底，又到了各大公司举办年会的时候了。对于年会，你们最关心的应该就是抽奖了吧？虽然中奖几率一般不高，但总归是个机会，期待一下也是好的。

最近，咱们部门举办了年会，也有抽奖环节。临近年会的前几天，Boss 忽然找到我，说要作一个抽奖程序，部门年会要用。我当时都懵了：就三天时间，万一作的程序有bug，岂不是要被现场百十号人的唾沫给淹死？没办法，Boss 看起来对我颇有信心，我也只能硬着头皮上了。

需求

1. 要一个设置页面，包括设置奖项、参与人员名单等。
2. 若是单个奖项中奖人数过多，可分批抽取，每批人数可设置。
3. 默认按奖项顺序抽奖，也可选定某个奖项开始。
4. 可删除没到场的中奖者，同时可再次抽取以做替补。
5. 可在任意奖项之间切换，可查中奖记录名单
6. 支持撤销当前轮次的抽奖结果，从新抽取。

实现

身为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>
复制代码

1. 先设计数据结构。 奖项列表 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": "李四"
}]]

复制代码

2. 设置页面 包括奖项设置和参与人员列表。

3. 抽奖页面

   

具体代码能够去个人Github项目 查看，方便的话能够点个 star。也能够如今体验一下。因为时间仓促，代码写得比较将就。

年会当天抽中了四等奖：1000元购物卡。我是否是该庆幸本身没中特等奖……

放出个人微信公众号：1024译站，万一有人关注呢