抽奖转盘

简介

抽奖转盘,常用于营销展示留存用户,提高用户粘性。组件的配置包括:奖品列表、活动是否开启、剩余次数、抽奖结果后的旋转时间;组件的事件处理器包括:抽奖检查(判断抽奖行为是否可执行)、开始抽奖事件;该组件可通过活动开启、剩余次数和抽奖检查事件等多种方式来开启抽奖行为,然后在开始抽奖事件中,根据需要获取真实后端抽奖服务接口的返回数据或编排前端抽奖逻辑脚本来设置奖品 Id 和剩余次数。

image

配置项

分类

配置

示例

说明

内容

奖品列表

image

奖品列表,可以设置 4-8 个奖品,每个奖品包含必填项为 id、奖品名称、图标,选填项为奖品链接。其中图标来源可以是网络资源地址,也可以从系统资源中添加。

活动是否开始

image

开启后,组件可进行抽奖交互行为

剩余次数

image

抽奖剩余次数为 0 时,抽奖按钮不可交互

旋转时间

image

返回抽奖结果后,转盘旋转时间,单位 ms

交互

隐藏

image

隐藏,详情参见通用属性

样式

外边距

image

外边距,详情参见通用属性

属性与方法

名称

类型

示例

说明

resultId

string

lottery.resultId

抽奖完成后的奖品 Id ,展示抽中奖品

remainingCount

number

lottery.remainingCount

剩余次数,次数为 0 时不可抽奖

spinning

boolean

lottery.spinning

抽奖进行中,此时不可操作

setResultId

func

lottery.setResultId('id')

设置抽中奖品 Id

setRemainingCount

func

lottery.setResultId(0)

设置剩余抽奖次数

startLottery

func

lottery.startLottery()

用于触发受控抽奖行为的 API 方法。该方法调用后抽奖组件将会进行一次抽奖操作。

事件回调

配置

说明

image

在抽奖行为执行前触发的事件,该事件处理器中的前端脚本若返回 false 值,则抽奖行为不会被执行。

image

在抽奖行为执行时触发的事件,可在此事件处理器中进行真实后端抽奖服务接口的调用或编排前端抽奖逻辑脚本。

场景示例

  • 抽奖场景

    • 配置:奖品列表配置 6 个不同奖品,活动是否开始开启,剩余次数 3 次,旋转时间 3000 ms,监听开始抽奖事件,添加如下图所示脚本。

    • 在此配置下,点击中央抽奖按钮,可抽奖 3 次,每次抽中的奖品为“gift3”。

    • 注:可在此处调用真实后端抽奖服务接口,根据返回数据设置奖品 Id 和剩余次数。

    • image