实时互动-教育版新增签到功能

签到是课堂教学中的一个通用功能，老师可在课堂中单击对应的按钮，学生端可在弹出的签到弹窗上单击按钮完成签到。
下文提供了使用 Vue 实现签到功能的方法，完整代码请点击 这里 查看。
开发老师端
我们通过 useTask 创建一个 Task，当老师调用 updateTask 时，学生端会收到老师端发来的签到请求。
<template>
  <div class="custom-checkin-btn" @click="checkIn">
    <span class="header__btn-text">签到</span>
  </div>
</template>
﻿
<script setup>
// 创建一个签到任务 custom-check-in-tool
const { updateTask } = useTask('custom-check-in-tool');
// 点击签到按钮时，发起签到
const checkIn = () => {
  updateTask({
    type: 'ask-check-in',
  });
};
</script>
﻿
<style lang="less">
...
</style>
开发学生端
在学生端，我们监听custom-check-in-tool这个任务，当收到签到请求时，进行弹窗，让学生完成签到。
<template>
  <div class="checkin-modal" v-if="showModal">
    <div class="checkin-modal__content">
      <div class="checkin-modal__header">
        <h2>签到</h2>
        <button @click="showModal = false">关闭</button>
      </div>
      <div class="checkin-modal__body">
        <p>请您完成签到</p>
      </div>
      <div class="checkin-modal__footer">
        <button @click="showModal = false">取消</button>
        <button @click="handleCheckIn()">确认签到</button>
      </div>
    </div>
  </div>
</template>
﻿
<script setup>
import { ref } from 'vue';
import useTask from '../hooks/useTask';
﻿
const showModal = ref(false);
const isCheckIn = ref(false);
﻿
// 监听到老师发起签到任务的回调函数
useTask('custom-check-in-tool', (data) => {
  if (data.type === 'ask-check-in') {
    // 收到签到请求
    console.log('收到签到请求');
    // 检查是否已签到，没有签到就展示签到弹窗
    if (!isCheckIn.value) {
      TCIC.SDK.instance.promiseState('TStateDeviceDetect', false).then(() => {
          // 设备检测完成后展示弹窗
          showModal.value = true;
        });
    } else {
      // 已经签到，提示用户
      console.log('已经签到');
    }
  }
});
const handleCheckIn = () => {
  isCheckIn.value = true;
  showModal.value = false;
  // 发送请求到服务器
};
</script>
﻿
<style lang="less">
...
</style>
说明：
完成开发后，我们可以通过 场景配置 将打包后的 js 上传，创建该场景的课堂后，课堂将自动加载自定义 js。
﻿
新增签到功能

本页目录：

开发老师端

开发学生端
