Check-in Component

This document describes how to integrate the check-in component on the interactive feature receiving end. After integration, it enables the audience to view and submit check-in operations.

Before introducing and using this functional component, you need to perform public configuration for the interactive feature receiving end SDK. For details, please refer to: Interactive Feature 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/PcCheckIn/PcCheckIn.umd.min.js"></script>
// PC端
<script>
    const CheckIn = window.PolyvIRScene.PcCheckIn.default;
</script>

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

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

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

Code Example

First, instantiate the check-in SDK, then pass it into the check-in component for internal logic processing.

After the component detects the start of a check-in, it will trigger the to-show event. At this point, the integrator should control the outer container to display.

After the to-hide event is triggered, it indicates that the check-in has ended or been terminated, and the outer container should be hidden.

Taking PC integration as an example:

<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

Events