簽到元件

本文件主要說明如何接入互動功能接收端的簽到元件，接入後可實現觀眾端簽到展示與提交簽到操作。

在引入及使用本功能元件前，需先對互動功能接收端SDK進行公共配置，詳情請參閱：互動功能接收端 UI 元件 - 配置 SDK。

引入

線上檔案引入方式

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

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

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

程式碼範例

先實例化簽到SDK，再將其傳入簽到元件中，以便內部進行對應邏輯處理。
元件內部監聽到簽到開始後，將觸發 to-show 事件，此時接入方控制外層容器顯示。
to-hide 事件觸發後表示簽到已結束或終止，應隱藏外層容器。

以 PC 端接入為例：

<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