基於vue2.0+ 抽獎項目

前言

臨近年關抽獎活動，基於vue2.0+開發的抽獎項目。

便於查看效果，貼上相關地址：

• 在線示例地址：快速訪問
• github地址：查看源碼

簡介

基於vue.js抽獎項目，截屏保存每次抽獎圖片至本地，附帶背景音樂

技術棧：vue + vuex + vue-router + axios + elementUI + mock + html2canvas + nprogress + less + ECMAScript6

本項目目前處於持續更新階段，歡迎star，issue關注！

說明

實現思路

本項目主要有如下幾個點須要注意：

1. 爲了保證數據安全，須要設置登陸，在登陸成功以後的前提下獲取後臺傳遞的數據，以及回傳數據也須要驗證是否已登陸；

2. 這裏利用mock來模擬數據。考慮抽獎的數據都上千條，cookie和storage存儲空間受限都不夠用，依次考慮利用瀏覽器支持的indexDB來存儲用戶數據庫，以及主要獎項和該獎項抽取的人數的；

3. 每次抽獎完成的結果，須返回給後臺存儲數據，以保障先後臺數據一致性（實現具體抽獎的邏輯功能，不受限，取決於先後臺同事本身溝通結果，本示例前端實現抽取，在src/views/lottery文件內）；

4. 記錄單次抽獎人數，不論抽多少次，只要知足本輪獎項人數，即宣告本輪抽取結束，代碼邏輯不以抽取多少次爲依據；

5. 同時每次抽中的用戶數據須要三步處理：

   A. 回傳至後臺；

   B. 同步至本地indexDB，防止當前頁刷新時丟失已抽中用戶數據，再一次進入抽獎池；

   C. 截取抽獎屏幕圖，用於過後比對；

6. 考慮抽獎現場確定會加抽獎項的環節（很少說，參與過年會的都知道，沒抽中的人確定會叫喊老闆現場再抽的），故能夠在後臺設置其餘將，人數爲空(若爲空。前端會默認設置抽取99人，畢竟加抽的獎項人數，99人足夠啦，)，或者更多，這裏也可靈活變更；

配置文件

數據的構造，參照以下代碼結構：

// 抽獎數據
data: {
  // 用戶
  userData: [
    {Company: '公司測1', CompleteID: '1', HeadImg: 'http://test.baoxianadmin.com/static/m/images/headImage/1.jpg', Name: '測1', Num: 'M1', OpenID: '1', Award: '0'},
    {Company: '公司測13', CompleteID: '13', HeadImg: 'http://test.baoxianadmin.com/static/m/images/headImage/13.jpg', Name: '測13', Num: 'M13', OpenID: '13', Award: '0'}
  ],
  // 獎項
  type: [
    {value: '9', label: '特等獎', number: '3'},
    {value: '1', label: '一等獎', number: '5'},
    {value: '2', label: '二等獎', number: '12'},
    {value: '3', label: '三等獎', number: '20'},
    {value: '4', label: '參與獎', number: '28'},
    {value: '5', label: '其餘', number: ''}
  ]
}
複製代碼

本項目配置文件位於src/utils/config，按照註釋相應地修改對應項就好。

// global config 注意: 全部接口均爲mock測試，項目中須要本身替換
const config = {
  // 1.登陸頁
  login: {
    // 登陸請求地址
    url: '/zt_lottery/login',
    // 檢測登錄狀態
    checkUrl: '/zt_lottery/check_login',
    state: {
      // 當前公司提示語
      msg: '民太安集團年會抽獎系統',
      form: {
        username: 'mta2018',
        trigger: 'blur',
        show: true
      }
    }
  },
  // 2.加載數據頁
  onload: {
    // 獲取數據地址
    url: '/zt_lottery/list_member'
  },
  // 3.中獎活動頁
  lottery: {
    // 回傳中獎數據地址
    url: '/zt_lottery/add',
    state: {
      // 樣式
      style: {
        // 主背景圖
        bg: { // 在請求資源路徑時，須要require
          backgroundImage: `url(${require('../assets/images/background.png')})`,
          backgroundRepeat: 'no-repeat',
          backgroundSize: '100% 100%'
        },
        // 當前抽獎年
        year: {
          show: false,
          img: require('../assets/images/2017.png')
        }
      },
      // 是否須要下載抽獎截圖
      download: {
        show: false,
        delay: 800
      },
      // 滾動間隔
      intervalTime: 50,
      // 綁定鍵盤事件
      keyBand: {
        start: 'Enter',
        stop: 'Space'
      }
    }
  },
  // 4.全局state狀態
  state: {
    // indexDB名稱
    DBname: 'lottery2018',
    // indexDB版本
    DBver: '2',
    // indexDB存儲表名稱
    storeName: {
      user: 'user', // 用戶
      award: 'type' // 獎項
    },
    // 背景音樂
    music: {
      show: true,
      src: require('../assets/media/shiji.mp3')
    },
    // 參與規則
    rule: {
      show: true,
      img: require('../assets/images/QR-code.jpg'),
      html: '<p>活動規則：<br>關注微信公衆號「家家365」<br>回覆您的員工編號+姓名<br>（如「M0001234王小明」）完成實名認證<br>收到系統回覆後即表明進入抽獎名單中</p>'
    }
  }
}
複製代碼

流程

1. 抽獎前，選擇須要抽取的獎項
2. 點擊開始抽獎按鈕(或Enter回車鍵)，數據滾動
3. 點擊抽取(或space空格鍵)結束滾動，顯示中獎人員
4. 再點擊開始抽取進入第2步循環，若完成本輪抽取，則進入第1步選擇抽取其餘獎項

截圖

一。界面截圖： 針對1920*1080大屏顯示，也可適配其餘PC端，如下爲該項目主要界面截圖：

[登陸界面]

[數據加載界面]

[抽獎界面]

二。抽獎截屏：

[截屏示例]

自動保存的抽獎截圖文件至本地思路：

1. 實現的流程邏輯在src/utils/screenshot文件中；
2. 因爲瀏覽器browser不支持node.js的模塊fs讀寫文件，於是本示例採用html2canvas來完成截圖功能，具體的使用自行百度或谷歌；
3. 截完屏，最主要的是須要自動保存至本地，利用a標籤的download和herf屬性能夠實現，經過在結束時，自動調用click的事件來觸發；
4. 最後剩餘一個BUG，在截屏裏面，是沒有將圖像獲取下來，經查閱資料發現，是因爲頭像採用的mockjs模擬的，而項目代碼又部署在另一個服務器，於是出現跨越狀況致使此狀況出現，解決辦法:在html2canvas中添加參數 ==> 容許跨域：allowTaint: true，服務器地址運行跨越，即設置 CORS；

開發

# 克隆項目
git clone https://github.com/renmingliang/vue-lottery.git

# 切換至目錄
cd vue-lottery

# 安裝依賴
npm install

# 本地瀏覽器地址：localhost:9301
npm run dev

複製代碼