vue3按照概率实现九宫格抽奖

<template>
  <div>
    <div class="grid">
      <div class="cell" :class="{'active': selectedIndex === index}" v-for="(item, index) in lotteryList" :key="index">{{ item.title }}</div>
    </div>
    <button @click="startLottery" :disabled="isRunning">开始抽奖</button>
  </div>
</template>
<script>
import { reactive } from 'vue'
interface Lottery {
  title: string;
  probability: number;
}
export default {
  setup() {
    const data = reactive({
      lotteryList: [
        { title: '奖品A', probability: 0.2 },
        { title: '奖品B', probability: 0.1 },
        { title: '奖品C', probability: 0.3 },
        { title: '奖品D', probability: 0.1 },
        { title: '奖品E', probability: 0.2 },
        { title: '奖品F', probability: 0.1 }
      ] as Lottery[],
      selectedIndex: -1,
      isRunning: false
    })
    function startLottery() {
      if (data.isRunning) return
      data.isRunning = true
      const resultIndex = getLotteryResultIndex()
      runLottery(resultIndex)
    }
    function getLotteryResultIndex() {
      const randomNum = Math.random()
      let sum = 0
      for (let i = 0; i < data.lotteryList.length; i++) {
        sum += data.lotteryList[i].probability
        if (randomNum <= sum) {
          return i
        }
      }
    }
    function runLottery(resultIndex: number) {
      data.selectedIndex = -1
      let count = 0
      const animate = () => {
        count++
        data.selectedIndex = count % 9
        if (count < 30) {
          setTimeout(animate, 100)
        } else if (count < 40) {
          setTimeout(animate, 200)
        } else if (count < 48) {
          setTimeout(animate, 300)
        } else if (count < 56) {
          setTimeout(animate, 500)
        } else {
          data.selectedIndex = resultIndex
          data.isRunning = false
        }
      }
      setTimeout(animate, 100)
    }
    return {
      ...data,
      startLottery
    }
  }
}
</script>
<style>
.grid {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}
.cell {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(33.333% - 2px);
  height: calc(33.333% - 2px);
  border: 1px solid black;
}
.cell.active {
  background-color: tomato;
}
</style>