抽獎

更新時間：2024-04-22 19:18:32

功能概述

本模組主要用於處理抽獎相關的邏輯，可以對抽獎開始和抽獎結束等事件進行監聽以及提交觀眾中獎資訊，接入方可根據這些事件流程自訂自己的 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 方法去銷毀實例。