# 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 来自定义转盘的外观。