商品按钮

介绍

商品按钮组件封装了商品购买的一系列逻辑，包括禁用状态、各种购买资格校验等。

商品按钮提供以下组件：

• ProductButton - 商品操作按钮组件
• ProductIframeLinkPopup 一个包含 iframe 内容的弹层组件

引入

UMD 方式

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

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

<script>
const ProductButton = window.PolyvProductUIProductButton;
const ProductIframeLinkPopup = window.PolyvProductUIProductIframeLinkPopup;
</script>

NPM 方式

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

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

代码示例

<template>
  <div>
    <!-- 商品按钮 -->
    <ProductButton
      :product-target="productSDK"
      :product-config="productConfig"
      :product-data="productData"
      :disabled="false"
      @direct-buy="onDirectBuy"
    >
      <template #default="{ buttonText, disabled }">
        <button
          class="custom-product-button"
          :disabled="disabled"
        >
          {{ buttonText }}
        </button>
      </template>
    </ProductButton>

    <!-- iframe 链接弹窗 -->
    <ProductIframeLinkPopup />
  </div>
</template>

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

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

const productData = ref({
  productId: 1,
  name: '测试商品',
  // ... 其他商品数据
});

const productConfig = {
  // 自定义点击处理函数
  customClickButtonHandler: (product) => {
    console.log('自定义点击处理:', product);
  },
  // 获取链接参数
  getLinkParams: (url) => {
    return { utm_source: 'live' };
  },
  // 自定义禁用逻辑
  customProductDisabled: (product) => {
    return product.stock === 0;
  },
};

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

API

ProductButton Props

ProductButton Events

ProductButton Slots

ProductConfig 配置

商品类型