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.token
this.getChancesCount(this.token)
}
}, 100);
})
},
created() {
window.getPlatformSource = (data)=>{
if(data){
this.comefrom=data
}
}
window.getAppToken = (token)=>{
if(token){
this.iosToken=token
if(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--;//抽奖开始，次数-1
this.speed = 200;//每次抽奖速度初始化为200
// this.prizedata = res.data.data;//已经拿到中奖信息，页面展示，等抽奖结束后，将弹窗弹出
this.prizedata.name=res.data.data.data.bonusName
this.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=true
await 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;//抽奖开始，次数-5
this.speed = 200;//每次抽奖速度初始化为200
this.startRoll();//执行抽奖
this.lamp = setInterval(()=>{//灯光闪烁开启
this.lampShow = !this.lampShow;
},50)
this.prizedata = res.data.data;//已经拿到中奖信息，页面展示，等抽奖结束后，将弹窗弹出
this.prizedata.name=res.data.data.data.bonusName
console.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=true
await 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;//抽奖开始，次数-5
this.speed = 200;//每次抽奖速度初始化为200
this.startRoll();//执行抽奖
this.lamp = setInterval(()=>{//灯光闪烁开启
this.lampShow = !this.lampShow;
},50)
this.prizedata = res.data.data;//已经拿到中奖信息，页面展示，等抽奖结束后，将弹窗弹出
this.prizedata.name=res.data.data.data.bonusName
console.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--;//抽奖开始，次数-1
this.speed = 200;//每次抽奖速度初始化为200
// this.prizedata = res.data.data;//已经拿到中奖信息，页面展示，等抽奖结束后，将弹窗弹出
this.prizedata.name=res.data.data.data.bonusName
this.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=true
await 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;//抽奖开始，次数-5
this.speed = 200;//每次抽奖速度初始化为200
this.startRoll();//执行抽奖
this.lamp = setInterval(()=>{//灯光闪烁开启
this.lampShow = !this.lampShow;
},50)
this.prizedata = res.data.data;//已经拿到中奖信息，页面展示，等抽奖结束后，将弹窗弹出
this.prizedata.name=res.data.data.data.bonusName
console.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=true
await 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;//抽奖开始，次数-5
this.speed = 200;//每次抽奖速度初始化为200
this.startRoll();//执行抽奖
this.lamp = setInterval(()=>{//灯光闪烁开启
this.lampShow = !this.lampShow;
},50)
this.prizedata = res.data.data;//已经拿到中奖信息，页面展示，等抽奖结束后，将弹窗弹出
this.prizedata.name=res.data.data.data.bonusName
console.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 {
}
})
},
}以上代码是我实现功能的代码，仔细研究一下，就可以看懂，希望对你们有所帮助！
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献9条内容
所有评论(0)