vue lottery
1.0.0
Basado en el proyecto de lotería vue.js (3.x), tome capturas de pantalla y guarde cada imagen de lotería localmente, con música de fondo.
Pila de tecnología: vue3.x + pinia + vue-router4.x + element-plus + @vueuse/core + axios + mockjs + html2canvas + nprogress + scss + mecanografiado
Según la versión de vue.js (2.x), puede cambiar de rama para ver feature-vue2;
¡Bienvenido a star o fork y síguenos!
注意: este proyecto utiliza node-sass, que depende en gran medida de la versión de nodejs. Consulte la guía de node-sass para obtener más detalles. En este proyecto, la versión [email protected] está instalada para que coincida con node@14 . así que preste especial atención. Si la versión del nodo instalado no coincide con node-sass, reinstale la versión del nodo o reemplace node-sass con dart-sass.
Haga clic para ver
Hay varios puntos principales a注意en este proyecto:
Para garantizar la seguridad de los datos, es necesario configurar un inicio de sesión después de que el inicio de sesión sea exitoso, se obtienen los datos pasados en segundo plano y los datos devueltos también deben verificar si ha iniciado sesión;
Mockjs se usa para simular datos aquí. Teniendo en cuenta que hay miles de datos para la lotería oficial, las cookies y el espacio de almacenamiento son limitados, por lo que consideramos usar indexDB compatible con el navegador para almacenar la base de datos del usuario, así como la base de datos principal. premios y el número de personas sorteadas para el premio;
Los resultados de cada lotería deben devolverse a los datos de almacenamiento de back-end para garantizar la coherencia de los datos de front-end y back-end (la función lógica de la lotería específica no está limitada, dependiendo de los resultados comunicados por el front-end y colegas de back-end. En este ejemplo, el front-end implementa la extracción, en el archivo src /views/lottery);
Registre el número de personas en un solo sorteo de lotería. No importa cuántos sorteos, siempre que se alcance el número de premios en esta ronda, el sorteo de esta ronda se declara finalizado. La lógica del código no se basa en el número de sorteos. ;
Al mismo tiempo, los datos del usuario extraídos cada vez deben procesarse en tres pasos:
A. Publicar en segundo plano;
B. Sincronizar con el indexDB local para evitar que los datos del usuario extraídos se pierdan cuando se actualice la página actual y vuelvan a ingresar al grupo de lotería;
C. Capturar la imagen de la pantalla de lotería para su posterior comparación;
Teniendo en cuenta que definitivamente habrá un sorteo de premios en el sitio de la lotería (sin mencionar que todos los que han participado en la reunión anual saben que aquellos que no ganen definitivamente llamarán al jefe para volver a sortear en el acto), entonces puedes establezca otros generales en segundo plano y el número de personas estará vacío (si está vacío, la interfaz atraerá a 99 personas de forma predeterminada. Después de todo, 99 personas son suficientes para sumar el número de premios) o más, lo cual también se puede cambiar de forma flexible;
Para conocer la estructura de los datos, consulte la siguiente estructura de código:
// 抽奖数据
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 : '' }
]
}El archivo de configuración del proyecto se encuentra en src/utils/config. Simplemente modifique los elementos correspondientes de acuerdo con los comentarios.
// 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' )
}
}
} uno. Captura de pantalla de la interfaz:
Diseñado para pantalla grande de 1920*1080, también es adecuado para otros terminales de PC. La siguiente es una captura de pantalla de la interfaz principal del proyecto:
dos. Capturas de pantalla de lotería:
Guarde automáticamente el archivo de captura de pantalla de la lotería en la idea local:
html2canvas para completar la función de captura de pantalla. Específicamente, use Baidu o Google;html2canvas ==> Permitir dominio cruzado: enableTaint: true, y el servidor necesita permitir el dominio cruzado, es decir, configurar CORS git clone https://github.com/renmingliang/vue-lottery.git
yarn install
yarn serve
yarn build
yarn lint
