在本项目中（默认场景）, 抽奖功能包括三大组件：抽奖中、抽奖结束和个人中奖记录，接入方可以依据抽奖流程进行展示。
各组件只需要使用一个公共的抽奖SDK逻辑层实例即可，不需要初始化多个SDK实例。
在引入及使用本功能组件前，需要先对互动功能接收端SDK进行公共配置，详情请查看：互动功能接收端 UI 组件 - 配置 SDK。
概述
完成互动功能接收端 SDK 的配置后，可以大体按这个流程接入。
在模板代码中引入“抽奖中”、“抽奖结束”和“个人中奖记录”三个组件，并传入抽奖 SDK、语言等属性，监听相关事件。
在三个组件相关事件的回调函数中获取抽奖状态，并控制三个组件的可见性。
示例代码
以 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
抽奖动效类型，可选default（默认）和box（盒子动效）
Events
string: 'running', 'over'
抽奖状态发生变化后触发。'running'表示抽奖进行中，需显示本组件；'over' 表示抽奖结束，需取消显示本组件。
该事件表示组件内部显示状态发生变化，需接入方同步设置外部容器的显示状态。如点击组件内部的关闭按钮时，会触发该事件，并收到参数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
Events
string: 'isShowLotteryEnd', 'isShowWinnerList', 'isShowSubmitInfo'
抽奖结束弹窗内部状态变化后触发。isShowLotteryEnd: 抽奖结束， isShowWinnerList: 显示中奖人名单，isShowSubmitInfo: 显示填写信息
Methods
setLottery
说明：设置中奖结束弹窗信息。用于内部控制"抽奖结束"弹窗状态，也可以用于外部根据中奖列表传入特定轮次的中奖信息。
接收参数：对象参数 lotteryInfo: Object，该对象参数字段如下（同 SDK 中的 SdkLotteryRecordResItem）。
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
Events
以下事件具体参数可以查看 typedoc 文档。
点击填写信息按钮，触发该事件。可用于调出组件填写提交中奖信息。
点击"已填写"按钮，触发该事件。可用于调出组件查看已填写的具体信息。
lottery-list 事件参数说明
该事件表示观众个人中奖记录有更新，事件参数是所有中奖记录数据的数组，每个条目的数据同上文”抽奖结束”组件 setLottery 方法接收的参数SdkLotteryRecordResItem。
可以根据数组中是否有 received 字段为 false的数据，判断观众是否有某些中奖记录没有填写提交个人领奖信息。
submit-info 和 check-info 事件参数说明
该事件参数同 SdkLotteryRecordResItem，即为中奖记录列表中的单个条目，可以用于传递给”抽奖结束”组件 setLottery的方法，使其显示特定场次的中奖结果界面并进行信息检查或填写提交。
接入方可以在SDK初始化后即调用该组件，在需要的时机展示组件。组件初始化、监听到抽奖状态变化或者个人领奖状态变化后，会获取用户最新中奖记录数据，并触发 lottery-list 事件，该事件参数为用户中奖数据列表，可以据此列表数据判断用户是否有未填写领取信息的奖项，便于实现提示红点等UI交互。
用户点击个人中奖记录组件中的“领奖”按钮时，该组件会触发 submit-info 事件，并在事件参数中提供对应轮次中奖数据。接入方监听到该事件后，可调用“抽奖结束组件” 的 setLottery方法并将对应数据传入，然后展示“抽奖结束组件”，该组件将展示对应轮次抽奖的结果信息（包括是否中奖、是否已提交领奖信息）。用户点击“已领取”按钮时触发 check-info 的事件同submit-info 事件，此时将"抽奖结束"组件显示出来，可查看当时观众填写的信息。
Last updated
