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;">
      <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 created() {
    const res = await this.$http.get(
      "/api/ecs_core/student/getStudentInfoBySession"
    );
    this.userPhoto = res.data.photoPath;
    if (!this.userPhoto) {
      this.$Message.error("没有底照");
      return;
    }
    // FIXME: 以后api返回的是绝对路径
    if (this.userPhoto.startsWith("http") === false) {
      this.userPhoto = this.userPhoto;
    }

    // const sysRes = await this.$http.get("/api/sys_param", {
    //   params: {
    //     orgId: this.$store.state.user.rootOrgId
    //   }
    // });

    // // FIXME: 将faceEnable和faceCheck放到global的state中
    // this.faceEnable = sysRes.data.faceEnable; // 模拟练习？
    // this.faceCheck = sysRes.data.faceCheck; // 考试
  },
  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.course.faceCheck) {
        this.$Modal.confirm({
          title: "郑重承诺",
          content:
            "我承诺由本人参加考试，并且同意接受考试监控系统信息审核，一经发现作弊，立即取消本门课程考试成绩。",
          onOk: () =>
            this.$router.push(
              `/online-exam/exam/${this.course.examId}/overview?stuExamInfoId=${
                this.course.examStudentId
              }`
            )
        });
        return;
      }
      this.$router.push(
        `/online-exam/exam/${this.course.examId}/overview?stuExamInfoId=${
          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>