vue 实现抽奖大转盘

实际解决需求,前端只是负责页面转动,在用户点击时,请求中奖接口,同同时通过设置css属性,让转盘转动起来,当转盘转动结束后,根据请求后端接口回来的中奖信息,设置转盘的转动位置,然后进行弹窗显示中奖信息,在此时,***注意要重置转盘的转动角度为初始0度,***在不进行重置,倒置了后续的小bug,
代码实现:

页面布局

 <div class="turntable"><!-- 点击时候转动转盘 指针不转 --><img class="turntable-center" :style="{transform:rotateAngle,transition:rotateTransition == ''?'transform 4s ease-in-out':rotateTransition }" src="/DCTrain/static/img/user/activity/newyear-fancycarp/turncenter.png"><img class="turntable-top" @click="luckflag ? pointer():''" src="/DCTrain/static/img/user/activity/newyear-fancycarp/turntop.png" ></div>

逻辑实现

data(){return{luckflag: true,rotateAngle: 0, //将要旋转的角度startRotatingDegree: 0, //初始旋转角度rotateTransition:'',//控制过渡效果click_flag: true, //是否可以旋转抽奖}
},methods:{// 点击指针pointer(){const me = this;// 如果没有登录,则前往登录页面if(me.$store.state.loginUser!='true'){this.$router.push({path:'/login.html',query:{fancy:'fancy'}})return}// 抽奖函数this.getlotteryPrizeFun()},// 转动rotate(prize){//目前是只转动转盘if (!this.click_flag) return;var type = 0; // 默认为 0  转盘转动var randCircle = 10; // 附加多转几圈，2-3var duringTime = 5; // 默认为 5svar rotateAngle = '';switch(prize.name){case '奖品1:rotateAngle = randCircle*360+330 ; break;case '奖品2':rotateAngle = randCircle*360+270 ; break;case '奖品3':rotateAngle = randCircle*360+210 ; break;case '奖品4':rotateAngle = randCircle*360+150 ; break;case '奖品5':rotateAngle = randCircle*360+90 ; break;case '奖品6':rotateAngle = randCircle*360+30 ; break;}this.click_flag = false; // 旋转结束前，不允许再次触发if (type == 0) {// 转动盘子var rotateAngle = this.startRotatingDegree + rotateAngle - this.startRotatingDegree % 360;//将要旋转的角度this.startRotatingDegree = rotateAngle;//改变初始旋转的角度this.rotateAngle = "rotate(" + rotateAngle + "deg)";//真正控制转动角度// 旋转结束后允许再次触发setTimeout(()=>{this.click_flag = true;this.gameOver(prize)}, duringTime * 1000+200)}},// 游戏结束gameOver () {// 游戏结束,重置旋转初始位置this.rotateAngle = "rotate(" + 0 + "deg)";//真正控制转动角度的,为0,回到初始位置this.rotateTransition = 'transform 0.05s ease-in-out' //控制转动过渡效果的setTimeout(()=>{this.rotateTransition = ''},100)// 中奖弹窗提示this.isShowMask = truethis.winAward = true// 更新抽奖次数this.getActcivityFancy()},// 请求活动页面数据getActcivityFancy(){const me =this;$.Ajax.post({url: '/common/activity/getActivityPageInfo.json',callBack(res){me.num = res.data.lotteryNum;//剩余抽奖次数}})  },//请求点击抽奖数据,中奖操作getlotteryPrizeFun(){const me = this;$.Ajax.post({url: '/user/activity/lotteryPrize.json',callBack(res){// console.log(res)me.winId = res.data.join_id;me.prize = res.data.prize;me.prizeArr = me.srcArr.filter(item=>{console.log()if(item.title == me.prize.name) return truereturn false})me.rotate(res.data.prize)},fail:false,failBack(){me.tipMessage='您的抽奖次数为0,无法参与抽奖';me.noChanceAndNotJoin = true;me.isShowMask = true;}})                },}

vue 实现抽奖大转盘相关推荐

vue幸运抽奖大转盘的丑绝实现
自己通过canvas+vue(vue不是必备的可以)实现的一个抽奖转盘,重点在实现逻辑,所以样式丑绝. 基本效果图,中间指针可以替换为图片数据格式转盘的分块由传入的数组长度确定,分为4,6,8块还 ...
vue实现抽奖大转盘
1. 实现原理实际解决用户需求:当用户点击抽奖时,会请求接口获取中奖的奖品信息,前端根据中奖编号进行修改css样式,让转盘旋转,调整角度对应后端返回的奖品.如果抽奖有多次机会的话,每次需要抽奖结束后 ...
vue js 幸运大转盘
vue js 幸运大转盘在写一个 vue 项目时,用到了转盘抽奖,发现网上没有现成的 vue 案例,于是将自己写的分享出来,用作交流使用效果流程页面created时,加载奖品列表,根据和后台预 ...
css3抽奖转盘,从零制作CSS3抽奖大转盘
今天的任务是做一个纯CSS3的还算比较漂亮的抽奖大转盘,也就是下图效果. 我只说思路和重要的CSS3代码. Paste_Image.png 外盘外盘是指有彩灯的深橙色圆环,以及圆环的外边线. 外盘设 ...
用c语言写抽奖大转盘,iOS抽奖大转盘的二种实现方法
有个朋友需要写个抽奖大转盘的功能,就让我帮忙写了下.我用了2种方法实现了效果,在这里和大家一起分享下. 一.一键转动大转盘我一开始拿到手的是一堆的图片,然后自己花了点时间,搭建出美工要求的UI,接下 ...
javaScript实现抽奖大转盘（一）
今天试了试自己写个抽奖大转盘. 先是借了两张别人的图片: 下面是布局部分: <div class="round"><div class="box&quo ...
微信小程序独家秘笈之抽奖大转盘
代码地址如下: http://www.demodashi.com/demo/14209.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
抽奖大转盘-React-移动端
抽奖大转盘-React-移动端 react安装修改项目结构配置路由删除一些不必要的文件大转盘整理代码结构和一些静态资源书写静态页面移动端px-rem转换静态页面静态页面样式抽奖大转 ...
优秀课程案例：使用Scratch制作一个抽奖大转盘方法二！
点击上面微信号关注我关注我哟每天坚持早上9:00左右推送文章,争取做到日更,喜欢的可以设置星标,并分享点赞我们的文章,非常感谢大家的支持,您的点击的在看就是我们的动力! 昨天我们分享了一个抽奖大转盘: ...

vue 实现抽奖大转盘

vue 实现抽奖大转盘相关推荐

最新文章

热门文章