vue版微信小程序抽奖大转盘

<template>
    <view class="draw-container">
        <view class="btn fz-32 flex-x flex-space">
            <view class="left">ynn抽中了kindle</view>
            <view class="">1人参与</view>
        </view>
        <view class="draw-table-box">
            <!-- 转盘背景图 -->
            <img :src="tableBg" class="draw-table-bg" :animation="animationData" />
            <!-- 点击触发抽奖的按钮 -->
            <img @click="tableroll" :src="go" :class="{'draw-table-go': true, 'draw-table-go-grey': !times}" />
        </view>
        <!-- 显示剩余抽奖次数 -->
        <view class="num fz-24 mt-40">今日剩余 {{ times }} 次抽奖机会</view>
        <view class="illustrate fz-24">
            活动说明
        </view>
        <view class="illustrate1 fz-24">
            我的奖品
        </view>
        <view class="forward">
            <cms-image src="https://qnpu.xlt-cd.com/turntable/forward.png" size="110"></cms-image>
        </view>
        <view class="footer fz-32">距离结束还剩251时03分59秒</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 转盘背景图的链接
                tableBg: 'https://qnpu.xlt-cd.com/turntable/turntable_content.png',
                // 抽奖按钮的链接
                go: 'https://qnpu.xlt-cd.com/turntable/pointer.png',
                // 动画数据
                animationData: {},
                // 单个奖项的角度
                singleDeg: 45,
                // 自测中奖初始值
                i: 1,
                // 初始旋转角度
                initDeg: 360,
                // 奖项列表
                awards: [{
                        id: 1,
                        degree: '1等奖',
                        name: '20元优惠卷',
                        //自定义中奖概率
                        probability: 0.10
                    },
                    {
                        id: 2,
                        degree: '2等奖',
                        name: '10元优惠卷',
                        probability: 0.10
                    },
                    {
                        id: 3,
                        degree: '3等奖',
                        name: '10元优惠卷',
                        probability: 0.10
                    },
                    {
                        id: 4,
                        degree: '4等奖',
                        name: '书',
                        probability: 0.10
                    },
                    {
                        id: 5,
                        degree: '5等奖',
                        name: '笔记本',
                        probability: 0.10
                    },
                    {
                        id: 6,
                        degree: '6等奖',
                        name: '10元红包',
                        probability: 0.10
                    },
                    {
                        id: 7,
                        degree: '7等奖',
                        name: '耳机',
                        probability: 0.30
                    },
                    {
                        id: 8,
                        degree: '8等奖',
                        name: 'kindle',
                        probability: 0.10
                    },
                ],
                // 剩余抽奖次数
                times: 10,
                // 转盘转动时防止用户再次点击抽奖
                isClick: false,
            };
        },
        onShow() {
            // 创建一个动画实例
            this.animation = uni.createAnimation({
                duration: 2000, // 动画时长为2秒
                timingFunction: 'ease', // 缓动函数为ease
            });
        },
        methods: {
            // 点击开始抽奖
            tableroll() {
                if (this.isClick) return; // 防止重复点击
                if (this.times < 1) return; // 抽奖次数为0时不可抽奖

                this.isClick = true;
                let randomNum = Math.random();
                let deviation = randomNum > 0.5 ? randomNum - 0.1 : randomNum + 0.1;

                // 模拟接口返回的中奖信息
                this.mockDrawInfo().then((result) => {
                    // 根据中奖信息查找奖项
                    let res1 = this.awards.filter((item) => {
                        return item.degree === result.degree;
                    });
                    this.i++;
                    if (this.i === 7) {
                        this.i = 1;
                    }

                    // 计算旋转角度
                    let rotateDeg = 45 * (res1[0].id - deviation) + 360;

                    // 随机增加额外的旋转角度（4-7圈）
                    let surplusDeg = (Math.floor(Math.random() * 4) + 4) * 360;

                    // 设置旋转动画
                    this.animation.rotate(this.initDeg + rotateDeg + surplusDeg).step();
                    this.initDeg += surplusDeg;

                    // 导出动画数据
                    this.animationData = this.animation.export();

                    setTimeout(() => {
                        this.isClick = false; // 抽奖结束后允许再次点击
                        this.times--; // 抽奖次数减1
                        console.log("奖项名称：" + res1[0].name);
                        console.log("奖项等级：" + res1[0].degree);
                    }, 2000); // 等待2秒后执行
                });
            },

            // 模拟接口返回中奖信息
            mockDrawInfo() {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        let totalProbability = 0;
                        for (let award of this.awards) {
                            totalProbability += award.probability;
                        }

                        let randomNum = Math.random() * totalProbability;

                        let cumulativeProbability = 0;
                        let resultDegree = null;
                        for (let award of this.awards) {
                            cumulativeProbability += award.probability;
                            if (randomNum <= cumulativeProbability) {
                                resultDegree = award.degree;
                                break;
                            }
                        }

                        resolve({
                            degree: resultDegree,
                        });
                    }, 1000);
                });
            },
        },
    };
</script>

<style lang="scss">
    page {
        min-height: 100vh;
        background: url(https://qnpu.xlt-cd.com/turntable/lottery_draw_big_banner.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
    }

    .draw-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        padding-top: 300rpx;
    }

    .draw-table-box {
        width: 580rpx;
        height: 580rpx; // 根据需要进行调整
        margin-top: 38rpx; // 根据需要进行调整
        position: relative;
    }

    .draw-table-bg {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .draw-table-go {
        width: 148rpx;
        height: 192rpx;
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .draw-table-go-grey {
        filter: grayscale(100%);
        filter: gray;
    }

    .btn {
        width: 566rpx;
        padding: 30rpx 46rpx 30rpx 46rpx;
        background: linear-gradient(180deg, #FFFFD1 1%, #FFF1D4 51%, #FFDB95 100%);
        box-shadow: 6rpx 6rpx 0rpx 0rpx #D20000;
        border-radius: 50rpx;
        font-weight: 400;
        color: #EC0000;
    }

    .left {
        padding-right: 60rpx;
        border-right: 2rpx solid #EC0000;
    }

    .num {
        padding: 24rpx 50rpx 24rpx 50rpx;
        border-radius: 44rpx;
        color: #FFFFFF;
        background-color: rgba(255, 207, 10, 0.3);
    }

    .illustrate {
        padding: 20rpx 36rpx 20rpx 36rpx;
        background: linear-gradient(180deg, #EC0000 0%, #FF4035 49%, #EC0000 100%);
        box-shadow: 4rpx 4rpx 8rpx 0rpx #B00000;
        border-radius: 44rpx 0rpx 0rpx 44rpx;
        border: 4rpx solid #FFD400;
        color: #FFFFFF;
        position: absolute;
        right: 0rpx;
        bottom: 420rpx;
    }

    .illustrate1 {
        padding: 20rpx 36rpx 20rpx 36rpx;
        background: linear-gradient(180deg, #EC0000 0%, #FF4035 49%, #EC0000 100%);
        box-shadow: 4rpx 4rpx 8rpx 0rpx #B00000;
        border-radius: 44rpx 0rpx 0rpx 44rpx;
        border: 4rpx solid #FFD400;
        color: #FFFFFF;
        position: absolute;
        right: 0rpx;
        bottom: 318rpx;
    }

    .forward {
        position: absolute;
        right: 24rpx;
        bottom: 180rpx;
    }

    .footer {
        position: absolute;
        bottom: 30rpx;
        color: #FFFFFF;
        text-align: center;
    }
</style>