增加新模块
This commit is contained in:
何江明
@@ -0,0 +1,4 @@
|
||||
## 1.0.1（2022-08-26）
|
||||
1.0.1 优化文档
|
||||
## 1.0.0（2022-08-25）
|
||||
1.0.0 插件上线
|
||||
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<view class="turntable_wp sol-class">
|
||||
<up-image
|
||||
width="150"
|
||||
height="150"
|
||||
src="/uni_modules/q-turntable/static/s-dial_bg.png"
|
||||
:style="'-webkit-transform:rotate(' + deg + 'deg) translateZ(0);transform:rotate(' + deg + 'deg) translateZ(0)'"
|
||||
></up-image>
|
||||
<view class="turntable_pointer" @tap="start">
|
||||
<up-image width="50" height="50"src="/uni_modules/q-turntable/static/s-dial_pointer.png"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
deg: 0,
|
||||
singleAngle: '',
|
||||
// 每片扇形的角度
|
||||
isStart: false
|
||||
};
|
||||
},
|
||||
|
||||
components: {},
|
||||
props: {
|
||||
// 划分区域
|
||||
areaNumber: {
|
||||
type: Number,
|
||||
default: 6
|
||||
},
|
||||
// 速度
|
||||
speed: {
|
||||
type: Number,
|
||||
default: 16
|
||||
}
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
init() {
|
||||
let { areaNumber } = this;
|
||||
const singleAngle = 360 / areaNumber;
|
||||
this.singleAngle = singleAngle;
|
||||
},
|
||||
|
||||
// 点击开始抽奖
|
||||
start() {
|
||||
this.$emit('start');
|
||||
},
|
||||
|
||||
begin(awardNumer) {
|
||||
var deg = this.deg;
|
||||
var singleAngle = this.singleAngle;
|
||||
var speed = this.speed;
|
||||
var isStart = this.isStart;
|
||||
if (isStart) return;
|
||||
this.isStart = true;
|
||||
let endAddAngle = 0;
|
||||
endAddAngle = 360 - ((awardNumer - 1) * singleAngle + singleAngle / 2); // 中奖角度
|
||||
|
||||
|
||||
const rangeAngle = (Math.floor(Math.random() * 4) + 4) * 360; // 随机旋转几圈再停止
|
||||
|
||||
console.log(endAddAngle);
|
||||
let cAngle;
|
||||
deg = 0;
|
||||
this.timer = setInterval(() => {
|
||||
if (deg < rangeAngle) {
|
||||
deg += speed;
|
||||
} else {
|
||||
cAngle = (endAddAngle + rangeAngle - deg) / speed;
|
||||
cAngle = cAngle > speed ? speed : cAngle < 1 ? 1 : cAngle;
|
||||
deg += cAngle;
|
||||
|
||||
if (deg >= endAddAngle + rangeAngle) {
|
||||
deg = endAddAngle + rangeAngle;
|
||||
this.isStart = false;
|
||||
clearInterval(this.timer);
|
||||
this.$emit('success');
|
||||
}
|
||||
}
|
||||
|
||||
this.deg = deg;
|
||||
}, 1000 / 60);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
|
||||
.turntable_wp {
|
||||
width: 610rpx;
|
||||
height: 610rpx;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.turntable_wp image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.turntable_wp .turntable_pointer {
|
||||
position: absolute;
|
||||
width: 224rpx;
|
||||
height: 224rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -125rpx 0 0 -112rpx;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,84 @@
|
||||
{
|
||||
"id": "q-turntable",
|
||||
"displayName": "抽奖大转盘，支持vue2，vue3，小程序，app，h5",
|
||||
"version": "1.0.1",
|
||||
"description": "抽奖大转盘，支持vue2，vue3，小程序，app，h5",
|
||||
"keywords": [
|
||||
"抽奖",
|
||||
"转盘",
|
||||
"vue3",
|
||||
""
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.2.5"
|
||||
},
|
||||
"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"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "u",
|
||||
"Android Browser": "u",
|
||||
"微信浏览器(Android)": "u",
|
||||
"QQ浏览器(Android)": "u"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "u",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
# q-turntable
|
||||
|
||||
# 插件市场导入 转盘图片是网上找的，请开发时自行替换为自己项目的转盘图
|
||||
|
||||
# vue2事例代码
|
||||
```
|
||||
<template>
|
||||
<view><q-turntable ref="turntable" @start="turntableStart" @success="turntableSuccess"></q-turntable></view>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
award: 1,
|
||||
awardList: [
|
||||
{
|
||||
title: '特等奖'
|
||||
},
|
||||
{
|
||||
title: '一等奖'
|
||||
},
|
||||
{
|
||||
title: '二等奖'
|
||||
},
|
||||
{
|
||||
title: '三等奖'
|
||||
},
|
||||
{
|
||||
title: '四等奖'
|
||||
},
|
||||
{
|
||||
title: '啥也没有'
|
||||
}
|
||||
] // 顺时针对应每个奖项
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 用户点击开始抽奖
|
||||
turntableStart() {
|
||||
let index = Math.floor(Math.random() * 6 + 1) //前端随机数，这里应该后台返回中奖结果
|
||||
this.award = index
|
||||
this.$refs.turntable.begin(this.award);
|
||||
},
|
||||
|
||||
// 抽奖完成后操作
|
||||
turntableSuccess() {
|
||||
const index = this.award - 1;
|
||||
console.log('bind:success', this.awardList[index]);
|
||||
uni.showToast({
|
||||
title: `恭喜你获得${this.awardList[index].title}`,
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
# vue3示例代码
|
||||
|
||||
```
|
||||
<template>
|
||||
<view><q-turntable ref="turntable" @start="turntableStart" @success="turntableSuccess"></q-turntable></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, toRefs, ref } from 'vue';
|
||||
const data = reactive({
|
||||
award: 1,
|
||||
awardList: [
|
||||
{
|
||||
title: '特等奖'
|
||||
},
|
||||
{
|
||||
title: '一等奖'
|
||||
},
|
||||
{
|
||||
title: '二等奖'
|
||||
},
|
||||
{
|
||||
title: '三等奖'
|
||||
},
|
||||
{
|
||||
title: '四等奖'
|
||||
},
|
||||
{
|
||||
title: '啥也没有'
|
||||
}
|
||||
] // 顺时针对应每个奖项
|
||||
});
|
||||
const turntable = ref(null);
|
||||
const { award, awardList } = toRefs(data);
|
||||
// 用户点击开始抽奖
|
||||
const turntableStart = () => {
|
||||
let index = Math.floor(Math.random() * 6 + 1);//前端随机数，这里应该后台返回中奖结果
|
||||
data.award = index;
|
||||
turntable.value.begin(data.award);
|
||||
};
|
||||
|
||||
// 抽奖完成后操作
|
||||
const turntableSuccess = () => {
|
||||
const index = data.award - 1;
|
||||
uni.showToast({
|
||||
title: `恭喜你获得${data.awardList[index].title}`,
|
||||
icon: 'none'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
```
|
||||
# 如果插件对你们有帮助的话，请给个五星鼓励一下，谢谢！如果遇到问题或者有更好的建议可以加我qq 965969604
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Reference in New Issue
Block a user