Conditional Lottery Component

This document primarily describes how to integrate the conditional lottery component on the interactive feature receiving end. After integration, the audience side can display lottery activity details, lottery results, winner lists, winning records, and other operations.

Before introducing and using this functional component, you need to perform public configuration for the interactive feature receiving end SDK. For details, please refer to: Interactive Feature Receiving End UI Components - Configure SDK.

Import

Online File Import Method

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

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

Import Method (Recommended)

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

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

Code Example

First, instantiate the conditional lottery SDK, then pass it into the conditional lottery component for internal logic processing.

Taking mobile integration as an example:

<template>
  <mobile-welfare-lottery
    :welfare-lottery-sdk="conditionLotterySdk"
    :watch-url="watchUrl"
    :invite-url="inviteUrl"
    :lang="lang"
    @entry-visible-changed="onEntryVisibleChanged"
    @lotteryCallback="lotteryCallback"
    @comment-success="commentSuccess"
  />
</template>

<script>
import { WelfareLottery } from '@polyv/interactions-receive-sdk';
import MobileWelfareLottery from '@polyv/interactions-receive-sdk-ui-default/lib/MobileWelfareLottery';

export default {
  components: {
    MobileWelfareLottery,
  },

  props: {
    lang: {
      type: String,
      default: 'zh_CN',
    },
    watchUrl: String,
    inviteUrl: String,
  },

  data() {
    return {
      // 条件抽奖 SDK 实例
      conditionLotterySdk: null,
    };
  },

  mounted() {
    this.conditionLotterySdk = new WelfareLottery();
    // $eventBus 为全局事件总线， 监听自己发言，判断是否满足评论抽奖条件。
    this.$eventBus.$on('SPEAK_LOTTERY_COMMENT', async (comment) => {
      const isBoolean = await this.conditionLotterySdk.isBooleanToCommentLottery(comment);
      if (isBoolean) {
        this.conditionLotterySdk.finishCommentLottery();
      }
    });
  },

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

  methods: {
    onEntryVisibleChanged(visible) {
      console.info('条件抽奖挂件是否显示:', visible);
    },
    lotteryCallback(data) {
      console.info('各按钮触发的回调:', data);
    },
    commentSuccess(comment) {
      // 点击自动评论按钮后，需要本地插入一条自己的发言内容
      // TODO 聊天列表：插入一条自己发言内容
    }
  }
};
</script>

Attributes

Events