條件抽獎元件

本文件主要說明如何接入互動功能接收端的條件抽獎元件，接入後可實現觀眾端顯示抽獎活動詳情、抽獎結果、中獎名單、中獎記錄等操作。

在引入及使用本功能元件前，需要先對互動功能接收端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