vue3轮盘抽奖功能

<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>