# 签到组件

本文档主要描述如何接入互动功能接收端的签到组件，接入后可实现观众端签到展示和提交签到操作。

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

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

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

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

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

## 代码示例

先实例化签到SDK，然后将其传入到签到组件中，以便内部进行相应逻辑处理。\
组件内部监听到签到开始后，将触发 `to-show` 事件，此时接入方控制外层容器展示。\
`to-hide` 事件触发后表示签到已结束或终止，应隐藏外层容器。

以 PC 端接入为例：

```vue
<template>
  <div>
    <h2>签到</h2>
    <button v-if="isShowEntrance" @click="showCheckIn">签到列表</button>
    <!-- 签到弹窗 -->
    <modal
        :title="title"
        :visible="isShowCheckIn"
        @close="onSetCheckInVisible(false)"
    >
        <check-in
          ref="checkIn"
          :check-in-sdk="checkInSdk"
          @show-entrance="showEntrance"
          @to-show="onSetCheckInVisible(true)"
          @to-hide="onSetCheckInVisible(false)"
          @update-modal-title="updateModalTitle"
        />
    </modal>
  </div>
</template>

<script>
import { CheckIn as CheckInSDK } from '@polyv/interactions-receive-sdk';
import CheckIn from '@polyv/interactions-receive-sdk-ui-default/lib/PcCheckIn';
//  modal是一个弹窗组件，可根据界面风格自行设计
import Modal from '../demo-modal/MobileModal';
export default {
  components: {
    CheckIn,
    Modal
  },

  data() {
    return {
      // 签到SDK实例
      checkInSdk,
      // 是否显示签到
      isShowCheckIn: false,
      isShowEntrance: false,
      title: '签到'
    };
  },

  created() {
    this.checkInSdk = new CheckInSDK();
  },

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

  methods: {
   showEntrance(val) {
    this.isShowEntrance = val;
   },
    onSetCheckInVisible(visible) {
      this.isShowCheckIn = visible;
    },
    async showCheckIn() {
      await this.$refs.checkIn.getCheckInInfo();
      this.isShowCheckIn = true;
    },
    updateModalTitle(val) {
      this.title = val;
    }
  },
};
</script>
```

### Attributes

| 属性名        | 类型                    | 默认值       | 含义        |
| ---------- | --------------------- | --------- | --------- |
| checkInSdk | Object                | null      | 签到 SDK 实例 |
| lang       | string：'zh\_CN', 'en' | `'zh_CN'` | 语言        |

### Events

| 事件名                | 参数类型    | 参数含义 | 说明       |
| ------------------ | ------- | ---- | -------- |
| to-show            | 无参数     | -    | 需要展示签到弹窗 |
| to-hide            | 无参数     | -    | 需要隐藏签到弹窗 |
| show-entrance      | Boolean | -    | 是否显示签到入口 |
| update-modal-title | string  | -    | 当前签到弹窗标题 |