vue lottery
1.0.0
Basé sur le projet de loterie vue.js (3.x), prenez des captures d'écran et enregistrez chaque image de loterie localement, avec une musique de fond
Pile technologique : vue3.x + pinia + vue-router4.x + element-plus + @vueuse/core + axios + mockjs + html2canvas + nprogress + scss + typescript
Sur la base de la version vue.js (2.x), vous pouvez changer de branche pour afficher feature-vue2 ;
Bienvenue sur star ou fork et suivez !
注意: Ce projet utilise node-sass, qui dépend fortement de la version de nodejs. Veuillez vous référer au guide node-sass pour plus de détails. Dans ce projet, la version [email protected] est installée pour correspondre node@14 . alors s'il vous plaît, faites particulièrement attention. Si la version du nœud installée ne correspond pas à node-sass, veuillez réinstaller la version du nœud ou remplacer node-sass par dart-sass.
Cliquez pour voir
Il y a plusieurs points principaux à注意dans ce projet :
Afin de garantir la sécurité des données, il est nécessaire de configurer une connexion. Une fois la connexion réussie, les données transmises en arrière-plan sont obtenues et les données renvoyées doivent également être vérifiées si vous êtes connecté ;
Mockjs est utilisé ici pour simuler des données. Étant donné qu'il existe des milliers de données pour la loterie officielle, les cookies et l'espace de stockage sont limités, nous envisageons donc d'utiliser indexDB pris en charge par le navigateur pour stocker la base de données des utilisateurs, ainsi que la base de données principale. les récompenses et le nombre de personnes tirées au sort pour la récompense ;
Les résultats de chaque loterie doivent être renvoyés vers les données de stockage back-end pour assurer la cohérence des données front-end et back-end (la fonction logique de la loterie spécifique n'est pas limitée, en fonction des résultats communiqués par le front-end et les collègues back-end Dans cet exemple, le front-end implémente l'extraction, dans le fichier src /views/lottery);
Enregistrez le nombre de personnes lors d'un seul tirage de loterie. Quel que soit le nombre de tirages, tant que le nombre de prix de ce tour est atteint, le tirage de ce tour est déclaré terminé. La logique du code n'est pas basée sur le nombre de tirages. ;
Dans le même temps, les données utilisateur extraites à chaque fois doivent être traitées en trois étapes :
A. Poster en arrière-plan ;
B. Synchronisez-vous avec l'indexDB local pour éviter que les données utilisateur qui ont été tirées ne soient perdues lorsque la page actuelle est actualisée et entrez à nouveau dans le pool de loterie ;
C. Capturez l'image de l'écran de loterie pour une comparaison ultérieure ;
Considérant qu'il y aura certainement un tirage au sort sur le site de loterie (sans oublier que tous ceux qui ont participé à l'assemblée annuelle savent que ceux qui ne gagnent pas appelleront certainement le patron pour tirer à nouveau sur place), vous pouvez donc définissez d'autres généraux en arrière-plan, et le nombre de personnes est vide (s'il est vide. Le front-end attirera 99 personnes par défaut. Après tout, 99 personnes suffisent pour ajouter le nombre de prix) ou plus, ce qui peut également être modifié de manière flexible ;
Pour la structure des données, reportez-vous à la structure de code suivante :
// 抽奖数据
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 : '' }
]
}Le fichier de configuration du projet se trouve dans src/utils/config. Modifiez simplement les éléments correspondants en fonction des commentaires.
// 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' )
}
}
} un. Capture d'écran de l'interface :
Conçu pour un affichage grand écran 1920*1080, il convient également à d'autres terminaux PC. Voici une capture d'écran de l'interface principale du projet :
deux. Captures d'écran de la loterie :
Enregistrez automatiquement le fichier de capture d'écran de la loterie dans l'idée locale :
html2canvas pour compléter la fonction de capture d'écran. Plus précisément, utilisez Baidu ou Google ;html2canvas ==> Autoriser le cross-domain : allowTaint : true, et le serveur doit autoriser le cross-domain, c'est-à-dire définir CORS git clone https://github.com/renmingliang/vue-lottery.git
yarn install
yarn serve
yarn build
yarn lint
