抽奖

功能概述

本模块主要用于处理抽奖相关的逻辑,可以对抽奖开始和抽奖结束等事件进行监听以及提交观众中奖信息,接入方可以根据这些事件流程定制自己的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 还提供了一些方法获取更多的信息。

  1. 分页获取中奖人列表

const data = await lotterySdk.getWinnersList({
  pageNumber: 1,
  // 抽奖 id 可以在“抽奖结束”事件 LotteryEnd 的参数中获取
  lotteryId: 'lotteryId',
})
// 当前页码,总页数,中奖者列表
const { pageNumber, totalPages, contents } = data;
  1. 获取个人在特定场次的所有中奖记录

// 中奖记录列表。可传参数 { channelId, sessioId, userId },若不传则按照初始化配置参数去获取数据
const data = await lotterySdk.getLotteryRecord();

注意:可以在页面及抽奖模块初始化完成后,即调用此方法,便于获取用户在当前场次的中奖情况

提交获奖者信息

根据 “抽奖结束” 事件或者中奖记录接口得到的信息,展示获奖信息表单,用户填写完成后,可以使用以下接口,将信息提交至系统后台。

await lotterySdk.submitInfo({
  sessionId: 'sessionId',
  lotteryId: 'lotteryId',
  winnerCode: 'winnerCode',
  receiveInfo: [{ field: '', value: '' }],
});

注意

如果不需要再使用抽奖SDK时,请调用SDK实例的destroy方法去销毁实例。

Last updated