更新记录

1.9.7（2023-08-02）

本次更新：

• 调整 draw-before 为自定义函数，且该函数为必备函数，转盘能否启动，将根据该函数中调用 callback 时传递的 Boolean 进行判断

1.9.6.2（2023-07-28）

本次更新：

• 更新示例项目

1.9.6.1（2023-07-28）

本次更新：

• 修复参数文档排版问题

平台兼容性

almost-lottery

使用 Canvas 绘制的抽奖转盘，提供奇数、缓存等众多配置项，更有抽奖概率、抽奖次数、付费抽奖等功能内置于示例项目中

如果用着还行，请支持一下

• 前往 GitHub 给个 Star
• 前往 UniApp 给个五星
• 使用中遇到问题时，可以添加 QQ群 20441313

基于 uniCloud 开发的云端 Almost-Lottery 抽奖转盘，欢迎尝试体验

• Almost-Lottery抽奖转盘的云端一体页面
• Almost-Lottery抽奖转盘的配置中心

高能预警

• 本插件仅支持 uni_modules 模式，强烈推荐使用该模式，非 uni_modules 模式不再维护
• 在使用本插件之前，强烈建议使用 HBuilderX 导入示例项目验证可用性并参照修改

功能概要

• [x] 可配置奖品文字 支持横向/竖向展示
• [x] 可配置每个奖品区块的背景颜色
• [x] 可配置每个奖品区块的奖品文字颜色
• [x] 可配置奖品区块是否开启描边以及边框的颜色，默认不开启
• [x] 可配置转盘外环和抽奖按钮图
• [x] 可配置每个奖品区块的奖品图片，当图片是网络地址时，小程序端需要配置白名单，H5端需要允许跨域，奖品文字为竖向时不支持展示奖品图片
• [x] 奖品列表支持奇数，奇数时需尽量能被 360 除尽
• [x] 可配置内圈与外圈的间距
• [x] 可配置轮盘旋转或指针旋转
• [x] 可配置画板是否缓存，默认不开启
• [x] 更多配置请查看API说明

示例项目附加功能

• [x] 中奖概率，强烈推荐中奖概率应由后端控制
• [x] 抽奖次数
• [x] 付费抽奖

注意事项

• 编译到小程序端时，请务必勾选ES6转ES5

• @reset-index="prizeIndex = -1" 必须默认写入到 template 中，不可删除

• 每个奖品区块的奖品图片尺寸不宜过大，图片越大，绘制的过程越慢，尽量将图片尺寸控制在 100*100 以内，且图片大小控制在 40KB 以内

• 关于中奖概率的配置，请下载示例项目，参照 pages/index/index.vue 中的代码进行配置

• 组件本身不涉及任何业务逻辑，与业务相关的代码建议都放在 pages/index/index.vue 中

代码演示

基础用法

// template
// @reset-index="prizeIndex = -1" 必须默认写入到 template 中，不可删除
<almost-lottery
  :prizeList="prizeList"
  :prizeIndex="prizeIndex"
  @reset-index="prizeIndex = -1"
  @draw-before="handleDrawBefore"
  @draw-start="handleDrawStart"
  @draw-end="handleDrawEnd"
  @finish="handleDrawFinish"
  v-if="prizeList.length"
/>

// script
import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue'
export default {
  components: {
    AlmostLottery
  },
  data () {
    return {
      // 以下是奖品配置数据
      // 奖品数据
      prizeList: [],
      // 中奖下标
      prizeIndex: -1
    }
  },
  methods: {
    // 本次抽奖开始之前
    handleDrawStart (callback) {
      // 这里需要处理你抽奖之前的逻辑
      // 请查看示例项目中的代码
      // 必须调用 callback 并传递一个布尔值，布尔值为 true 时，转盘才会开始旋转
      let flag = true

      callback(flag)
    },
    // 本次抽奖开始
    handleDrawStart () {
      // 这里需要处理你的抽奖逻辑，并得出中奖物品的 prizeIndex
      // 请查看示例项目中的代码
    },
    // 本次抽奖结束
    handleDrawEnd () {
      // 完成抽奖后，这里处理你拿到结果后的逻辑
      // 请查看示例项目中的代码
    },
    // 抽奖转盘绘制完成
    handleDrawFinish (res) {
      // 抽奖转盘准备就绪后，这里处理你的逻辑
      // 请查看示例项目中的代码
      // console.log('抽奖转盘绘制完成', res)
    }
  }
}

API

Props

Events

prizeList 数据结构