更新记录

1.0.0（2024-10-10） 下载此版本

1.0.0

平台兼容性

dengbo-lotteryGrid

dengbo-lotteryGrid 是一个用于创建抽奖格子游戏的 uniapp 组件。它提供了一个可自定义的抽奖网格,支持不同的行列数、奖品设置和样式定制。

特性

• 支持自定义行数和列数
• 可配置奖品信息和图片
• 可自定义抽奖速度和加速度
• 支持自定义网格项和激活项样式
• 提供开始抽奖和抽奖结束事件

属性

事件

插槽

注意事项

• 确保提供的奖品数量与网格大小匹配(rows cols - (this.rows-2)(this.cols-2))
• 使用 startLottery 方法时,需要传入最终中奖的索引

示例

<template>
    <view class="content">
        <view class="lottery">
            <image src="/static/lk.png" style="width: 100%; height: 100%"></image>
            <view style="
                            width: 500rpx;
                            height: 500rpx;
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            transform: translate(-50%, -45%);
                          ">
                <dengbo-lotteryGrid ref="lottery" @lottery-end="onLotteryEnd" :prizes="prizes"
                    :prizeItemStyle="prizeItemStyle" @centerButtonClick="startLottery" gridItemBg="/static/lb.png">
                    <template v-slot:centerButton>
                        <view style="width: 100%; height: 100%; position: relative">
                            <image src="/static/lj.png" style="width: 100%; height: 100%"></image>
                            <view style="
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    transform: translate(-50%, 20%);
                                    font-size: 18rpx;
                                    color: #fee6aa;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: center;
                                  ">
                                <view style="white-space: nowrap">10积分/次</view>
                                <view style="white-space: nowrap">剩余9999积分</view>
                            </view>
                        </view>
                    </template>
                </dengbo-lotteryGrid>
            </view>
        </view>
        <view style="margin-top: -64rpx">
            <image @click="startLottery" src="/static/lan.png"
                style="width: 520rpx; height: 192rpx; position: relative; z-index: 9">
            </image>
        </view>
        <view style="margin-top: -96rpx">
            <image src="/static/lt.png" style="width: 670rpx; height: 180rpx"></image>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                prizeItemStyle: {
                    borderRadius: '5px',
                    fontWeight: '400',
                    fontSize: '18rpx',
                    color: '#EE4F00',
                },
                prizes: [{
                        id: 1,
                        name: '一等奖',
                        image: '/static/lj.png',
                    },
                    {
                        id: 2,
                        name: '二等奖',
                        image: '/static/lj.png',
                    },
                    {
                        id: 3,
                        name: '三等奖',
                        image: '/static/lj.png',
                    },
                    {
                        id: 4,
                        name: '四等奖',
                        image: '/static/lj.png',
                    },
                    {
                        id: 5,
                        name: '五等奖',
                        image: '/static/lj.png',
                    },
                    {
                        id: 6,
                        name: '六等奖',
                        image: '/static/lj.png',
                    },
                    {
                        id: 7,
                        name: '七等奖',
                        image: '/static/lj.png',
                    },
                    {
                        id: 8,
                        name: '八等奖',
                        image: '/static/lj.png',
                    },
                ],
            }
        },
        onLoad() {

        },
        methods: {
            startLottery() {
                // // 选择一个奖品索引（这里使用随机选择作为示例）
                let selectedPrizeIndex = Math.floor(Math.random() * this.prizes.length);
                // // 开始抽奖
                // this.isLotteryRunning = true;
                this.$refs.lottery.startLottery(selectedPrizeIndex);
            },
            onLotteryEnd(prize) {
                console.log(prize)
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .lottery {
        margin-top: 100rpx;
        position: relative;
        display: inline-block;
        width: 688rpx;
        height: 740rpx;
    }
</style>