> For the complete documentation index, see [llms.txt](https://polyv.gitbook.io/document/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://polyv.gitbook.io/document/docs/live/js/new-sdk/interactions-receive-sdk/ui/default/seat_table.md).

# 云席组件

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

在引入及使用本功能组件前，需要先对互动功能接收端SDK进行公共配置，详情请查看：[互动功能接收端 UI 组件 - 配置 SDK](https://git.polyv.net/help-center/document-center/-/blob/master/live/js/new_sdk/interactions_receive_sdk/ui/default/overview/README.md#配置-sdk)。

## 引入

#### 在线文件引入方式

```html
// 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 方式引入（推荐）

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

### 代码示例

以 移动端 端接入为例：

```vue
<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

```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 实例 |