vue lottery

Introduction

Based on the vue.js (3.x) lottery project, take screenshots and save each lottery picture locally, with background music

Technology stack: vue3.x + pinia + vue-router4.x + element-plus + @vueuse/core + axios + mockjs + html2canvas + nprogress + scss + typescript

Based on the vue.js (2.x) version, you can switch branches to view feature-vue2;

Welcome to star or fork and follow!

illustrate

注意: This project uses node-sass, which is strongly dependent on the nodejs version. Please refer to the node-sass guide for details. In this project, the [email protected] version is installed to match node@14 version, so please pay special attention. If the installed node version does not match node-sass, please reinstall the node version or replace node-sass with dart-sass.

Example address

Click to view

Implementation ideas

There are several main points to注意in this project:

1. In order to ensure data security, it is necessary to set up a login. After the login is successful, the data passed in the background is obtained, and the returned data also needs to be verified whether you have logged in;

2. Mockjs is used to simulate data here. Considering that there are thousands of pieces of data for the official lottery, cookie and storage storage space are limited, so we consider using indexDB supported by the browser to store the user database, as well as the main awards and the number of people drawn for the award. of;

3. The results of each lottery must be returned to the back-end storage data to ensure the consistency of front-end and back-end data (the logical function of the specific lottery is not limited, depending on the results communicated by the front-end and back-end colleagues. In this example, the front-end implements the extraction, in src /views/lottery file);

4. Record the number of people in a single lottery draw. No matter how many draws, as long as the number of prizes in this round is met, the draw of this round is declared over. The code logic is not based on the number of draws;

5. At the same time, the user data drawn each time needs to be processed in three steps:

   A. Post back to the background;

   B. Synchronize to the local indexDB to prevent the user data that has been drawn from being lost when the current page is refreshed and enter the lottery pool again;

   C. Capture the lottery screen image for subsequent comparison;

6. Considering that there will definitely be a prize draw at the lottery site (not to mention, everyone who has participated in the annual meeting knows that those who don’t win will definitely call the boss to draw again on the spot), so you can set other generals in the background, and the number of people is empty (if It is empty. The front-end will draw 99 people by default. After all, 99 people are enough to add the number of prizes,) or more, which can also be changed flexibly;

Configuration file

For the structure of data, refer to the following code structure:

 // 抽奖数据
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 : '' }
  ]
}

The project configuration file is located in src/utils/config. Just modify the corresponding items according to the comments.

 // 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' )
    }
  }
} 

Function

1. Before the draw, select the prizes you want to draw
2. Click the Start Lottery button (or Enter key) and the data will scroll
3. Click draw (or space bar) to end scrolling and display the winners.
4. Click again to start the drawing and enter the second step of the cycle. If the current round of drawing is completed, enter the first step and choose to draw other prizes.

screenshot

one. Interface screenshot:

Designed for 1920*1080 large screen display, it is also suitable for other PC terminals. The following is a screenshot of the main interface of the project:

two. Lottery screenshots:

Automatically save the lottery screenshot file to the local idea:

1. The implemented process logic is in the src/utils/screenshot file;
2. Since the browser does not support the node.js module fs to read and write files, this example uses html2canvas to complete the screenshot function. Specifically, use Baidu or Google;
3. After taking a screenshot, the most important thing is to automatically save it locally. This can be achieved by using the download and herf attributes of the a tag. It is triggered by automatically calling the click event at the end;
4. Note: It is possible that the avatar is not obtained under the screenshot function. After consulting the data, it is found that the avatar is simulated using mockjs, and the project code is deployed on another server, so there is a crossover situation that leads to this situation. The solution : The front end adds parameters in html2canvas ==> Allow cross-domain: allowTaint: true, and the server needs to allow cross-domain, that is, set CORS

develop

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

Depends on installation

 yarn install

Development and debugging

 yarn serve

Compile and build

 yarn build

eslint&fix

 yarn lint