更新记录

1.0.0(2024-10-10) 下载此版本

1.0.0


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × ×

dengbo-lotteryGrid

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

特性

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

属性

属性名 类型 默认值 描述
rows Number 3 网格的行数
cols Number 3 网格的列数
minSpeed Number 50 最小转动速度(毫秒)
maxSpeed Number 300 最大转动速度(毫秒)
accelerationRate Number 2 加速度率
gridItemBg String '' 网格项背景图片
prizes Array 必填 奖品数组,每个奖品对象包含 name 和 image 属性
prizeItemStyle Object {} 奖品项的自定义样式
activeItemStyle Object { backgroundColor: '#feca57' } 激活项的自定义样式

事件

事件名 参数 描述
centerButtonClick 点击中心按钮时触发
lottery-end prize 抽奖结束时触发,返回中奖奖品对象

插槽

插槽名 描述
default 自定义奖品项内容
centerButton 自定义中心按钮内容

注意事项

  • 确保提供的奖品数量与网格大小匹配(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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问