学习路径推荐

src/api/configuration.ts

@@ -64,3 +64,8 @@ export const getCourseListApi = (params: CourseListParams) => {
         params,
     })
 }
+
+// 根据id获取课程详情
+export const getCourseDetailApi = (id: string) => {
+    return request.get(`/api/coursesteacher/${id}`)
+}

src/store/module/learnPath.ts

@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue';
+import { getCourseDetailApi } from '@/api/configuration';
+
+
+
+const useLearnPathStore = defineStore('learnPath', () => {
+    let item = sessionStorage.getItem('learnPath:itemData')
+    let course = sessionStorage.getItem('learnPath:courseData')
+    if (item) item = JSON.parse(item)
+    if (course) course = JSON.parse(course)
+    const itemData = ref<Record<string, any>>(item as {} || {})
+    const courseData = ref<Record<string, any>>(course as {} || {})
+    function setCourseData(item: any) {
+        courseData.value = item
+        sessionStorage.setItem('learnPath:itemData', JSON.stringify(item))
+        getCourseDetailApi(item.id).then(res => {
+            courseData.value = res.data
+            sessionStorage.setItem('learnPath:courseData', JSON.stringify(res.data))
+        })
+    }
+    return { setCourseData, itemData, courseData }
+})
+export default useLearnPathStore

src/views/professionalListProfile/index.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import useLearnPathStore from '@/store/module/learnPath';
 import { userGetInfoService, getCourseListApi } from '@/api/configuration';
 import useUserStore from '@/store/module/user';
 const userStore = useUserStore()
-
+const $router = useRouter()
+const learnPathStore = useLearnPathStore()
 function paginationChange(currentPage: number, pageSize: number) {
     params.value.pageNo = currentPage
     params.value.pageSize = pageSize
@@ -68,6 +71,11 @@ const onGetCourseObject = async (id: any) => {
     skip(`http://localhost:5173/#/curriculumCenter/courseDetails?id=${id}`)
 
 }
+
+function toPath(item: any) {
+    $router.push('/roadbedRecommendation?isCourse=true')
+    learnPathStore.setCourseData(item)
+}
 </script>
 
 <template>
@@ -111,7 +119,7 @@ const onGetCourseObject = async (id: any) => {
                                         <el-button round plain @click="onGetCourseObject(item.id)">
                                             详情
                                         </el-button>
-                                        <el-button round plain @click="$router.push('/roadbedRecommendation')">
+                                        <el-button round plain @click="toPath(item)">
                                             路径规划
                                         </el-button>
                                     </div>

src/views/roadbedRecommendation/index.vue

@@ -2,25 +2,11 @@
   <div class="path-title">
     <div class="title">前端课程学习路径推荐</div>
     <div class="setting">
-      <el-select
-        v-model="courseName"
-        placeholder="请选择课程"
-        size="large"
-        style="width: 200px"
-      >
-        <el-option
-          v-for="item in options"
-          :key="item.id"
-          :label="item.label"
-          :value="item.id"
-        />
+      <el-select v-model="courseName" placeholder="请选择课程" size="large" style="width: 200px">
+        <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id" />
       </el-select>
       <el-button type="primary" style="margin-left: 20px">切换</el-button>
-      <el-button
-        type="primary"
-        style="margin-left: 20px"
-        @click="Router.push('/')"
-      >
+      <el-button type="primary" style="margin-left: 20px" @click="Router.push('/')">
         返回课程首页
       </el-button>
     </div>
@@ -37,12 +23,7 @@
         <el-table-column prop="content" label="学习路径">
           <template v-slot="{ row }">
             <div>
-              <el-tag
-                style="margin-right: 10px"
-                type="primary"
-                v-for="(item, index) in row.content"
-                :key="index"
-              >
+              <el-tag style="margin-right: 10px" type="primary" v-for="(item, index) in row.content" :key="index">
                 {{ item }}
               </el-tag>
             </div>
@@ -52,20 +33,31 @@
         <el-table-column prop="hours" label="学时" width="100px" />
       </el-table>
       <div class="path-description">
-    前端课程主要分为四个分支，每个分支包含很多知识点，其中分为三个阶段在每个阶段有不同的知识点，在学习后继知识点需要学习前置知识点
-  </div>
+        前端课程主要分为四个分支，每个分支包含很多知识点，其中分为三个阶段在每个阶段有不同的知识点，在学习后继知识点需要学习前置知识点
+      </div>
+    </el-card>
+    <el-card v-if="$route.query.isCourse === 'true'" style="margin-top: 20px;">
+      <h1 style="text-align: center;font-size: 20px;font-weight: bolder;">相关信息</h1>
+      <div style="color: #ccc;">{{ learnPathStore.courseData.name }}</div>
+      <div style="font-size: 16px;line-height: 1.5;">{{ learnPathStore.courseData.description }}</div>
+    </el-card>
+    <el-card v-else style="margin-top: 20px;" >
+      <h1 style="text-align: center;font-size: 20px;font-weight: bolder;">最新的课程</h1>
     </el-card>
-    
+
   </div>
- 
+
 </template>
 
 <script lang="ts" setup>
+import useLearnPathStore from '@/store/module/learnPath';
+const learnPathStore = useLearnPathStore()
 import { ref } from 'vue'
 import mountNode from './components/mountNode.vue'
 import { useRouter } from 'vue-router'
 const Router = useRouter()
 const courseName = ref('')
+
 const options = [
   {
     id: 1,
@@ -107,6 +99,7 @@ const tableData = [
   height: 600px;
   background-color: #f5f6fd;
 }
+
 .path-title {
   position: relative;
   width: 100%;
@@ -114,12 +107,14 @@ const tableData = [
   //   background-color: skyblue;
   display: flex;
   justify-content: center;
+
   .title {
     font-size: 18px;
     height: 100%;
     line-height: 50px;
     font-weight: 600;
   }
+
   .setting {
     position: absolute;
     left: 50%;
@@ -130,10 +125,12 @@ const tableData = [
     align-items: center;
   }
 }
+
 .statistics {
   width: 100%;
   margin-top: 50px;
   padding: 0 30px 30px 30px;
+
   .title {
     font-size: 32px;
     font-weight: 600;
@@ -141,9 +138,10 @@ const tableData = [
     // margin: 30px 0;
   }
 }
-.path-description{
-    // padding: 20px 30px;
-    margin: 30px 0;
-    font-size: 14px;
+
+.path-description {
+  // padding: 20px 30px;
+  margin: 30px 0;
+  font-size: 14px;
 }
 </style>