增加新模块

2025-03-20 08:46:07 +08:00
parent 15014e22aa
commit 2ae62b59ed
1729 changed files with 94700 additions and 4232 deletions
@@ -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>