add: 恢复热门测试模块

assets/css/main.scss

@@ -154,8 +154,8 @@ body{
   border: 1px solid #ebeef5;
   box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
   margin-top: 50px;
-  position: fixed;
-  bottom: 0;
+  //position: fixed;
+  //bottom: 0;
 
   &__main{
     width: 1200px;

assets/css/test-card.css

@@ -16,12 +16,36 @@
   width: 80%;
 }
 
-.test-card__status {
-  font-size: 16px;
+/*.test-card__status {*/
+/*  font-size: 16px;*/
+/*}*/
+
+.test-card__tag {
+  font-size: 12px;
+  border-radius: 10px;
+  margin-bottom: 4px;
+  padding: 2px 6px;
+}
+
+.not-start{
+  color: #409EFF;
+  background: #ecf5ff;
+  border-color: #b3d8ff;
+}
+
+.has-started{
+  color: #67C23A;
+  background-color: #f0f9eb;
+  border-color: #c2e7b0;
+}
+
+.finished{
+  color: #606266;
+  background-color: #DCDFE6;
 }
 
 .test-card__option{
-  display: flex;
+  /*display: flex;*/
   justify-content: space-between;
 }
 
@@ -32,12 +56,12 @@
 }
 
 .test-card__btn{
-  margin-top: 16px;
+  margin-top: 10px;
   display: flex;
-  flex-direction: column;
+  /*flex-direction: column;*/
   align-items: center;
-  height: 90px;
-  justify-content: space-between;
+  /*height: 90px;*/
+  justify-content: left;
 }
 
 .test-card__btn >>> .el-button{
@@ -47,10 +71,14 @@
   padding-right: 0;
 }
 
-.test-card__invigilate{
-  color: #333333;
-  font-weight: 400;
-  font-size: 18px;
-  margin-top: 16px;
+.test-card__btn >>> .el-button:first-of-type{
+  margin-right: 10px;
 }
 
+/*.test-card__invigilate{*/
+/*  color: #333333;*/
+/*  font-weight: 400;*/
+/*  font-size: 18px;*/
+/*  margin-top: 16px;*/
+/*}*/
+

components/Navi.vue

@@ -5,7 +5,7 @@
       <ul class="nav__list nav__list-left">
         <li class="nav__item nav__item-left" id="v-step-0"><a href="http://helper.seecoder.cn" target="_self">HELPER</a></li>
         <li class="nav__item nav__item-left" id="v-step-1"><a href="http://coder.seecoder.cn" target="_self">CODER</a></li>
-        <li class="nav__item nav__item-left" id="v-step-2"><a href="http://developer.seecoder.cn" target="_self">DEVELOPER</a></li>
+        <li class="nav__item nav__item-left" id="v-step-2"><a href="https://eval.seec.seecoder.cn" target="_self">EVALUATOR</a></li>
       </ul>
 <!--      <el-input placeholder="搜索课程" class="nav__search" disabled>-->
 <!--        <el-button slot="append" icon="el-icon-search" disabled></el-button>-->

components/TestCard.vue

@@ -2,19 +2,24 @@
   <div class="test-container">
     <el-card class="test-card" shadow="hover">
       <div class="test-card__header">
-        <div class="test-card__name">{{ examName }}</div>
+        <div class="test-card__name">{{ exam.examName }}</div>
         <!--   和style绑定     -->
-        <div class="test-card__status">{{status}}</div>
+        <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">起始:{{ startTime }}</div>
-          <div class="test-card__endTime">结束:{{ endTime }}</div>
-          <div class="test-card__invigilate">监考:{{ antiCheating }}</div>
+          <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="getTestDetail">查看详情</el-button>
-          <el-button type="warning" plain @click.native="getReport">结果报告</el-button>
+          <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>
@@ -24,26 +29,31 @@
 <script>
 export default {
   name: 'TestCard',
+  data () {
+    return {
+      isStarted: false
+    }
+  },
   props: {
-    startTime: {
-      type: String,
-      default: ''
-    },
-    endTime: {
-      type: String,
-      default: ''
-    },
-    examName: {
-      type: String,
-      default: ''
-    },
-    antiCheating: {
-      type: String,
-      default: ''
+    exam: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  mounted () {
+    const now = new Date()
+    if (new Date(this.exam.startTime) < now) {
+      this.isStarted = true
+    }
+  },
+  methods: {
+    beginExam: function (location) {
+      window.location.href = location
     },
-    status: {
-      type: String,
-      default: ''
+    goEval: function () {
+      window.location.href = 'https://eval.seec.seecoder.cn/'
     }
   }
 }

nuxt.config.js

@@ -84,8 +84,8 @@ module.exports = {
   },
   proxy: {
     '/api/': {
-      // target: 'http://localhost:8080' // 代理地址
-      target: 'https://p-server.seec.seecoder.cn' // 代理地址
+      target: 'http://localhost:8080' // 代理地址
+      // target: 'https://p-server.seec.seecoder.cn' // 代理地址
       // changeOrigin: true,
       // pathRewrite: {
       //   '^/api': ''

pages/index.vue

@@ -1,12 +1,10 @@
 <template>
   <div>
-    <!--<img class="home-banner" src="/image/SEEC_banner3.png"/>-->
-<!--    <h1 class="title">热门测试</h1>-->
-<!--    <div class="test-list">-->
-<!--      <test-card v-for="(item,index) in examList" :key="index" :start-time="item.startTime" :end-time="item.endTime"-->
-<!--                 :exam-name="item.examName" :anti-cheating="item.antiCheating===false? '无':'有'"-->
-<!--                 :status="item.status"></test-card>-->
-<!--    </div>-->
+    <img class="home-banner" src="/image/SEEC_banner3.png"/>
+    <h1 class="title">热门测试</h1>
+    <div class="test-list">
+      <test-card v-for="(item,index) in examList" :key="index" :exam="item"></test-card>
+    </div>
     <h1 class="title">热门课程</h1>
     <div class="course-list">
       <course-card
@@ -77,9 +75,19 @@ export default {
   },
   mounted () {
     const token = this.$store.state.token
-    this.$api.get('https://eval-test.seec.seecoder.cn/api/exam/list?pageSize=5&pageNum=1').then(res => {
-
-      this.examList = res.data.result.examVOList
+    this.$api.get('https://eval.seec.seecoder.cn/api/exam/list?pageSize=5&pageNum=1').then(res => {
+      this.examList = res.data.result.examVOList.slice(0, 3)
+      this.examList.forEach((item) => {
+        const startTime = item.startTime
+        const endTime = item.endTime
+        item.status = computeExamStatusText({
+          startTime: startTime,
+          endTime: endTime
+        })
+        item.location = 'https://eval.seec.seecoder.cn/exam/' + item.examId + '/before-exam'
+      })
+    }).catch(() => {
+      this.examList = JSON.parse('[{"examId":8,"examName":"软件工程测试-seecoder成员内测版","position":"seecoder","skills":["Java","JavaScript"],"difficulty":0,"startTime":"2021-11-02 20:00:00","endTime":"2021-11-03 20:00:00","comment":"软件工程第一次测试","inviteCode":"hraewxj","creatorId":1480,"antiCheating":false,"isJoined":false,"isPublic":false},{"examId":9,"examName":"设计模式测试-seecoder成员内测版","position":"设计师","skills":["Vue"],"difficulty":0,"startTime":"2021-11-02 20:00:00","endTime":"2021-11-03 20:00:00","comment":"设计模式练习","inviteCode":"","creatorId":1480,"antiCheating":false,"isJoined":false,"isPublic":true},{"examId":10,"examName":"软件过程测试-seecoder成员内测版","position":"荣老师的学生","skills":["Go","Python"],"difficulty":0,"startTime":"2021-11-02 20:00:00","endTime":"2021-11-03 20:00:00","comment":"软件过程要好好学","inviteCode":"","creatorId":1480,"antiCheating":false,"isJoined":false,"isPublic":true}]')
       this.examList.forEach((item) => {
         const startTime = item.startTime
         const endTime = item.endTime
@@ -87,6 +95,7 @@ export default {
           startTime: startTime,
           endTime: endTime
         })
+        item.location = 'https://eval.seec.seecoder.cn/exam/' + item.examId + '/before-exam'
       })
     })
   }