reward-receive 獎品領取

一、介紹

獎品領取元件用於直播間的獎品領取功能，支援各種互動功能的獎品領取流程。元件提供獎品資訊展示、領取表單填寫、提交等完整功能。

元件提供一個主要入口元件：

• RewardReceivePopup - 獎品領取彈窗元件

二、引入

2.1 UMD 方式

<script src="https://websdk.videocc.net/iar-reward-receive-ui/rc-20250612/reward-receive-popup.umd.js"></script>

<script>
const { RewardReceivePopup } = window.PolyvIarRewardReceiveUi;
</script>

2.2 NPM 方式

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

// 引入组件
import { RewardReceivePopup } from '@polyv/iar-reward-receive-ui';

三、程式碼範例

<template>
  <div>
    <!-- 奖品领取弹窗 -->
    <RewardReceivePopup
      ref="rewardReceiveRef"
      :reward-data="rewardData"
      show-popup
      @to-show="onToShow"
      @to-hide="onToHide"
      @submit-success="onSubmitSuccess"
    />
  </div>
</template>

<script setup>
import { RewardReceivePopup } from '@polyv/iar-reward-receive-ui';

// 奖品数据
const rewardData = ref({
  prizeInfo: {
    prize: '奖品名称',
    thumbnail: 'https://example.com/prize.jpg'
  },
  formList: [
    {
      field: '姓名',
      formType: 'input',
      tips: '请输入您的姓名',
      required: true,
      value: null
    }
  ]
});

// 事件处理
const onToShow = () => {
  console.log('显示奖品领取弹窗');
};

const onToHide = () => {
  console.log('隐藏奖品领取弹窗');
};

const onSubmitSuccess = () => {
  console.log('奖品领取提交成功');
};
</script>

四、API

4.1 Props

4.2 Events

4.3 方法

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