抽奖组件

在本项目中（默认场景）, 抽奖功能包括三大组件：抽奖中、抽奖结束和个人中奖记录，接入方可以依据抽奖流程进行展示。 各组件只需要使用一个公共的抽奖SDK逻辑层实例即可，不需要初始化多个SDK实例。

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

概述

完成互动功能接收端 SDK 的配置后，可以大体按这个流程接入。

  1. 在模板代码中引入“抽奖中”、“抽奖结束”和“个人中奖记录”三个组件，并传入抽奖 SDK、语言等属性，监听相关事件。

  2. 在逻辑代码中，创建抽奖 SDK 实例。

  3. 在三个组件相关事件的回调函数中获取抽奖状态，并控制三个组件的可见性。

示例代码

以 PC 端接入为例。

<template>
  <div class="plv-demo-lottery-default">
    <button @click="setLotteryRecordVisible">查看中奖记录</button>

    <div class="plv-demo-lottery-default__lottery">
      <!-- 抽奖中 -->
      <on-lottery
        v-if="lotterySdk"
        v-show="isLotteryShowing"
        :lottery-sdk="lotterySdk"
        :lang="lang"
        @lottery-status-changed="onLotteryStatusChange"
        @is-show-changed="onLotteryShowChange"
      />
    </div>

    <!-- 中奖记录 -->
    <modal
      no-bg
      draggable
      title="中奖记录"
      :visible="isShowRecord"
      :close-on-click-modal="false"
      @close="isShowRecord = false"
    >
      <lottery-record
        v-if="lotterySdk"
        :lottery-sdk="lotterySdk"
        :lang="lang"
        :delay-time="3000"
        @lottery-list="onLotteryRecord"
        @submit-info="onClickRecord"
        @check-info="onClickRecord"
      />
    </modal>

    <!-- 中奖结果 -->
    <!-- modal是一个弹窗组件，可根据界面风格自行设计-->
    <modal
      no-bg
      draggable
      title="中奖结果"
      :visible="isShowResult"
      :close-on-click-modal="false"
      :lang="lang"
      @close="isShowResult = false"
    >
      <lottery-end
        v-if="lotterySdk"
        ref="lotteryEnd"
        :lottery-sdk="lotterySdk"
        :lottery-list="lotteryList"
        :lang="lang"
        @to-show="setLotteryResultShow"
        @to-hide="setLotteryResultHide"
      />
    </modal>
  </div>
</template>

<script>
import OnLottery from '@polyv/interactions-receive-sdk-ui-default/lib/PcOnLottery';
import LotteryEnd from '@polyv/interactions-receive-sdk-ui-default/lib/PcLotteryEnd';
import LotteryRecord from '@polyv/interactions-receive-sdk-ui-default/lib/PcLotteryRecord';
import { Lottery } from '@polyv/interactions-receive-sdk';

export default {
  components: {
    OnLottery,
    LotteryEnd,
    LotteryRecord,
  },

  data() {
    return {
      // 语言
      lang: 'zh_CN',
      // 抽奖 SDK 实例 
      lotterySdk: null,
      // 是否展示结果
      isShowResult: false,
      // 中奖记录数据
      lotteryList: [],
      // 是否展示抽奖盒子
      isLotteryShowing: false,
      // 是否展示抽奖记录
      isShowRecord: false,
    };
  },

  created() {
    this.lotterySdk = new Lottery();
  },

  beforeDestroy() {
    this.lotterySdk?.destroy();
    this.lotterySdk = null;
  },

  methods: {
    onLotteryStatusChange(status) {
      if (status === 'running') {
        this.isLotteryShowing = true;
      } else if (status === 'over') {
        this.isLotteryShowing = false;
      }
    },

    onLotteryShowChange(isShowing) {
      this.isLotteryShowing = isShowing;
    },

    // 展示抽奖结果
    setLotteryResultShow() {
      this.isShowResult = true;
    },

    // 隐藏抽奖结果
    setLotteryResultHide() {
      this.isShowResult = false;
	  setTimeout(() => {
        this.$refs.lotteryEnd && this.$refs.lotteryEnd.toBack();
      }, 600);
    },

    // 切换中奖记录列表组件可见性
    setLotteryRecordVisible() {
      this.isShowRecord = !this.isShowRecord;
    },

    // 中奖记录数据更新
    onLotteryRecord(lotteryList = []) {
      if (lotteryList.length) {
        this.lotteryList = lotteryList;
      }
    },

    // 点击查看中奖结果详情
    onClickRecord(record = {}) {
      this.isShowRecord = false;
	  this.setLotteryResultShow();
      const { prize, lotteryId, collectInfo, winnerCode, sessionId, received } = record;
      this.$refs.lotteryEnd.setLottery({
        received,
        prize,
        lotteryId,
        collectInfo,
        winnerCode,
        sessionId,
        isWinner: true,
      });
    },
  }
};
</script>

<style lang="scss">
.plv-demo-lottery-default__lottery {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

抽奖中

“抽奖中”组件显示抽奖动效。讲师/助教等发起端发起一次抽奖时，"抽奖中" 组件会触发相应事件，接入方根据事件控制容器/模态框的可见性。

引入

在线文件引入方式

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

import 方式引入（推荐）

// PC端
import OnLottery from '@polyv/interactions-receive-sdk-ui-default/lib/PcOnLottery';
// 移动端
import OnLottery from '@polyv/interactions-receive-sdk-ui-default/lib/MobileOnLottery';

Attributes

属性名类型默认值含义

lang

string：'zh_CN', 'en'

'zh_CN'

语言

lotterySdk

Object

null

抽奖 SDK 实例

delayTime

number

移动端 8000，PC端 2000

延迟触发显示时间，单位毫秒

pattern

string

'default'

抽奖动效类型，可选default（默认）和box（盒子动效）

btnText

string

'猛戳提升手气'

抽奖礼盒按钮中文文案

btnEnText

string

'Click For Luck'

抽奖礼盒按钮英文文案

Events

事件名参数类型参数含义说明

lottery-status-changed

string: 'running', 'over'

抽奖进行状态

抽奖状态发生变化后触发。'running'表示抽奖进行中，需显示本组件；'over' 表示抽奖结束，需取消显示本组件。

is-show-changed

boolean

是否正在显示

该事件表示组件内部显示状态发生变化，需接入方同步设置外部容器的显示状态。如点击组件内部的关闭按钮时，会触发该事件，并收到参数false。

抽奖结束

“抽奖结束” 组件显示该轮次中的个人中奖结果，以及中奖人列表。讲师结束抽奖后，组件会触发相应事件，同样，接入方根据事件去控制组件可见性即可。 status-changed 事件会提供组件内部的几种状态，可依据此状态处理部分交互逻辑，比如展示返回按钮用于从 “中奖名单” 返回到 “中奖结果”。

{
  isShowLotteryEnd: '中奖结果',
  isShowWinnerList: '中奖名单',
  isShowSubmitInfo: '填写联系信息',
}

另外，此组件提供 setLottery 方法，用于外部传入特定场次的中奖记录，给用户去补填该次中奖信息。具体中奖信息可从下文提到的 “个人中奖记录” 组件中获取。

引入

在线文件引入方式

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

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

import 方式引入（推荐）

// PC端
import LotteryEnd from '@polyv/interactions-receive-sdk-ui-default/lib/PcLotteryEnd';  
// 移动端
import LotteryEnd from '@polyv/interactions-receive-sdk-ui-default/lib/MobileLotteryEnd';

Attributes

属性名类型默认值含义

lang

string：'zh_CN', 'en'

'zh_CN'

语言

lotterySdk

Object

null

抽奖 SDK 实例

delayTime

number

移动端 8000，PC端 2000

延迟触发显示时间，单位毫秒

Events

事件名参数类型参数含义说明

to-show

无参数

-

讲师端结束抽奖后触发，表示需要展示弹窗

to-hide

无参数

-

点击"我知道了"按钮后触发，表示需要隐藏弹窗

status-changed

string: 'isShowLotteryEnd', 'isShowWinnerList', 'isShowSubmitInfo'

弹窗内部状态

抽奖结束弹窗内部状态变化后触发。isShowLotteryEnd: 抽奖结束， isShowWinnerList: 显示中奖人名单，isShowSubmitInfo: 显示填写信息

Methods

setLottery

说明：设置中奖结束弹窗信息。用于内部控制"抽奖结束"弹窗状态，也可以用于外部根据中奖列表传入特定轮次的中奖信息。 接收参数：对象参数 lotteryInfo: Object，该对象参数字段如下（同 SDK 中的 SdkLotteryRecordResItem）。

字段名类型含义

channelId

string

频道号

lotteryId

string

抽奖ID

prize

string

奖品名称

received

boolean

是否已领取

sessionId

string

场次号

winnerCode

string

兑换码

collectInfo

Object[]

中奖填写信息

collectInfo 是中奖者领奖所需填写提交的信息数组，数据格式如下：

[
  {
    // 字段提示
    field: '',
    // 字段值（若用户已提交过，则为用户所填值）
    value: '',
  },
  {
    field: '',
    value: '',
  },
]

toBack

说明：返回到"抽奖结束"（上文所说isShowLotteryEnd状态）的显示状态。 接收参数：无。

个人中奖记录

在一场直播中，讲师可能会发起多轮抽奖，本组件可以展示特定直播场次中用户的所有中奖记录。

引入

在线文件引入方式

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

import 方式引入（推荐）

// PC端
import LotteryRecord from '@polyv/interactions-receive-sdk-ui-default/lib/PcLotteryRecord';
// 移动端
import LotteryRecord from '@polyv/interactions-receive-sdk-ui-default/lib/MobileLotteryRecord';

Attributes

属性名类型默认值含义

lotterySdk

object

null

抽奖 SDK 实例

lang

string：'zh_CN', 'en'

'zh_CN'

语言

Events

以下事件具体参数可以查看 typedoc 文档。

事件名参数类型参数含义说明

lottery-list

Object[]

个人中奖记录列表数据，可参考SDK中的SdkLotteryRecordRes 说明

可用于判断是否需要展示中奖记录列表

submit-info

Object

事件数据为具体中奖条目，可参考SDK中的 SdkLotteryRecordResItem 说明

点击填写信息按钮，触发该事件。可用于调出组件填写提交中奖信息。

check-info

Object

事件数据为具体中奖条目，可参考SDK中的 SdkLotteryRecordResItem 说明

点击"已填写"按钮，触发该事件。可用于调出组件查看已填写的具体信息。

lottery-list 事件参数说明

该事件表示观众个人中奖记录有更新，事件参数是所有中奖记录数据的数组，每个条目的数据同上文”抽奖结束”组件 setLottery 方法接收的参数SdkLotteryRecordResItem。 可以根据数组中是否有 received 字段为 false的数据，判断观众是否有某些中奖记录没有填写提交个人领奖信息。

submit-info 和 check-info 事件参数说明

该事件参数同 SdkLotteryRecordResItem，即为中奖记录列表中的单个条目，可以用于传递给”抽奖结束”组件 setLottery的方法，使其显示特定场次的中奖结果界面并进行信息检查或填写提交。

接入方可以在SDK初始化后即调用该组件，在需要的时机展示组件。组件初始化、监听到抽奖状态变化或者个人领奖状态变化后，会获取用户最新中奖记录数据，并触发 lottery-list 事件，该事件参数为用户中奖数据列表，可以据此列表数据判断用户是否有未填写领取信息的奖项，便于实现提示红点等UI交互。

用户点击个人中奖记录组件中的“领奖”按钮时，该组件会触发 submit-info 事件，并在事件参数中提供对应轮次中奖数据。接入方监听到该事件后，可调用“抽奖结束组件” 的 setLottery方法并将对应数据传入，然后展示“抽奖结束组件”，该组件将展示对应轮次抽奖的结果信息（包括是否中奖、是否已提交领奖信息）。用户点击“已领取”按钮时触发 check-info 的事件同submit-info 事件，此时将"抽奖结束"组件显示出来，可查看当时观众填写的信息。

Previous反馈组件Next公告组件

Last updated