feat:attach props to CourseCard in ManagePage

src/components/CourseCard.vue

@@ -4,26 +4,26 @@
       <img :src="imageUrl" alt="">
     </div>
 
-      <el-row>
-        <el-col :span="16" class="name">{{ courseVO.name }}</el-col>
-        <el-col :span="8" class="status">
-          <el-tag v-if="state==='NOT_STARTED'" size="small" type="info">未开始</el-tag>
-          <el-tag v-else-if="state==='RUNNING'" size="small">进行中</el-tag>
-          <el-tag v-else-if="state==='OVER'" size="small" type="danger">已结束</el-tag>
-        </el-col>
-      </el-row>
-      <el-row class="teacher">
-        教师: {{ courseVO.teacher.name }}
-      </el-row>
-      <el-row class="semester">
+    <el-row>
+      <el-col :span="16" class="name">{{ courseVO.name }}</el-col>
+      <el-col :span="8" class="status">
+        <el-tag v-if="state==='NOT_STARTED'" size="small" type="info">未开始</el-tag>
+        <el-tag v-else-if="state==='RUNNING'" size="small">进行中</el-tag>
+        <el-tag v-else-if="state==='OVER'" size="small" type="danger">已结束</el-tag>
+      </el-col>
+    </el-row>
+    <el-row class="teacher">
+      教师: {{ courseVO.teacher.name }}
+    </el-row>
+    <el-row class="semester">
 
-      </el-row>
-      <el-row class="time">
-        {{ courseVO.semester }} ： {{ timeToCHN(courseVO.startTime) }} 至 {{ timeToCHN(courseVO.endTime) }}
-      </el-row>
-      <el-row class="description">
-        {{ courseVO.description }}
-      </el-row>
+    </el-row>
+    <el-row class="time">
+      {{ courseVO.semester }} ： {{ timeToCHN(courseVO.startTime) }} 至 {{ timeToCHN(courseVO.endTime) }}
+    </el-row>
+    <el-row class="description">
+      {{ courseVO.description }}
+    </el-row>
   </el-card>
 </template>
 
@@ -57,7 +57,7 @@ export default {
       const hours = date.getHours() > 9 ? date.getHours() : "0" + date.getHours();
       const minutes = date.getMinutes() > 9 ? date.getMinutes() : "0" + date.getMinutes();
       return (date.getMonth() + 1) + "月" + date.getDate() + "日 " +
-        hours + ":" + minutes;
+          hours + ":" + minutes;
     },
   },
 };

src/router/index.js

@@ -3,7 +3,6 @@ import store from "@/store";
 import { ElMessage } from "element-plus";
 import PortalPage from "@/views/PortalPage/PortalPage";
 
-
 const routes = [
   {
     path: "/",
@@ -60,18 +59,18 @@ const routes = [
   {
     path: "/problem/:id",
     name: "ProblemDetail",
-    component: () => import("../views/ProblemPage/ProblemDetail.vue")
+    component: () => import("../views/ProblemPage/ProblemDetail.vue"),
   },
   {
     path: "/problem",
     name: "Problem",
-    component: () => import("../views/ProblemPage/ProblemPage.vue")
+    component: () => import("../views/ProblemPage/ProblemPage.vue"),
   },
   {
     path: "/problem/create",
     name: "ProblemUpload",
-    component: () => import("../views/ProblemPage/ProblemUpload.vue")
-  }
+    component: () => import("../views/ProblemPage/ProblemUpload.vue"),
+  },
 ];
 
 const router = createRouter({
@@ -79,20 +78,20 @@ const router = createRouter({
   routes,
 });
 
-router.beforeEach((to, from, next) => {
-  if (to.name === "Portal" || to.name === "Auth") {
-    next();
-  } else if (!store.state.user.token) {
-    ElMessage({
-      showClose: true,
-      message: "请先登录",
-      type: "warning",
-      duration: 1000,
-    });
-    next({ name: "Auth" });
-  } else {
-    next();
-  }
-});
+// router.beforeEach((to, from, next) => {
+//   if (to.name === "Portal" || to.name === "Auth") {
+//     next();
+//   } else if (!store.state.user.token) {
+//     ElMessage({
+//       showClose: true,
+//       message: "请先登录",
+//       type: "warning",
+//       duration: 1000,
+//     });
+//     next({ name: "Auth" });
+//   } else {
+//     next();
+//   }
+// });
 
 export default router;

src/views/ManagePage/ManagePage.vue

@@ -7,10 +7,10 @@
         <div>
           <el-select v-model="value" class="m-2" placeholder="Select">
             <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
             >
             </el-option>
           </el-select>
@@ -18,8 +18,8 @@
         </div>
       </div>
       <div class="courseList">
-        <div v-for="(index) in 8" :key="index" class="cItem">
-          <CourseItem></CourseItem>
+        <div v-for="(item,index) in courseListExample" :key="index" class="cItem">
+          <CourseCard :courseVO="item"></CourseCard>
         </div>
       </div>
     </div>
@@ -50,8 +50,8 @@
         <el-input v-model="form.description" placeholder="请输入课程简介"></el-input>
       </el-form-item>
       <el-form-item label="课程时间">
-        <el-date-picker v-model="form.courseTime" type="datetimerange" range-separator="至" start-placeholder="开始时间"
-                        end-placeholder="结束时间">
+        <el-date-picker v-model="form.courseTime" end-placeholder="结束时间" range-separator="至" start-placeholder="开始时间"
+                        type="datetimerange">
         </el-date-picker>
       </el-form-item>
       <el-form-item label="课程邀请码">
@@ -80,12 +80,12 @@
 
 <script setup>
 import GlobalHeader from "@/components/GlobalHeader";
-import CourseItem from "@/components/CourseCard";
+import CourseCard from "@/components/CourseCard";
 import {reactive, ref} from "vue";
-import { getCurrentInstance } from "vue";
-import { ElMessage } from "element-plus";
+import {getCurrentInstance} from "vue";
+import {ElMessage} from "element-plus";
 
-const _this= getCurrentInstance().appContext.config.globalProperties;
+const _this = getCurrentInstance().appContext.config.globalProperties;
 
 const dialogVisible = ref(false);
 const dialogTitle = ref("新增课程");
@@ -107,6 +107,125 @@ const form = reactive({
   imageUrl: null,
 });
 
+const courseListExample = [
+  {
+    "id": 37,
+    "name": "2022-2",
+    "teacher": {
+      "id": 3117,
+      "phone": "13382405535",
+      "username": "PortalTestTeacher",
+      "name": "PortalTestTeacher",
+      "email": "m15256072859@163.com",
+      "photo": null,
+      "role": "TEACHER",
+      "signature": "无",
+      "createdTime": "2022-02-21T13:21:26.171+08:00",
+      "valid": true
+    },
+    "semester": "2022春",
+    "imageUrl": null,
+    "description": "minim eu sit Lorem",
+    "startTime": "2022-02-28T11:08:07.608+08:00",
+    "endTime": "2022-02-28T11:08:07.608+08:00",
+    "invitationCode": "3117-4",
+    "moocUrl": null,
+    "evalId": null,
+    "coderId": 12,
+    "helperId": null,
+    "createdTime": "2022-02-20T11:54:34.084+08:00",
+    "price": 0,
+    "courseState": "NORMAL"
+  },
+  {
+    "id": 42,
+    "name": "redrew",
+    "teacher": {
+      "id": 3117,
+      "phone": "13382405535",
+      "username": "PortalTestTeacher",
+      "name": "PortalTestTeacher",
+      "email": "m15256072859@163.com",
+      "photo": null,
+      "role": "TEACHER",
+      "signature": "无",
+      "createdTime": "2022-02-21T13:21:26.171+08:00",
+      "valid": true
+    },
+    "semester": "2023春",
+    "imageUrl": null,
+    "description": "redrew",
+    "startTime": "2022-02-28T16:52:27.67+08:00",
+    "endTime": "2022-02-28T16:52:27.67+08:00",
+    "invitationCode": "fd sfs",
+    "moocUrl": "",
+    "evalId": null,
+    "coderId": 17,
+    "helperId": null,
+    "createdTime": "2022-02-28T16:52:06.235+08:00",
+    "price": 0,
+    "courseState": "NORMAL"
+  },
+  {
+    "id": 44,
+    "name": "rewrite",
+    "teacher": {
+      "id": 3117,
+      "phone": "13382405535",
+      "username": "PortalTestTeacher",
+      "name": "PortalTestTeacher",
+      "email": "m15256072859@163.com",
+      "photo": null,
+      "role": "TEACHER",
+      "signature": "无",
+      "createdTime": "2022-02-21T13:21:26.171+08:00",
+      "valid": true
+    },
+    "semester": "2022春",
+    "imageUrl": null,
+    "description": "rewriter",
+    "startTime": "2022-02-28T21:46:24.307+08:00",
+    "endTime": "2022-02-28T21:46:24.307+08:00",
+    "invitationCode": "rewriterule",
+    "moocUrl": null,
+    "evalId": null,
+    "coderId": 19,
+    "helperId": null,
+    "createdTime": "2022-02-28T21:46:24.008+08:00",
+    "price": 0,
+    "courseState": "NORMAL"
+  },
+  {
+    "id": 3,
+    "name": "提象何角众交",
+    "teacher": {
+      "id": 1481,
+      "phone": "17301585267",
+      "username": "seecoder",
+      "name": "root",
+      "email": "seecoder@163.com",
+      "photo": null,
+      "role": "ADMIN",
+      "signature": "无",
+      "createdTime": "2021-08-26T14:24:37.859+08:00",
+      "valid": true
+    },
+    "semester": "2022春",
+    "imageUrl": "https://lain.bgm.tv/pic/cover/l/60/4d/325585_HHZpF.jpg",
+    "description": "minim eu sit Lorem",
+    "startTime": "2022-02-24T10:24:18.129+08:00",
+    "endTime": "2022-02-24T10:24:18.129+08:00",
+    "invitationCode": "15",
+    "moocUrl": null,
+    "evalId": null,
+    "coderId": null,
+    "helperId": null,
+    "createdTime": "2022-02-20T11:54:34.084+08:00",
+    "price": 0,
+    "courseState": "NORMAL"
+  }
+];
+
 const handleFormConfirm = async () => {
   checkForm();
   const res = await _this.$apis.createCourse({
@@ -125,12 +244,12 @@ const handleFormConfirm = async () => {
     price: form.price,
   });
   console.log(res);
-  if(res.code === 0){
+  if (res.code === 0) {
     ElMessage({
       message: "新建课程成功！",
       type: "success",
     });
-  }else{
+  } else {
     ElMessage({
       message: res.data.message,
       type: "error",
@@ -138,6 +257,10 @@ const handleFormConfirm = async () => {
   }
 };
 
+
+const value = ref("");
+const options = ref("");
+
 const handleFormCancel = function () {
   console.log(form);
 };
@@ -146,7 +269,8 @@ const checkForm = function () {
   console.log("check form");
 };
 
-const clearForm = function(){};
+const clearForm = function () {
+};
 
 </script>