uniapp小步伐抽奖怎么做？直接使用【almost-lottery转盘组件】或者【自定义 ...

直接使用almost-lottery

地址：GitHub - ialmost/almost-components_uniapp: uni-app 使用的多端组件聚集，支持APP、H5、小步伐uni-app 使用的多端组件聚集，支持APP、H5、小步伐. Contribute to ialmost/almost-components_uniapp development by creating an account on GitHub.

https://github.com/ialmost/almost-components_uniapp

Almost-Lottery 是一个基于 uni-app 框架开辟的抽奖转盘组件，实用于多种平台（如微信小步伐、付出宝小步伐、H5、App 等）。它通过 Canvas 绘制转盘，支持丰富的自定义配置，能够满足各种抽奖场景的需求。以下是对 Almost-Lottery 组件的详细先容：

---

1. 功能概述

Almost-Lottery 提供了以下焦点功能：

• 奖品配置：支持自定义奖品文字、配景颜色、文字颜色、图片等。
  
• 转盘样式：可配置转盘外环、抽奖按钮的图片，支持轮盘旋转或指针旋转。
  
• 抽奖逻辑：内置抽奖概率、抽奖次数、付费抽奖等功能，支持自定义抽奖逻辑。
  
• 平台兼容性：支持微信小步伐、付出宝小步伐、H5、App 等多种平台，兼容 Vue2，暂不支持 Vue3110。
  

---

2. 紧张特性

• 奖品区块配置：
  
  
  
  • 支持奇数个奖品，奖品数目尽量能被 360 整除。
    
  • 可配置奖品区块的配景颜色、文字颜色、描边颜色等110。
    
  
  
• 转盘样式：
  
  
  
  • 支持自定义转盘外环和抽奖按钮的图片。
    
  • 支持配置转盘旋转或指针旋转，旋转动画时长和圈数可自定义110。
    
  
  
• 抽奖逻辑：
  
  
  
  • 提供 draw-before、draw-start、draw-end 等事件钩子，开辟者可以在这些钩子中实现自定义逻辑。
    
  • 支持中奖概率、抽奖次数、付费抽奖等业务逻辑110。
    
  
  
• 缓存机制：
  
  
  
  • 支持开启画板缓存，避免在数据不变的环境下重复绘制，提升性能110。
    
  
  

---

3. 使用方法

3.1 安装与导入

• 在 uni-app 项目中，可以通过 uni_modules 模式导入 Almost-Lottery 组件。
  
• 在页面中引入组件并注册：
  

1. <template>
2.   <almost-lottery
3.     :prizeList="prizeList"
4.     :prizeIndex="prizeIndex"
5.     @draw-before="handleDrawBefore"
6.     @draw-start="handleDrawStart"
7.     @draw-end="handleDrawEnd"
8.   />
9. </template>
11. <script>
12. import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue';
14. export default {
15.   components: { AlmostLottery },
16.   data() {
17.     return {
18.       prizeList: [], // 奖品列表
19.       prizeIndex: -1, // 中奖下标
20.     };
21.   },
22.   methods: {
23.     handleDrawBefore(callback) {
24.       // 自定义抽奖前的逻辑
25.       callback(true); // 返回 true 表示允许抽奖
26.     },
27.     handleDrawStart() {
28.       // 抽奖开始时的逻辑
29.     },
30.     handleDrawEnd() {
31.       // 抽奖结束后的逻辑
32.     },
33.   },
34. };
35. </script>

复制代码

3.2 配置项

• prizeList：奖品列表，支持奇数个奖品，每个奖品包含 prizeId、prizeName、prizeImage 等字段110。
  
• prizeIndex：中奖奖品的下标，抽奖竣事后会自动重置为 -1110。
  
• lotteryBg：转盘外环图片。
  
• actionBg：抽奖按钮图片。
  
• colors：奖品区块的配景颜色，支持交替颜色或自定义每个区块的颜色110。
  

3.3 事件钩子

• @draw-before：抽奖开始前触发，开辟者可以在此钩子中实现自定义逻辑，并通过 callback(true/false) 控制转盘是否启动110。
  
• @draw-start：抽奖开始时触发。
  
• @draw-end：抽奖竣事时触发。
  
• @finish：转盘绘制完成时触发，返回绘制结果110。
  

---

4. 示例项目

Almost-Lottery 提供了丰富的示例项目，开辟者可以参考以下功能：

• 中奖概率：发起由后端控制中奖概率，避免前端篡改110。
  
• 抽奖次数：支持配置免费抽奖次数和付费抽奖逻辑110。
  
• 付费抽奖：结合业务逻辑实现付费抽奖功能110。
  

---

5. 平台兼容性

• 支持平台：微信小步伐、付出宝小步伐、H5、App 等。
  
• 不支持平台：Vue3 和部分快应用平台110。
  

自定义宫格转盘

思路：设计页面，状态控制
排布奖品和按钮为宫格布局

1. <template>
2. <view class="container">
3.   <view class="my-lottery row-between wrap" v-if="status">
4.     <view v-for="(item, index) in lotteryData" :key="index" :class="(item.type == 999 ? 'lotty-btn' : 'lottery-item') + ' column-center ' + (activeIndex == index ? 'active' : '')" style="width: 180rpx;height: 180rpx;" @tap="onLotteryClick(item.type)">
5.       <image :src="item.image" style="width: 80rpx;height: 80rpx; border-radius: 8rpx;"></image>
6.       <text :class="item.type == 999 ? 'xs mt20' : 'nr mt10'"
7.           :style="'color: ' + (item.type == 999 ? '#ED3720' : '#743C3C') + ';font-weight: 600;text-align: center;padding: 0 24rpx;'">{{item.name}}</text>
8.     </view>
9.   </view>
10.   <view class="activity-null row-center" v-else>
11.     活动暂未开始
12.   </view>
13. </view>
14. </template>

复制代码

开始抽奖，设置高亮宫格开始，计时器中控制下一个，根据轮训的索引值，在开始抽奖接口返回了中奖的索引之后，设置最后一步到位的状态。当然也必要在其中控制速率达到先快，后慢的体验优化。

2.     startLotteryFun() {
3.       let {
4.         currentIndex
5.       } = this;
6.       let activeIndex = this.getHighLightItemIndexFun(currentIndex);
7.         this.activeIndex = activeIndex
8.         const currentOrder = currentIndex % 8;
9.         this.currentIndex = ++currentIndex;
10.                 console.log(77777123, currentIndex, this.circleTimes, this.luckyOrder, currentOrder)
11.         if (currentIndex > this.circleTimes + 8 && this.luckyOrder == currentOrder) {
12.           if (this.lotteryTimer) {
13.             clearTimeout(this.lotteryTimer);
14.           }
15.         
16.           setTimeout(() => {
17.             this.stopCallbackFun(LOTTERY_ORDER[this.luckyOrder]);
18.             setTimeout(() => {
19.               // this.reset();
20.               this.activeIndex = -1
21.             }, 1000);
22.           }, 500);
23.         } else {
24.           if (currentIndex < this.circleTimes) {
25.             this.speed -= 10
26.           } else if (currentIndex > this.circleTimes + 8 && this.luckyOrder == currentOrder + 1) {
27.             this.speed += 80
28.           } else {
29.             this.speed += 20
30.           }
31.         
32.           if (this.speed < 50) {
33.             this.speed = 50
34.           }
35.         
36.           this.lotteryTimer = setTimeout(this.startLotteryFun.bind(this), this.speed);
37.         }
38.     },
40.     // luckyIndex: 中奖在列表中的index
41.     stopCallbackFun(luckyIndex) {
42.                 this.reset()
43.       this.$emit("finish", {
44.         detail: this.result
45.       });
46.     },
48.     // 根据 currentIndex 获取当前应该高亮列表中的第几个奖品
49.     getHighLightItemIndexFun(currentIndex) {
50.       return LOTTERY_ORDER[currentIndex % LOTTERY_ORDER.length];
51.     },
53.     // 根据奖品在数据中的index，获取奖品在转盘中的位置
54.     getLuckyItemOrderFun(index) {},
56.     start(e) {
57.                 console.log(887777, e, this.isLottery)
58.       // 如果还没开始转动,开始转动转盘
59.       if (!this.isLottery) {
60.         this.isLottery = true
61.         this.userLotteryFun();
62.       }
63.     },
65.     // 停止转动
66.     stop(index, callback) {
67.       this.luckyOrder = this.getLuckyItemOrderFun(index);
68.       console.log("stop, ###", index);
69.       this._stopCallback = callback;
70.     },

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。