# 反馈组件

本文档主要描述如何接入互动功能接收端的反馈组件，接入后可实现观众端提交反馈。

在引入及使用本功能组件前，需要先对互动功能接收端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/PcFeedBack/PcFeedBack.umd.min.js"></script>
// PC端
<script>
    const FeedBack = window.PolyvIRScene.PcFeedBack.default;
`</script>`
```

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

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

```javascript
// PC 端
import FeedBack from '@polyv/interactions-receive-sdk-ui-default/lib/PcFeedBack';   
```

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

## 代码示例

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

以 PC 端接入为例：

```vue
<template>
  <!-- modal是一个弹窗组件，可根据界面风格自行设计-->
  <modal
      no-bg
      draggable
      title="投诉反馈"
      :visible="visible"
      :close-on-click-modal="false"
      @close="visible = false"
  >
    <feed-back
      :feed-back-sdk="feedBackSdk"
      :is-show-feed-back="visible"
      @to-show="onSetFeedBackVisible(true)"
      @to-hide="onSetFeedBackVisible(false)"
    />
  </modal>
</template>

<script>
import { FeedBack as FeedBackSDK } from '@polyv/interactions-receive-sdk';
import FeedBack from '@polyv/interactions-receive-sdk-ui-default/lib/PcFeedBack';   

export default {
  components: {
    FeedBack,
  },

  data() {
    return {
      // 反馈 SDK 实例
      feedBackSdk: null,
      visible: false,
    };
  },

  created() {
    this.feedBackSdk = new FeedBackSDK();
  },

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

  methods: {
    onSetFeedBackVisible(visible) {
      this.visible = visible;
    },
  },
};
</script>
```

### Attributes

| 属性名               | 类型                    | 默认值       | 含义             |
| ----------------- | --------------------- | --------- | -------------- |
| checkInSdk        | Object                | null      | 签到 SDK 实例      |
| lang              | string：'zh\_CN', 'en' | `'zh_CN'` | 语言             |
| is-show-feed-back | boolean               | false     | 是否显示反馈组件（重置状态） |

### Events

| 事件名     | 参数类型 | 参数含义 | 说明       |
| ------- | ---- | ---- | -------- |
| to-show | 无参数  | -    | 需要展示签到弹窗 |
| to-hide | 无参数  | -    | 需要隐藏签到弹窗 |