Vue 3 实现九宫格概率抽奖

<template>
  <div>
    <button @click="startLottery" :disabled="isRunning">开始抽奖</button>
    <p v-if="selectedPrize">恭喜你，中奖了！你获得了 {{ selectedPrize.name }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      prizes: [
        { name: 'prize 1', probability: 0.1 },
        { name: 'prize 2', probability: 0.2 },
        { name: 'prize 3', probability: 0.3 },
        { name: 'prize 4', probability: 0.05 },
        { name: 'prize 5', probability: 0.15 },
        { name: 'prize 6', probability: 0.1 },
        { name: 'prize 7', probability: 0.08 },
        { name: 'prize 8', probability: 0.01 },
        { name: 'prize 9', probability: 0.01 }
      ],
      isRunning: false,
      selectedPrize: null
    };
  },
  methods: {
    startLottery() {
      if (this.isRunning) return;
      this.isRunning = true;
      this.selectedPrize = null;
      const totalProbability = this.prizes.reduce((sum, prize) => sum + prize.probability, 0);
      let randomNum = Math.random() * totalProbability;
      for (let i = 0; i < this.prizes.length; i++) {
        const prize = this.prizes[i];
        if (randomNum <= prize.probability) {
          this.selectedPrize = prize;
          break;
        } else {
          randomNum -= prize.probability;
        }
      }
      setTimeout(() => {
        this.isRunning = false;
      }, 2000);
    }
  }
};
</script>