feat: TaskPage beta

src/views/PortalPage/PortalPage.vue

@@ -9,7 +9,7 @@
           <div class="portal-card-title-main">我的课程</div>
         </div>
         <el-divider class="portal-card-divider"/>
-        <div v-loading="myCourseLoading">
+        <div>
 
           <div v-if="!isLogin"
                :style="{height: (courseRowHeight - 63) + 'px', marginTop: (courseRowHeight / 2 - 100) + 'px'}"
@@ -71,7 +71,7 @@
           <div class="portal-card-title-main">我的测试</div>
         </div>
         <el-divider class="portal-card-divider"/>
-        <div v-loading="myTestLoading">
+        <div>
           <div v-if="!isLogin"
                :style="{height: (testRowHeight - 63) + 'px', marginTop: (testRowHeight / 2 - 100) + 'px'}"
                class="portal-card-main" style="cursor: pointer"
@@ -144,7 +144,7 @@ import CarouselCard from "@/views/PortalPage/components/CarouselCard";
 import CourseCard from "@/components/CourseCard";
 import MyCourseCard from "@/views/PortalPage/components/MyCourseCard";
 import MyTestCard from "@/views/PortalPage/components/MyTestCard";
-import {Lock, SetUp, ShoppingCart} from "@element-plus/icons-vue";
+import { Lock, SetUp, ShoppingCart } from "@element-plus/icons-vue";
 import TestCard from "@/components/TestCard";
 
 export default {
@@ -171,8 +171,6 @@ export default {
       myCoderExamList: [],
       courseRowHeight: 360,
       testRowHeight: 300,
-      myCourseLoading: true,
-      myTestLoading: true,
     };
   },
   computed: {
@@ -208,24 +206,21 @@ export default {
 
     this.courseList = (await this.$apis.getExampleCourses()).data.data;
     this.evalExamList = (await this.$apis.getExampleEvalExams()).data.data;
-    this.coderExamList = (await this.$apis.getExampleCoderExams({})).data.data.res;
-    console.log(this.evalExamList);
-    console.log(this.coderExamList);
+    this.coderExamList = (await this.$apis.getExampleCoderExams({})).data.data.res.filter(i => {
+      return this.state(i) === "RUNNING";
+    });
 
     if (this.isLogin && this.isStudent) {
       this.$apis.getStudentCourses().then(res => {
         this.myCourseList = res.data.data;
-        this.myCourseLoading = false;
         that.handleResize();
       });
-      this.$apis.getStudentEvalExams({state: 0}).then(res => {
+      this.$apis.getStudentEvalExams({ state: 0 }).then(res => {
         this.myEvalExamList = res.data.data.examVOList;
-        this.myTestLoading = false;
         that.handleResize();
       });
       this.$apis.getStudentCoderExams({}).then(res => {
         this.myCoderExamList = res.data.data.res;
-        this.myTestLoading = false;
         that.handleResize();
       });
     }
@@ -250,7 +245,28 @@ export default {
       this.$nextTick(() => {
         that.handleResize();
       });
-    }
+    },
+    state(testVO) {
+      if (testVO.examId) {
+        if (new Date(testVO.endTime) < new Date()) {
+          return "FINISHED";
+        } else if (new Date(testVO.startTime) > new Date()) {
+          return "NOT_STARTED";
+        } else {
+          return "RUNNING";
+        }
+      } else {
+        if (testVO.status === "CLOSED") {
+          return "CLOSED";
+        } else if (testVO.startAt * 1000 > new Date()) {
+          return "NOT_STARTED";
+        } else if (testVO.endAt * 1000 < new Date()) {
+          return "FINISHED";
+        } else {
+          return "RUNNING";
+        }
+      }
+    },
   }
 };
 </script>

src/views/TaskPage/TaskPage.vue

@@ -7,11 +7,15 @@
             即将到期
           </span>
       </template>
-      <div id="task-page-expiring-main" ref="expiringTask">
-        <EvalCard v-for="item in myEvalExamList" :key="item.id" :examVO="item" style="height: 150px; margin: 0 10px 10px 10px"/>
-        <CoderCard v-for="item in myCoderExamList" :key="item.id" :coderVO="item" style="height: 150px; margin: 0 10px 10px 10px"/>
+      <div id="task-page-expiring-main">
+        <TestCard v-for="item in expiringTaskList_show" :key="item.id" :testVO="item"/>
       </div>
-      <el-pagination :total="50" layout="prev, pager, next" style="margin: 0 auto 0 40%"/>
+      <el-pagination
+        :page-size="4"
+        :total="expiringTaskList.length"
+        @current-change="handleCurrentChange"
+        layout="total, prev, pager, next"
+        style="width: 200px; margin: 0 auto 0 auto"/>
     </el-card>
 
     <el-card>
@@ -21,54 +25,93 @@
           </span>
       </template>
       <div id="task-page-all-task-main">
-        {{ allTaskList }}
+        <el-tabs v-model="activeTaskPaneName">
+          <el-tab-pane label="评测" name="eval">
+            <div class="task-content">
+              <TestCard v-for="item in myEvalExamList" :key="item.id" :testVO="item"/>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="代码" name="coder">
+            <div class="task-content">
+              <TestCard v-for="item in myCoderExamList" :key="item.id" :testVO="item"/>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
       </div>
     </el-card>
 
   </div>
-  <GlobalFooter/>
 </template>
 
 <script>
-import GlobalFooter from "@/components/GlobalFooter";
-import EvalCard from "@/components/EvalCard";
-import CoderCard from "@/components/CoderCard";
+import TestCard from "@/components/TestCard";
 
 export default {
   name: "TaskPage",
-  // eslint-disable-next-line vue/no-unused-components
-  components: { CoderCard, EvalCard, GlobalFooter },
+  components: { TestCard },
   data() {
     return {
       myEvalExamList: [],
       myCoderExamList: [],
+      expiringTask_currentPage: 1,
+      activeTaskPaneName: "eval",
     };
   },
   computed: {
-    expiringTaskList() {
-      if (!this.myEvalExamList.length || !this.myCoderExamList) {
-        return [];
-      } else {
-        return [].concat(this.myEvalExamList).concat(this.myCoderExamList).sort((a, b) => {
-          let a_time = a.endAt * 1000 || new Date(a.endTime).getTime();
-          let b_time = b.endAt * 1000 || new Date(b.endTime).getTime();
-          return a_time - b_time;
-        }).slice(0,6);
-      }
+    expiringTaskList_show() {
+      return this.expiringTaskList.slice((this.expiringTask_currentPage - 1) * 4, this.expiringTask_currentPage * 4);
     },
-    allTaskList() {
+    expiringTaskList() {
       if (!this.myEvalExamList || !this.myCoderExamList) {
         return [];
       } else {
-        return [].concat(this.myEvalExamList).concat(this.myCoderExamList);
+        return [].concat(this.myEvalExamList).concat(this.myCoderExamList)
+          .sort((a, b) => {
+            let a_time = a.endAt * 1000 || new Date(a.endTime).getTime();
+            let b_time = b.endAt * 1000 || new Date(b.endTime).getTime();
+            return a_time - b_time;
+          })
+          .filter(i => {
+            return this.state(i) === "RUNNING";
+          });
       }
     }
   },
 
   async mounted() {
     this.myEvalExamList = (await this.$apis.getAllEvalExams()).data.data["examVOList"];
-    this.myCoderExamList = (await this.$apis.getAllCoderExams()).data.data["res"];
-  }
+
+    this.$apis.getStudentCoderExams({}).then(res => {
+      this.myCoderExamList = res.data.data.res;
+    });
+  },
+
+  methods: {
+    handleCurrentChange(index) {
+      this.expiringTask_currentPage = index;
+    },
+    state(testVO) {
+      if (testVO.examId) {
+        if (new Date(testVO.endTime) < new Date()) {
+          return "FINISHED";
+        } else if (new Date(testVO.startTime) > new Date()) {
+          return "NOT_STARTED";
+        } else {
+          return "RUNNING";
+        }
+      } else {
+        if (testVO.status === "CLOSED") {
+          return "CLOSED";
+        } else if (testVO.startAt * 1000 > new Date()) {
+          return "NOT_STARTED";
+        } else if (testVO.endAt * 1000 < new Date()) {
+          return "FINISHED";
+        } else {
+          return "RUNNING";
+        }
+      }
+    },
+  },
 };
 </script>
 
@@ -80,4 +123,17 @@ export default {
   grid-gap: 20px;
   margin: 40px 15vw 80px 15vw;
 }
+
+#task-page-expiring-main {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-gap: 10px;
+}
+
+.task-content {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 10px;
+}
 </style>