Registration Lottery Component

This component is primarily used to display registration lotteries initiated by roles such as lecturers and administrators.

Before introducing and using this functional component, you need to perform public configuration for the interactive function receiving SDK. For details, please refer to: Interactive Function Receiving UI Component - SDK Configuration.

Import

Online File Import Method

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

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

Import Method (Recommended)

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

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

Code Example

After initializing the registration lottery SDK instance and integrating the component, the component will handle specific business logic internally. The integrator only needs to provide a container and toggle the display state based on component events:

Taking mobile integration as an example:

<template>
  <div>
    <div class="c-demo-enroll-lottery-pendant">
      <EnrollLotteryPendant :enroll-lottery-sdk="enrollLotterySdk" @to-show-modal="updateModalVisible(true)"/>
    </div>
    <!-- modal是一个弹窗组件，可根据界面风格自行设计-->
    <modal
        draggable
        body-locked
        title="报名抽奖"
        :no-bg="true"
        :visible="visible"
        @close="updateModalVisible(false)"
    >
      <MobileEnrollLottery
          :enroll-lottery-sdk="enrollLotterySdk"
          :lang="lang"
          @to-show="updateModalVisible(true)"
          @to-hide="updateModalVisible(false)"
      />
    </modal>
  </div>
</template>

<script>
import { EnrollLottery } from '@polyv/interactions-receive-sdk';
import EnrollLotteryPendant from '@polyv/interactions-receive-sdk-ui-default/lib/EnrollLotteryPendant';
import MobileEnrollLottery from '@polyv/interactions-receive-sdk-ui-default/lib/MobileEnrollLottery';

export default {
  components: {
    MobileEnrollLottery,
    EnrollLotteryPendant
  },

  data() {
    return {
      // 报名抽奖SDK实例
      enrollLotterySdk: null,
    };
  },

  created() {
    this.enrollLotterySdk = new EnrollLottery();
  },

  beforeDestroy() {
    this.enrollLotterySdk?.destroy();
  },

  methods: {
    updateModalVisible(visible) {
      this.visible = visible;
    },
  },
};
</script>

Attributes (MobileEnrollLottery)

Events (MobileEnrollLottery)

Attributes (EnrollLotteryPendant)

Events (EnrollLotteryPendant)