当前位置：首页 > article >正文

uniapp小程序抽奖怎么做？直接使用【almost-lottery转盘组件】或者【自定义宫格转盘】

article 2024/12/21 12:56:53

直接使用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 组件。
在页面中引入组件并注册：

<template>
  <almost-lottery
    :prizeList="prizeList"
    :prizeIndex="prizeIndex"
    @draw-before="handleDrawBefore"
    @draw-start="handleDrawStart"
    @draw-end="handleDrawEnd"
  />
</template>

<script>
import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue';

export default {
  components: { AlmostLottery },
  data() {
    return {
      prizeList: [], // 奖品列表
      prizeIndex: -1, // 中奖下标
    };
  },
  methods: {
    handleDrawBefore(callback) {
      // 自定义抽奖前的逻辑
      callback(true); // 返回 true 表示允许抽奖
    },
    handleDrawStart() {
      // 抽奖开始时的逻辑
    },
    handleDrawEnd() {
      // 抽奖结束后的逻辑
    },
  },
};
</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。

自定义宫格转盘

思路：设计页面，状态控制

排布奖品和按钮为宫格布局

<template>
<view class="container">
  <view class="my-lottery row-between wrap" v-if="status">
    <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)">
      <image :src="item.image" style="width: 80rpx;height: 80rpx; border-radius: 8rpx;"></image>
      <text :class="item.type == 999 ? 'xs mt20' : 'nr mt10'" 
	  :style="'color: ' + (item.type == 999 ? '#ED3720' : '#743C3C') + ';font-weight: 600;text-align: center;padding: 0 24rpx;'">{{item.name}}</text>
    </view>
  </view>
  <view class="activity-null row-center" v-else>
    活动暂未开始
  </view>
</view>
</template>

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


    startLotteryFun() {
      let {
        currentIndex
      } = this;
      let activeIndex = this.getHighLightItemIndexFun(currentIndex);
        this.activeIndex = activeIndex
        const currentOrder = currentIndex % 8;
        this.currentIndex = ++currentIndex;
		console.log(77777123, currentIndex, this.circleTimes, this.luckyOrder, currentOrder)
        if (currentIndex > this.circleTimes + 8 && this.luckyOrder == currentOrder) {
          if (this.lotteryTimer) {
            clearTimeout(this.lotteryTimer);
          }
        
          setTimeout(() => {
            this.stopCallbackFun(LOTTERY_ORDER[this.luckyOrder]);
            setTimeout(() => {
              // this.reset();
              this.activeIndex = -1
            }, 1000);
          }, 500);
        } else {
          if (currentIndex < this.circleTimes) {
            this.speed -= 10
          } else if (currentIndex > this.circleTimes + 8 && this.luckyOrder == currentOrder + 1) {
            this.speed += 80
          } else {
            this.speed += 20
          }
        
          if (this.speed < 50) {
            this.speed = 50
          }
        
          this.lotteryTimer = setTimeout(this.startLotteryFun.bind(this), this.speed);
        }
    },

    // luckyIndex: 中奖在列表中的index
    stopCallbackFun(luckyIndex) {
		this.reset()
      this.$emit("finish", {
        detail: this.result
      });
    },

    // 根据 currentIndex 获取当前应该高亮列表中的第几个奖品
    getHighLightItemIndexFun(currentIndex) {
      return LOTTERY_ORDER[currentIndex % LOTTERY_ORDER.length];
    },

    // 根据奖品在数据中的index，获取奖品在转盘中的位置
    getLuckyItemOrderFun(index) {},

    start(e) {
		console.log(887777, e, this.isLottery)
      // 如果还没开始转动,开始转动转盘
      if (!this.isLottery) {
        this.isLottery = true
        this.userLotteryFun();
      }
    },

    // 停止转动
    stop(index, callback) {
      this.luckyOrder = this.getLuckyItemOrderFun(index);
      console.log("stop, ###", index);
      this._stopCallback = callback;
    },

查看全文

http://www.kler.cn/a/445086.html