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 可以调用组件的方法：