vue实现九宫格抽奖

最近写了一个九宫格的抽奖，然后现在总结一下

效果图：

1.HTML

<template>
<div class="bg"><div class="conter"><div class="acttime">活动时间：xxxxxxxx</div>
//奖池名称切换<div class="jackpot"><img src="../../assets/images/sendBox/activity/liberate/Ajc.png"  v-if="activity==1"><img src="../../assets/images/sendBox/activity/liberate/Bjc.png" v-if="activity==2"><img src="../../assets/images/sendBox/activity/liberate/Cjc.png" v-if="activity==3"></div><div :class="activity==1?'draw':activity==2?'draw1':'draw2'">//奖池里的奖品用的是背景图，每个奖池背景图不一样，要切换<ul class="spoi">//这个Ul的作用就是占位，将每个黑色阴影占位到每个奖品上<li class="tro1" v-for="(item,i) in list" :key="i" :class="['item' + (i+1), {'active': index == i}]"></li></ul><div class="middle" @click="openBox()"><div class="immediatelydraw">立即抽奖</div><div class="num" v-if="activity==1">（耗费1次抽奖机会）</div><div class="num" v-if="activity==2">（耗费5次抽奖机会）</div><div class="num" v-if="activity==3">（耗费20次抽奖机会）</div></div><div :class="activity==1?'Ajackpot1':'Ajackpot'" @click="changese(1)"></div><div :class="activity==2?'Bjackpot1':'Bjackpot'" @click="changese(2)"></div><div :class="activity==3?'Cjackpot1':'Cjackpot'" @click="changese(3)"></div><img src="../../assets/images/sendBox/activity/liberate/triangle.png" :class="activity==1?'triangle':activity==2?'triangle1':'triangle2'"></div><div class="hint">*点击奖池切换，剩余抽奖次数{{luckyNum}}次</div><div class="style"><img src="../../assets/images/sendBox/activity/liberate/mhstyle.png"></div></div>
//抽奖提示弹框<van-overlay :show="show" @click="show = false"><div class="wrapper" @click.stop><div class="block"><div  class="changeName"><div v-if="activity==1"><h4 v-if="activity==1&&luckyNum<1">抽奖机会不足！</h4><h4 v-else>确定消耗1次机会抽奖嘛？</h4></div><div v-if="activity==2"><h4 v-if="activity==2&&luckyNum<5">抽奖机会不足！</h4><h4 v-else>确定消耗5次机会抽奖嘛？</h4></div><div v-if="activity==3"><h4 v-if="activity==3&&luckyNum<20">抽奖机会不足！</h4><h4 v-else>确定消耗5次机会抽奖嘛？</h4></div><div class="but"><div class="cancel" @click="center" v-if="activity==1&&luckyNum>0||activity==2&&luckyNum>4||activity==3&&luckyNum>19">取消</div><div class="verify" @click="confirm">确认</div></div></div></div></div></van-overlay>
//弹框<van-overlay :show="showwin" @click="showwin = false"><div class="wrapper" @click.stop><div class="block1"><div  class="changeName"><h4> <img src="../../assets/images/sendBox/activity/liberate/celebrate.png" class="celebrate">恭喜你抽中{{this.prizedata.name}}</h4><div class="award"><img src='../../assets/images/sendBox/activity/liberate/packet.png' v-if="prizedata.name.indexOf('优先购')"><img src='../../assets/images/sendBox/activity/liberate/sack.png' v-else></div><div class="but1"><div class="verify" @click="confirm1">确认</div></div></div></div></div></van-overlay>
</div>
</template>

重点代码

<div :class="activity==1?'draw':activity==2?'draw1':'draw2'"><ul class="spoi"><li class="tro1" v-for="(item,i) in list" :key="i" :class="['item' + (i+1), {'active': index == i}]"></li></ul><div class="middle" @click="openBox()"><div class="immediatelydraw">立即抽奖</div><div class="num" v-if="activity==1">（耗费1次抽奖机会）</div><div class="num" v-if="activity==2">（耗费5次抽奖机会）</div><div class="num" v-if="activity==3">（耗费20次抽奖机会）</div></div><div :class="activity==1?'Ajackpot1':'Ajackpot'" @click="changese(1)"></div><div :class="activity==2?'Bjackpot1':'Bjackpot'" @click="changese(2)"></div><div :class="activity==3?'Cjackpot1':'Cjackpot'" @click="changese(3)"></div><img src="../../assets/images/sendBox/activity/liberate/triangle.png" :class="activity==1?'triangle':activity==2?'triangle1':'triangle2'">
</div>

2.CSS

<style scoped>
.bg {width: 375px;height: 2371px;background: url("../../assets/images/sendBox/activity/liberate/bg.png") no-repeat;background-size: 375px 2468px;position: relative;
}.conter {overflow: hidden;
}
.acttime {color: #FFFFFF;margin-top: 103px;font-size: 17px;text-align: center;
}
.jackpot {width: 212px;height: 40px;background: url("../../assets/images/sendBox/activity/liberate/jackpotbg.png") no-repeat;background-size: 212px 40px;margin: 0 auto;margin-top: 362px;text-align: center;font-size: 24px;color: #B5331E;line-height: 40px;
}
.jackpot img {width: 63px;height: 31px;margin-top: 4px;
}
.draw {width: 335px;height: 346px;background: url("../../assets/images/sendBox/activity/liberate/drawbg.png") no-repeat;background-size: 335px 346px;margin: 0 auto;position: relative;
}
.draw1 {width: 335px;height: 346px;background: url("../../assets/images/sendBox/activity/liberate/draw1bg.png") no-repeat;background-size: 335px 346px;margin: 0 auto;position: relative;
}
.draw2 {width: 335px;height: 346px;background: url("../../assets/images/sendBox/activity/liberate/draw2bg.png") no-repeat;background-size: 335px 346px;margin: 0 auto;position: relative;
}
.triangle {width: 12px;height: 10px;position: absolute;bottom: 10px;left: 55px;
}
.triangle1 {width: 12px;height: 10px;position: absolute;bottom: 10px;left: 162px;
}
.triangle2 {width: 12px;height: 10px;position: absolute;bottom: 10px;left: 270px;
}
.wrapper {display: flex;align-items: center;justify-content: center;height: 100%;
}
.block {width: 327px;height: 132px;background-color: #fff;padding: 20px;box-sizing: border-box;
}
.block1 {width: 327px;height: 250px;padding: 10px;box-sizing: border-box;background-color: #fff;
}
.celebrate {width: 24px;height: 30px;
}
.award {width: 144px;height: 144px;margin: 0 auto;
}
.but {margin: 0 auto;margin-top: 20px;font-size: 16px;color: #FFFFFF;display: flex;
}
.but1 {margin: 0 auto;margin-top: 10px;font-size: 16px;color: #FFFFFF;display: flex;
}
.changeName {width: 100%;height: 100%;font-size: 20px;color: #141518;text-align: center;font-weight: bold;overflow: hidden;
}
.changeName > h4 {color: #141518;font-size: 20px;font-weight: bold;
}.cancel {flex: 1;text-align: center;background-color: #80808B;line-height: 44px;margin-right: 6px;
}
.verify {flex: 1;text-align: center;background-color: #0DDCFF;display: inline-block;line-height: 44px;
}
.middle {width: 335px;height: 346px;position: absolute;left: 0;top: 0;line-height: 346px;
}
.immediatelydraw {color:#FFFFFF ;font-size: 20px;font-weight: bold;position: absolute;top: 132px;left: 128px;line-height: 20px;
}.num {color: #FFFFFF;font-size: 10px;transform: scale(0.83);transform-origin: 0 0;text-align: center;line-height: 25px;position: absolute;top: 150px;left: 124px;
}
.Ajackpot {width: 108px;height: 32px;background: url('../../assets/images/sendBox/activity/liberate/jA.png') no-repeat;background-size: 108px 32px;position: absolute;top: 289px;left: 6px;
}
.Ajackpot1 {width: 108px;height: 32px;background: url('../../assets/images/sendBox/activity/liberate/ZA.png') no-repeat;background-size: 108px 32px;position: absolute;top: 289px;left: 6px;
}
.Bjackpot {width: 108px;height: 32px;background: url('../../assets/images/sendBox/activity/liberate/jB.png') no-repeat;background-size: 108px 32px;position: absolute;top: 289px;left: 114px;
}
.Bjackpot1 {width: 108px;height: 32px;background: url('../../assets/images/sendBox/activity/liberate/ZB.png') no-repeat;background-size: 108px 32px;position: absolute;top: 289px;left: 114px;
}
.Cjackpot {width: 108px;height: 32px;background: url('../../assets/images/sendBox/activity/liberate/jC.png') no-repeat;background-size: 108px 32px;position: absolute;top: 289px;right: 5px;
}
.Cjackpot1 {width: 108px;height: 32px;background: url('../../assets/images/sendBox/activity/liberate/ZC.png') no-repeat;background-size: 108px 32px;position: absolute;top: 289px;right: 5px
}
.hint {color: #FFFFFF;font-size: 12px;text-align: center;margin-top: 10px;
}
.style {width: 212px;height: 40px;background: url("../../assets/images/sendBox/activity/liberate/jackpotbg.png") no-repeat;background-size:212px 40px;margin: 0 auto;margin-top: 20px;line-height: 40px;text-align: center;color: #B5331E;font-weight: bold;font-size: 24px;
}
.style img {width: 88px;height: 31px;margin-top: 4px;
}
.blind {width: 335px;height: 391px;background-color: #FFFFFF;border-radius: 8px;margin: 0 auto;margin-top: 10px;position:relative;padding: 5px;box-sizing: border-box;
}
.cartoon {width: 63px;height: 64px;position: absolute;right: 0px;top: -49px;
}
.video {width: 325px;height: 325px;
}
.information {display: flex;color: #141518;font-size: 16px;font-weight: bold;justify-content: space-between;
}
.logo {width: 10px;height: 10px;margin-left: 5px;margin-top: 6px;
}
.purchase {margin-top: 7px;display: flex;justify-content: space-between;
}
.limit {display: flex;
}
.limited {background-color: #80808B;height: 20px;padding: 1px 4px 1px 4px;box-sizing: border-box;color: #FFFFFF;font-size: 12px;
}
.speed {width: 27.07px;height: 20px;
}
.speed img {width: 100%;height: 100%;
}
.copies {height: 20px;line-height: 20px;padding: 1px 4px 1px 4px;box-sizing: border-box;color: #FFFFFF;font-size: 12px;background-color: #c3bfc7;
}
.edit {height: 20px;color: #FFFFFF;font-size: 12px;margin-left: 8px;padding: 1px 4px 1px 4px;box-sizing: border-box;background-color: #c3bfc7;
}
.type {width: 335px;height: 226px;background: url("../../assets/images/sendBox/activity/liberate/type.png") no-repeat;background-size: 335px 226px;margin: 0 auto;margin-top: 8px;position: relative;
}
.lantern {width: 54px;height: 53px;position: absolute;top: -48px;left: -12px;
}
.text {width: 335px;height: 595px;background: linear-gradient(to bottom,#F49634,#F1BD3D);border-radius: 8px;margin: 0 auto;margin-top: 10px;border: 2px solid #FFFFFF;position: relative;
}
.clound {width: 99.52px;height: 52.49px;position: absolute;right: -5px;top: -35px;
}.explain {width: 322px;height: 579px;margin: 0 auto;margin-top: 8px;border-radius: 8px;border: 2px solid #FFFFFF;background: linear-gradient(to bottom,#FFE6BA,#FACF85);
}
.explain1 {width: 302px;height: 241px;margin: 0 auto;margin-top: 10px;line-height: 26px;
}
.explain2 {width: 302px;height: 141px;margin: 0 auto;line-height: 26px;
}
.activityname {font-size: 12px;color: #B5331E;font-weight: bold;letter-spacing: .8px;
}
.activitytxt{width: 363.8px;font-size: 10px;color: #E1984A;font-weight: bold;transform: scale(0.83);transform-origin: 0 0;letter-spacing: .8px;
}
.infuse {width: 302px;color: #E09647;font-weight: bold;margin: 0 auto;font-size: 10px;transform: scale(0.83);line-height: 30px;transform-origin: 0 0;
}
.bottom {width: 379.5px;color: #FFFFFF;font-size: 10px;line-height: 20px;transform: scale(0.83);margin: 0 auto;text-align: center;margin-top: 15px;
}
.left {width: 135px;height: 63px;position: absolute;bottom: 0px;left: 0px;
}
.right {width: 92px;height: 108px;position: absolute;bottom: 0;right: 0;
}
.spoi {width: 335px;height: 346px;position: relative;/*background-color: #0BD8FD;*/
}
//重点//重点//重点//重点//重点//重点//重点//重点
.active {width: 101px;height: 79px;border-radius: 5px;background-color: rgba(0,0,0,0.3);/*opacity: 0.3;*/
}
.item1 {position: absolute;top: 29px;left: 13px;
}
.item2 {position: absolute;top: 29px;left: 117px;
}
.item3 {position: absolute;top: 29px;right: 13px;
}
.item4 {position: absolute;top: 113px;right: 13px;
}
.item5 {position: absolute;top:196px;right: 13px;
}
.item7 {position: absolute;top:196px;left: 13px;
}
.item6 {position: absolute;top:196px;left: 117px;
}
.item8 {position: absolute;top:113px;left: 13px;
}
.code {width: 302px;margin: 0 auto;display: flex;
}
.offical {width: 95px;height: auto;
}
.offical img {width: 95px;height: 95px;
}
.code .offical:nth-of-type(2){margin: 0 9px;
}
.offical .title {color: #B5331E;font-size: 10px;margin-top: 2px;width: 108.4px;transform: scale(0.83);transform-origin: 0 0;
}</style>

重点代码：阴影定位

.active {width: 101px;height: 79px;border-radius: 5px;background-color: rgba(0,0,0,0.3);/*opacity: 0.3;*/
}
.item1 {position: absolute;top: 29px;left: 13px;
}
.item2 {position: absolute;top: 29px;left: 117px;
}
.item3 {position: absolute;top: 29px;right: 13px;
}
.item4 {position: absolute;top: 113px;right: 13px;
}
.item5 {position: absolute;top:196px;right: 13px;
}
.item7 {position: absolute;top:196px;left: 13px;
}
.item6 {position: absolute;top:196px;left: 117px;
}
.item8 {position: absolute;top:113px;left: 13px;
}

3.JS

<script>
import {mapState} from "vuex";
import axios from 'axios'
import qs from 'qs' // 根据需求是否导入qs模块
export default {name: "liberate",data(){return{httpBase: location.host.indexOf("dev")!=-1 ? "https://xxxxxxxx.com/" : "https://xxxxxxx.com/",list: [], //奖品列表luckyNum:'',//抽奖次数index: 0, // 当前转动到哪个位置，第一次起点位置0,对应页面item1位置count: 8, // 总共有多少个位置times: 0, // 转动次数timer: 0, // 每次转动定时器speed: 20000, // 初始转动速度cycle: 5, // 转动基本次数：即至少需要转动多少次再进入抽奖环节prize:0, // 中奖位置，接口返回lamp:0, // 灯光定时器activity:1,//奖池切换show : false,//抽奖机会showwin:false,prizedata: {//中奖信息name:'',//奖品名称image:'',//奖品图片},iosToken:'',//获取ios token，inviteCode:'',comefrom:0, //0是h5,1是IOS ,2是Android}},computed:{//获取公告信息和个人信息...mapState({commonInfo(state) {return state.auth.commonInfo},userInfo(state) {return state.auth.userInfo},token(state) {return state.auth.token},})},mounted() {this.list=[{id:1,},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7},{id:8}]this.$nextTick(()=>{setTimeout(() => {// 调用html转化canvas函数if (this.token.length >10 && this.comefrom==0) {this.iosToken=this.tokenthis.getChancesCount(this.token)}}, 100);})},created() {window.getPlatformSource = (data)=>{if(data){this.comefrom=data}}window.getAppToken = (token)=>{if(token){this.iosToken=tokenif(token==''){this.iosToken=''}this.$nextTick(()=>{this.getChancesCount(token)})}}},methods:{changese(index){this.activity=index},// 点击取消center(){this.show=false},//点击确定抽奖机会confirm() {this.getdraw()this.show=false},//点击确定获奖之后confirm1() {this.getChancesCount()this.showwin=false},//跳详情jumpBtn(){this.$router.push({path:'/details',query: {id: "20e00d7988bfcf97"}})},openBox(){if(this.iosToken=='' && this.comefrom==0){this.$router.push('/login')return}else {if(this.times != 0){this.$toast('正在抽奖中，请勿重复点击')}else {this.show = true}}},//点击抽奖async getdraw() {if(this.activity==1){if(this.luckyNum <1){this.show=true}else if(this.times != 0){this.$toast('正在抽奖中，请勿重复点击')} else{await axios.post(this.httpBase+'/xxx/xxx/xxxxxx?poolId='+1,{},{headers:{authorization:this.iosToken,}}).then(res=>{if (res.data.code== 200) {this.luckyNum--;//抽奖开始，次数-1this.speed = 200;//每次抽奖速度初始化为200// this.prizedata = res.data.data;//已经拿到中奖信息，页面展示，等抽奖结束后，将弹窗弹出this.prizedata.name=res.data.data.data.bonusNamethis.startRoll();//执行抽奖this.lamp = setInterval(()=>{//灯光闪烁开启this.lampShow = !this.lampShow;},100)if(this.prizedata.name=='8.88现金'){let arr=[0,3,6]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}else if(this.prizedata.name=='18.88现金'){let arr=[1,5,7]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}else if(this.prizedata.name=='88.88现金'){let arr=[2,4]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}}else {}})}}else if(this.activity==2){if(this.luckyNum<5){this.show=true}else if(this.times!=0){this.$toast('正在抽奖中，请勿重复点击')}else {this.show=trueawait axios.post(this.httpBase+'/xxx/xxx/xxxxxx?poolId='+2,{},{headers:{authorization:this.iosToken,}}).then(res=>{if (res.data.code== 200) {this.luckyNum=this.luckyNum-5;//抽奖开始，次数-5this.speed = 200;//每次抽奖速度初始化为200this.startRoll();//执行抽奖this.lamp = setInterval(()=>{//灯光闪烁开启this.lampShow = !this.lampShow;},50)this.prizedata = res.data.data;//已经拿到中奖信息，页面展示，等抽奖结束后，将弹窗弹出this.prizedata.name=res.data.data.data.bonusNameconsole.log(this.prizedata.name,res.data.data.data.bonusName)if(this.prizedata.name=='58.88现金'){let arr=[0,4]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}else if(this.prizedata.name=='138.88现金'){let arr=[1,7]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}else if(this.prizedata.name=='888.88现金'){let arr=[2,6]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}else if(this.prizedata.name=='优先购次数X1'){let arr=[3,5]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}}else {}})}}else if(this.activity==3){if(this.luckyNum<20){this.show=true}else if(this.times!=0){this.$toast('正在抽奖中，请勿重复点击')}else {this.show=trueawait axios.post(this.httpBase+'/xxx/xxx/xxxxxx?poolId='+3,{},{headers:{authorization:this.iosToken,}}).then(res=>{if (res.data.code== 200) {this.luckyNum=this.luckyNum-20;//抽奖开始，次数-5this.speed = 200;//每次抽奖速度初始化为200this.startRoll();//执行抽奖this.lamp = setInterval(()=>{//灯光闪烁开启this.lampShow = !this.lampShow;},50)this.prizedata = res.data.data;//已经拿到中奖信息，页面展示，等抽奖结束后，将弹窗弹出this.prizedata.name=res.data.data.data.bonusNameconsole.log(this.prizedata.name,res.data.data.data.bonusName)if(this.prizedata.name=='238.88现金'){let arr=[0,4]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}else if(this.prizedata.name=='优先购次数X5'){let arr=[1,3]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}else if(this.prizedata.name=='2388.88现金'){let arr=[3,6]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}else if(this.prizedata.name=='588.88现金'){let arr=[5,7]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}}else {}})}}},// 开始转动startRoll() {this.times += 1; // 转动次数this.oneRoll(); // 转动过程调用的每一次转动方法，这里是第一次调用初始化this.usePrize();},// 每一次转动oneRoll() {let index = this.index; // 当前转动到哪个位置const count = 8; // 总共有多少个位置index += 1;if (index > count - 1) {index = 0;}this.index = index;},usePrize() {// 如果当前转动次数达到要求 && 目前转到的位置是中奖位置if (this.times > this.cycle +10 && this.prize === this.index) {clearTimeout(this.timer); // 清除转动定时器clearTimeout(this.lamp); // 清除灯光定时器this.lampShow = false; // 白色灯隐藏this.times = 0; // 转动跑格子次数初始化为0，可以开始下次抽奖setTimeout(()=>{this.showwin=true},1000)} else {if(this.times < this.cycle -20){this.speed -= 4; // 加快转动速度}else{this.speed += 10; // 抽奖即将结束，放慢转动速度}this.timer = setTimeout(this.startRoll, this.speed);//开始转动}},// [抽奖] 获取抽奖机会数async getChancesCount(data){await axios.post(this.httpBase+'/xxx/xxx/xxxxxx',{},{headers:{authorization:data,}}).then(res=>{if (res.data.code== 200) {this.luckyNum = res.data.data}else {}})},}
}
</script>

重点代码：

data(){return{list: [], //奖品列表luckyNum:'',//抽奖次数index: 0, // 当前转动到哪个位置，第一次起点位置0,对应页面item1位置count: 8, // 总共有多少个位置times: 0, // 转动次数timer: 0, // 每次转动定时器speed: 20000, // 初始转动速度cycle: 5, // 转动基本次数：即至少需要转动多少次再进入抽奖环节prize:0, // 中奖位置，接口返回lamp:0, // 灯光定时器activity:1,//奖池切换show : false,//抽奖机会showwin:false,prizedata: {//中奖信息name:'',//奖品名称image:'',//奖品图片},}
},mounted(){this.list=[{id:1,},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7},{id:8}]
},
methods:{
//点击抽奖async getdraw() {if(this.activity==1){if(this.luckyNum <1){this.show=true}else if(this.times != 0){this.$toast('正在抽奖中，请勿重复点击')} else{await axios.post(this.httpBase+'/xxx/xxx/xxxxxx?poolId='+1,{},{headers:{authorization:this.iosToken,}}).then(res=>{if (res.data.code== 200) {this.luckyNum--;//抽奖开始，次数-1this.speed = 200;//每次抽奖速度初始化为200// this.prizedata = res.data.data;//已经拿到中奖信息，页面展示，等抽奖结束后，将弹窗弹出this.prizedata.name=res.data.data.data.bonusNamethis.startRoll();//执行抽奖this.lamp = setInterval(()=>{//灯光闪烁开启this.lampShow = !this.lampShow;},100)if(this.prizedata.name=='8.88现金'){let arr=[0,3,6]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}else if(this.prizedata.name=='18.88现金'){let arr=[1,5,7]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}else if(this.prizedata.name=='88.88现金'){let arr=[2,4]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}}else {}})}}else if(this.activity==2){if(this.luckyNum<5){this.show=true}else if(this.times!=0){this.$toast('正在抽奖中，请勿重复点击')}else {this.show=trueawait axios.post(this.httpBase+'/xxx/xxx/xxxxxx?poolId='+2,{},{headers:{authorization:this.iosToken,}}).then(res=>{if (res.data.code== 200) {this.luckyNum=this.luckyNum-5;//抽奖开始，次数-5this.speed = 200;//每次抽奖速度初始化为200this.startRoll();//执行抽奖this.lamp = setInterval(()=>{//灯光闪烁开启this.lampShow = !this.lampShow;},50)this.prizedata = res.data.data;//已经拿到中奖信息，页面展示，等抽奖结束后，将弹窗弹出this.prizedata.name=res.data.data.data.bonusNameconsole.log(this.prizedata.name,res.data.data.data.bonusName)if(this.prizedata.name=='58.88现金'){let arr=[0,4]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}else if(this.prizedata.name=='138.88现金'){let arr=[1,7]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}else if(this.prizedata.name=='888.88现金'){let arr=[2,6]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}else if(this.prizedata.name=='优先购次数X1'){let arr=[3,5]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}}else {}})}}else if(this.activity==3){if(this.luckyNum<20){this.show=true}else if(this.times!=0){this.$toast('正在抽奖中，请勿重复点击')}else {this.show=trueawait axios.post(this.httpBase+'/xxx/xxx/xxxxxx?poolId='+3,{},{headers:{authorization:this.iosToken,}}).then(res=>{if (res.data.code== 200) {this.luckyNum=this.luckyNum-20;//抽奖开始，次数-5this.speed = 200;//每次抽奖速度初始化为200this.startRoll();//执行抽奖this.lamp = setInterval(()=>{//灯光闪烁开启this.lampShow = !this.lampShow;},50)this.prizedata = res.data.data;//已经拿到中奖信息，页面展示，等抽奖结束后，将弹窗弹出this.prizedata.name=res.data.data.data.bonusNameconsole.log(this.prizedata.name,res.data.data.data.bonusName)if(this.prizedata.name=='238.88现金'){let arr=[0,4]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}else if(this.prizedata.name=='优先购次数X5'){let arr=[1,3]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}else if(this.prizedata.name=='2388.88现金'){let arr=[3,6]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}else if(this.prizedata.name=='588.88现金'){let arr=[5,7]let  n = Math.floor(Math.random() * arr.length + 1)-1;this.prize=arr[n]}}else {}})}}},
// 开始转动startRoll() {this.times += 1; // 转动次数this.oneRoll(); // 转动过程调用的每一次转动方法，这里是第一次调用初始化this.usePrize();},
// 每一次转动oneRoll() {let index = this.index; // 当前转动到哪个位置const count = 8; // 总共有多少个位置index += 1;if (index > count - 1) {index = 0;}this.index = index;},usePrize() {// 如果当前转动次数达到要求 && 目前转到的位置是中奖位置if (this.times > this.cycle +10 && this.prize === this.index) {clearTimeout(this.timer); // 清除转动定时器clearTimeout(this.lamp); // 清除灯光定时器this.lampShow = false; // 白色灯隐藏this.times = 0; // 转动跑格子次数初始化为0，可以开始下次抽奖setTimeout(()=>{this.showwin=true},1000)} else {if(this.times < this.cycle -20){this.speed -= 4; // 加快转动速度}else{this.speed += 10; // 抽奖即将结束，放慢转动速度}this.timer = setTimeout(this.startRoll, this.speed);//开始转动}},//点击确定抽奖机会confirm() {this.getdraw()this.show=false},//点击确定获奖之后confirm1() {this.getChancesCount()this.showwin=false},// [抽奖] 获取抽奖机会数async getChancesCount(data){await axios.post(this.httpBase+'/xxx/xxx/xxxxxx',{},{headers:{authorization:data,}}).then(res=>{if (res.data.code== 200) {this.luckyNum = res.data.data}else {}})},
}

以上代码是我实现功能的代码，仔细研究一下，就可以看懂，希望对你们有所帮助！

vue实现九宫格抽奖相关推荐

使用vue实现九宫格抽奖功能
使用vue2和vue3分别实现九宫格抽奖功能关于九宫格抽奖的功能,想必大家都见过.外圈为奖品,中间是一个抽奖的按钮,接下来就讲解怎么实现九宫格的抽奖功能. 本demo使用技术:vue2/vue3,作 ...
基于vue+html5实现九宫格抽奖转盘原理及源码
先说下动态跑马灯九宫格抽奖转盘应用场景,基于很多活动页面都常用,积分抽奖兑换等.九宫格html+css排版样式这里就不多说了. 实现原理: 跑马灯:用2个Png背景图片做css3帧切换动画. 中奖数组 ...
【九宫格抽奖源代码】
目录 1.效果图 2.源码 2.1 html 2.2css 2.3js 1.效果图 2.源码 2.1 html <!doctype html> <html> <head ...
Vue实现3*3九宫格抽奖（并拓展实现n*n多宫格抽奖）
九宫格抽奖,包括幸运大转盘,已经在不管是电商还是日常网页中已经算是比较常见的页面效果了(此处点名批评pdd),那么如何用Vue来实现九宫格以及后续的十二宫格,十六宫格等多宫格抽奖组件呢? 先上效果图: ...
vue简单实现九宫格抽奖
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
html+抽奖游戏,九宫格抽奖HTML+JS版
div{ margin: 100px auto 0px; // 居中 width:500px; height:250px; border:3px solid black; // 边框 } li{ wi ...
【小程序与公众号】微信小程序九宫格抽奖（抽奖完全随机）
上图话不多说直接上图,抽奖是顺时针又快变慢(还原抽奖的动画)进行抽奖,抽奖的几率都是随机源码接下来展示的就是微信小程序中的九宫格抽奖说明适用范围抽奖逻辑只是原生JS,通过数据进行驱动,因此 ...
Vue3实现九宫格抽奖效果
前言好久没有写文章了,上一次发文还是年终总结,眨眼间又是一年,每每想多总结却是坚持不来,难顶. 这次分享一个九宫格抽奖小游戏,缘起是最近公司内部做积分抽奖需求,抽出其中抽奖动效做一个总结,从零实现 ...
九宫格抽奖转盘源码分析
效果如上图所示,下面对其实现代码进行分析,看能不能破解其抽奖规则.需要引入jquery-1.8.3.min.js和images/9张图片. <!DOCTYPE html PUBLIC ...
python 还原九宫格图片_用Python做一个好玩的朋友圈九宫格抽奖
最近在朋友圈看到个好玩的抽奖九宫格: 随便点开一个: 设计思路以朋友圈中看到的1号图做参考,我们需要准备 300*900 的白色底图,搞笑表情图,广告语,中间一个醒目的数字编号,外加下方的嘲讽&qu ...

vue实现九宫格抽奖

vue实现九宫格抽奖相关推荐

最新文章

热门文章