lucky-lottery Platform Lottery

1. Introduction

The platform lottery component is used for the platform lottery feature in live streaming rooms. It supports two lottery styles: a 9-grid grid and a spinning wheel. The component includes functions such as lottery activity list, lottery details, prize list, and prize claiming.

The component provides multiple different entry components:

• MobileLuckyLotteryList - Mobile lottery activity list component
• MobileLuckyLotteryDetail - Mobile lottery details component
• LuckyLotteryPendant - Lottery widget component
• MobileLuckyLotteryPrizeList - Mobile prize list component
• MobileLuckyLotteryReceive - Mobile prize claiming component
• LuckyLotteryDetail - Lottery details component

2. Import

2.1 UMD Method

Among them, mobile-lucky-lottery-detail.umd.js is the mobile lottery details component, and lucky-lottery-pendant.umd.js is the lottery widget component.

<script src="https://websdk.videocc.net/iar-lucky-lottery-ui/rc-20250612/mobile-lucky-lottery-detail.umd.js"></script>

<script>
const { MobileLuckyLotteryDetail, LuckyLotteryPendant, MobileLuckyLotteryList } = window.PolyvIarLuckyLotteryUi;
</script>

2.2 NPM Method

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

// 引入组件
import {
  MobileLuckyLotteryList,
  MobileLuckyLotteryDetail,
  LuckyLotteryDetail,
  LuckyLotteryPendant,
  MobileLuckyLotteryPrizeList,
  MobileLuckyLotteryReceive
} from '@polyv/iar-lucky-lottery-ui';

3. Code Example

<template>
  <div>
    <!-- 移动端抽奖详情 -->
    <MobileLuckyLotteryDetail
      ref="lotteryDetailRef"
      :lucky-lottery-target="luckyLotterySDK"
      :lottery-activity="lotteryActivity"
      @to-show="onToShow"
      @to-hide="onToHide"
    />

    <!-- 抽奖挂件 -->
    <LuckyLotteryPendant
      ref="lotteryPendantRef"
      :lucky-lottery-target="luckyLotterySDK"
      @to-show="onToShow"
      @to-hide="onToHide"
    />
  </div>
</template>

<script setup>
import { MobileLuckyLotteryDetail, LuckyLotteryPendant } from '@polyv/iar-lucky-lottery-ui';
import { LuckyLottery } from '@polyv/iar-lucky-lottery-sdk';

// 初始化平台抽奖 SDK
const luckyLotterySDK = new LuckyLottery(iarCore);

// 抽奖活动数据
const lotteryActivity = ref(null);

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

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

4. API

4.1 Props

4.2 Events

4.3 Methods

Component methods can be called via ref: