更新记录

1.7.3(2021-06-16)

本次更新:

  • 优化错误提示
  • 优化示例项目
  • 优化文档说明

1.7.2(2021-06-11)

本次更新:

  • 新增 canvasId 参数配置项,多画板情况下需要配置不同的 canvasId
  • 优化多画板情况下的缓存功能
  • 优化示例项目
  • 修改文档说明
查看更多

平台兼容性

app 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 快应用
3.1.10 app-vue ×
h5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox pc-Safari

almost-lottery

使用 Canvas 绘制的抽奖转盘


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


高能预警

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

功能概要

  • [x] 可配置奖品文字
  • [x] 可配置每个奖品区块的背景颜色
  • [x] 可配置奖品区块是否开启描边以及边框的颜色,默认不开启
  • [x] 可配置转盘外环和抽奖按钮图,必须使用网络地址图片,默认使用内置的本地图片
  • [x] 组件内 SCSS 样式中可替换转盘外环图及点击抽奖按钮图,分别是 $lotteryBgUrl$actionBgUrl如需替换,注意适配高清设备
  • [x] 可配置每个奖品区块的奖品图片,当图片是网络地址时,小程序端需要配置白名单,H5端需要允许跨域
  • [x] 奖品列表支持奇数,奇数时需尽量能被 360 除尽
  • [x] 可配置内圈与外圈的间距
  • [x] 可配置画板是否缓存,默认不开启

示例项目附加功能

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

注意事项

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

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

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

  • 关于中奖概率的配置,请下载示例项目,参照 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-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: [],
      // 奖品是否设有库存
      onStock: true,
      // 中奖下标
      prizeIndex: -1
    }
  },
  methods: {
    // 本次抽奖开始
    handleDrawStart () {
      // 这里需要处理你的中奖逻辑,并得出 prizeIndex
      // 请查看示例项目中的代码
    },
    // 本次抽奖结束
    handleDrawEnd () {
      // 完成抽奖后,这里处理你拿到结果后的逻辑
      // 请查看示例项目中的代码
    },
    // 抽奖转盘绘制完成
    handleDrawFinish (res) {
      // 抽奖转盘准备就绪后,这里处理你的逻辑
      // 请查看示例项目中的代码
      // console.log('抽奖转盘绘制完成', res)
    }
  }
}

API

Props

参数 说明 类型 默认值
canvasId Canvas的标识,多画板情况下需要配置不同的标识 String 'almostLotteryCanvas'
canvasWidth Canvas的宽度 Number 240
canvasHeight Canvas的高度 Number 240
prizeIndex 获奖奖品在奖品列表中的序号,每次抽奖结束后会自动重置为 -1 Number -1
prizeList 奖品列表,支持奇数(尽量能被 360 除尽),为奇数时需要重设 colors 参数 Array -
lotteryBg 转盘外环图片,仅支持网络地址 String -
actionBg 抽奖按钮图片,仅支持网络地址 String -
colors 奖品区块对应的背景颜色,默认 2 个颜色相互交替,也可以对每个区块设置不同颜色 Array ['#FFFFFF', '#FFE9AA']
stroked 是否开启奖品区块描边 Boolean false
strokeColor 奖品区块边框颜色 String '#FFE9AA'
duration 转盘旋转的动画时长,单位:秒 Number 8
ringCount 旋转的圈数 Number 8
pointerPosition 点击抽奖按钮指针的位置,可选值 'edge' => 指向边界 'middle' => 指向中间 String 'edge'
strFontColor 奖品名称的颜色 String '#C30B29'
strFontSize 奖品名称的字号 Number 12
strHeightMultiple 奖品名称多行情况下的行高 Number 1.2
strKey 奖品名称所对应的键名 key ,比如 { name: '88元现金' }strKey 就是 'name' String 'name'
strMaxLen 奖品名称长度限制 Number 12
strLineLen 奖品名称在多行情况下第一行文字的长度 Number 6
strMarginOutside 奖品文字距离边缘的距离 Number strFontSize 的一半
imageWidth 奖品图片的宽度 Number 30
imageHeight 奖品图片的高度 Number 30
successMsg 转盘绘制成功的提示 String '奖品准备就绪,快来参与抽奖吧'
failMsg 转盘绘制失败的提示 String '奖品仍在准备中,请稍后再来...'
canvasCached 是否开启缓存,避免在数据不变的情况下重复绘制,建议在生产环境中开启 Boolean false
canvasMargin 内圈与外圈的间距 Number 5

Events

事件名 说明 回调参数
@reset-index 每次抽奖结束后重置获奖的序号为 -1该事件必须默认写入到 template 中,不可删除 -
@draw-start 转盘旋转开始时触发 -
@draw-end 转盘旋转结束时触发 -
@finish Canvas转盘绘制完成时触发 ok: 绘制是否成功, data: 转盘的图片, msg: 绘制结果的提示

prizeList 数据结构

键名 说明 类型
prizeId 奖品对应 ID Number
name 奖品名称 String
stock 奖品库存 Number
weight 奖品权重 Number
prizeImage 奖品图片地址 String

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问