uniapp幸运大转盘

<template>
    <view>
        <view class="circle">
            <view class="post" :class="{'posts':lottery==true}" :style="{transform:`rotate(-${index}deg)`}">
                <view v-for="(item,index) in arrty" class="paint" :key="index"
                    :style="{transform:`rotate(${index*number}deg) skewY(-27deg)`}">
                </view>
                <view v-for="(item,index) in arrty" class="painta" :key="index"
                    :style="{transform:`rotate(${index*number}deg)`}">
                    <view class="paint-flex">
                        <b>{{item.name}}</b>
                        <b>{{item.prize}}</b>
                    </view>
                </view>
            </view>
            <view class="arrow"></view>
            <view class="draw" @click="draw">抽奖</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                lottery: false,
                index: 0,
                s: 0,
                arrty: [{
                        id: 1,
                        name: '六等奖',
                        prize: '谢谢回顾'
                    },
                    {
                        id: 2,
                        name: '五等奖',
                        prize: '20'
                    },
                    {
                        id: 3,
                        name: '四等奖',
                        prize: '100'
                    },
                    {
                        id: 4,
                        name: '三等奖',
                        prize: '游戏机',
                    },
                    {
                        id: 5,
                        name: '二等奖',
                        prize: '苹果13',
                    },
                    {
                        id: 6,
                        name: '一等奖',
                        prize: '苹果14',
                    },
                ]
            }
        },
        computed: {
            number() {
                return 360 / this.arrty.length;
            }
        },
        methods: {
            draw() {
                if (this.lottery) {
                    return;
                }
                this.lottery = true;
                setTimeout(() => {
                    this.lottery = false;
                    if (this.lottery == false) {
                        console.log(this.arrty.findIndex(item => item.name == '一等奖'));
                        var a = 0;
                        this.s++;
                        console.log(this.s);
                        if (this.s == 1) {
                            a = (this.arrty.findIndex(item => item.name == '六等奖') + 1) * this.number;
                        } else if (this.s == 2) {
                            a = (this.arrty.findIndex(item => item.name == '五等奖') + 1) * this.number;
                        } else if (this.s == 3) {
                            a = (this.arrty.findIndex(item => item.name == '一等奖') + 1) * this.number;
                        } else if (this.s == 4) {
                            a = (this.arrty.findIndex(item => item.name == '四等奖') + 1) * this.number;
                        }else if (this.s == 5) {
                            a = (this.arrty.findIndex(item => item.name == '三等奖') + 1) * this.number;
                        }else{
                            a = (this.arrty.findIndex(item => item.name == '二等奖') + 1) * this.number;
                        }
                        this.index = a;
                    }
                }, 3000)
            }
        }
    }
</script>

<style scoped lang="scss">
    .circle {
        width: 600rpx;
        height: 600rpx;
        background-color: red;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        transform: rotate(30deg);
        margin: auto;
        margin-top: 100rpx;
    }

    .draw {
        position: absolute;
        transform: rotate(-30deg);
        background-color: red;
        width: 100rpx;
        height: 100rpx;
        text-align: center;
        line-height: 100rpx;
        border-radius: 50%;
        color: #fff;
    }

    .arrow {
        position: absolute;
        width: 10rpx;
        height: 70rpx;
        background-color: red;
        top: 200rpx;
        left: 43%;
        transform: rotate(-30deg);
    }

    .post {
        width: 560rpx;
        height: 560rpx;
        border-radius: 50%;
        position: absolute;
        overflow: hidden;
    }

    .posts {
        width: 560rpx;
        height: 560rpx;
        border-radius: 50%;
        position: absolute;
        overflow: hidden;
        animation-name: anima;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

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

        to {
            transform: rotate(360deg);
        }
    }

    .paint {
        width: 560rpx;
        height: 560rpx;
        background-color: bisque;
        position: absolute;
        left: 50%;
        top: -50%;
        /*600-280/2,将prize正方形左下角点对准圆心*/
        border: 1px solid red;
        /*以正方形左下角为中心旋转，0% 100%即左下角的坐标*/
        transform-origin: 0% 100%;

    }

    .painta {
        width: 300rpx;
        height: 300rpx;
        position: absolute;
        left: 50%;
        top: 0;
        transform-origin: 0% 100%;
    }

    .painta:nth-child(3) {
        color: red;
    }

    .paint-flex {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 110%;
        height: 80%;
        transform: rotate(30deg) translateX(-15%) translateY(10%);
        font-size: 30rpx;
    }
</style>