vue 9宫格抽奖

<div id="app">
    <div class="prize-box">
      <div :class="{active: activeIndex === index, 'prize-cell': true}" v-for="(item, index) in list" :key="item.id">
        <img v-if="item.img" :alt="item.label" :src="item.img">
        <span 
          v-else
          class="begin"
          @click="handleBeginClick"
        >{{item.label}}</span>
      </div>
    </div>
  </div>

<script>
import prizeList from '@/assets/prizeList.json'

export default {
  name: 'App',
  data() {
    return {
      list: [],
      stopIndex: '',
      currentIndex: 0, // 当前递归index
      activeIndex: 0, // 当前选中index
      num: 1, // 对比递归次数
      numMax: 2, // 递归次数
      stop: true, // 当前是否为停止状态
      reduce: 10, // 累加时间，可让抽奖变慢
      startTime: 30, // 抽奖延迟时间
      startIndex: 0, // 开始的位置
      obj: {
        0: 0,
        1: 1,
        2: 2,
        3: 5,
        4: 8,
        5: 7,
        6: 6,
        7: 3,
        8: 0
      } // 调整activeIndex
    }
  },
  mounted() {
    setTimeout(() => {
      // prizeList - 后端返回数据
      this.list = prizeList;
      // 获取停止位置
      this.stopIndex = this.list.findIndex(v => v.stop);
      // 把开始抽奖按钮插入到奖品中
      this.list.splice(4, 0, {
        label: '开始抽奖',
        img: '',
        id: ''
      })
    }, 200)
  },
  methods: {
    handleBeginClick() {
      if (!this.stop) return false;
      this.stop = false;
      this.activeIndex = 0;
      this.currentIndex = 0;
      this.num = 0;
      this.startTime = 30;
      this.go();
    },
    go() {
      setTimeout(() => {
        this.startTime = this.startTime + this.reduce;
        this.currentIndex += 1;
        this.activeIndex = this.obj[this.currentIndex];
        if (this.currentIndex === this.list.length - 1) {
          this.currentIndex = 0;
          (this.num < (this.numMax + 1)) && (this.num += 1);
        }
        if (this.currentIndex === this.stopIndex && this.num > this.numMax) {
          this.stop = true;
          return false;
        }
        this.go();
      }, this.startTime);
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 100px;
}
.prize-box {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}
.prize-cell {
  line-height: 160px;
  height: 160px;
  overflow: hidden;
  flex: 32%;
  border: 2px solid transparent;
}
.begin {
  cursor: pointer;
}
.active {
  border-color: red;
}
.prize-cell img {
  width: 100%;
  height: auto;
}

</style>

[{
  "label": "李白",
  "id": 1425,
  "stop": false,
  "img": "https://img2.baidu.com/it/u=2854377711,1453276569&fm=26&fmt=auto&gp=0.jpg"
},{
  "label": "韩信",
  "id": 6543,
  "stop": false,
  "img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201812%2F07%2F2018120734602_5Mx4k.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628067615&t=b9b1e4ce8ec634dddd92190544473f87"
},{
  "label": "蔡文进",
  "id": 9365,
  "stop": false,
  "img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.luxst.com%2Fuploads%2Farticle%2F201804%2F25%2F222359yxsyg6xuyoxuogsy.jpeg&refer=http%3A%2F%2Fwww.luxst.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628067633&t=0107593b48bcbabe5dcabb419fd45748"
},{
  "label": "澜",
  "id": 2456,
  "stop": false,
  "img": "https://img2.baidu.com/it/u=2854377711,1453276569&fm=26&fmt=auto&gp=0.jpg"
},{
  "label": "司马懿",
  "id": 1674,
  "stop": true,
  "img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F12069370917%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628067648&t=3d4a0027ab2d4515d07da2cbdca839c6"
},{
  "label": "镜",
  "id": 3621,
  "stop": false,
  "img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201710%2F11%2F20171011214002_2xXHM.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628067648&t=d783cfa3e4e8885d7023cdf4d8da5d62"
},{
  "label": "百里玄策",
  "id": 9742,
  "stop": false,
  "img": "https://img2.baidu.com/it/u=2854377711,1453276569&fm=26&fmt=auto&gp=0.jpg"
},{
  "label": "程咬金",
  "id": 2738,
  "stop": false,
  "img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.dzwww.com%3A8080%2Ftupian%2F20191230%2F11%2F5861643870211204851.jpg&refer=http%3A%2F%2Fimg1.dzwww.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628067754&t=f03bcc8d4426fd3284f6bb3321dcc567"
}]