抽獎元件

在本專案中（預設場景），抽獎功能包含三大元件：抽獎中、抽獎結束和個人中獎記錄，接入方可依據抽獎流程進行展示。
各元件只需使用一個公共的抽獎 SDK 邏輯層實例即可，不需要初始化多個 SDK 實例。

在引入及使用本功能元件前，需要先對互動功能接收端 SDK 進行公共配置，詳情請查看：互動功能接收端 UI 元件 - 配置 SDK。

概述

完成互動功能接收端 SDK 的配置後，可以大致按這個流程接入。

1. 在模板程式碼中引入「抽獎中」、「抽獎結束」和「個人中獎記錄」三個元件，並傳入抽獎 SDK、語言等屬性，監聽相關事件。
2. 在邏輯程式碼中，建立抽獎 SDK 實例。
3. 在三個元件相關事件的回呼函式中取得抽獎狀態，並控制三個元件的可見性。

範例程式碼

以 PC 端接入為例。

<template>
  <div class="plv-demo-lottery-default">
    <button @click="setLotteryRecordVisible">查看中奖记录</button>

    <div class="plv-demo-lottery-default__lottery">
      <!-- 抽奖中 -->
      <on-lottery
        v-if="lotterySdk"
        v-show="isLotteryShowing"
        :lottery-sdk="lotterySdk"
        :lang="lang"
        @lottery-status-changed="onLotteryStatusChange"
        @is-show-changed="onLotteryShowChange"
      />
    </div>

    <!-- 中奖记录 -->
    <modal
      no-bg
      draggable
      title="中奖记录"
      :visible="isShowRecord"
      :close-on-click-modal="false"
      @close="isShowRecord = false"
    >
      <lottery-record
        v-if="lotterySdk"
        :lottery-sdk="lotterySdk"
        :lang="lang"
        :delay-time="3000"
        @lottery-list="onLotteryRecord"
        @submit-info="onClickRecord"
        @check-info="onClickRecord"
      />
    </modal>

    <!-- 中奖结果 -->
    <!-- modal是一个弹窗组件，可根据界面风格自行设计-->
    <modal
      no-bg
      draggable
      title="中奖结果"
      :visible="isShowResult"
      :close-on-click-modal="false"
      :lang="lang"
      @close="isShowResult = false"
    >
      <lottery-end
        v-if="lotterySdk"
        ref="lotteryEnd"
        :lottery-sdk="lotterySdk"
        :lottery-list="lotteryList"
        :lang="lang"
        @to-show="setLotteryResultShow"
        @to-hide="setLotteryResultHide"
      />
    </modal>
  </div>
</template>

<script>
import OnLottery from '@polyv/interactions-receive-sdk-ui-default/lib/PcOnLottery';
import LotteryEnd from '@polyv/interactions-receive-sdk-ui-default/lib/PcLotteryEnd';
import LotteryRecord from '@polyv/interactions-receive-sdk-ui-default/lib/PcLotteryRecord';
import { Lottery } from '@polyv/interactions-receive-sdk';

export default {
  components: {
    OnLottery,
    LotteryEnd,
    LotteryRecord,
  },

  data() {
    return {
      // 语言
      lang: 'zh_CN',
      // 抽奖 SDK 实例 
      lotterySdk: null,
      // 是否展示结果
      isShowResult: false,
      // 中奖记录数据
      lotteryList: [],
      // 是否展示抽奖盒子
      isLotteryShowing: false,
      // 是否展示抽奖记录
      isShowRecord: false,
    };
  },

  created() {
    this.lotterySdk = new Lottery();
  },

  beforeDestroy() {
    this.lotterySdk?.destroy();
    this.lotterySdk = null;
  },

  methods: {
    onLotteryStatusChange(status) {
      if (status === 'running') {
        this.isLotteryShowing = true;
      } else if (status === 'over') {
        this.isLotteryShowing = false;
      }
    },

    onLotteryShowChange(isShowing) {
      this.isLotteryShowing = isShowing;
    },

    // 展示抽奖结果
    setLotteryResultShow() {
      this.isShowResult = true;
    },

    // 隐藏抽奖结果
    setLotteryResultHide() {
      this.isShowResult = false;
      setTimeout(() => {
        this.$refs.lotteryEnd && this.$refs.lotteryEnd.toBack();
      }, 600);
    },

    // 切换中奖记录列表组件可见性
    setLotteryRecordVisible() {
      this.isShowRecord = !this.isShowRecord;
    },

    // 中奖记录数据更新
    onLotteryRecord(lotteryList = []) {
      if (lotteryList.length) {
        this.lotteryList = lotteryList;
      }
    },

    // 点击查看中奖结果详情
    onClickRecord(record = {}) {
      this.isShowRecord = false;
      this.setLotteryResultShow();
      const { prize, lotteryId, collectInfo, winnerCode, sessionId, received } = record;
      this.$refs.lotteryEnd.setLottery({
        received,
        prize,
        lotteryId,
        collectInfo,
        winnerCode,
        sessionId,
        isWinner: true,
      });
    },
  }
};
</script>

<style lang="scss">
.plv-demo-lottery-default__lottery {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

抽獎中

「抽獎中」元件顯示抽獎動畫效果。講師/助教等發起端發起一次抽獎時，「抽獎中」元件會觸發相應事件，接入方根據事件控制容器/模態框的可見性。

引入

線上檔案引入方式

// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/PcOnLottery/PcOnLottery.umd.min.js"></script>
// PC端
<script>
    const OnLottery = window.PolyvIRScene.PcOnLottery.default;
</script>

// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/MobileOnLottery/MobileOnLottery.umd.min.js"></script>
// 移动端
<script>
    const OnLottery = window.PolyvIRScene.MobileOnLottery.default;
</script>

import 方式引入（推薦）

// PC端
import OnLottery from '@polyv/interactions-receive-sdk-ui-default/lib/PcOnLottery';

// 移动端
import OnLottery from '@polyv/interactions-receive-sdk-ui-default/lib/MobileOnLottery';

Attributes

Events

抽獎結束

「抽獎結束」元件顯示該輪次中的個人中獎結果，以及中獎人名單。講師結束抽獎後，元件會觸發相應事件，同樣，接入方根據事件去控制元件可見性即可。 status-changed 事件會提供元件內部的幾種狀態，可依據此狀態處理部分互動邏輯，例如顯示返回按鈕用於從「中獎名單」返回到「中獎結果」。

{
  isShowLotteryEnd: '中奖结果',
  isShowWinnerList: '中奖名单',
  isShowSubmitInfo: '填写联系信息',
}

另外，此元件提供 setLottery 方法，用於外部傳入特定場次的中獎記錄，給使用者去補填該次中獎資訊。具體中獎資訊可從下文提到的「個人中獎記錄」元件中取得。

引入

線上檔案引入方式

// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/PcLotteryEnd/PcLotteryEnd.umd.min.js"></script>
// PC端
<script>
    const LotteryEnd = window.PolyvIRScene.PcLotteryEnd.default;
</script>

// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/MobileLotteryEnd/MobileLotteryEnd.umd.min.js"></script>
// 移动端
<script>
    const LotteryEnd = window.PolyvIRScene.MobileLotteryEnd.default;
</script>

import 方式引入（推薦）

// PC端
import LotteryEnd from '@polyv/interactions-receive-sdk-ui-default/lib/PcLotteryEnd';  

// 移动端
import LotteryEnd from '@polyv/interactions-receive-sdk-ui-default/lib/MobileLotteryEnd';

Attributes

Events

Methods

setLottery

說明：設定中獎結束彈窗資訊。用於內部控制「抽獎結束」彈窗狀態，也可以用於外部根據中獎清單傳入特定輪次的中獎資訊。
接收參數：物件參數 lotteryInfo: Object，該物件參數字段如下（同 SDK 中的 SdkLotteryRecordResItem）。

collectInfo 是中獎者領獎所需填寫提交的資訊陣列，資料格式如下：

[
  {
    // 字段提示
    field: '',
    // 字段值（若用户已提交过，则为用户所填值）
    value: '',
  },
  {
    field: '',
    value: '',
  },
]

toBack

說明：返回到「抽獎結束」（上文所說 isShowLotteryEnd 狀態）的顯示狀態。
接收參數：無。

個人中獎記錄

在一場直播中，講師可能會發起多輪抽獎，本元件可以顯示特定直播場次中使用者的所有中獎記錄。

引入

線上檔案引入方式

// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/PcLotteryRecord/PcLotteryRecord.umd.min.js"></script>
// PC端
<script>
    const LotteryRecord = window.PolyvIRScene.PcLotteryRecord.default;
</script>

// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/MobileLotteryRecord/MobileLotteryRecord.umd.min.js"></script>
// 移动端
<script>
    const LotteryRecord = window.PolyvIRScene.MobileLotteryRecord.default;
</script>

import 方式引入（推薦）

// PC端
import LotteryRecord from '@polyv/interactions-receive-sdk-ui-default/lib/PcLotteryRecord';

// 移动端
import LotteryRecord from '@polyv/interactions-receive-sdk-ui-default/lib/MobileLotteryRecord';

Attributes

Events

以下事件具體參數可以查看 typedoc 文件。

lottery-list 事件參數說明

該事件表示觀眾個人中獎記錄有更新，事件參數是所有中獎記錄資料的陣列，每個條目的資料同上文「抽獎結束」元件 setLottery 方法接收的參數SdkLotteryRecordResItem。
可以根據陣列中是否有 received 字段為 false 的資料，判斷觀眾是否有某些中獎記錄沒有填寫提交個人領獎資訊。

submit-info 和 check-info 事件參數說明

該事件參數同 SdkLotteryRecordResItem，即為中獎記錄清單中的單一條目，可以用於傳遞給「抽獎結束」元件 setLottery 的方法，使其顯示特定場次的中獎結果介面並進行資訊檢查或填寫提交。

接入方可以在 SDK 初始化後即呼叫該元件，在需要的時機顯示元件。元件初始化、監聽到抽獎狀態變化或者個人領獎狀態變化後，會取得使用者最新中獎記錄資料，並觸發 lottery-list 事件，該事件參數為使用者中獎資料清單，可以據此清單資料判斷使用者是否有未填寫領取資訊的獎項，便於實現提示紅點等 UI 互動。

使用者點擊個人中獎記錄元件中的「領獎」按鈕時，該元件會觸發 submit-info 事件，並在事件參數中提供對應輪次中獎資料。接入方監聽到該事件後，可呼叫「抽獎結束元件」的 setLottery 方法並將對應資料傳入，然後顯示「抽獎結束元件」，該元件將顯示對應輪次抽獎的結果資訊（包括是否中獎、是否已提交領獎資訊）。使用者點擊「已領取」按鈕時觸發 check-info 的事件同 submit-info 事件，此時將「抽獎結束」元件顯示出來，可查看當時觀眾填寫的資訊。