前端抽奖代码

这是一个简单的纯前台的抽奖页面

<template>  
  <div>  
    <h1>抽奖页面</h1>  
    <button @click="startLottery">开始抽奖</button>  
    <div v-if="isLotteryRunning">  
      <p>抽奖中...</p>  
      <progress max="100" :value="lotteryProgress"></progress>  
    </div>  
    <div v-else>  
      <p>未开始抽奖</p>  
    </div>  
    <div v-if="hasWinner">  
      <h2>恭喜获奖者：{{ winnerName }}</h2>  
      <p>获奖者ID：{{ winnerId }}</p>  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      isLotteryRunning: false,  
      lotteryProgress: 0,  
      hasWinner: false,  
      winnerName: '',  
      winnerId: '',  
    };  
  },  
  methods: {  
    startLottery() {  
      this.isLotteryRunning = true;  
      // 模拟抽奖过程，实际应用中需要调用后端接口进行抽奖操作  
      let lotteryTimer = setInterval(() => {  
        this.lotteryProgress += 10;  
        if (this.lotteryProgress >= 100) {  
          clearInterval(lotteryTimer);  
          this.hasWinner = true;  
          this.winnerName = '张三'; // 假设获奖者姓名为张三，实际应用中需要从数据源中获取获奖者姓名和ID  
          this.winnerId = '123456'; // 假设获奖者ID为123456，实际应用中需要从数据源中获取获奖者ID  
        }  
      }, 500); // 每隔500毫秒更新进度条进度，模拟抽奖过程  
    },  
  },  
};  
</script>