reward-receive

1. Introduction

The reward-receive component is used for claiming prizes in live streaming rooms, supporting the prize claim process for various interactive features. The component provides complete functionality including prize information display, claim form filling, and submission.

The component provides one main entry component:

• RewardReceivePopup - Prize claim popup component

2. Import

2.1 UMD Method

<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 Method

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

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

3. Code Example

<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>

4. API

4.1 Props

4.2 Events

4.3 Methods

Component methods can be called via ref: