商品详情

介绍

商品详情组件用于展示商品的详细信息，包括商品封面（图片/视频）、商品信息、购买按钮等功能。组件支持素材库视频播放、图片轮播、商品信息展示等功能。

商品详情提供以下组件：

• ProductDetail - 商品详情页面组件
• ProductDetailPopup - 商品详情弹窗组件

引入

UMD 方式

其中 rc-20250814 为当前版本号，请根据实际版本号进行引入。

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

<script>
const ProductDetailPopup = window.PolyvProductUIProductDetailPopup;
</script>

NPM 方式

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

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

代码示例

<template>
  <div>
    <ProductDetailPopup
      ref="productDetailRef"
      :product-target="productSDK"
      :product-config="productConfig"
      @direct-buy="onDirectBuy"
      @not-support-direct-buy="onNotSupportDirectBuy"
    />
  </div>
</template>

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

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

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

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

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

// 打开商品详情
const openProductDetail = (productId) => {
  productDetailRef.value?.open(productId);
};

// 关闭商品详情
const closeProductDetail = () => {
  productDetailRef.value?.close();
};
</script>

API

ProductDetailPopup Props

ProductDetailPopup Events

ProductDetailPopup 方法

通过 ref 可以调用组件的方法：

ProductDetail Props

ProductDetail Events

ProductDetail 方法

通过 ref 可以调用组件的方法：