卡片推播

更新時間：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 { PushCard } = window.PolyvIRSDK;
</script>

import 方式引入（推薦）

import { PushCard } from '@polyv/interactions-receive-sdk';
const pushCardSdk = new PushCard();

卡片推播實例銷毀

pushCardSdk.destroy();

實例屬性

屬性名	類型	說明
events	Object	卡片推播模組事件

實例方法

方法名	入參	出參	說明
getResidueTime	void	當前實例物件	取得卡片剩餘時間
toClose	void	void	關閉卡片
getPushCardData	roomId、cardId	Promise	取得推播卡片資料

使用流程

監聽「卡片開始推播（start）」事件

在直播後台推播卡片，本 SDK 內部會觸發 pushCardSdk.events.START 事件，接入方可監聽該事件，然後再呼叫 getPushCardData(roomId, cardId) 取得更具體的卡片資料，用來展示卡片或卡片入口等介面。

pushCardSdk.on(pushCardSdk.events.START, async function(msg) {
  console.log(`卡片开始推送：`, msg);
  const res = await pushCardSdk.getPushCardData(msg.roomId, msg.id);
});

pushCardSdk.events.START 回傳的資料物件包含以下屬性

屬性名	類型	說明
roomId	String	房間號碼
id	Number	卡片 ID
total	Number	卡片顯示總時長，單位：秒
time	Number	卡片顯示剩餘時長，單位：秒
entrance	String	是否有卡片入口，Y 表示有，N 表示沒有
lookTime	Number	等待多久後顯示卡片，單位：秒

getPushCardData 回傳的物件包含以下屬性

屬性名	類型	說明
conditionValue	Number	等待多久後顯示，單位：秒
duration	Number	卡片推播總時長，單位：秒
countdownMsg	String	倒數計時文案
enterEnabled	String	是否有卡片入口，Y 表示有，N 表示沒有
imageType	String	封面類型：redpack/giftbox/custom
cardImage	String	當封面類型為 custom（自訂）時，封面圖片連結
enterImage	String	當封面類型為 custom（自訂）時，入口圖片連結
link	String	跳轉連結
showCondition	String	卡片彈出方式：PUSH 表示馬上彈出，WATCH 表示觀看 conditionValue 秒後彈出
title	String	卡片標題
redirectType	String	開啟連結的方式，tab 或 iframe，預設為 tab（即開啟新的標籤頁），iframe 為自訂類型，使用者可根據實際業務情況進行展示

監聽「卡片停止推播（CANCEL）」事件

在直播後台取消卡片推播，本 SDK 會觸發 pushCardSdk.events.CANCEL 事件

pushCardSdk.on(pushCardSdk.events.CANCEL, function(msg) {
  console.log('卡片停止推送');
});

取得卡片倒數計時

在卡片彈出後，若卡片有倒數計時，可以使用 pushCardSdk.getResidueTime() 取得卡片剩餘的時間，取得資料後會觸發 pushCardSdk.events.GET_RESIDUE_TIME 事件

pushCardSdk.on(pushCardSdk.events.GET_RESIDUE_TIME, function(msg) {
  console.log('卡片剩余显示时间：', msg.time);
});

注意

如果不需要再使用卡片推播 SDK 時，請呼叫 SDK 實例的 destroy 方法去銷毀實例。