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

<template>
  <main-layout>
    <Breadcrumb
      style="text-align: left; padding-left: 20px; height: 40px; line-height: 40px; 
                       background-color: #fafafa;"
    >
      当前所在位置：
      <BreadcrumbItem>在线考试</BreadcrumbItem>
    </Breadcrumb>

    <div class="home">
      <ecs-online-list :courses="courses"></ecs-online-list>
    </div>

    <PhoneVerifyForDD />
  </main-layout>
</template>

<script>
import EcsOnlineList from "./OnlineExamList.vue";
import PhoneVerifyForDD from "./PhoneVerifyForDD.vue";

export default {
  name: "OnlineExamHome",
  data() {
    return {
      previousUrl: "",
      autoCloseModal: 10,
      courses: [],
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.previousUrl = from.path;
    });
  },
  beforeMount() {
    this.$nextTick(() => {
      if (this.previousUrl.startsWith("/login/")) {
        this.$Modal.info({
          render: () => (
            <div class="welcome-modal">
              <div class="smile-png" />
              <div style="margin-left: 20px; flex: 1">
                <div style="margin-bottom: 1.5em">
                  欢迎使用考试系统，祝顺利完成考试！
                </div>
                <div style="font-weight:bold; line-height: 25px;">
                  姓名：{this.$store.state.user.name} -{" "}
                  {this.$store.state.user.studentCode}
                </div>
                <div style="font-weight:bold; line-height: 25px;">
                  专业：{this.$store.state.user.specialty}
                </div>
              </div>
            </div>
          ),
          onOk: () => {
            clearInterval(this.interval);
          },
        });
        this.interval = setInterval(() => {
          this.autoCloseModal--;
          if (this.autoCloseModal <= 0) {
            this.$Modal.remove();
            clearInterval(this.interval);
          }
        }, 1000);
      }
    });
  },
  async mounted() {
    window._hmt.push(["_trackEvent", "在线考试列表页面", "进入页面"]);
    const res = await this.$http.get(
      "/api/ecs_oe_student/examControl/queryExamList"
    );

    this.courses = res.data;
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  components: {
    "ecs-online-list": EcsOnlineList,
    PhoneVerifyForDD,
  },
};
</script>

<style scoped>
.home {
  margin: 20px;
}
.welcome-modal {
  display: flex;
  margin-top: 26px;
  margin-left: 20px;
}
.smile-png {
  width: 40px;
  height: 40px;
  background: url(./smile-icon.png);
}
</style>