feat: CoursePage TestPage beta

package.json

@@ -7,7 +7,7 @@
     "build": "vue-cli-service build --mode production"
   },
   "dependencies": {
-    "@element-plus/icons": "0.0.11",
+    "@element-plus/icons-vue": "0.2.4",
     "axios": "^0.25.0",
     "babel-plugin-import": "^1.13.3",
     "core-js": "^3.6.5",

src/global/register-element.js

@@ -33,6 +33,7 @@ import {
   ElTag,
   ElTimeline,
   ElTimelineItem,
+  ElBacktop,
 } from "element-plus";
 
 // NOTE 使用到的组件列表，请确保 import 和 component 的一致性
@@ -71,6 +72,7 @@ const components = [
   ElTag,
   ElTimeline,
   ElTimelineItem,
+  ElBacktop,
 ];
 
 export default function (app) {

src/global/register-icon.js

@@ -1,4 +1,4 @@
-import { Avatar, Cherry, Key, Lock, Message, Phone, Plus ,Upload} from "@element-plus/icons";
+import { Avatar, Cherry, Key, Lock, Message, Phone, Plus ,Upload} from "@element-plus/icons-vue";
 
 const icons = [Phone, Lock, Plus, Avatar, Cherry, Message, Key, Upload];
 

src/views/CoursePage/CoursePage.vue

@@ -1,17 +1,79 @@
 <template>
   <GlobalHeader/>
-  <p style="text-align: center; font-weight: bolder; font-size: xxx-large">全部课程页(预计有大改动)</p>
-  <img alt="err" src="@/assets/coursePage.png" style="width: 100%">
+  <div id="course-page-body">
+    <el-tabs v-model="activeTab">
+      <el-tab-pane class="course-page-main" label="全部课程" name="first">
+        <CourseCard v-for="course in courses_show" :key="course.id" :courseVO="course"/>
+      </el-tab-pane>
+      <el-tab-pane v-if="courses_my.length!==0" class="course-page-main" label="我的课程" name="second">
+        <CourseCard v-for="course in courses_my" :key="course.id" :courseVO="course"/>
+      </el-tab-pane>
+      <el-tab-pane v-else class="course-page-main" label="我的课程" name="second" style="display: flex; flex-direction: column; justify-content: center;align-items: center;margin-top: 16vh">
+        <svg class="icon" height="128" viewBox="0 0 1024 1024" width="128" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M909.016 820.828H841a30 30 0 0 1 0-60h38.016a20 20 0 0 0 20-20V145.185a20 20 0 0 0-20-20H352a20 20 0 0 0-20 20v28h370.016a50 50 0 0 1 50 50v223.36a29.989 29.989 0 1 1-59.507 5.283h-0.493V253.185a20
+                20 0 0 0-20-20H145a20 20 0 0 0-20 20v625.643a20 20 0 0 0 20 20h337a30 30 0 0 1 0 60H115a50 50 0 0 1-50-50V223.185a50 50 0 0 1 50-50h157v-58a50 50 0 0 1 50-50h587.016a50 50 0 0 1 50 50v655.643a50 50 0 0 1-50 50z m-663.037-484H572.74a29.979 29.979 0 1 1 0
+                59.957H245.979a29.979 29.979 0 1 1 0-59.957z m0 290.043h74.912a29.979 29.979 0 0 1 29.979 29.978 29.979 29.979 0 0 1-29.979
+                29.979h-74.912A29.979 29.979 0 0 1 216 656.849a29.979 29.979 0 0 1 29.979-29.978zM216 511.807a29.979 29.979 0 0 1 29.979-29.979h140.935a29.979 29.979 0 0 1 29.979 29.979v0.042a29.979 29.979 0 0 1-29.979 29.979H245.979A29.979 29.979 0 0 1 216 511.849v-0.042z m163 177.521c0-107.419
+                 87.081-194.5 194.5-194.5S768 581.909 768 689.328a193.618 193.618 0 0 1-37.9 115.356l84.115 84.115a30 30 0 1 1-42.425 42.429l-84.3-84.3a193.6 193.6 0 0 1-113.99 36.9c-107.419 0-194.5-87.081-194.5-194.5z m194.5 134.5a134.5 134.5 0 1 0-134.5-134.5 134.5 134.5 0 0 0 134.5 134.5z"
+            fill="#bfbfbf"></path>
+        </svg>
+        <div>
+          暂无数据
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+  <GlobalFooter/>
 </template>
 
 <script>
 import GlobalHeader from "@/components/GlobalHeader";
+import GlobalFooter from "@/components/GlobalFooter";
+import CourseCard from "@/components/CourseCard";
+
 export default {
   name: "CoursePage",
-  components: { GlobalHeader }
+  components: { CourseCard, GlobalFooter, GlobalHeader },
+  data() {
+    return {
+      activeTab: "first",
+      courses_all: [],
+      courses_my: [],
+    };
+  },
+  computed: {
+    courses_show() {
+      return this.courses_all;
+    }
+  },
+
+  mounted() {
+    // await this.$apis.getAllCourses().then(res => {
+    //   this.courseList = res.data.data;
+    // });
+    this.courses_all = this.$apis.getAllCourses().data.data;
+    for (let i = 3 - this.courses_all.length % 3; i !== 0; i--) {
+      this.courses_all.push(this.courses_all[0]);
+    }
+    if (this.$store.state.user.token) {
+      this.courses_my = this.$apis.getStudentCourses({ "studentId": this.$store.state.user.id }).then(res => {
+        this.courses_my = res.data.data;
+      });
+    }
+  },
 };
 </script>
 
 <style scoped>
+#course-page-body {
+  padding: 20px 180px 80px 180px;
+  min-height: calc(100vh - 340px);
+}
 
+.course-page-main {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-gap: 20px 20px;
+}
 </style>

src/views/PortalPage/PortalPage.vue

@@ -1,5 +1,6 @@
 <template>
   <GlobalHeader/>
+  <el-backtop />
   <div id="portal-body">
 
     <InfoCard style="justify-self:center"/>

src/views/TestPage/TestPage.vue

@@ -1,17 +1,63 @@
 <template>
   <GlobalHeader/>
-  <p style="text-align: center; font-weight: bolder; font-size: xxx-large">全部测试页(预计有大改动)</p>
-  <img alt="err" src="@/assets/testPage.png" style="width: 100%">
+  <div id="test-page-body">
+    <el-tabs v-model="activeTab">
+      <el-tab-pane class="test-page-main" label="全部测试" name="first">
+        <EvalCard v-for="item in evalExamList" :key="item.id" :examVO="item"/>
+        <el-divider style="grid-column-start: 1; grid-column-end: 5"/>
+        <CoderCard v-for="item in coderExamList" :key="item.id" :coderVO="item"/>
+      </el-tab-pane>
+      <el-tab-pane class="test-page-main" label="我的测试" name="second">
+        <EvalCard v-for="item in evalExamList" :key="item.id" :examVO="item"/>
+        <el-divider style="grid-column-start: 1; grid-column-end: 5"/>
+        <CoderCard v-for="item in coderExamList" :key="item.id" :coderVO="item"/>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+  <GlobalFooter></GlobalFooter>
 </template>
 
 <script>
 import GlobalHeader from "@/components/GlobalHeader";
+import EvalCard from "@/components/EvalCard";
+import CoderCard from "@/components/CoderCard";
+import GlobalFooter from "@/components/GlobalFooter";
+
+
 export default {
   name: "TestPage",
-  components: { GlobalHeader }
+  components: { GlobalFooter, CoderCard, EvalCard, GlobalHeader },
+  data() {
+    return {
+      activeTab: "first",
+      evalExamList: [],
+      coderExamList: [],
+    };
+  },
+
+  mounted() {
+    // await this.$apis.getAllEvalExams().then(res => {
+    //   this.coderExamList = res.data.data["examVOList"];
+    // });
+    this.evalExamList = this.$apis.getAllEvalExams().data.data["examVOList"];
+
+    // await this.$apis.getAllCoderExams().then(res => {
+    //   this.coderExamList = res.data.data.res;
+    // });
+    this.coderExamList = this.$apis.getAllCoderExams().data.data["res"];
+  }
 };
 </script>
 
 <style scoped>
+#test-page-body {
+  padding: 20px 180px 80px 180px;
+  min-height: calc(100vh - 345px);
+}
 
+.test-page-main {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-gap: 20px 20px;
+}
 </style>

yarn.lock

@@ -923,7 +923,12 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
-"@element-plus/icons@0.0.11", "@element-plus/icons@^0.0.11":
+"@element-plus/icons-vue@0.2.4":
+  version "0.2.4"
+  resolved "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-0.2.4.tgz#dadcf72f0cea53dc83b7b7db80e1418716d7b02c"
+  integrity sha512-RsJNyL58rwxtsjeMy34o8txkL6UlME1stWsUlRpTac6UE9Bx9gdJvnDXbIKhOJqBLX17fBjmposdrn6VTqim2w==
+
+"@element-plus/icons@^0.0.11":
   version "0.0.11"
   resolved "https://registry.yarnpkg.com/@element-plus/icons/-/icons-0.0.11.tgz#9b187c002774548b911850d17fa5fc2f9a515f57"
   integrity sha512-iKQXSxXu131Ai+I9Ymtcof9WId7kaXvB1+WRfAfpQCW7UiAMYgdNDqb/u0hgTo2Yq3MwC4MWJnNuTBEpG8r7+A==