增加新模块

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