将环境检测迁移到Modal中

src/features/OnlineExam/CheckComputer.vue

@@ -264,7 +264,7 @@
       <div style="width: 30px; height: 1px; display: inline-block;"></div>
       <Button
         type="primary"
-        @click="() => this.$router.back()"
+        @click="() => this.$emit('on-close')"
         v-if="current === 5"
       >
         返回考试列表
@@ -357,6 +357,11 @@ export default {
     await this.openCamera();
   },
   beforeDestroy() {
+    if (this.$refs.video.srcObject) {
+      this.$refs.video.srcObject.getTracks().forEach(function(track) {
+        track.stop();
+      });
+    }
     clearInterval(this.getNowInterval);
     clearTimeout(this.checkClockRateTimeout);
     closeWsWithoutReconnect();

src/features/OnlineExam/OnlineExamList.vue

@@ -67,6 +67,18 @@
       :open="faceCheckModalOpen"
       :course="selectedCourse"
     ></OnlineExamFaceCheckModal>
+
+    <Modal
+      v-model="shouldShowCheckEnvModal"
+      ref="checkEnvModal"
+      title="环境检测"
+      footer-hide
+      width="800"
+      :closable="false"
+      :mask-closable="false"
+    >
+      <CheckComputer @on-close="resumeEnterExam" />
+    </Modal>
   </div>
 </template>
 
@@ -77,6 +89,7 @@ import OnlineExamFaceCheckModal from "./OnlineExamFaceCheckModal.vue";
 import moment from "moment";
 import { mapState as globalMapState } from "vuex";
 const { mapState, mapMutations } = createNamespacedHelpers("examHomeModule");
+import CheckComputer from "./CheckComputer";
 
 export default {
   name: "EcsOnlineList",
@@ -87,6 +100,7 @@ export default {
       spinShow: false,
       processingMessage: "",
       cid: null,
+      shouldShowCheckEnvModal: false,
     };
   },
   props: {
@@ -154,6 +168,56 @@ export default {
         return;
       }
 
+      this.processingMessage = "正在获取考试设置...";
+
+      if (!alreadyChecked) {
+        let checkEnv = null;
+        try {
+          checkEnv = await this.$http.get(
+            "/api/ecs_exam_work/exam/examOrgPropertyFromCache4StudentSession/" +
+              course.examId +
+              `/CHECK_ENVIRONMENT`
+          );
+          if (checkEnv.data.CHECK_ENVIRONMENT === "true") {
+            const skipCheck = await new Promise(resolve => {
+              this.$Modal.confirm({
+                title: "进行环境检测",
+                content:
+                  "环境检测可以检测电脑的硬件配置、网络速度和常用操作。环境检测不通过的话，可能影响考试的正常进行。",
+                okText: "进行检测",
+                cancelText: "跳过检测",
+                onOk: () => {
+                  // sessionStorage.setItem(
+                  //   "computer_env_ok_save_course_id",
+                  //   course.courseId
+                  // );
+                  // this.$router.push("/check-computer");
+                  // this.$refs.checkEnvModal.show();
+                  this.shouldShowCheckEnvModal = true;
+                  this.selectedCourse = course;
+                  resolve();
+                },
+                onCancel: () => {
+                  resolve(true);
+                },
+              });
+            });
+            if (!skipCheck) {
+              this.spinShow = false;
+              return;
+            }
+          }
+        } catch (error) {
+          this.spinShow = false;
+          this.$Message.error({
+            content: "查询考试的环境检测设置属性出错！",
+            duration: 15,
+            closable: true,
+          });
+          return;
+        }
+      }
+
       if (course.faceEnable) {
         // if 人脸检测 && 没有底照，提示，并返回
         if (!this.user.photoPath) {
@@ -165,53 +229,6 @@ export default {
           return;
         }
 
-        this.processingMessage = "正在获取考试设置...";
-
-        if (!alreadyChecked) {
-          let checkEnv = null;
-          try {
-            checkEnv = await this.$http.get(
-              "/api/ecs_exam_work/exam/examOrgPropertyFromCache4StudentSession/" +
-                course.examId +
-                `/CHECK_ENVIRONMENT`
-            );
-            if (checkEnv.data.CHECK_ENVIRONMENT === "true") {
-              const skipCheck = await new Promise(resolve => {
-                this.$Modal.confirm({
-                  title: "进行环境检测",
-                  content:
-                    "环境检测可以检测电脑的硬件配置、网络速度和常用操作。环境检测不通过的话，可能影响考试的正常进行。",
-                  okText: "进行检测",
-                  cancelText: "跳过检测",
-                  onOk: () => {
-                    sessionStorage.setItem(
-                      "computer_env_ok_save_course_id",
-                      course.courseId
-                    );
-                    this.$router.push("/check-computer");
-                    resolve();
-                  },
-                  onCancel: () => {
-                    resolve(true);
-                  },
-                });
-              });
-              if (!skipCheck) {
-                this.spinShow = false;
-                return;
-              }
-            }
-          } catch (error) {
-            this.spinShow = false;
-            this.$Message.error({
-              content: "查询考试的环境检测设置属性出错！",
-              duration: 15,
-              closable: true,
-            });
-            return;
-          }
-        }
-
         let faceLiveness = null;
         try {
           faceLiveness = await this.$http.get(
@@ -286,6 +303,10 @@ export default {
     async faceCheckResultCallback(course, faceMatched) {
       // if faceMatched
     },
+    async resumeEnterExam() {
+      this.shouldShowCheckEnvModal = false;
+      this.enterExam(this.selectedCourse, true);
+    },
   },
   computed: {
     ...globalMapState(["user", "timeDifference"]),
@@ -294,24 +315,25 @@ export default {
       return this.user.schoolDomain === "iepcc-ps.ecs.qmth.com.cn";
     },
   },
-  watch: {
-    courses(value) {
-      if (value.length > 0) {
-        let courseId = sessionStorage.getItem("computer_env_ok_save_course_id");
-        if (courseId !== null) {
-          courseId = +courseId; // 转为数字
-          const course = value.find(v => v.courseId === courseId);
-          if (course) {
-            this.enterExam(course, true);
-            sessionStorage.removeItem("computer_env_ok_save_course_id");
-          }
-        }
-      }
-    },
-  },
+  // watch: {
+  //   courses(value) {
+  //     if (value.length > 0) {
+  //       let courseId = sessionStorage.getItem("computer_env_ok_save_course_id");
+  //       if (courseId !== null) {
+  //         courseId = +courseId; // 转为数字
+  //         const course = value.find(v => v.courseId === courseId);
+  //         if (course) {
+  //           this.enterExam(course, true);
+  //           sessionStorage.removeItem("computer_env_ok_save_course_id");
+  //         }
+  //       }
+  //     }
+  //   },
+  // },
   components: {
     "ecs-online-exam-result-list": OnlineExamResultList,
     OnlineExamFaceCheckModal,
+    CheckComputer,
   },
 };
 </script>