coupon 優惠券

一、介紹

優惠券元件用於直播間的優惠券功能，支援優惠券領取、檢視和展示。元件包含可領取優惠券列表、已領取優惠券列表和優惠券掛件等功能。

元件提供三種不同的入口元件：

• NormalCouponCommonList - 可領取優惠券列表元件
• NormalCouponUserList - 已領取優惠券列表元件
• NormalCouponPendant - 優惠券掛件元件

二、引入

2.1 UMD 方式

其中 normal-coupon-common-list.umd.js 是可領取優惠券列表元件，normal-coupon-user-list.umd.js 是已領取優惠券列表元件，normal-coupon-pendant.umd.js 是優惠券掛件元件。

<script src="https://websdk.videocc.net/iar-coupon-ui/rc-20250612/normal-coupon-common-list.umd.js"></script>

<script>
const { NormalCouponCommonList, NormalCouponUserList, NormalCouponPendant } = window.PolyvIarCouponUi;
</script>

2.2 NPM 方式

// 安装依赖
pnpm add @polyv/iar-coupon-ui

// 引入组件
import { NormalCouponCommonList, NormalCouponUserList, NormalCouponPendant } from '@polyv/iar-coupon-ui';

三、程式碼範例

<template>
  <div>
    <!-- 可领取优惠券列表 -->
    <NormalCouponCommonList
      ref="couponCommonListRef"
      :coupon-target="couponSDK"
      @to-show="onToShow"
      @to-hide="onToHide"
    />

    <!-- 已领取优惠券列表 -->
    <NormalCouponUserList
      ref="couponUserListRef"
      :coupon-target="couponSDK"
      @to-show="onToShow"
      @to-hide="onToHide"
    />

    <!-- 优惠券挂件 -->
    <NormalCouponPendant
      ref="couponPendantRef"
      :coupon-target="couponSDK"
      @to-show="onToShow"
      @to-hide="onToHide"
    />
  </div>
</template>

<script setup>
import { NormalCouponCommonList, NormalCouponUserList, NormalCouponPendant } from '@polyv/iar-coupon-ui';
import { Coupon } from '@polyv/iar-coupon-sdk';

// 初始化优惠券 SDK
const couponSDK = new Coupon(iarCore);

// 事件处理
const onToShow = () => {
  console.log('显示优惠券弹窗');
};

const onToHide = () => {
  console.log('隐藏优惠券弹窗');
};
</script>

四、API

4.1 Props

4.2 Events

4.3 方法

透過 ref 可以呼叫元件的方法：