check-in 签到

一、介绍

签到组件用于直播间的签到功能，支持移动端、PC端和竖屏模式。组件包含签到倒计时、签到状态显示、签到记录查看等功能，支持强制签到模式。

组件提供三种不同的入口组件：

• MobileCheckIn - 移动端签到组件
• PcCheckIn - PC端签到组件
• PortraitCheckIn - 竖屏签到组件

二、引入

2.1 UMD 方式

其中 mobile-check-in.umd.js 是移动端签到组件，pc-check-in.umd.js 是 PC 端签到组件，portrait-check-in.umd.js 是竖屏签到组件。

<script src="https://websdk.videocc.net/iar-check-in-ui/rc-20250612/mobile-check-in.umd.js"></script>

<script>
const { MobileCheckIn, PcCheckIn, PortraitCheckIn } = window.PolyvIarCheckInUi;
</script>

2.2 NPM 方式

// 安装依赖
pnpm add @polyv/iar-check-in-ui

// 引入组件
import { MobileCheckIn, PcCheckIn, PortraitCheckIn } from '@polyv/iar-check-in-ui';

三、代码示例

<template>
  <div>
    <!-- 移动端签到组件 -->
    <MobileCheckIn
      ref="checkInRef"
      :check-in-target="checkInSDK"
      enable-sound-effects
      check-in-record-enabled
      @show-entrance="onShowEntrance"
      @to-show="onToShow"
      @to-hide="onToHide"
      @check-in-status="onCheckInStatus"
    />
  </div>
</template>

<script setup>
import { MobileCheckIn } from '@polyv/iar-check-in-ui';
import { CheckIn } from '@polyv/iar-check-in-sdk';

// 初始化签到 SDK
const checkInSDK = new CheckIn(iarCore);

// 事件处理
const onShowEntrance = (show) => {
  console.log('显示入口:', show);
};

const onToShow = () => {
  console.log('显示签到弹窗');
};

const onToHide = () => {
  console.log('隐藏签到弹窗');
};

const onCheckInStatus = (status) => {
  console.log('签到状态:', status);
};
</script>

四、API

4.1 Props

4.2 Events

4.3 方法

通过 ref 可以调用组件的方法：