<template>
<div class="drawBox">
<img @click="GO" ref="drwaImg" class="drawImg" src="../assets/draw.jpg" alt="">
<img class="ss" src="../assets/s.png" alt="">
</div>
</template>
<script>
import {
ref ,reactive,onMounted} from 'vue';
export default {
name: 'LuckDraw',
setup(){
const drwaImg = ref(null)
// let win = reactive(['30M流量','100M流量','2金币','50M流量','10金币','谢谢参与','5金币','10M流量','20M流量','20金币'])
// 顺时针旋转,奖池要倒置,可从接口获取
let win = reactive(['30M流量','20金币','20M流量','10M流量','5金币','谢谢参与','10金币','50M流量','2金币','100M流量'])
let deg = 360/win.length // 每个奖品所占度数 ,圆盘360度
let prize = ref('') // 奖品
let truns = 3 // 转的圈数
let flag = ref(false) //避免重复点击
let eidNum = ()=>{
return Math.floor(Math.random()*win.length)
}
onMounted(()=>{
})
let GO=()=>{
if (flag.value === true) {
return
}
flag.value = true
drwaImg.value.style.transition = "all 2s ease-out";
let num = eidNum() // 可从后端获取奖品,在到奖池中查询
prize.value = win[num]
drwaImg.value.style.transform = `rotate(${
truns*360 + deg*num}deg)`
setTimeout(()=>{
alert(prize.value) //弹出中间弹窗
flag.value = false
// 抽奖完成,重置位置
drwaImg.value.style.transition = "";
drwaImg.value.style.transform = `rotate(0deg)`
},2000)
console.log(num,deg,win[num],prize.value,drwaImg.value.style.transform,'prize');
}
return {
GO,drwaImg,prize
}
}
}
</script>
<style>
.drawBox{
position: relative;
width: 426px;
height: 419px;
background-color: aqua;
margin-top: 200px;
}
.drawImg{
position: absolute;
top: 0;
border-radius: 50%;
left: 0;
width: 100%;
height: 100%;
border: 1px solid chartreuse;
transform: rotate(0deg);
/* transition: all 2s ease-out; */
}
.ss{
position: absolute;
width: 80px;
height: 120px;
top: 140px;
left: 50%;
transform: translateX(-50%);
}
</style>
vue3轮盘抽奖功能
猜你喜欢
转载自blog.csdn.net/Jonn1124/article/details/129751472
今日推荐
周排行