Forráskód Böngészése

```
feat(learning-system): 优化其他课程组件功能

- 为课程列表项添加点击跳转详情功能
- 增加空状态提示组件显示
- 添加路由跳转逻辑并

zhangningning 1 hónapja
szülő
commit
925bd71baf

+ 19 - 1
src/pages/LearningSystem/components/OtherCourse.vue

@@ -4,7 +4,9 @@
       <div class="line_vertical"></div>
       <div class="font_size20 bold">{{$t('common.qitakechengtuijian')}}</div>
     </div>
-    <div v-for="item in list" :key="item.courseId" class="flex-between mt20">
+    <div v-for="item in list" :key="item.courseId" class="flex-between mt20 cursor-pointer"
+      @click="goDetail(item)"
+    >
       <img :src="item.coverImageUrl" alt="" style="width: 160px; height: 90px;" class="border_radius_8">
       <div class="ml10 flex_1">
         <div class="font_size16 bold line1">{{ item.courseTitle }}</div>
@@ -12,11 +14,17 @@
         <div class="font_size12 gray mt5">{{ item.viewCount }} {{ $t('common.renkanguo') }}</div>
       </div>
     </div>
+    <div v-if="list.length === 0" >
+      <el-empty :image-size="200" />
+    </div>
   </div>
 </template>
 <script setup>
 import { getCourseList } from '@/api/course.js'
 import { ref, onMounted, watch, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+const router = useRouter();
+
 
 const props =defineProps({
   info: {
@@ -48,6 +56,16 @@ const getList = async (type) => {
     list.value = res.rows || [];
   }
 };
+const goDetail = (item) => {
+  //增加参数名称
+  router.push({
+    path: `/learning-system/detail/${item.courseId}`,
+    query: {
+      courseId: item.courseId,
+      metaTitle: item.courseTitle || '课程详情'
+    }
+  })
+};
 </script>
 <style scoped>
 

+ 1 - 1
src/router/index.js

@@ -73,7 +73,7 @@ const routes = [
         meta: { title: '' }
       },
       {
-        path: 'workflow-trade-add/:id',
+        path: 'workflow-trade-add',
         name: 'WorkflowTradeAdd',
         component: () => import('@/pages/workflowTrade/workflowTradeAdd.vue'),
         meta: { title: 'route.gongzuoliu_trade_add' }