增加新模块
This commit is contained in:
何江明
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@@ -0,0 +1,170 @@
|
||||
<!--
|
||||
转盘
|
||||
@Author: mosowe
|
||||
@Date:2023-08-10 18:01:01
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view
|
||||
class="rotary-table-component"
|
||||
:style="{
|
||||
width: props.radius * 2 + 'rpx',
|
||||
height: props.radius * 2 + 'rpx'
|
||||
}">
|
||||
<view
|
||||
class="content-table"
|
||||
:style="{
|
||||
transform: 'rotate(' + deg + 'deg)'
|
||||
}">
|
||||
<!-- <sector :radius="props.height / 2"></sector> -->
|
||||
<sector
|
||||
v-for="(item, index) in props.list"
|
||||
:key="index"
|
||||
:radius="props.radius"
|
||||
:text="item.title"
|
||||
:bgColor="item.bgColor"
|
||||
:color="item.color"
|
||||
:image="item.image"
|
||||
:size="item.size"
|
||||
:imageSize="item.imageSize"
|
||||
:angle="singleAngle"
|
||||
:index="index"></sector>
|
||||
</view>
|
||||
<view
|
||||
class="turntable_pointer"
|
||||
@click="start">
|
||||
<image
|
||||
src="./begin-btn.png"
|
||||
class="icon"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import sector from './sector.vue';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
interface listItem {
|
||||
title: string; //文本
|
||||
color?: string; //文字颜色
|
||||
size?: string; // 文字字号
|
||||
bgColor?: string; //区域背景色
|
||||
image?: string; //图片
|
||||
imageSize?: string; //图片宽高
|
||||
}
|
||||
interface Props {
|
||||
list: listItem[]; // 奖项
|
||||
radius?: number; // 圆盘半径
|
||||
speed?: number; // 速度
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
radius: 300,
|
||||
speed: 20
|
||||
});
|
||||
|
||||
// emits
|
||||
interface EmitsType {
|
||||
(e: 'start'): void; // 开始抽奖
|
||||
(e: 'end'): void; // 结束
|
||||
}
|
||||
const emits = defineEmits<EmitsType>();
|
||||
|
||||
const deg = ref<number>(0);
|
||||
const singleAngle = computed(() => {
|
||||
return Number((360 / props.list.length).toFixed(2));
|
||||
});
|
||||
const isStart = ref(false);
|
||||
const timer = ref<any>(null);
|
||||
const awardNumer = ref<number>(0); // 中奖序号,0表示还没有给出，1开始算
|
||||
const endAddAngle = computed(() => {
|
||||
return 360 - ((awardNumer.value - 1) * singleAngle.value + singleAngle.value / 2); // 中奖角度
|
||||
});
|
||||
|
||||
// 点击开始抽奖
|
||||
const start = () => {
|
||||
emits('start');
|
||||
};
|
||||
// 开始转
|
||||
const begin = () => {
|
||||
if (isStart.value) return;
|
||||
isStart.value = true;
|
||||
turnRound();
|
||||
};
|
||||
|
||||
// 转动动画
|
||||
const turnRound = () => {
|
||||
let beginDeg = deg.value;
|
||||
let beginSpeed = props.speed;
|
||||
|
||||
const rangeAngle = (Math.floor(Math.random() * 4) + 4) * 360; // 随机旋转几圈再停止
|
||||
|
||||
let cAngle: any;
|
||||
beginDeg = 0;
|
||||
let waitDeg = 0; // 等待接口返回前转的角度
|
||||
|
||||
timer.value = setInterval(() => {
|
||||
if (!awardNumer.value) {
|
||||
beginDeg += beginSpeed;
|
||||
waitDeg = beginDeg;
|
||||
} else {
|
||||
if (waitDeg) {
|
||||
beginDeg = 0;
|
||||
waitDeg = 0;
|
||||
}
|
||||
if (beginDeg < rangeAngle) {
|
||||
beginDeg += beginSpeed;
|
||||
} else {
|
||||
let a = (endAddAngle.value + rangeAngle - beginDeg) / beginSpeed;
|
||||
cAngle = a > beginSpeed ? beginSpeed : a < 1 ? 1 : a;
|
||||
beginDeg += cAngle;
|
||||
|
||||
if (beginDeg >= endAddAngle.value + rangeAngle) {
|
||||
beginDeg = endAddAngle.value + rangeAngle;
|
||||
isStart.value = false;
|
||||
clearInterval(timer.value);
|
||||
emits('end');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
deg.value = beginDeg;
|
||||
}, 1000 / 60);
|
||||
};
|
||||
|
||||
// 准备停止转动
|
||||
const stop = (number: number) => {
|
||||
awardNumer.value = number;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
begin,
|
||||
stop
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rotary-table-component {
|
||||
border-radius: 50%;
|
||||
border: 1px solid #999;
|
||||
position: relative;
|
||||
background-color: lightseagreen;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content-table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.turntable_pointer {
|
||||
position: absolute;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(1deg);
|
||||
.icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,124 @@
|
||||
V3+ts专属版
|
||||
|
||||
非固定图片式转盘，可自定义传入奖项列表
|
||||
|
||||
## Attributes
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认 |
|
||||
| ------ | ----------- | ---------- | --- |
|
||||
| list | 奖项列表 | listItem[] | [] |
|
||||
| radius | 圆盘半径打，单位rpx | number | 300 |
|
||||
| speed | 转速 | number | 20 |
|
||||
|
||||
### listItem
|
||||
|
||||
| 属性 | 说明 | 类型 |
|
||||
| --------- | -------------- | ------ |
|
||||
| title | 奖项标题 | string |
|
||||
| color | 奖项标题颜色 | string |
|
||||
| size | 奖项标题字号大小，单位rpx | string |
|
||||
| bgColor | 奖项区背景色 | string |
|
||||
| image | 奖项图片地址 | string |
|
||||
| imageSize | 奖项图片尺寸，单位rpx | string |
|
||||
|
||||
## Events
|
||||
|
||||
| Events | 说明 |
|
||||
| ------ | -------- |
|
||||
| start | 点击中心按钮触发 |
|
||||
| end | 结束滚动 |
|
||||
|
||||
## 方法
|
||||
|
||||
通过ref调用
|
||||
|
||||
| 方法名 | 说明 |
|
||||
| ----- | -------------------- |
|
||||
| begin | 开始转动 |
|
||||
| stop | 准备停止转动，参数为中奖序号，从1开始算 |
|
||||
|
||||
## 示例
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="rotary-table">
|
||||
<mosowe-rotary-table
|
||||
ref="rotaryTableRef"
|
||||
:list="list"
|
||||
:radius="300"
|
||||
@start="start"
|
||||
@end="end"></mosowe-rotary-table>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
const list = [
|
||||
{
|
||||
title: '一等奖',
|
||||
bgColor: '#ff0000',
|
||||
color: '#ffffff',
|
||||
image:
|
||||
'https://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg'
|
||||
},
|
||||
{
|
||||
title: '谢谢参与',
|
||||
bgColor: '#eeeeee',
|
||||
color: '#666666'
|
||||
},
|
||||
{
|
||||
title: '二等奖',
|
||||
bgColor: '#E6A23C',
|
||||
color: '#ffffff',
|
||||
image:
|
||||
'https://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg'
|
||||
},
|
||||
{
|
||||
title: '谢谢参与',
|
||||
bgColor: '#eeeeee',
|
||||
color: '#666666'
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
bgColor: '#67C23A',
|
||||
color: '#ffffff',
|
||||
image:
|
||||
'https://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg',
|
||||
imageSize: '120rpx'
|
||||
},
|
||||
{
|
||||
title: '谢谢参与',
|
||||
bgColor: '#eeeeee',
|
||||
color: '#666666'
|
||||
},
|
||||
{
|
||||
title: '安慰奖',
|
||||
bgColor: '#409EFF',
|
||||
color: '#ffffff',
|
||||
image:
|
||||
'https://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg'
|
||||
},
|
||||
{
|
||||
title: '谢谢参与',
|
||||
bgColor: '#eeeeee',
|
||||
color: '#666666'
|
||||
}
|
||||
];
|
||||
const rotaryTableRef = ref<any>(null);
|
||||
// 点击中心抽奖按钮
|
||||
const start = () => {
|
||||
rotaryTableRef.value?.begin(); // 开始转
|
||||
// ...中间请求下接口，查询中奖序号
|
||||
setTimeout(() => {
|
||||
// 准备结束转动，参数数字代表中奖项，即list列表的第几个，从1开始算
|
||||
rotaryTableRef.value?.stop(3);
|
||||
}, 1000);
|
||||
};
|
||||
// 转盘停止转动
|
||||
const end = () => {
|
||||
uni.showToast({
|
||||
title: '66666666'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
```
|
||||
@@ -0,0 +1,144 @@
|
||||
<!--
|
||||
扇形
|
||||
@Author: mosowe
|
||||
@Date:2023-08-10 15:32:28
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view
|
||||
class="sector-componnet"
|
||||
:style="{
|
||||
'--point-x': threePoint[0],
|
||||
'--point-y': threePoint[1],
|
||||
'--index-rotate': props.index * props.angle + 'deg',
|
||||
'--bg-color': props.bgColor,
|
||||
'--color': props.color,
|
||||
'--size': props.size,
|
||||
'--text-angle': props.angle / 2 - 45 + 'deg',
|
||||
'--text-origin': props.radius + 'rpx',
|
||||
'--text-translate-x-y': translateXY,
|
||||
'--radius': -props.radius + 'rpx',
|
||||
'--text-position': -(props.radius / 6) * 5 + 'rpx',
|
||||
'--image-size': props.imageSize || '30rpx'
|
||||
}">
|
||||
<view class="text-wrap">
|
||||
<view
|
||||
class="text"
|
||||
:class="{
|
||||
hasImage: props.image && props.text,
|
||||
justImage: props.image && !props.text
|
||||
}">
|
||||
<text
|
||||
class="title"
|
||||
v-if="props.text">
|
||||
{{ props.text }}
|
||||
</text>
|
||||
<image
|
||||
v-if="props.image"
|
||||
:src="props.image"
|
||||
class="image"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
interface Props {
|
||||
text?: string;
|
||||
angle?: number;
|
||||
index?: number;
|
||||
bgColor?: string;
|
||||
color?: string;
|
||||
size?: string;
|
||||
radius?: number;
|
||||
image?: string;
|
||||
imageSize?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
text: '测试',
|
||||
angle: 45,
|
||||
index: 0,
|
||||
bgColor: '#ff0000',
|
||||
size: '24rpx',
|
||||
color: '#fff',
|
||||
radius: 300,
|
||||
image: '',
|
||||
imageSize: '60rpx'
|
||||
});
|
||||
|
||||
const threePoint = computed(() => {
|
||||
if (props.angle < 0 || props.angle > 180) {
|
||||
console.error('弧度值取值范围为0~180之间，当前值：' + props.angle);
|
||||
return [0, 0];
|
||||
}
|
||||
const a = (props.angle <= 90 ? props.angle : 180 - props.angle) * (Math.PI / 180); // 弧度转角度
|
||||
const r = props.radius;
|
||||
let x: string = '0%';
|
||||
let y: string = '0%';
|
||||
if (props.angle > 90) {
|
||||
y = '0%';
|
||||
x = (((r + r * Math.cos(a)) / 2 / r) * 100).toFixed(2) + '%';
|
||||
} else if (props.angle === 90) {
|
||||
x = '50%';
|
||||
y = '0%';
|
||||
} else {
|
||||
y = (((r - r * Math.sin(a)) / 2 / r) * 100).toFixed(2) + '%';
|
||||
x = (((r - r * Math.cos(a)) / 2 / r) * 100).toFixed(2) + '%';
|
||||
}
|
||||
return [x, y];
|
||||
});
|
||||
|
||||
const translateXY = computed(() => {
|
||||
return (Math.sqrt(props.radius * props.radius * 2) - props.radius - 30).toFixed(0) + 'rpx';
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sector-componnet {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
clip-path: polygon(0 0, 0 50%, 50% 50%, var(--point-x) var(--point-y));
|
||||
transform: rotate(calc(var(--index-rotate) + 90deg));
|
||||
.text-wrap {
|
||||
transform-origin: var(--text-origin) var(--text-origin);
|
||||
transform: rotate(var(--text-angle)) translateX(var(--text-translate-x-y))
|
||||
translateY(var(--text-translate-x-y));
|
||||
}
|
||||
.text {
|
||||
writing-mode: vertical-rl;
|
||||
font-size: var(--size);
|
||||
color: var(--color);
|
||||
transform: rotate(-45deg) translateX(75%);
|
||||
vertical-align: middle;
|
||||
/* #ifdef MP-WEIXIN */
|
||||
transform: rotate(-45deg) translateX(50%);
|
||||
/* #endif */
|
||||
&.justImage {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
&.hasImage {
|
||||
transform: rotate(-45deg) translateX(calc(var(--image-size) / 2));
|
||||
/* #ifdef MP-WEIXIN */
|
||||
transform: rotate(-45deg) translateX(45%);
|
||||
/* #endif */
|
||||
}
|
||||
.title {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.image {
|
||||
display: inline-block;
|
||||
width: var(--image-size);
|
||||
height: var(--image-size);
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user