SEEC-Portal-Front/components/TestCard.vue

<template>
  <div class="test-container">
    <el-card class="test-card" shadow="hover">
      <div class="test-card__header">
        <div class="test-card__name">{{ exam.examName }}</div>
        <!--   和style绑定     -->
        <div class="test-card__status">
          <div class="test-card__tag has-started" v-if="exam.status === '进行中'">进行中</div>
          <div class="test-card__tag not-start" v-else-if="exam.status === '未开始'">未开始</div>
          <div class="test-card__tag finished" v-else>已结束</div>
          <div v-if="exam.isJoined" class="test-card__tag has-started">已加入</div>
        </div>
      </div>
      <div class="test-card__option">
        <div class="test-card__time">
          <div class="test-card__startTime">开始时间: {{ exam.startTime }}</div>
          <div class="test-card__endTime">结束时间: {{ exam.endTime }}</div>
          <div class="test-card__invigilate">是否监考: {{ exam.antiCheating?'是': '否' }}</div>
        </div>
        <div class="test-card__btn">
          <el-button type="primary" plain @click.native="goEval">查看信息</el-button>
          <el-button v-if="exam.isJoined && isStarted" type="success" plain @click.native="beginExam( exam.location )">前往考试</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'TestCard',
  data () {
    return {
      isStarted: false
    }
  },
  props: {
    exam: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  mounted () {
    const now = new Date()
    if (new Date(this.exam.startTime) < now && new Date(this.exam.endTime) > now) {
      this.isStarted = true
    }
  },
  methods: {
    beginExam: function (location) {
      window.location.href = location
    },
    goEval: function () {
      const location = 'https://eval.seec.seecoder.cn'
      window.location.href = location
    }
  }
}
</script>

<style scoped>
@import '~/assets/css/test-card.css';
</style>