Big Card

Introduction

The Big Card component is primarily used to display products during live streaming. It can be pushed from the management backend, teaching assistants, and other endpoints.

Import

UMD Method

Where rc-20250814 is the current version number, please import based on the actual version.

<script src="https://websdk.videocc.net/product-ui/rc-20250814/big-card-popup.umd.js"></script>

<script>
const BigCardPopup = window.PolyvProductUIBigCardPopup;
</script>

NPM Method

// 安装依赖
pnpm add @polyv/product-ui

// 引入组件
import { BigCardPopup } from '@polyv/product-ui';

Code Example

<template>
  <div>
    <BigCardPopup
      ref="bigCardRef"
      :product-target="productSDK"
      :product-config="productConfig"
      @direct-buy="onDirectBuy"
    />
  </div>
</template>

<script setup>
import { BigCardPopup } from '@polyv/product-ui';
import { Product } from '@polyv/product-sdk';

// 初始化商品 SDK
const productSDK = new Product(interactionCore, config);
const bigCardRef = ref();

const productConfig = {
  // 商品配置
};

// 直接购买处理
const onDirectBuy = (productData) => {
  console.log('直接购买:', productData);
};

// 打开大卡片
const openBigCard = (productData) => {
  bigCardRef.value?.open(productData);
};

// 关闭大卡片
const closeBigCard = () => {
  bigCardRef.value?.close();
};
</script>

API

BigCardPopup Props

BigCardPopup Events

BigCardPopup Methods

Component methods can be called via ref: