卡片推送元件

本文件主要說明如何接入互動功能接收端的卡片推送元件，接入後可實現觀眾端顯示卡片等操作。

在引入及使用本功能元件前，需要先對互動功能接收端SDK進行公共配置，詳情請查看：互動功能接收端 UI 元件 - 配置 SDK。

引入

線上檔案引入方式

// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/PushCard/PushCard.umd.min.js"></script>
<script>
    const PushCardComp = window.PolyvIRScene.PushCard.default;
</script>

import 方式引入（推薦）

import PushCardComp from '@polyv/interactions-receive-sdk-ui-default/lib/PushCard';

程式碼範例

先實例化卡片推送SDK，然後將其傳入到卡片推送元件中，以便內部進行相應邏輯處理。

以 PC 端接入為例：

<template>
  <push-card
    :lang="lang"
    :push-card-sdk="pushCardSdk"
    @open="handleOpen"
    @entry-visible-changed="entryVisibleChanged"
  />
</template>

<script>
import { PushCard } from '@polyv/interactions-receive-sdk';
import PushCardComp from '@polyv/interactions-receive-sdk-ui-default/lib/PushCard';

export default {
  components: {
    'push-card': PushCardComp,
  },

  props: {
    lang: {
      type: String,
      default: 'zh_CN',
    }
  },

  data() {
    return {
      // 卡片推送 SDK 实例
      pushCardSdk: null,
    };
  },

  mounted() {
    this.pushCardSdk = new PushCard();
  },

  beforeDestroy() {
    this.pushCardSdk?.destroy();
  },

  methods: {
    handleOpen(data) {
      // 点击卡片，回调相关数据
      // cardId: 卡片ID
      // link: 卡片链接
      // redirectType: 打开链接的方式，tab或iframe，默认为tab（即打开新的标签页），iframe为自定义类型，用户可根据实际业务情况进行展示
      // userInfo: 当前用户信息
      console.info('###卡片相关数据：', data);
    },
    entryVisibleChanged(visible) {
      // 当有入口时，回调入口的显示状态
      // visible：是否显示，true：显示，false：隐藏
      console.info('###卡片入口当前的显示状态：', visible);
    }
  }
};
</script>

Attributes