条件抽奖组件

本文档主要描述如何接入互动功能接收端的条件抽奖组件，接入后可实现观众端显示抽奖活动详情、抽奖结果、中奖名单、中奖记录等操作。

在引入及使用本功能组件前，需要先对互动功能接收端SDK进行公共配置，详情请查看：互动功能接收端 UI 组件 - 配置 SDK。

引入

在线文件引入方式

// 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 方式引入（推荐）

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

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

代码示例

先实例化条件抽奖SDK，然后将其传入到条件抽奖组件中，以便内部进行相应逻辑处理。

以 移动端 接入为例：

<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

Event