直播抽奖功能（互动功能接收端JS-SDK）

news2024/12/25 9:05:56

功能概述

本模块主要用于处理抽奖相关的逻辑，可以对抽奖开始和抽奖结束等事件进行监听以及提交观众中奖信息，接入方可以根据这些事件流程定制自己的UI界面。

抽奖--效果截图

初始化及销毁

在实例化该模块并进行使用之前，需要对SDK进行初始化配置，详细见参考文档。

在线文件引入方式

// script 标签引入，根据版本号引入JS版本。  
<script src="https://websdk.videocc.net/interactions-receive-sdk/0.14.5/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: '' }],
});