```

feat: 更新导航菜单路由和API接口

- 修改App.vue中的学习教程系统路由从/my-learning到/learning-system
- 更新course.js API接口为新的请求格式并移除未使用的方法
- 添加学习系统相关的国际化词条
- 在WorkflowAdd.vue中使用国际化暴米币文本
- 修复pinia store中错误的API导入路径
- 添加学习系统路由配置
- 新增pt10样式类
```

src/App.vue

@@ -9,7 +9,7 @@
             <el-menu-item index="1" @click="$router.push('/')">AI{{ $t('common.gongzuoliu') }}</el-menu-item>
             <!-- <el-menu-item index="2" @click="$router.push('/my-learning')">工作流交易</el-menu-item> -->
             <el-menu-item index="2" @click="goMyLearning">{{ $t('common.gongzuoliu_trade') }}</el-menu-item>
-            <el-menu-item index="3" @click="$router.push('/my-learning')">学习教程系统</el-menu-item>
+            <el-menu-item index="3" @click="$router.push('/learning-system')">{{ $t('route.learning_system') }}</el-menu-item>
             <el-menu-item index="4" @click="$router.push('/my-learning')">学习笔记</el-menu-item>
             <el-menu-item index="5" @click="$router.push('/my-learning')">米币商城</el-menu-item>
           </el-menu>

src/api/course.js

@@ -1,25 +1,11 @@
+import { id } from 'element-plus/es/locales.mjs'
 import request from './request.js'
 
-// 获取课程列表
-export function getCourseList() {
-  return request({
-    url: '/courses',
-    method: 'get'
-  })
+// 课程列表
+export function getCourseList(data = {}) {
+  return request.get('/course/list',data)
 }
-
-// 获取课程详情
-export function getCourseDetail(id) {
-  return request({
-    url: `/courses/${id}`,
-    method: 'get'
-  })
-}
-
-// 获取课程章节
-export function getCourseChapters(id) {
-  return request({
-    url: `/courses/${id}/chapters`,
-    method: 'get'
-  })
+// 课程详情
+export function getCourseDetail(data = {}) {
+  return request.get('/course/'+data.id)
 }

src/api/courseDemo.js

@@ -0,0 +1,25 @@
+import request from './request.js'
+
+// 获取课程列表
+export function getCourseList() {
+  return request({
+    url: '/courses',
+    method: 'get'
+  })
+}
+
+// 获取课程详情
+export function getCourseDetail(id) {
+  return request({
+    url: `/courses/${id}`,
+    method: 'get'
+  })
+}
+
+// 获取课程章节
+export function getCourseChapters(id) {
+  return request({
+    url: `/courses/${id}/chapters`,
+    method: 'get'
+  })
+}

src/locales/en.js

@@ -12,8 +12,10 @@ export default {
     gongzuoliu_trade: 'Workflow Trade',
     zaixianbaoming: 'Online Registration',
     mibi: 'Mibit',
+    baomibi: 'Boom Mibit',
     day: 'Day',
     hour: 'Hour',
+    lijixuexi: 'Learn Now',
   },
   login: {
     smsLogin: 'SMS Login',
@@ -33,6 +35,7 @@ export default {
     home: 'Home',
     gongzuoliu_trade_add: 'Publish Workflow Demand',
     WorkflowDetail: 'Workflow Detail',
+    learning_system: 'Learning System',
 
 
 

src/locales/zh-CN.js

@@ -13,8 +13,10 @@ export default {
     gongzuoliu_trade: '工作流交易',
     zaixianbaoming: '在线报名',
     mibi: '米币',
+    baomibi: '暴米币',
     day: '天',
     hour: '小时',
+    lijixuexi: '立即学习',
   },
   login: {
     smsLogin: '短信登录',
@@ -34,6 +36,7 @@ export default {
     home: '首页',
     gongzuoliu_trade_add: '发布工作流需求',
     WorkflowDetail: '工作流详情',
+    learning_system: '学习教程系统',
 
 
 

src/pages/LearningSystem/LearningSystem.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="LearningSystem container-height">
+    <div v-if="!isChildRoute">
+      <div :style="{height: carouselHeight}">
+        <div style="width:100%;position: absolute;top: 60px;left: 0;">
+          <el-carousel :height="carouselHeight" style="width: 100%;">
+            <el-carousel-item>
+              <img
+                :src="learnIcon"
+                style="width:100%"
+                @load="onImageLoad"
+              />
+            </el-carousel-item>
+            <el-carousel-item>
+              <img
+                :src="learnIcon"
+                style="width:100%"
+                @load="onImageLoad"
+              />
+            </el-carousel-item>
+            
+          </el-carousel>
+        </div>
+      </div>
+      <Breadcrumb />
+      <div class="padding12 bg_color_fff border_radius_16 box_shadow_card">
+        <div class="typeList flex-between typeborder">
+          <div class="gray font_size14 typeName">学习分类：</div>
+          <div class="flex_1 gap10">
+            <div class="font_size14 typeItem"  :class="{'active':searchFom.categoryId2 === ''}"
+            @click="searchFom.categoryId2 = ''; searchFom.categoryId3 = '';getList('init');categoryListTree2=[]"
+            :key="-1">
+              全部
+            </div>
+            <div class="font_size14 typeItem" 
+             v-for="item in categoryListTree" :key="item.categoryId"
+             :class="{'active':searchFom.categoryId2 === item.categoryId}"
+             @click="searchFom.categoryId2 = item.categoryId;searchFom.categoryId3 = '';categoryListTree2=[]; getList('init');getCategoryListTreeFn2();">
+              {{item.categoryName}}
+            </div>
+          </div>
+        </div>
+        <div class="typeList flex-between typeborder">
+          <div class="gray font_size14 typeName">教程分类：</div>
+          <div class="flex_1 gap10">
+            <div class="font_size14 typeItem"  :class="{'active':searchFom.categoryId2 === ''}"
+            @click="searchFom.categoryId2 = ''; searchFom.categoryId3 = '';getList('init');categoryListTree2=[]"
+            :key="-1">
+              全部
+            </div>
+            <div class="font_size14 typeItem" 
+             v-for="item in categoryListTree" :key="item.categoryId"
+             :class="{'active':searchFom.categoryId2 === item.categoryId}"
+             @click="searchFom.categoryId2 = item.categoryId;searchFom.categoryId3 = '';categoryListTree2=[]; getList('init');getCategoryListTreeFn2();">
+              {{item.categoryName}}
+            </div>
+          </div>
+        </div>
+        <div class="typeList flex-between">
+          <div class="gray font_size14 typeName">技能标签：</div>
+          <div class="flex_1 gap10">
+            <div class="font_size14 typeItem"  :class="{'active':searchFom.categoryId3 === ''}"
+            @click="searchFom.categoryId3 = ''; getList('init');"
+            :key="-1">
+              全部
+            </div>
+            <div class="font_size14 typeItem" 
+             v-for="item in categoryListTree2" :key="item.categoryId"
+             :class="{'active':searchFom.categoryId3 === item.categoryId}"
+             @click="searchFom.categoryId3 = item.categoryId; getList('init');">
+              {{item.categoryName}}
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 列表 -->
+      <div class="course-list mt20">
+        <div class="course-grid">
+          <div v-for="(item, index) in list" :key="index" class="course-item list_item_animation">
+            <div class="bg_color_f5 coverImg" @click.stop.prevent="goDetail(item)" >
+              <img :src="item.coverImageUrl" alt="" class="coverImg" />
+            </div>
+            <div class="padding16">
+              <div class="font_size18 bold">
+                {{item.courseTitle}}
+              </div> 
+              <div class="mt10 line1 gray font_size13">
+                {{item.courseIntro}}
+              </div>
+              <div class="flex-center-between mt10">
+                <div class="gap5">
+                  <img :src="viewIcon" alt="" style="width:16px;height:16px">
+                  <div>{{item.viewCount}}人看过</div>
+                </div>
+                <div class="gap5 gradient border_radius_4 cursor-pointer xuexi" @click.stop.prevent="goDetail(item)">
+                  <img :src="playIcon" alt="" style="width:13px;height:15px">
+                  <div>{{$t('common.lijixuexi')}}</div>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+      <!-- 分页 -->
+      <!-- 替换原有的分页代码 -->
+      <Pagination 
+        :total="searchFom.total"
+        :page-size="searchFom.pageSize"
+        :current-page="searchFom.pageNum"
+        @page-change="handlePageChange"
+      />
+    </div>
+    <router-view />
+  </div>
+</template>
+
+<script setup>
+  import viewIcon from '@/assets/imgs/view.png'
+  import playIcon from '@/assets/imgs/bofang.png'
+  import learnIcon from '@/assets/imgs/learn.png'
+
+  import CourseCard from '@/components/course-card.vue'
+  import Pagination from '@/components/Pagination.vue'
+
+  import { getCategoryListTree } from '@/api/category.js'
+  import { getCourseList } from '@/api/course.js'
+
+
+  import { useRouter, useRoute } from 'vue-router'
+  const router = useRouter();
+  const route = useRoute();
+  import { ref, computed, reactive, onMounted } from 'vue'
+  //获取参数
+  const query = route.query
+  const categoryId = ref(query.categoryId || '');
+  const activePlatform = ref(query.activePlatform || '');
+  //获取当前路由路径
+  // const currentPath = ref(router.currentRoute.value.path)
+  const isChildRoute = computed(() => {
+    return route.matched.length > 1
+  });
+  // 监听图片加载完成，动态设置轮播图高度
+  const carouselHeight = ref('auto')
+  const onImageLoad = (event) => {
+    const img = event.target
+    const aspectRatio = img.naturalWidth / img.naturalHeight
+    const containerWidth = img.offsetWidth
+    const calculatedHeight = containerWidth / aspectRatio
+    carouselHeight.value = calculatedHeight + 'px'
+  }
+
+
+
+  // 一级分类列表
+  const categoryListTree = ref([]);
+  // 二级分类列表
+  const categoryListTree2 = ref([]);
+  // 活动平台
+
+  // 添加分页相关数据
+  const list = ref([]);
+  const listTotal = ref(0);
+  const searchFom = reactive({
+    categoryId1: categoryId.value,
+    categoryId2: '',
+    categoryId3: '',
+    workflowTitle: '',
+    pageNum: 1,
+    pageSize: 10,
+  })
+
+  onMounted(() => {
+    getList();
+    getCategoryListTreeFn();
+  })
+
+   // 查询寻找工作流列表
+  const getList = async (type) => {
+    if(type === 'init'){
+      searchFom.pageNum = 1
+    }
+    const res = await getCourseList(searchFom)
+    if(res.code === 200){
+      list.value = res.rows || [];
+      listTotal.value = res.total || 0;
+    }
+  }
+  const handlePageChange = (page) => {
+    searchFom.pageNum = page
+    // 这里可以添加获取数据的逻辑
+    console.log('当前页:', page)
+    getList();
+  }
+
+  const goDetail = (item) => {
+    //增加参数名称
+    router.push({
+      path: `/learning-system/detail`,
+      query: {
+        courseId: item.courseId,
+        metaTitle: item.courseTitle || '课程详情'
+      }
+    })
+  };
+
+  const getCategoryListTreeFn = () => {
+    getCategoryListTree({categoryId: categoryId.value}).then(res => {
+      console.log(res)
+      categoryListTree.value = res.rows || [];
+    })
+  };
+  const getCategoryListTreeFn2 = () => {
+    getCategoryListTree({categoryId: searchFom.categoryId2}).then(res => {
+      console.log(res)
+      categoryListTree2.value = res.rows || [];
+    })
+  };
+
+  
+</script>
+
+<style scoped lang="scss">
+.LearningSystem {
+  .typeList{
+    padding: 20px 0;
+    &.typeborder{
+      border-bottom: 1px dashed #DCDFE6;
+    }
+    .typeName{
+      margin-top: 6px;
+      width: 80px;
+    }
+    .typeItem{
+      margin: 0 8px;
+      cursor: pointer;
+      padding: 4px 8px;
+      &.active{
+        background: rgba(45,113,255,0.1);
+        border-radius: 4px 4px 4px 4px;
+        
+        color: $primary-color;
+        font-weight: 600;
+      }
+    }
+  }
+  .course-item{
+    width: 368px;
+    background-color: #ffffff;
+    border-radius: 8px;
+    overflow: hidden;
+    cursor: pointer;
+    .coverImg{
+      width: 100%;
+      height: 204px;
+    }
+  }
+  .xuexi{
+    color: #ffffff;
+    padding: 10px 20px;
+    border-radius: 10px;
+    font-size: 14px;
+  }
+}
+</style>

src/pages/LearningSystem/LearningSystemDetail.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="LearningSystemDetail container-height">
+    <Breadcrumb />
+    <div>
+      <div>
+        <div style="width:100%;position: absolute;top: 60px;left: 0;overflow: hidden;z-index: -1;">
+          <div :style="{backgroundImage: `url(${info.coverImageUrl})`}" class="coverImageUrlBg">
+            <div style="background-color: rgba(255, 255, 255, 0.5);width: 100%;height: 400px;"></div>
+          </div>
+        </div>
+      </div>
+      <div class="flex-between" >
+        <img :src="info.coverImageUrl" alt="" class="border_radius_16" style="width: 500px; height: 280px;">
+        <div class="flex_1 ml20">
+          <div class="gap10">
+            <el-button type="primary" v-if="info.skillTagName">{{info.skillTagName}}</el-button>
+            <div class="bold font_size30">{{info.courseTitle}}</div>
+          </div>
+          <div>
+            <el-button type="primary"  plain v-if="info.studyStageName">{{info.studyStageName}}</el-button>
+            <el-button type="primary" plain v-if="info.courseCategoryName">{{info.courseCategoryName}}</el-button>
+          </div>
+          <div class="gray font_size16 mt20 line5">
+            {{info.courseIntro}}
+          </div>
+        </div>
+      </div>
+      <div class="border_radius_16 gradient mt10 pt10">
+        <div class="border_radius_16 bg_color_fff flex-center-between" style="padding:0 16px">
+          <div class="color_price">
+            <span class="bold font_size36">3999</span>
+            <span class="font_size18">{{$t('common.mibi')}}</span>
+          </div>
+          <div class="flex-center-between">
+            <img :src="zuIcon" alt="" style="height:98px">
+            <div class="gap5 gradient border_radius_4 cursor-pointer xuexi ml10">
+              <img :src="playIcon" alt="" style="width:13px;height:15px">
+              <div>{{$t('common.lijixuexi')}}</div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import playIcon from '@/assets/imgs/bofang.png'
+  import zuIcon from '@/assets/imgs/zu.png'
+
+  // 引入api
+  import { getCourseDetail } from '@/api/course.js'
+
+  import { useRouter, useRoute } from 'vue-router'
+  const router = useRouter()
+  const route = useRoute()
+  console.log(router,route)
+  import { ref, computed, reactive, onMounted } from 'vue'
+  import { useAppStore } from '@/pinia/appStore'
+  const appStore = useAppStore()
+
+ 
+
+  //获取参数
+  const query = route.query;
+  const courseId = ref(query.courseId || '');
+  const info = ref({})
+
+  onMounted(() => {
+   getDetail();
+  });
+  const getDetail = async () => {
+     getCourseDetail({id: courseId.value}).then(res => {
+      if(res.code === 200){
+        console.log(res)
+        info.value = res.data || {};
+      }
+    })
+  };
+
+
+</script>
+
+<style scoped lang="scss">
+  .LearningSystemDetail{
+    .line5 {
+      word-break: break-all;
+      display: -webkit-box;
+      -webkit-line-clamp: 5;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      /* height: 84px; */
+    }
+    .coverImageUrlBg{
+      background-size: cover;
+      background-position: center;
+      
+      width: 100%;
+      height: 400px;
+      //背景模糊
+      filter: blur(180px);
+    }
+    .xuexi{
+      color: #ffffff;
+      padding: 14px 20px;
+      border-radius: 10px;
+      font-size: 14px;
+    }
+  }
+
+</style>

src/pages/WorkflowAdd.vue

@@ -109,7 +109,7 @@
             </div>
           </div>
           <el-input v-model="ruleForm.workflowPrice" placeholder="请输入暴米币数量"  maxlength="50" type="number" v-if="workflowPriceType === 'pay'">
-            <template #append>暴米币</template>
+            <template #append>{{$t('common.baomibi')}}</template>
           </el-input>
         </el-form-item>
       </div>

src/pinia/courseStore.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { getCourseList, getCourseDetail, getCourseChapters } from '../api/course'
+import { getCourseList, getCourseDetail, getCourseChapters } from '../api/courseDemo'
 
 export const useCourseStore = defineStore('course', {
   state: () => ({

src/router/index.js

@@ -79,6 +79,20 @@ const routes = [
       }
     ]
   },
+  {
+    path: '/learning-system',
+    name: 'LearningSystemHome',
+    component: () => import('@/pages/LearningSystem/LearningSystem.vue'),
+    meta: { title: 'route.learning_system' },
+    children: [
+      {
+        path: 'detail',
+        name: 'LearningSystemDetail',
+        component: () => import('@/pages/LearningSystem/LearningSystemDetail.vue'),
+        meta: { title: '' }
+      },
+    ]
+  },
   {
     path: '/course/:id',
     name: 'CourseDetail',

src/styles/index.scss

@@ -149,6 +149,9 @@ wx-image{
 .pad30 {
 	padding: 0 30px
 }
+.pt10 {
+	padding-top: 10px
+}
 .pt20 {
 	padding-top: 20px
 }