简介
抽奖转盘，常用于营销展示留存用户，提高用户粘性。组件的配置包括：奖品列表、活动是否开启、剩余次数、抽奖结果后的旋转时间；组件的事件处理器包括：抽奖检查（判断抽奖行为是否可执行）、开始抽奖事件；该组件可通过活动开启、剩余次数和抽奖检查事件等多种方式来开启抽奖行为，然后在开始抽奖事件中，根据需要获取真实后端抽奖服务接口的返回数据或编排前端抽奖逻辑脚本来设置奖品 Id 和剩余次数。
配置项
分类 | 配置 | 示例 | 说明 |
分类 | 配置 | 示例 | 说明 |
内容 | 奖品列表 |
| 奖品列表，可以设置 4-8 个奖品，每个奖品包含必填项为 id、奖品名称、图标，选填项为奖品链接。其中图标来源可以是网络资源地址，也可以从系统资源中添加。 |
活动是否开始 |
| 开启后，组件可进行抽奖交互行为 | |
剩余次数 |
| 抽奖剩余次数为 0 时，抽奖按钮不可交互 | |
旋转时间 |
| 返回抽奖结果后，转盘旋转时间，单位 ms | |
剩余次数小于 1 时禁止抽奖 |
| 抽奖次数小于 1 时禁止抽奖，为 | |
显示文案 |
| 转盘下方的显示文案。 如果此配置依赖其他属性，那么其他属性变更会导致显示文案的更新。具体可以参照场景示例2:显示文案优先级 | |
交互 | 隐藏 |
| 隐藏，详情参见通用属性 |
样式 | 外边距 |
| 外边距，详情参见通用属性 |
属性与方法
名称 | 类型 | 示例 | 说明 |
名称 | 类型 | 示例 | 说明 |
resultId | string |
| 抽奖完成后的奖品 Id ，展示抽中奖品 |
remainingCount | number |
| 剩余次数，次数为 0 时不可抽奖 |
spinning | boolean |
| 抽奖进行中，此时不可操作 |
isBegin | boolean |
| 活动是否开始 |
textLabel | string |
| 抽奖转盘下方的展示文案 |
setResultId | func |
| 设置抽中奖品 Id |
setRemainingCount | func |
| 设置剩余抽奖次数 |
setTextLabel | func |
| 设置抽奖转盘下方的展示文案 |
startLottery | func |
| 用于触发受控抽奖行为的 API 方法。该方法调用后抽奖组件将会进行一次抽奖操作。 |
事件回调
配置 | 说明 |
配置 | 说明 |
| 在抽奖行为执行前触发的事件，该事件处理器中的前端脚本若返回 false 值，则抽奖行为不会被执行。 |
| 在抽奖行为执行时触发的事件，可在此事件处理器中进行真实后端抽奖服务接口的调用或编排前端抽奖逻辑脚本。 |
| 在抽奖行为执行结束时触发的事件，可以在这里更新转盘组件的属性等。 |
场景示例
抽奖场景
配置：奖品列表配置 6 个不同奖品，活动是否开始开启，剩余次数 3 次，旋转时间 3000 ms，监听开始抽奖事件，添加如下图所示脚本。
在此配置下，点击中央抽奖按钮，可抽奖 3 次，每次抽中的奖品为“gift3”。
注：可在此处调用真实后端抽奖服务接口，根据返回数据设置奖品 Id 和剩余次数。
显示文案优先级
配置：奖品列表配置 6 个不同奖品，活动是否开始开启，剩余次数 3 次，旋转时间 3000 ms，监听开始抽奖事件，添加如下图所示脚本。
在此配置下，用户在点击抽奖后，显示文案会变更为‘抽奖中’。
抽奖结束后，由于变更了剩余次数字段，导致显示文案更新，会改为'剩余 2 次抽奖机会'。
如果同时更新显示文案的依赖项和设置显示文案值，则根据顺序变更。
- 本页导读
- 简介
- 配置项
- 属性与方法
- 事件回调
- 场景示例
