云席组件

本组件主要用于展示云席内容。该功能只有移动端组件

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

引入

在线文件引入方式

// script 标签引入，根据版本号引入JS版本。
// 该功能只有移动端组件
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/MobileSeatTableMeeting/MobileSeatTableMeeting.umd.min.js"></script>
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/MobileSeatTableVertical/MobileSeatTableVertical.umd.min.js"></script>
<script>
    const MobileSeatTableMeeting = window.PolyvIRScene.MobileSeatTableMeeting.default;
</script>

import 方式引入（推荐）

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

代码示例

以 移动端 端接入为例：

<template>
  <div class="plv-demo-seat-table">
    <button @click="showMyFollVisible" style="margin-bottom: 20px;">我的收藏</button>
    <button @click="showOtherFollowVisible" style="margin-bottom: 20px;">被ta收藏</button>
    <template v-if="initStatus">

      <mobile-seat-table-meeting
          v-if="isMeeting"
          :seat-table-sdk="seatTableSdk"
          @show-user-card="showUserCard"
          @follow="updateFollList"
          @cancel-follow="updateFollList"
      />
      <mobile-seat-table-vertical
          v-if="isVertical"
          :seat-table-sdk="seatTableSdk"
          @show-user-card="showUserCard"
          @follow="updateFollList"
          @cancel-follow="updateFollList"
      />
    </template>

    <!-- 用户卡片介绍 -->
    <MobileModal
        class="c-seat-table__popup"
        :visible="popupVisible"
        append-to-body
        :modalStyle="{'padding-top': 0}"
        :show-header="false"
        :fit-left-height="true"
        @close="closeUserCard"
    >
      <mobile-user-card v-if="popupVisible" :seat-table-sdk="seatTableSdk" :user-info="cardUserInfo"/>
    </MobileModal>

    <!-- 我的关注用户 -->
    <MobileModal
        class="c-seat-table__popup"
        :visible="myFollowVisible"
        title="我的收藏"
        append-to-body
        :fit-left-height="true"
        @close="() => myFollowVisible = false"
    >
      <mobile-follow-list
          v-if="myFollowVisible"
          ref="myFollowList"
          :seat-table-sdk="seatTableSdk"
          @show-user-card="showUserCard"/>
    </MobileModal>

    <!-- 关注我的用户 -->
    <MobileModal
        class="c-seat-table__popup"
        :visible="otherFollowVisible"
        title="被ta收藏"
        append-to-body
        :fit-left-height="true"
        @close="() => otherFollowVisible = false"
    >
      <mobile-follow-list
          v-if="otherFollowVisible"
          ref="otherFollowList"
          type="befollow"
          :seat-table-sdk="seatTableSdk"
          @show-user-card="showUserCard"/>
    </MobileModal>

    <mobile-seat-tips v-if="initStatus" :seat-table-sdk="seatTableSdk"/>

  </div>
</template>

<script>
import mixin from './mixin';
// 云席模板：模拟会场 
import MobileSeatTableMeeting from '@polyv/interactions-receive-sdk-ui-default/lib/MobileSeatTableMeeting.vue';
// 云席模板：竖向列表
import MobileSeatTableVertical from '@polyv/interactions-receive-sdk-ui-default/lib/MobileSeatTableVertical.vue';
// 云席用户卡片组件
import MobileUserCard from '@polyv/interactions-receive-sdk-ui-default/lib/MobileSeatUserCard';
//  modal是一个弹窗组件，可根据界面风格自行设计
import MobileModal from '../demo-modal/MobileModal';
// 第一次入座时提示组件
import MobileSeatTips from '@polyv/interactions-receive-sdk-ui-default/lib/MobileSeatTips';
// 关注列表组件
import MobileSeatFollowList from '@polyv/interactions-receive-sdk-ui-default/lib/MobileSeatFollowList';

export default {
  components: {
    MobileSeatFollowList,
    MobileSeatTips,
    MobileSeatTableMeeting,
    MobileSeatTableVertical,
    MobileModal,
    MobileUserCard,
  },

  mixins: [mixin],
};
</script>

<style lang="scss">
.plv-demo-seat-table {
  height: 600px;
}
</style>

mixin.js

import { SeatTable } from '@polyv/interactions-receive-sdk';

export default {
  data() {
    return {
      /** 座位表 sdk 实例 */
      seatTableSdk: null,
      // 用户卡片是否显示
      popupVisible: false,

      cardUserInfo: {},

      initStatus: false,

      myFollowVisible: false,
      otherFollowVisible: false,

      /** 是否为模拟会场 */
      isMeeting: false,
      /** 是否为竖向列表会场 */
      isVertical: false
    };
  },
  async mounted() {
      // 已经入座情况下，可以通过实例化时传入入座信息。也可以调用entrySeatTale 方法，获取入座信息
    this.seatTableSdk = new SeatTable(
      // {
      //   viewerSeat: {
      //     intro: null,
      //     position: null,
      //     seatId: 873383,
      //     seatNumber: 4,
      //     vipTotal: 11,
      //     normalTotal: 108,
      //     type: 'viewer',
      //   }
      // }
    );
    await this.seatTableSdk.getChannelSeatInfo();
    // 主动入座，传入用户信息
    await this.seatTableSdk.entrySeatTale({
      nickName: 'vip观众',
      // 云席类型: vip vip嘉宾  viewer 普通嘉宾 
      seatType: 'vip',
      // 职级
      position: '',
      // 观众介绍语
      intro: '',
      avatar: 'https://s1.videocc.net/default-img/avatar/viewer.png'
    });
    // 判断展示那个云席会场
    this.isMeeting = this.seatTableSdk.seatChannelConfig.seatTemplate === this.seatTableSdk.seatTemplate.MEETING;
    this.isVertical = this.seatTableSdk.seatChannelConfig.seatTemplate === this.seatTableSdk.seatTemplate.VERTICAL;
    this.initStatus = true;
  },
  methods: {
    showMyFollVisible() {
      this.myFollowVisible = true;
      this.$nextTick(() => {
        this.$refs.myFollowList.init();
      })
    },
    showOtherFollowVisible() {
      this.otherFollowVisible = true;
      this.$nextTick(() => {
        this.$refs.otherFollowList.init();
      })
    },
    updateFollList() {
      if (this.myVisible) {
        this.$refs.myFollowList.init();
      } else if (this.otherVisible) {
        this.$refs.otherFollowList.init();
      }
    },
    showUserCard(data) {
      this.popupVisible = true;
      this.cardUserInfo = data;
    },
    closeUserCard() {
      // 从用户卡片回来，重新获取收藏列表
      if (this.myFollowVisible) {
        this.$refs.myFollowList.init();
      } else if (this.otherFollowVisible) {
        this.$refs.otherFollowList.init();
      }
      this.popupVisible = false;
    },
  }
};

MobileSeatTableMeeting

Attributes

属性名	类型	默认值	含义
lang	string：'zh_CN', 'en'	'zh_CN'	语言
seatTableSdk	Object	null	云席 SDK 实例

Events

事件名	参数类型	参数含义	说明
show-user-card	Object	用户信息	展示用户信息
follow	无	-	关注用户
cancel-follow	无	-	取消关注

MobileSeatTableVertical

Attributes

属性名	类型	默认值	含义
lang	string：'zh_CN', 'en'	'zh_CN'	语言
seatTableSdk	Object	null	云席 SDK 实例

Events

事件名	参数类型	参数含义	说明
show-user-card	Object	用户信息	展示用户信息
follow	无	-	关注用户
cancel-follow	无	-	取消关注

MobileSeatFollowList

Attributes

属性名	类型	默认值	含义
lang	string：'zh_CN', 'en'	'zh_CN'	语言
seatTableSdk	Object	null	云席 SDK 实例

Events

事件名	参数类型	参数含义	说明
show-user-card	Object	用户信息	展示用户信息

MobileUserCard

Attributes

属性名	类型	默认值	含义
lang	string：'zh_CN', 'en'	'zh_CN'	语言
seatTableSdk	Object	null	云席 SDK 实例
userInfo	Object	null	用户数据

MobileSeatTips

Attributes

属性名	类型	默认值	含义
lang	string：'zh_CN', 'en'	'zh_CN'	语言
seatTableSdk	Object	null	云席 SDK 实例