student-client/src/features/OnlineExam/Examing/ExamingEnd.vue

<template>

  <div class="container" v-if="afterExamRemark !== null">
    <div class="instructions">
      <h1 class="">考试已结束</h1>
      <div><img class="user-avatar" :src="user.photoPath" alt="无底照" /></div>
      <div v-if="showObjectScore && !examResult.isWarn">客观分: {{examResult.objectiveScore}}</div>
      <div v-if="examResult.isWarn">成绩待审核</div>
      <h1 class="">考后说明: </h1>
      <div class="" style="text-align: left;  padding-bottom: 20px">
        <p v-html="afterExamRemark"></p>
      </div>

      <router-link class="qm-primary-button" to="/online-exam" style="display: inline-block; width: 100%;">
        返回主页</router-link>

    </div>

    <div class="exam-detail">
      <h3 class="">科目：{{exam.name}}</h3>
      <br>
      <h4 class="">试卷总分：{{paperTotalScore}}</h4>
      <br>
    </div>

  </div>

  <div v-else>
    正在等待数据返回...
  </div>
</template>

<script>
import { mapState as globalMapState } from "vuex";
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("examingHomeModule");

export default {
  data() {
    return {
      afterExamRemark: null,
      showObjectScore: null,
      paperTotalScore: null
    };
  },
  async mounted() {
    const afterExamRemark = await this.$http.get(
      "/api/ecs_exam_work/exam/examOrgProperty/" +
        this.$route.params.examId +
        `/AFTER_EXAM_REMARK`
    );
    this.afterExamRemark = afterExamRemark.data || "";
    const showObjectScore = await this.$http.get(
      "/api/ecs_exam_work/exam/examOrgProperty/" +
        this.$route.params.examId +
        `/IS_OBJ_SCORE_VIEW`
    );
    this.showObjectScore = showObjectScore.data || false;

    this.paperTotalScore = this.paperStruct.defaultPaper.questionGroupList
      .map(q => q.groupScore)
      .reduce((p, c) => p + c);
  },
  computed: {
    ...globalMapState(["user"]),
    ...mapState(["exam", "examResult", "paperStruct"])
  },
  methods: {}
};
</script>

<style scoped>
.container {
  display: grid;
  grid-template-columns: 1fr 300px;
  width: 100wh;
  height: 100vh;
}

.instructions {
  display: grid;
  grid-template-rows: 40px 300px 100px 30px minmax(200px, auto) 1fr;
  padding: 40px 20px;
}

.user-avatar {
  display: inline-block;
  width: 280px;
  height: 280px;
  object-fit: contain;
}

.exam-detail {
  padding: 40px 20px;
  background-color: #f5f5f5;

  text-align: left;
}

.list-group {
  list-style: none;
}

.list-group li {
  border-bottom: 1px solid #eeeeee;
  padding-top: 10px;
}
.pull-right {
  text-align: right;
  float: right;
}
</style>