商品按鈕

介紹

商品按鈕元件封裝了商品購買的一系列邏輯，包括禁用狀態、各種購買資格校驗等。

商品按鈕提供以下元件：

• 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 配置

商品類型