vue lottery

簡介

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

技術堆疊： vue3.x + pinia + vue-router4.x + element-plus + @vueuse/core + axios + mockjs + html2canvas + nprogress + scss + typescript

基於vue.js(2.x)版本，可切換分支查看feature-vue2；

歡迎star 或 fork 關注！

說明

注意：本專案內使用node-sass，由於此強依賴nodejs 版本，具體可看node-sass 指南； 本專案內，安裝[email protected]版本，與之符合node@14版本，請特別注意。 如已安裝node 版本與node-sass 不匹配，請重新安裝node版本，或將node-sass 替換成dart-sass。

範例地址

點擊查看

實現思路

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

1. 為了確保資料安全，需要設定登錄，在登入成功之後的前提下取得後台傳遞的數據，以及回傳資料也需要驗證是否已登入；

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

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

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

5. 同時每次抽中的使用者資料需要三步驟處理：

   A. 回傳至後台；

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

   C. 截取抽獎螢幕圖，用於事後比對；

6. 考慮抽獎現場肯定會加抽獎的環節（不多說，參與過年會的都知道，沒抽中的人肯定會叫喊老闆現場再抽的），故可以在後台設置其他將，人數為空(若為空。

設定檔

資料的構造，參考如下程式碼結構：

 // 抽奖数据
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' ,
    // 参与限制人数
    limit : 100
  } ,
  // 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 : 'lottery2022' ,
    // indexDB版本
    DBver : '1' ,
    // indexDB存储表名称
    storeName : {
      user : 'user' , // 用户
      award : 'type' // 奖项
    } ,
    // 背景音乐
    music : {
      show : false ,
      src : require ( '../assets/media/shiji.mp3' )
    } ,
    // 参与规则
    rule : {
      show : true ,
      img : require ( '../assets/images/QR-code.jpg' )
    }
  }
} 

功能

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

截圖

一。介面截圖：

針對1920*1080大螢幕設計顯示，當然也適合其他PC端，以下為此專案主要介面截圖：

二。抽獎截圖：

自動儲存的抽獎截圖檔案至本地思路：

1. 實現的流程邏輯在src/utils/screenshot檔案中；
2. 由於瀏覽器browser不支援node.js的模組fs讀寫文件，因而本範例採用html2canvas來完成截圖功能，具體的使用自行百度或Google；
3. 截完屏，最主要的是需要自動保存至本地，利用a標籤的download和herf屬性可以實現，透過在結束時，自動調用click的事件來觸發；
4. 注意：可能在截圖功能下，出現沒有將頭像獲取下來情況，經查閱資料發現，是由於頭像採用的mockjs模擬的，而項目代碼部署在另外一個伺服器，因而出現跨越情況導致此情況出現，解決辦法:前端在html2canvas中加入參數==> 允許跨域：allowTaint: true，同時伺服器需要允許跨越，即設定CORS

開發

 git clone https://github.com/renmingliang/vue-lottery.git

依賴安裝

 yarn install

開發偵錯

 yarn serve

編譯建構

 yarn build

eslint & fix

 yarn lint