前言
臨近年關抽獎活動，基於vue2.0+開發的抽獎專案。
便於檢視效果，貼上相關地址：
簡介
基於vue.js抽獎專案，截圖儲存每次抽獎圖片至本地，附帶背景音樂
技術棧：vue + vuex + vue-router + axios + elementUI + mock + html2canvas + nprogress + less + ECMAScript6
本專案目前處於持續更新階段，歡迎star，issue關注！
說明
實現思路
本專案主要有以下幾個點需要注意：
-
為了保證資料安全，需要設定登入，在登入成功之後的前提下獲取後臺傳遞的資料，以及回傳資料也需要驗證是否已登入；
-
這裡利用mock來模擬資料。考慮抽獎的資料都上千條，cookie和storage儲存空間受限都不夠用，依次考慮利用瀏覽器支援的indexDB來儲存使用者資料庫，以及主要獎項和該獎項抽取的人數的；
-
每次抽獎完成的結果，須返回給後臺儲存資料，以保障前後臺資料一致性（實現具體抽獎的邏輯功能，不受限，取決於前後臺同事自己溝通結果，本示例前端實現抽取，在
src/views/lottery檔案內）； -
記錄單次抽獎人數，不論抽多少次，只要滿足本輪獎項人數，即宣告本輪抽取結束，程式碼邏輯不以抽取多少次為依據；
-
同時每次抽中的使用者資料需要三步處理：
A. 回傳至後臺；
B. 同步至本地indexDB，防止當前頁重新整理時丟失已抽中使用者資料，再一次進入抽獎池；
C. 擷取抽獎螢幕圖，用於事後比對；
-
考慮抽獎現場肯定會加抽獎項的環節（不多說，參與過年會的都知道，沒抽中的人肯定會叫喊老闆現場再抽的），故可以在後臺設定其他將，人數為空(若為空。前端會預設設定抽取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>'
}
}
}
複製程式碼流程
- 抽獎前，選擇需要抽取的獎項
- 點選開始抽獎按鈕(或EnterEnter鍵)，資料滾動
- 點選抽取(或space空格鍵)結束滾動，顯示中獎人員
- 再點選開始抽取進入第2步迴圈，若完成本輪抽取，則進入第1步選擇抽取其他獎項
截圖
一。介面截圖： 針對1920*1080大屏顯示，也可適配其他PC端，以下為該專案主要介面截圖：
[登入介面]
[資料載入介面]
[抽獎介面]
二。抽獎截圖：
[截圖示例]
- 實現的流程邏輯在
src/utils/screenshot檔案中； - 由於瀏覽器browser不支援node.js的模組fs讀寫檔案，因而本示例採用
html2canvas來完成截圖功能，具體的使用自行百度或谷歌； - 截完屏，最主要的是需要自動儲存至本地，利用a標籤的download和herf屬性可以實現，通過在結束時，自動呼叫click的事件來觸發；
- 最後剩餘一個
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
複製程式碼