公司年會用了個人抽獎程序，而後我中獎了……

這是我去年寫的代碼和文章，眼看又到年末抽獎季了，翻出來洗洗還能再用

背景

臨近年底，又到了各大公司舉辦年會的時候了。對於年會，你們最關心的應該就是抽獎了吧？雖然中獎機率一般不高，但總歸是個機會，期待一下也是好的。

最近，咱們部門舉辦了年會，也有抽獎環節。臨近年會的前幾天，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譯站，萬一有人關注呢