条件抽奖组件

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

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

属性名	类型	默认值	含义
welfareLotterySdk	Object	null	条件抽奖 SDK 实例
lang	String：'zh_CN', 'en'	'zh_CN'	语言
watchUrl	String'	-	观看地址url，用于扫码进入到观看地址，复制观看链接等功能
inviteUrl	String'	-	邀请链接，用于抽奖条件为邀请海报类型时的邀请入口
isShowCustomLottery	Boolean	false	是否显示自定义抽奖，如果是的话，将屏蔽领取奖品的后续流程
linkSkipEnabled	Boolean	true	是否禁用内部页面跳转
customLangConfig	Object	-	用于覆盖内部中英文配置 默认中英文配置文件

Event

事件名	参数类型	参数含义	说明
entry-visible-changed	boolean	入口挂件状态是否显示	入口挂件状态是否显示
comment-success	string	评论内容	点击自动评论，并回调评论内容
lotteryCallback	object	点击各按钮之后的回调 type: ' ', 触发的事件类型 data: object 返回当前的中奖记录	生效条件：开启了外部邀请且在移动端环境 type: 'setLottery' 立即参与抽奖，无data返回 type: 'seeLottery' 查看 type: 'getLottery' 领取