更新记录

1.0.1（2025-09-03） 下载此版本

小程序九宫格抽奖，可指定结果或可根据概率抽取奖品，随机排序，使用简单，流畅顺畅，详细说明

平台兼容性

uni-app(4.08)

uni-app x(4.08)

九宫格抽奖，小程序抽奖

小程序九宫格抽奖，可指定结果或可根据概率抽取奖品，随机排序，使用简单，流畅顺畅，详细说明

使用示例

<template>
    <view class="prize-content">
        <view class="res-box" v-if="finalResult.id">{{ finalResult.name }}</view>
        <view class="draw-cp">
        <prize-draw v-if="prizeArr.length>0" :prizeArr="prizeArr" :prizeRes="prizeRes" :aniSpeed="100" @endDrawResult="getResult"></prize-draw>
        </view>
    </view>
</template>

<script setup>
    import prizeDraw from '@/components/prize-draw/prize-draw.vue'

    import {
        nextTick,
        onMounted,
        ref,
        getCurrentInstance,
        onUnmounted,
        isRef
    } from 'vue'

    const prizeArr = ref([]); //列表
    const prizeRes = ref({}); //结果
    const finalResult = ref({}); //最终结果

    onMounted(() => {
        getPrizeList();//获取数据

        //指定结果；如果不指定则不需要赋值，抽奖则会自动根据概率计算。
        prizeRes.value = {
            id: 4,
            name: '奖品4',
            thumb: '/static/prize/01.png',
            probability:10
        };

    })
    //获取结果
    const getResult = (e) =>{
        console.log("结果：",e);
        finalResult.value = e;
        prizeArr.value = weightedShuffle(prizeArr.value); //再次给其随机排列
    }
    //获取列表
    const getPrizeList = ()=>{
        const arr = [
            {
                id: 1,
                name: '奖品1', //名称
                thumb: '/static/prize/01.png', //图片
                probability:0.02 //中奖概率
            }, {
                id: 2,
                name: '奖品2',
                thumb: '/static/prize/03.png',
                probability:5
            }, {
                id: 3,
                name: '奖品3',
                thumb: '/static/prize/02.png',
                probability:6
            }, {
                id: 4,
                name: '奖品4',
                thumb: '/static/prize/01.png',
                probability:10
            }, {
                id: 5,
                name: '奖品5',
                thumb: '/static/prize/03.png',
                probability:200
            }, {
                id: 6,
                name: '奖品6',
                thumb: '',
                probability:66
            }, {
                id: 7,
                name: '奖品7',
                thumb: '',
                probability:80
            }, {
                id: 8,
                name: '奖品8',
                thumb: '',
                probability:99
            }
        ];

        prizeArr.value = weightedShuffle(arr);
    }
    //随机排列
    const weightedShuffle = (arr)=> {
       const result = [...arr]; // 避免修改原数组
        for (let i = result.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [result[i], result[j]] = [result[j], result[i]];
        }
        return result;
    }
    onUnmounted(() => {

    })

</script>

<style lang="scss">
    .prize-content{
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .res-box{
            width: 100%;
            height: 50rpx;
            text-align: center;
            position: absolute;
            top: 10%;
            left: 0;
        }
    }

</style>