122 lines
2.7 KiB
Markdown
122 lines
2.7 KiB
Markdown
# dengbo-lotteryWheel 组件
|
|
|
|
dengbo-lotteryWheel 是一个用于创建抽奖转盘的 uniapp 组件。它提供了一个可自定义的转盘界面，支持动画效果和奖品展示。
|
|
|
|
## 属性
|
|
|
|
| 属性名 | 类型 | 默认值 | 描述 |
|
|
|--------|------|--------|------|
|
|
| prizeList | Array | [] | 奖品列表，每个奖品对象应包含 `icon` 和 `name` 属性 |
|
|
| rotateTime | Number | 5 | 转盘旋转时间（秒） |
|
|
| rotateDeg | Number | 0 | 转盘旋转的角度 |
|
|
|
|
## 事件
|
|
|
|
| 事件名 | 描述 |
|
|
|--------|------|
|
|
| rotateEnd | 转盘停止旋转时触发 |
|
|
|
|
## 示例
|
|
|
|
## 使用方法
|
|
|
|
```
|
|
<template>
|
|
<view class="content">
|
|
<view class="lottery">
|
|
<dengbo-lotteryWheel :prizes="prizes" :size="626" :duration="5000" @run="onWheelClick"
|
|
@done="onWheelDone" ref="luckyWheel" :lightImgs="lightImages" customStyle="borderRadius: 50%;">
|
|
<template v-slot:bg>
|
|
<image src="/static/tzbj.png" style="width: 100%; height: 100%" />
|
|
</template>
|
|
<template v-slot:pointer>
|
|
<image src="/static/tan.png" style="width: 212rpx" mode="widthFix" @click="startWheel"/>
|
|
</template>
|
|
</dengbo-lotteryWheel>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
lightImages: ['/static/tpoint1.png', '/static/tpoint2.png'],
|
|
prizes: [{
|
|
name: '积分',
|
|
image: '/static/thb.png',
|
|
pro: '50积分',
|
|
},
|
|
{
|
|
name: '积分',
|
|
image: '/static/thb.png',
|
|
pro: '100积分',
|
|
},
|
|
{
|
|
name: '优惠券',
|
|
image: '/static/thb.png',
|
|
pro: '15元优惠券',
|
|
},
|
|
{
|
|
name: '家用电器',
|
|
image: '/static/thb.png',
|
|
pro: '微波炉',
|
|
},
|
|
{
|
|
name: '谢谢参与',
|
|
image: '/static/thb.png',
|
|
pro: '15元优惠券',
|
|
},
|
|
{
|
|
name: '办公用品',
|
|
image: '/static/thb.png',
|
|
pro: '机械键盘',
|
|
},
|
|
{
|
|
name: '生活用品',
|
|
image: '/static/thb.png',
|
|
pro: '化妆刷',
|
|
},
|
|
],
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods: {
|
|
startWheel() {
|
|
this.$refs.luckyWheel.run(2);
|
|
},
|
|
onWheelClick() {
|
|
console.log('用户点击了转盘');
|
|
this.$refs.luckyWheel.run(2);
|
|
},
|
|
onWheelDone(prize) {
|
|
console.log('抽奖结束，中奖奖品：', prize);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.content{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.lottery {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 626rpx;
|
|
height: 626rpx;
|
|
margin-top: 100rpx;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
|
|
## 注意事项
|
|
|
|
- 确保 `prizeList` 中的奖品数量与组件中的扇形数量匹配。
|
|
- `rotateDeg` 决定了转盘最终停止的位置，您可以根据需要计算这个值以控制中奖结果。
|
|
- 可以通过修改组件的 CSS 来自定义转盘的外观。 |