Lottery Components

In this project (default scenario), the lottery functionality consists of three main components: Lottery Running, Lottery Ended, and Personal Winning Records. The integrator can display them according to the lottery flow.
Each component only needs to use a single shared lottery SDK logic layer instance; there is no need to initialize multiple SDK instances.

Before importing and using these functional components, you need to perform public configuration for the Interactive Feature Receiver SDK. For details, see: Interactive Feature Receiver UI Components - Configure SDK.

Overview

After completing the configuration of the Interactive Feature Receiver SDK, you can generally follow this flow for integration.

1. Import the three components "Lottery Running", "Lottery Ended", and "Personal Winning Records" in the template code, pass in properties such as the lottery SDK and language, and listen for relevant events.
2. Create a lottery SDK instance in the logic code.
3. Obtain the lottery status in the callback functions of the three components' related events, and control the visibility of the three components.

Example Code

Taking PC integration as an example.

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

Lottery Running

The "Lottery Running" component displays the lottery animation. When an initiator (e.g., lecturer/assistant) initiates a lottery, the "Lottery Running" component triggers corresponding events. The integrator controls the visibility of the container/modal based on these events.

Import

Online File Import Method

// 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 Method (Recommended)

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

Lottery Ended

The "Lottery Ended" component displays the personal winning result for the current round and the list of winners. After the lecturer ends the lottery, the component triggers corresponding events. Similarly, the integrator controls the component's visibility based on these events.
The status-changed event provides several internal states of the component, which can be used to handle some interaction logic, such as showing a back button to return from the "Winner List" to the "Lottery Result".

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

Additionally, this component provides the setLottery method, which allows external code to pass in the winning records of a specific session for the user to fill in missing prize information. The specific winning information can be obtained from the "Personal Winning Records" component mentioned below.

Import

Online File Import Method

// 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 Method (Recommended)

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

Description: Sets the information for the lottery ended popup. Used internally to control the state of the "Lottery Ended" popup, and can also be used externally to pass in the winning information of a specific round based on the winner list.
Receives parameter: Object parameter lotteryInfo: Object. The fields of this object parameter are as follows (same as the SdkLotteryRecordResItem in the SDK).

collectInfo is an array of information that the winner needs to fill in and submit to claim the prize. The data format is as follows:

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

toBack

Description: Returns to the display state of "Lottery Ended" (the isShowLotteryEnd state mentioned above).
Receives parameters: None.

Personal Winning Records

During a live stream, the lecturer may initiate multiple rounds of lotteries. This component can display all the user's winning records for a specific live session.

Import

Online File Import Method

// 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 Method (Recommended)

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

For specific parameters of the following events, please refer to the typedoc documentation.

lottery-list Event Parameter Description

This event indicates that the viewer's personal winning records have been updated. The event parameter is an array of all winning record data. The data for each entry is the same as the parameter received by the setLottery method of the "Lottery Ended" component mentioned above (SdkLotteryRecordResItem).
You can determine if the viewer has any winning records that have not been filled in and submitted for personal prize claiming by checking if any entry in the array has a received field value of false.

submit-info and check-info Event Parameter Description

The event parameter is the same as SdkLotteryRecordResItem, which is a single entry in the winning record list. It can be passed to the setLottery method of the "Lottery Ended" component to display the winning result interface for a specific session and allow information checking or filling/submission.

The integrator can call this component immediately after SDK initialization and display the component when needed. After the component is initialized and detects a change in lottery status or personal prize claiming status, it will fetch the user's latest winning record data and trigger the lottery-list event. The event parameter is the user's winning data list, which can be used to determine if the user has any unclaimed prizes, facilitating UI interactions like displaying a red dot notification.

When the user clicks the "Claim Prize" button in the Personal Winning Records component, this component triggers the submit-info event and provides the corresponding round's winning data in the event parameter. Upon listening to this event, the integrator can call the setLottery method of the "Lottery Ended" component, passing in the corresponding data, and then display the "Lottery Ended" component. This component will then show the result information for that round's lottery (including whether the user won and whether the claim information has been submitted). When the user clicks the "Claimed" button, the event triggered by check-info is the same as the submit-info event. At this point, displaying the "Lottery Ended" component allows viewing the information the viewer filled in at that time.