student-client/src/features/OnlinePractice/OnlinePracticeList.vue

<template>
  <div class="list">
    <table>
      <tbody class="list-row">
        <tr class="list-header qm-primary-strong-text">
          <td>课程</td>
          <td>考试开放时间</td>
          <td>练习次数</td>
          <td>最近正确率</td>
          <td>平均正确率</td>
          <td>最高正确率</td>
          <td style="max-width: 200px">操作</td>
        </tr>

        <tr v-for="course in courses" :key="course.courseId">
          <td>{{ course.courseName }}</td>
          <td>
            {{ course.startTime }} <br />
            ~ <br />
            {{ course.endTime }}
          </td>
          <td>{{ course.practiceCount }}</td>
          <td>{{ course.recentObjectiveAccuracy }}%</td>
          <td>{{ course.aveObjectiveAccuracy }}%</td>
          <td>{{ course.maxObjectiveAccuracy }}%</td>
          <td style="min-width: 180px">
            <div
              style="display: grid; grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) ); 
                        grid-gap: 10px"
            >
              <i-button
                class="qm-primary-button qm-primary-button-padding-fix"
                :disabled="!courseInBetween(course)"
                @click="enterPractice(course)"
              >
                进入练习
              </i-button>
              <i-button
                class="qm-primary-button qm-primary-button-padding-fix"
                @click="enterPracticeList(course)"
              >
                查看详情
              </i-button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

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

export default {
  name: "OnlinePracticeList",
  data() {
    return { now: new Date(), selectedCourse: null };
  },
  props: {
    examList: Array,
    courses: Array,
  },
  created() {
    this.getNow();
    this.intervalID = setInterval(() => this.getNow(), 1000);
  },
  beforeDestroy() {
    clearInterval(this.intervalID);
  },
  methods: {
    ...mapMutations(["toggleFaceCheckModal"]),
    getNow() {
      this.now = Date.now() + this.timeDifference;
    },
    courseInBetween(course) {
      return moment(this.now).isBetween(
        moment(course.startTime),
        moment(course.endTime)
      );
    },
    async enterPractice(course) {
      const alreadyInExam = await this.checkExamInProgress();
      if (alreadyInExam) {
        window._hmt.push(["_trackEvent", "在线练习页面", "断点续考", "进入"]);
        return;
      }

      window._hmt.push(["_trackEvent", "在线练习页面", "进入练习"]);
      this.$router.push(
        `/online-exam/exam/${course.examId}/overview?examStudentId=${
          course.examStudentId
        }`
      );
    },
    async enterPracticeList(course) {
      this.$router.push(
        `/online-practice/exam/${course.examId}/list?examStudentId=${
          course.examStudentId
        }&examName=${encodeURIComponent(
          course.examName
        )}&courseName=${encodeURIComponent(course.courseName)}`
      );
    },
  },
  computed: {
    ...globalMapState(["user", "timeDifference"]),
  },
};
</script>

<style scoped>
.list {
  border: 1px solid #eeeeee;
  border-radius: 6px;
}

.list table {
  width: 100%;
  border-collapse: collapse !important;
  border-spacing: 0;
}
.list td {
  border: 1px solid #eeeeee;
  border-radius: 6px;
  border-collapse: separate !important;
  padding: 10px;
}
</style>

<style>
.online-exam-list-override-poptip .ivu-poptip-rel {
  width: 100%;
}
</style>