vue实现九宫格抽奖

阿wei程序媛

已于 2022-10-25 15:57:55 修改

阅读量2.9k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-08-22 10:25:00 首次发布

本文链接：https://blog.csdn.net/m0_58565372/article/details/126421610

版权

vue 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

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

效果图：

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 {

        }
      })
    },
}

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