Vue的九宫格抽奖

<template>
  <div>全部页面
    <div>
      <p v-if="prize != ''" id="prize">恭喜您抽中{
   
   {prize}}！！！</p>
      <div class="fankuan">
        <div
          v-for="(item,index) in list"
          :key="index"
          :class="[select == index && index != 8 ? 'prizeWin' : '', '']"
          @click="luck(index)"
        >
          <img :src="item.img" alt="">
          <!-- {
    
    {item.name}} -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
     
     
  name: "whole",
  data() {
     
     
    return {
     
     
      list: [
        {
     
     
          name: "手机",
          img:
            "https://sucai.suoluomei.cn/sucai_zs/images/20200728091435-2.png",
        },
        {
     
     
          name: "平板",
          img:
            "https://sucai.suoluomei.cn/sucai_zs/images/20200728091731-3.png",
        },
        {
     
     
          name: "电磁炉",
          img:
            "https://sucai.suoluomei.cn/sucai_zs/images/20200728091943-5.png",
        },
        {
     
     
          name: "洗衣机",
          img:
            "https://sucai.suoluomei.cn/sucai_zs/images/20200728091823-4.png",
        },
        {
     
     
          name: "衣柜",
          img:
            "https://sucai.suoluomei.cn/sucai_zs/images/20200728091823-4.png",
        },
        {
     
     
          name: "电脑",
          img:
            "https://sucai.suoluomei.cn/sucai_zs/images/20200728091435-2.png",
        },
        {
     
     
          name: "电视",
          img:
            "https://sucai.suoluomei.cn/sucai_zs/images/20200728091731-3.png",
        },
        {
     
     
          name: "冰箱",
          img:
            "https://sucai.suoluomei.cn/sucai_zs/images/20200728091943-5.png",
        },
        {
     
     
          name: "抽奖",
          img:
            "https://sucai.suoluomei.cn/sucai_zs/images/20200728091311-1.png",
        },
      ],
      status: true, //是否开始抽奖
      select: -1, //页面对应抽奖下标
      times: 3, //转到第几个奖品
      time: 0, //当前的旋转次数
      myVar: "",
      prize: "", //奖品名称
      num: 0, //圈速
    };
  },
  created() {
     
     },
  activated() {
     
     
    let that = this;
  },
  methods: {
     
     
    luck(e) {
     
     
      this.prize = "";
      if (this.status == true) {
     
     
        this.status = false;
        this.myVar = setInterval(() => {
     
     
          if (e == 8) {
     
     
            this.time = this.time + 1;
            this.select = this.select + 1;
            console.log(this.num);
            if (this.select == 8 && this.num != 3) {
     
     
              this.select = 0;
              this.num = this.num + 1;
              this.time = 0;
            }
            if (this.num == 3) {
     
     
              if (this.time == this.times) {
     
     
                clearInterval(this.myVar);
                this.status = true;
                this.time = 0;
                this.num = 0;
                this.prize = this.list[this.select].name;
              }
            }
          } else {
     
     
            this.status = true;
          }
        }, 100);
      } else {
     
     
        this.$toast("抽奖中");
      }
    },
  },
};
</script>

<style scoped lang="less">
#prize {
     
     
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 200px;
  display: block;
  width: 640px;
  height: 80px;
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.3) 0 0 6px 4px;
  letter-spacing: 4px;
  text-align: center;
  line-height: 80px;
}
.fankuan {
     
     
  width: 660px;
  height: 660px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50%);
}
.fankuan > div {
     
     
  float: left;
  width: 200px;
  height: 200px;
  margin: 10px;
  color: white;
  text-align: center;
  line-height: 200px;
}
.fankuan div img {
     
     
  width: 95%;
  height: 95%;
  padding: 2.5%;
  border-radius: 20px;
}
.fankuan > div:nth-of-type(4) {
     
     
  position: relative;
  left: 440px;
}
.fankuan > div:nth-of-type(5) {
     
     
  position: relative;
  left: 220px;
  top: 220px;
}
.fankuan > div:nth-of-type(6) {
     
     
  position: relative;
  left: -220px;
  top: 220px;
}
.fankuan > div:nth-of-type(8) {
     
     
  position: relative;
  left: -220px;
  top: -220px;
}
.fankuan > div:nth-of-type(9) {
     
     
  cursor: pointer;
  // background: rgb(255, 148, 61);
  position: relative;
  left: -220px;
  top: -220px;
}

.prizeWin {
     
     
  background: aqua !important;
  border-radius: 20px;
}
</style>