vue幸运大转盘实现

<template>
    <div class="my">

        <div class="main">
            <!-- 转盘 -->
            <img src="@images/my/1.png" style="width: 100%;height: 100%;" class="turntable" :style=" 'transform: rotate(' +deg+ 'deg);  transition-duration: ' +time+'s ;'  ">
            <!-- 开始 -->
            <img src="@images/my/2.png" class="start" @click="start">
        </div>

        <!-- 展示中奖信息 -->
        <div v-show="modal" @click="closeModal">
            <div v-if="showTitle">恭喜您获得</div>
            <div>{{modalTxt}}</div>
        </div>

    </div>
</template>

<script>
    export default {
        //页面需要用到的数据
        data() {
            return {
                showTitle: true,
                modal: false, // 展示modal模块
                modalTxt: '', // 奖品
                time: 5, // 旋转所用时间
                deg: 0, // 旋转角度
                luck: false,
                arr: [
                    {deg: 0,msg: '200金币',id: '1'},
                    {deg: 45,msg: '谢谢参与',id: '2'},
                    {deg: 90,msg: '500金币',id: '3'},
                    {deg: 135,msg: '谢谢参与',id: '4'},
                    {deg: 180,msg: '1000金币',id: '5'},
                    {deg: 225,msg: '谢谢参与',id: '6'},
                    {deg: 270,msg: '50金币',id: '7'},
                    {deg: 315,msg: '谢谢参与',id: '8'}
                ]
            }
        },
        methods: {
            //点击开始
            start() {
                if (this.luck) {
                    return
                }
                this.luck = true // 关锁
                let index = 1; //中奖的索引位置，axios:接口请求获得中奖的数据信息
                this.play(index)
            },

            //根据索引开始旋转
            play(index) {
                this.deg = 360 * 3 + this.arr[index].deg + 20
                setTimeout(() => {
                    this.showRes(this.arr[index])
                }, this.time * 1000);
            },

            //　展示结果
            showRes(data) {
                console.log(data); //获取的奖品数据
                this.modal = true;
                if (data.msg == '谢谢参与') {
                    //未中奖
                    this.showTitle = false;
                    this.modalTxt = data.msg;
                } else {
                    //中奖
                    this.showTitle = true;
                    this.modalTxt = data.msg;
                }
            },

            //　关闭后重新开始
            closeModal() {
                this.luck = false; //开锁
                let s = this.time;
                this.modal = false;
                this.time = 0; //恢复旋转时间0
                this.deg = 0; //恢复旋转角度0
                setTimeout(() => {
                    this.time = s; //旋转所用时间5
                }, 100)
            }
        }
    }
</script>

<style scoped lang="less">
    .my {
        width: 100%;
        height: 100vh;
        background: pink;

        .main {
            position: relative;
            width: 312px;
            height: 312px;
            margin: auto;

            .turntable {
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                margin: auto;
                transform: rotate(0deg);
                z-index: 12;
                transition-timing-function: ease;
                transition-property: all;
            }

            .start {
                width: 75px;
                height: 114px;
                position: absolute;
                top: 90px;
                right: 0;
                left: 0;
                margin: auto;
                z-index: 99;
            }
        }
    }

    @keyframes rotateArc {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(3600deg);
        }
    }
</style>