功能概述
本模块主要用于处理抽奖相关的逻辑,可以对抽奖开始和抽奖结束等事件进行监听以及提交观众中奖信息,接入方可以根据这些事件流程定制自己的UI界面。
初始化及销毁
在实例化该模块并进行使用之前,需要对SDK进行初始化配置,详细见参考文档。
在线文件引入方式
// script 标签引入,根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk/0.24.0/lib/polyv-ir.umd.js"></script>
<script>
const { Lottery } = window.PolyvIRSDK;
</script>
import 方式引入(推荐)
import { Lottery } from '@polyv/interactions-receive-sdk';
const lotterySdk = new Lottery();
// ...
// 销毁 SDK 实例,清除逻辑
lotterySdk.destroy();
使用流程
监听"开始抽奖"事件
当讲师、助教等发起端,发起一轮抽奖时,lotterySdk.events.LotteryStart
事件会被触发。接入方可以在此时将抽奖中等提示字样或者动效展示出来,让用户感知到抽奖已经开始。
lotterySdk.on(lotterySdk.events.LotteryStart, function() {
// 处理开始抽奖
alert('抽奖开始');
});
监听 "抽奖中" 事件
发起抽奖时,可能有部分观众未进入对应直播房间,因此错过即时的事件。
接入方需要监听 lotterySdk.events.OnLottery
事件,这样后进入的观众同样可以得知当前有进行中的抽奖,并将对应的状态显示出来。
lotterySdk.on(lotterySdk.events.OnLottery, function() {
// 处理开始抽奖
alert('抽奖进行中');
});
监听 "抽奖结束" 事件
当发起端结束一轮抽奖时,lotterySdk.events.LotteryEnd
事件会被触发,同时该事件有对应场次抽奖中的个人获奖信息、兑换码、领奖信息等内容,可以监听该事件并展示对应的中奖结果和领奖信息填写表单。
lotterySdk.on(lotterySdk.events.LotteryEnd, function(msg) {
alert(`抽奖 id: ${msg.lotteryId}`, `是否中奖: ${msg.isWinner}`, `奖品名称:${msg.prize}`, `领奖信息:${msg.collectInfo}`);
});
展示抽奖结果
在"抽奖结束" 事件中,已经可以获取到该场次的抽奖结果。此外,抽奖 SDK 还提供了一些方法获取更多的信息。
const data = await lotterySdk.getWinnersList({
pageNumber: 1,
// 抽奖 id 可以在“抽奖结束”事件 LotteryEnd 的参数中获取
lotteryId: 'lotteryId',
})
// 当前页码,总页数,中奖者列表
const { pageNumber, totalPages, contents } = data;
// 中奖记录列表。可传参数 { channelId, sessioId, userId },若不传则按照初始化配置参数去获取数据
const data = await lotterySdk.getLotteryRecord();
注意:可以在页面及抽奖模块初始化完成后,即调用此方法,便于获取用户在当前场次的中奖情况
提交获奖者信息
根据 “抽奖结束” 事件或者中奖记录接口得到的信息,展示获奖信息表单,用户填写完成后,可以使用以下接口,将信息提交至系统后台。
await lotterySdk.submitInfo({
sessionId: 'sessionId',
lotteryId: 'lotteryId',
winnerCode: 'winnerCode',
receiveInfo: [{ field: '', value: '' }],
});
注意
如果不需要再使用抽奖SDK时,请调用SDK实例的destroy方法去销毁实例。