Vue的九宫格抽奖

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

<script>
export default {
  name: "whole",
  data() {
    return {
      list: [
        {
          name: "手机",
        },
        {
          name: "平板",
        },
        {
          name: "电磁炉",
        },
        {
          name: "洗衣机",
        },
        {
          name: "衣柜",
        },
        {
          name: "电脑",
        },
        {
          name: "电视",
        },
        {
          name: "冰箱",
        },
        {
          name: "抽奖",
        },
      ],
      status: true, //是否开始抽奖
      select: 0, //页面对应抽奖下标
      times: 7, //转到第几个奖品
      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;
              }
            }
          }
        }, 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 > span {
  float: left;
  width: 200px;
  height: 200px;
  margin: 10px;
  background: rgb(22, 186, 236);
  color: white;
  text-align: center;
  line-height: 200px;
}
.fankuan > span:nth-of-type(4) {
  position: relative;
  left: 440px;
}
.fankuan > span:nth-of-type(5) {
  position: relative;
  left: 220px;
  top: 220px;
}
.fankuan > span:nth-of-type(6) {
  position: relative;
  left: -220px;
  top: 220px;
}
.fankuan > span:nth-of-type(8) {
  position: relative;
  left: -220px;
  top: -220px;
}
.fankuan > span:nth-of-type(9) {
  cursor: pointer;
  background: rgb(255, 148, 61);
  position: relative;
  left: -220px;
  top: -220px;
}

.prizeWin {
  background: rgb(78, 78, 78) !important;
}
style>