student-client/src/features/OnlineExam/OnlineExamFaceCheckModal.vue

<template>
  <Modal v-model="faceCheckModalOpen" width="900" :mask-closable="false" :closable="false" @on-visible-change="updateCameraState">
    <div slot="header" style="display: flex; justify-content: space-between; align-items: center;">
      <div class="qm-title-text">人脸识别</div>
      <Icon type="ios-close" class="qm-icon-button" size="24" @click="closeModal" />
    </div>
    <div style="display: grid; grid-template-columns: 200px 400px 1fr; grid-gap: 5px; position: relative">
      <!-- TODO: 显示子组件的message -->
      <!-- <div style="position: absolute; top: -16px; left: 0; width: 100%; height: 50px; background-color: #eee; opacity: 0.8; display: grid; ">
        <div class="qm-title-text" style="width: 100%; text-algin: center; ">msg</div>
      </div> -->
      <div class="avatar" :style="{ backgroundImage: `url('${userPhoto}')` }">
        <!-- <img :src="userPhoto" width="200px" height="300px" alt="底照" /> -->
        <div class="avatar-info" style="text-align: center; margin-top: 260px; color: white;">
          <!-- FIXME: 没有底照的逻辑 -->
          <span style="background-color: rgba(0, 0, 0, 0.5); display: inline-block;padding: 6px 16px; border-radius: 6px;">我的底照</span>
        </div>
      </div>
      <div class="camera">
        <FaceRecognition v-if="faceCheckModalOpen" width="400" height="300" :showRecognizeButton="true" :close-camera="closeCamera" @on-recognize-result="getFaceRecognitionResult">
        </FaceRecognition>
      </div>
      <div class="verify-desc qm-primary-text">
        <h4 class="qm-big-text" style="font-weight: bold">操作提示：</h4>
        <p>1.请先确保摄像头设备已连接并能正常工作；</p>
        <p>2.请保持光源充足，不要逆光操作；</p>
        <p>3.请保证脸部正面面向摄像头，并适当调整姿势保证整个脸部能够进入左侧识别画面；</p>
        <p>4.系统识别通过后，将自动跳转进入考试界面；</p>
      </div>
    </div>
    <div slot="footer">
    </div>
  </Modal>
</template>

<script>
import FaceRecognition from "@/components/FaceRecognition/FaceRecognition.vue";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations } = createNamespacedHelpers("examHomeModule");

export default {
  name: "OnlineExamFaceCheckModal",
  data() {
    return { userPhoto: null, closeCamera: false };
  },
  props: {
    open: Boolean,
    course: Object
  },
  async mounted() {
    try {
      const res = await this.$http.get(
        "/api/ecs_core/student/getStudentInfoBySession"
      );
      this.userPhoto = res.data.photoPath;
      if (this.course && this.course.faceEnable && !this.userPhoto) {
        this.$Message.error("没有底照");
        return;
      }
    } catch (error) {
      this.$Message.error("获取学生底照信息失败");
      this.closeModal();
    }
  },
  computed: {
    ...mapState(["faceCheckModalOpen"])
  },
  methods: {
    ...mapMutations(["toggleFaceCheckModal"]),
    closeModal() {
      this.closeCamera = true;
      this.toggleFaceCheckModal(false);
    },
    updateCameraState(modalVisible) {
      this.closeCamera = !modalVisible;
    },
    getFaceRecognitionResult({ error, faceCount, pass }) {
      if (error) {
        console.log(error, faceCount, pass);
        this.$Message.error(error);
        return;
      }

      if (!pass) {
        this.$Message.error("人脸比对失败");
        if (!this.course.faceCheck) {
          this.toggleFaceCheckModal(false);
          this.$Modal.confirm({
            title: "郑重承诺",
            content:
              "我承诺由本人参加考试，并且同意接受考试监控系统信息审核，一经发现作弊，立即取消本门课程考试成绩。",
            onOk: () =>
              this.$router.push(
                `/online-exam/exam/${
                  this.course.examId
                }/overview?examStudentId=${this.course.examStudentId}`
              )
          });
        }
        return;
      }
      this.toggleFaceCheckModal(false);
      this.$router.push(
        `/online-exam/exam/${this.course.examId}/overview?examStudentId=${
          this.course.examStudentId
        }`
      );
    }
  },
  components: {
    FaceRecognition
  }
};
</script>

<style scoped>
.avatar {
  background: center no-repeat;
  background-size: cover;
  width: 200px;
  height: 300px;
}

.verify-desc {
  padding: 0 1em;
  line-height: 1.8em;
}
</style>