卡片推送组件

本文档主要描述如何接入互动功能接收端的卡片推送组件，接入后可实现观众端显示卡片等操作。

在引入及使用本功能组件前，需要先对互动功能接收端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

属性名	类型	默认值	含义
pushCardSdk	Object	null	卡片推送 SDK 实例
lang	string：'zh_CN', 'en'	'zh_CN'	语言
tipPosition	string：'left', 'right'	'left'	卡片入口提示文案位置
linkSkipEnabled	Boolean	true	是否能在内部进行跳转，当跳转方式为“新开页面”时有效
countdownAutoOpen	Boolean	true	观看倒计时结束后，是否自动打开卡片
internal	Boolean	false	是否由内部处理记录卡片领取、打开iframe弹窗等逻辑
iframeSize	Object	{ pcW: 720, pcH: 540, mobW: '100%', mobH: 460 }	iframe弹窗大小，internal为true时有效