前言
临近年关抽奖活动，基于vue2.0+开发的抽奖项目。
便于查看效果，贴上相关地址：
- 在线示例地址：
- github地址：
简介
基于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: '活动规则：
关注微信公众号“家家365”回复您的员工编号+姓名（如“M0001234王小明”）完成实名认证收到系统回复后即代表进入抽奖名单中' } }}复制代码 流程
- 抽奖前，选择需要抽取的奖项
- 点击开始抽奖按钮(或Enter回车键)，数据滚动
- 点击抽取(或space空格键)结束滚动，显示中奖人员
- 再点击开始抽取进入第2步循环，若完成本轮抽取，则进入第1步选择抽取其他奖项
截图
一。界面截图： 针对1920*1080大屏显示，也可适配其他PC端，以下为该项目主要界面截图：
[登录界面]
[数据加载界面]
[抽奖界面]
二。抽奖截屏：
[截屏示例]
- 实现的流程逻辑在
src/utils/screenshot文件中； - 由于浏览器browser不支持node.js的模块fs读写文件，因而本示例采用
html2canvas来完成截图功能，具体的使用自行百度或谷歌； - 截完屏，最主要的是需要自动保存至本地，利用a标签的download和herf属性可以实现，通过在结束时，自动调用click的事件来触发；
- 最后剩余一个
BUG，在截屏里面，是没有将图像获取下来，经查阅资料发现，是由于头像采用的mockjs模拟的，而项目代码又部署在另外一个服务器，因而出现跨越情况导致此情况出现，解决办法:在html2canvas中添加参数 ==> 允许跨域：allowTaint: true，服务器地址运行跨越，即设置 ；
开发
# 克隆项目git clone https://github.com/renmingliang/vue-lottery.git# 切换至目录cd vue-lottery# 安装依赖npm install# 本地浏览器地址：localhost:9301npm run dev复制代码