Code Inspect: PortalPage

src/components/EvalCard.vue

@@ -131,9 +131,7 @@ export default {
           } else {
             this.$router.push(nextURL);
           }
-        })
-          .catch(action => {
-          });
+        });
       }
     },
   }
@@ -142,6 +140,7 @@ export default {
 
 <style lang="scss" scoped>
 .eval {
+  min-height: 180px;
   border-radius: 8px;
   height: calc(100% - 14px);
   position: relative;

src/main.js

@@ -4,9 +4,10 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import api from "@/api";
-import { ElMessage } from "element-plus";
+import { ElMessage, ElLoading } from "element-plus";
 
 const app = createApp(App).use(store).use(router).use(globalComponentRegister);
+app.use(ElLoading);
 app.directive("title", {
   inserted: function (el) {
     document.title = el.dataset.title;

src/views/PortalPage/PortalPage.css

@@ -43,4 +43,10 @@
     display: grid;
     grid-template-columns: 1fr;
     min-width: calc(max(100%, 250px));
+}
+
+.portal-card-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-gap: 20px;
 }

src/views/PortalPage/PortalPage.vue

@@ -9,7 +9,7 @@
           <div class="portal-card-title-main">我的课程</div>
         </div>
         <el-divider class="portal-card-divider"/>
-        <div>
+        <div v-loading="myCourseLoading">
 
           <div v-if="!isLogin"
                :style="{height: (courseRowHeight - 63) + 'px', marginTop: (courseRowHeight / 2 - 100) + 'px'}"
@@ -21,7 +21,7 @@
             <div style="font-size: small; font-weight: bold; color: #666666">登录以查看</div>
           </div>
 
-          <div v-if="isLogin && isStudent && myCourseList!==null && myCourseList.length!==0"
+          <div v-if="isLogin && isStudent && myCourseList.length!==0"
                :style="{height: (courseRowHeight - 63) + 'px'}"
                class="portal-card-main">
             <div class="portal-my-card-main">
@@ -29,7 +29,7 @@
             </div>
           </div>
 
-          <div v-if="isLogin && isStudent && myCourseList!==null && myCourseList.length===0"
+          <div v-if="isLogin && isStudent && myCourseList.length===0"
                :style="{height: (courseRowHeight - 63) + 'px', marginTop: (courseRowHeight / 2 - 100) + 'px'}"
                class="portal-card-main" style="cursor: pointer"
                @click="this.$router.push('/course')">
@@ -56,14 +56,12 @@
       <el-card id="portal-course-card-main" :style="{height: courseRowHeight + 'px'}">
         <div class="portal-card-title">
           <div class="portal-card-title-main">精选课程</div>
-          <ElButton plain round type="primary" @click="toCourse">查看全部课程</ElButton>
+          <ElButton plain round type="primary" @click="this.$router.push('/course')">查看全部课程</ElButton>
         </div>
         <el-divider class="portal-card-divider"/>
-        <el-row justify="space-around" type="flex">
-          <el-col v-for="item in courseList.slice(0, cardRowLength)" :key="item.id" :lg="7" :md="11" :sm="11" :xs="11">
-            <CourseCard :course-v-o="item"/>
-          </el-col>
-        </el-row>
+        <div class="portal-card-content">
+          <CourseCard v-for="item in courseList" :key="item.id" :courseVO="item"/>
+        </div>
       </el-card>
     </div>
 
@@ -73,43 +71,44 @@
           <div class="portal-card-title-main">我的测试</div>
         </div>
         <el-divider class="portal-card-divider"/>
+        <div v-loading="myTestLoading">
+          <div v-if="!isLogin"
+               :style="{height: (testRowHeight - 63) + 'px', marginTop: (testRowHeight / 2 - 100) + 'px'}"
+               class="portal-card-main" style="cursor: pointer"
+               @click="this.$router.push('/auth')">
+            <el-icon :size="72" color="#bfbfbf">
+              <Lock/>
+            </el-icon>
+            <div style="font-size: small; font-weight: bold; color: #666666">登录以查看</div>
+          </div>
 
-        <div v-if="!isLogin"
-             :style="{height: (testRowHeight - 63) + 'px', marginTop: (testRowHeight / 2 - 100) + 'px'}"
-             class="portal-card-main" style="cursor: pointer"
-             @click="this.$router.push('/auth')">
-          <el-icon :size="72" color="#bfbfbf">
-            <Lock/>
-          </el-icon>
-          <div style="font-size: small; font-weight: bold; color: #666666">登录以查看</div>
-        </div>
-
-        <div v-if="isLogin && isStudent && myTestList!==null && myTestList.length!==0"
-             :style="{height: (testRowHeight - 63) + 'px'}"
-             class="portal-card-main">
-          <div class="portal-my-card-main">
-            <MyTestCard v-for="test in myTestList" :key="test.id" :testVO="test"/>
+          <div v-if="isLogin && isStudent && myTestList!==null && myTestList.length!==0"
+               :style="{height: (testRowHeight - 63) + 'px'}"
+               class="portal-card-main">
+            <div class="portal-my-card-main">
+              <MyTestCard v-for="test in myTestList" :key="test.id" :testVO="test"/>
+            </div>
           </div>
-        </div>
 
-        <div v-if="isLogin && isStudent && myTestList!==null && myTestList.length===0"
-             :style="{height: (testRowHeight - 63) + 'px', marginTop: (testRowHeight / 2 - 100) + 'px'}"
-             class="portal-card-main" style="cursor: pointer"
-             @click="this.$router.push('/test')">
-          <el-icon :size="72" color="#bfbfbf">
-            <ShoppingCart/>
-          </el-icon>
-          <div style="font-size: small; font-weight: bold; color: #666666">去参加测试</div>
-        </div>
+          <div v-if="isLogin && isStudent && myTestList!==null && myTestList.length===0"
+               :style="{height: (testRowHeight - 63) + 'px', marginTop: (testRowHeight / 2 - 100) + 'px'}"
+               class="portal-card-main" style="cursor: pointer"
+               @click="this.$router.push('/test')">
+            <el-icon :size="72" color="#bfbfbf">
+              <ShoppingCart/>
+            </el-icon>
+            <div style="font-size: small; font-weight: bold; color: #666666">去参加测试</div>
+          </div>
 
-        <div v-show="isLogin && isTeacher"
-             :style="{height: (testRowHeight - 63) + 'px', marginTop: (testRowHeight / 2 - 100) + 'px'}"
-             class="portal-card-main" style="cursor: pointer"
-             @click="this.$router.push('/manage')">
-          <el-icon :size="72" color="#bfbfbf">
-            <SetUp/>
-          </el-icon>
-          <div style="font-size: small; font-weight: bold; color: #666666">去管理测试</div>
+          <div v-show="isLogin && isTeacher"
+               :style="{height: (testRowHeight - 63) + 'px', marginTop: (testRowHeight / 2 - 100) + 'px'}"
+               class="portal-card-main" style="cursor: pointer"
+               @click="this.$router.push('/manage')">
+            <el-icon :size="72" color="#bfbfbf">
+              <SetUp/>
+            </el-icon>
+            <div style="font-size: small; font-weight: bold; color: #666666">去管理测试</div>
+          </div>
         </div>
 
       </el-card>
@@ -119,25 +118,19 @@
       <el-card id="portal-test-card-main" ref="portalTestCardBodyMain">
         <div class="portal-card-title">
           <div class="portal-card-title-main">智能测试</div>
-          <ElButton plain round type="primary" @click="toTest">查看全部测试</ElButton>
+          <ElButton plain round type="primary" @click="this.$router.push('/test')">查看全部测试</ElButton>
         </div>
         <el-divider class="portal-card-divider"/>
         <el-tabs v-model="activeTestPaneName" @tab-click="changeTestPane">
           <el-tab-pane label="评测题" name="eval">
-            <el-row justify="space-around">
-              <el-col v-for="item in evalExamList.slice(0, cardRowLength)" :key="item.id" :lg="7" :md="11" :sm="11"
-                      :xs="11">
-                <EvalCard :examVO="item"></EvalCard>
-              </el-col>
-            </el-row>
+            <div class="portal-card-content">
+              <EvalCard v-for="item in evalExamList" :key="item.id" :examVO="item"></EvalCard>
+            </div>
           </el-tab-pane>
           <el-tab-pane label="代码题" name="coder">
-            <el-row justify="space-around">
-              <el-col v-for="item in coderExamList.slice(0, cardRowLength)" :key="item.id" :lg="7" :md="11" :sm="11"
-                      :xs="11">
-                <CoderCard :coder-v-o="item"></CoderCard>
-              </el-col>
-            </el-row>
+            <div class="portal-card-content">
+              <CoderCard v-for="item in coderExamList" :key="item.id" :coderVO="item"/>
+            </div>
           </el-tab-pane>
         </el-tabs>
       </el-card>
@@ -171,7 +164,6 @@ export default {
   },
   data() {
     return {
-      cardRowLength: 3,
       activeTestPaneName: "eval",
       evalExamList: [],
       courseList: [],
@@ -181,6 +173,8 @@ export default {
       myCoderExamList: [],
       courseRowHeight: 360,
       testRowHeight: 300,
+      myCourseLoading: true,
+      myTestLoading: true,
     };
   },
   computed: {
@@ -194,7 +188,11 @@ export default {
       return this.$store.getters.isStudent;
     },
     myTestList() {
-      return [].concat(this.myEvalExamList).concat(this.myCoderExamList);
+      if (!this.myEvalExamList || !this.myCoderExamList) {
+        return [];
+      } else {
+        return [].concat(this.myEvalExamList).concat(this.myCoderExamList);
+      }
     },
   },
 
@@ -210,37 +208,25 @@ export default {
       })();
     };
 
-    this.$apis.getExampleCourses().then(res => {
-      this.courseList = res.data.data;
-      // while (this.courseList.length < 6) {
-      //   this.courseList.push({});
-      // }
-    });
-    this.$apis.getExampleEvalExams().then(res => {
-      this.evalExamList = res.data.data;
-      // while (this.evalExamList.length < 6) {
-      //   this.evalExamList.push({});
-      // }
-    });
-    // this.$apis.getAllCoderExams().then(res => {
+    this.courseList = (await this.$apis.getExampleCourses()).data.data;
+    this.evalExamList = (await this.$apis.getExampleEvalExams()).data.data;
     // todo ERROR: 缺少 token 就无法请求
-    //   this.coderExamList = res.data.data.res;
-    //   while (this.coderExamList.length < 6) {
-    //     this.coderExamList.push({});
-    //   }
-    // });
+    // this.coderExamList = (await this.$apis.getAllCoderExams()).data.data;
 
     if (this.isLogin && this.isStudent) {
       this.$apis.getStudentCourses(this.$store.state.user.id).then(res => {
         this.myCourseList = res.data.data;
+        this.myCourseLoading = false;
         that.handleResize();
       });
       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();
       });
     }
@@ -252,25 +238,11 @@ export default {
 
   //其他函数
   methods: {
-    toTest() {
-      this.$router.push("/test");
-    },
-    toCourse() {
-      this.$router.push("/course");
-    },
     handleResize() {
-      // todo 优化
+      // todo @DQJ 可能还得优化
       let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
       if (scrollTop > 100) {
         this.courseRowHeight = 640;
-        if (document.body.clientWidth >= 1200) {
-          this.cardRowLength = 6;
-        }
-      }
-      if (document.body.clientWidth >= 992 && document.body.clientWidth < 1200) {
-        this.cardRowLength = 4;
-      } else if (document.body.clientWidth < 992) {
-        this.cardRowLength = 2;
       }
       this.testRowHeight = Math.max(this.$refs.portalTestCardBodyMain.$el.clientHeight, 300);
     },

src/views/TaskPage/TaskPage.vue

@@ -57,7 +57,7 @@ export default {
       }
     },
     allTaskList() {
-      if (!this.myEvalExamList.length || !this.myCoderExamList) {
+      if (!this.myEvalExamList || !this.myCoderExamList) {
         return [];
       } else {
         return [].concat(this.myEvalExamList).concat(this.myCoderExamList);