Cloud Seat Component

This component is primarily used to display cloud seat content. This feature is only available for mobile components.

Before importing and using this functional component, you need to perform public configuration for the interactive function receiving end SDK. For details, please refer to: Interactive Function Receiving End UI Component - Configure SDK.

Import

Online File Import Method

// 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 Method (Recommended)

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

Code Example

Taking mobile end integration as an example:

<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

Events

MobileSeatTableVertical

Attributes

Events

MobileSeatFollowList

Attributes

Events

MobileUserCard

Attributes

MobileSeatTips

Attributes