1
This commit is contained in:
@@ -1,3 +1,3 @@
|
||||
## 1.0.0（2024-10-10）
|
||||
1.0.0
|
||||
## 1.0.0（2024-10-10）
|
||||
1.0.0
|
||||
1.0.0
|
||||
+535
-535
File diff suppressed because it is too large
Load Diff
@@ -1,85 +1,85 @@
|
||||
{
|
||||
"id": "dengbo-lotteryWheel",
|
||||
"displayName": "uniapp抽奖-转盘",
|
||||
"version": "1.0.0",
|
||||
"description": "uniapp抽奖-转盘",
|
||||
"keywords": [
|
||||
"抽奖",
|
||||
"转盘",
|
||||
"闪光灯",
|
||||
"跑马灯"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "u",
|
||||
"app-uvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "u",
|
||||
"微信浏览器(Android)": "u",
|
||||
"QQ浏览器(Android)": "u"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "u",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
{
|
||||
"id": "dengbo-lotteryWheel",
|
||||
"displayName": "uniapp抽奖-转盘",
|
||||
"version": "1.0.0",
|
||||
"description": "uniapp抽奖-转盘",
|
||||
"keywords": [
|
||||
"抽奖",
|
||||
"转盘",
|
||||
"闪光灯",
|
||||
"跑马灯"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "u",
|
||||
"app-uvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "u",
|
||||
"微信浏览器(Android)": "u",
|
||||
"QQ浏览器(Android)": "u"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "u",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,122 +1,122 @@
|
||||
# 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` 决定了转盘最终停止的位置，您可以根据需要计算这个值以控制中奖结果。
|
||||
# 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 来自定义转盘的外观。
|
||||
Reference in New Issue
Block a user