vue3制作九宫格抽奖

<template>
  <div class="chous">
    <div class="ch">
      <p :class="'item' + color[0]">{{ list[0].name }}</p>
      <p :class="'item' + color[1]">{{ list[1].name }}</p>
      <p :class="'item' + color[2]">{{ list[2].name }}</p>
    </div>
    <div class="ch">
      <p :class="'item' + color[7]">{{ list[7].name }}</p>
      <p @click="aa()">开始</p>
      <p :class="'item' + color[3]">{{ list[3].name }}</p>
    </div>
    <div class="ch">
      <p :class="'item' + color[6]">{{ list[6].name }}</p>
      <p :class="'item' + color[5]">{{ list[5].name }}</p>
      <p :class="'item' + color[4]">{{ list[4].name }}</p>
    </div>
  </div>
  <button @click="ting()">停止</button>
</template>
<script setup>
import { ref } from "vue";
import { names } from "debug";
    const color = ref([0, 0, 0, 0, 0, 0, 0, 0]);
    const list = ref([
      {
        id: 1,
        name: "奖品0",
        chance: 1,
      },
      {
        id: 2,
        name: "奖品1",
        chance: 10,
      },
      {
        id: 3,
        name: "奖品2",
        chance: 10,
      },
      {
        id: 4,
        name: "谢谢参与3",
        chance: 25,
      },
      {
        id: 5,
        name: "奖品4",
        chance: 5,
      },
      {
        id: 6,
        name: "奖品5",
        chance: 4,
      },
      {
        id: 7,
        name: "奖品6",
        chance: 1,
      },
      {
        id: 8,
        name: "谢谢参与7",
        chance: 25,
      },
    ]);
    let i = -1;
    var int;  // 定时器
    var quan = 7; // 圈数
    var co = 0;   记录圈数
    var time = 1000;  // 时间
    const arr = ref([]);   // 空的奖池
    for (let i = 0; i < list.value.length; i++) {
      let nus = list.value[i].chance;
      for (let k = 0; k < nus; k++) {
        arr.value.push(i);
      }
    }    //  将奖品循环添加到奖池生成概率
    let ar = Math.round(Math.random() * arr.value.length);  // 获取的是一个下标
    let ars = arr.value[ar]; // 随机数
    console.log(ars);
    const aa = () => {
      int = setInterval(() => {
        color.value[i] = 0; // 重置
        i++; // 递增
        console.log(i);
        // 当循环完一圈到7的位置让i重置
        if (i > 7) {
          i = 0; // 重置
          co += 1;  // 记录圈数
        }
        // 第0圈到第1圈
        if (co <= 1) {
          clearInterval(int);  //  清除定时器
          aa();    // 调用函数
          time -= 50;  // 速度加快，时间越短转的就越快
        }
        // 第2圈到第4圈
        if (co <= 4 && co > 1) {
          clearInterval(int);
          aa();
        }
        // 第6圈到第7圈
        if (co <= 7 && co > 5) {
          clearInterval(int);
          aa();
          time += 70; // 
        }
        // 设置的圈数，至少循环 quan 才停止
        if (co == quan && i == ars) {
          clearInterval(int);
          let a = list.value[i].name;
        }
        color.value[i] = 1; // 改值
      }, time);
    };
    const ting = () => {
      clearInterval(int);
    };
  }
</script>
<style>
.chous {
  width: 100%;
}
.ch {
  display: flex;
}
.chous p {
  line-height: 100px;
  text-align: center;
  margin: 2%;
  width: 100px;
  height: 100px;
  background-color: aqua;
}
.item1 {
  background: blue !important;
}
</style>