171 lines
3.7 KiB
Vue
171 lines
3.7 KiB
Vue
<!--
|
|
转盘
|
|
@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>
|