183 lines
4.8 KiB
Markdown
183 lines
4.8 KiB
Markdown
# 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>
|
|
``` |