uniapp 抽奖

HTML代码：

<template>
    <view class="relative">
        <image class="bg" src="../../static/bj.png"></image>
        <view class="rotate-wrap">
            <image src="../../static/zhuan.png" class="rotateBox" :class="{'rotate':isRotate}"
                :style="{transform:`rotate(${rotateNum}deg)`}">
            </image>
            <image src="../../static/button.png" @click="rotateHandle" class="button">
            </image>
        </view>
    </view>
</template>

js代码：

<script>
    //生成随机数
    function rand(min, max) {
        return parseInt(Math.random() * (max - min + 1) + min);
    }
    export default {
        data() {
            return {
                isRotate: false, //是否旋转
                prizeList: ['10元话费', '洗护用品一套', '新人红包', '谢谢参与', '积分', '再来一次', '手机一部', '化妆品一套'], //奖品列表，决定旋转角度
                rotateNum: 0, //旋转角度
            }
        },
        methods: {
            rotateHandle() {
                if (this.isRotate) return;
                this.rotateNum = 0;
                setTimeout(() => {
                    let len = this.prizeList.length;
                    let num = rand(0, len - 1); //随机奖品
                    let prize = this.prizeList[num]; //当前奖品
                    // let rotateNum=360/8*num+rand(0,44);//不排除转到中间线
                    let rotateNum = 360 / len * num + rand(4, 40); //排除转到中间线
                    this.rotateNum = 8 * 360 + rotateNum; //旋转圈数8 + 奖品角度
                    this.isRotate = true;
                    setTimeout(() => {
                        this.isRotate = false;
                        uni.showToast({
                            title: prize,
                            icon: 'none',
                            duration: 3000
                        })
                    }, 5000)
                }, 300)
            }
        }
    }
</script>

css代码：

    .bg {
        width: 100%;
        height: 100vh;
    }

    .rotate-wrap {
        position: absolute;
        top: 62%;
        left: 50%;
        width: 470rpx;
        height: 470rpx;
        transform: translate(-50%, -50%);

        .rotateBox {
            position: absolute;
            width: 470rpx;
            height: 470rpx;
        }

        .button {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -93rpx;
            margin-top: -109rpx;
            width: 160rpx;
            height: 190rpx;
            transform: rotate(0deg);
        }

        .button:active {
            transform: scale(0.95);
        }
    }

    .rotate {
        transform: rotate(3800deg);
        transition: transform 5s ease;
    }

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

        100% {
            transform: rotate(3800deg);
        }
    }

原文链接： https://blog.csdn.net/qq_42740797/article/details/125895454?ops_request_misc=&request_id=&biz_id=102&utm_term=uniapp%20%20%E7%BA%A2%E5%8C%85%E9%9B%A8&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-5-125895454.142^v50^new_blog_pos_by_title,201^v3^control_2&spm=1018.2226.3001.4187