lucky-lottery 平台抽獎

一、介紹

平台抽獎元件用於直播間的平台抽獎功能，支援九宮格和大轉盤兩種抽獎樣式。元件包含抽獎活動列表、抽獎詳情、獎品列表、獎品領取等功能。

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

• MobileLuckyLotteryList - 行動端抽獎活動列表元件
• MobileLuckyLotteryDetail - 行動端抽獎詳情元件
• LuckyLotteryPendant - 抽獎掛件元件
• MobileLuckyLotteryPrizeList - 行動端獎品列表元件
• MobileLuckyLotteryReceive - 行動端獎品領取元件
• LuckyLotteryDetail - 抽獎詳情元件

二、引入

2.1 UMD 方式

其中 mobile-lucky-lottery-detail.umd.js 是行動端抽獎詳情元件，lucky-lottery-pendant.umd.js 是抽獎掛件元件。

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

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

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

三、程式碼範例

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

四、API

4.1 Props

4.2 Events

4.3 方法

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