这是一个简单的纯前台的抽奖页面
<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>