# 图文直播

本文档主要描述如何接入互动功能接收端的图文直播组件，接入后可实现观众端显示图文直播内容。

在引入及使用本功能组件前，需要先对互动功能接收端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#%E9%85%8D%E7%BD%AE-sdk)。

## 引入

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

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

#### import 方式引入（推荐）

```javascript
import MobileTuwen from '@polyv/interactions-receive-sdk-ui-default/lib/MobileTuwen';

```

## 代码示例

先实例化SDK，然后将其传入到图文直播组件中，以便内部进行相应逻辑处理。

以 PC 端接入为例：

```vue
<template>
  <div id="tuwenContain" class="plv-demo-tuwen">
    <!-- 参考切换图文和图片模式的 demo代码，具体样式可按实际要求设计 -->
    <button @click="changeType(1)">图文模式</button>
    <button @click="changeType(2)">图片模式</button>
    <div v-show="messageTotal > 0" class="plv-ia-tuwen-top">
      <div class="plv-ia-tuwen-top__tip"> 共 {{ messageTotal }} 图文直播</div>
    </div>
    <Tuwen
        ref="tuwen"
        scroll-container="tuwenContain"
        :tuwen-sdk="TuwenSdk"
        :mode="mode"
        :lang="lang"
        :scroll-distance="scrollDistance"
        :disable-preview="isWeChatPreview"
        @change-message-total="changeMessageTotal"
        @show-preview="showPreview"
    />
  </div>
</template>

<script>
import { Tuwen } from '@polyv/interactions-receive-sdk';
import PcTuwen from '@polyv/interactions-receive-sdk-ui-default/lib/PcTuwen';

export default {
  components: {
    Tuwen: PcTuwen,
  },

  props: {
    lang: {
      type: String,
      default: 'zh_CN',
    }
  },

  data() {
    return {
      // 图文直播 SDK 实例
      TuwenSdk: null,
      mode: 1,
      messageTotal: 0,
      // 滚动底部距离阈值, 触发滚动加载
      scrollDistance: 200
    };
  },
  computed: {
    // 判断是否在手机微信环境下，且配置wx可以使用微信图片预览功能，否则使用内部图片预览功能
    isWeChatPreview() {
      // TODO 参考代码
      // return isMobile() && isWeixin() && window.wx
    }
  },

  created() {
    this.TuwenSdk = new Tuwen();
  },

  beforeDestroy() {
    this.TuwenSdk?.destroy();
  },

  methods: {
    changeType(val) {
      this.mode = val;
    },
    changeMessageTotal(val) {
      this.messageTotal = val;
    },
    // 微信环境下，使用 wx 图片预览功能体验更好。
    async showPreview(arg) {
      const { images, index } = arg;
      if (this.isWeChatPreview) {
        wx && wx.previewImage({
          urls: images,
          current: images[index]
        });
      }
    }
  }
};
</script>

<style lang="scss">
.plv-demo-tuwen {
  padding: 0 16px;
  height: 1600px;
  overflow-y: scroll;
}
.plv-ia-tuwen-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 16px;
  .plv-ia-tuwen-tip {
    font-size: 12px;
    color: #aaa;
  }
}
</style>

```

### Attributes

| 属性名             | 类型                    | 默认值       | 含义                  |
| --------------- | --------------------- | --------- | ------------------- |
| tuwenSdk        | Object                | null      | 图文直播 SDK 实例         |
| tuwenContain    | String                | ''        | 图文直播滚动容器id，用于监听滚动加载 |
| lang            | string：'zh\_CN', 'en' | `'zh_CN'` | 语言                  |
| mode            | Number：0, 1           | 1         | 展示模式：1为图文，2为图片      |
| disable-preview | Boolean               | false     | 是否禁用图片预览功能          |
| scroll-distance | Number                | 200       | 触发加载的距离阈值           |

### Events

| 事件名                  | 参数类型                   | 参数含义                           | 说明                   |
| -------------------- | ---------------------- | ------------------------------ | -------------------- |
| change-message-total | number                 | 总消息条数                          | 显示总条数                |
| show-preview         | { images: \[], index } | images: 图片列表; index: 需要展示图片的下标 | 用于外部实现图片预览功能，如微信图片预览 |