Procházet zdrojové kódy

```
feat(learning-system): 添加学习系统页面功能

- 在路由中添加学习系统路径映射,返回索引值'3'
- 添加国际化语言配置,包括'人看过'和'其他课程推荐'文本
- 在学习系统列表页面使用国际化文本替换硬编码中文
- 更新注释内容,将'查询寻找工作流列表'改为'列表'
- 在学习系统详情页面添加标签页组件和右侧组件
- 引入Right组件并添加活动标签页状态管理
```

zhangningning před 1 měsícem
rodič
revize
68199a8da6

+ 3 - 0
src/App.vue

@@ -98,6 +98,9 @@ const activeIndex = computed(() => {
   if (route.path.startsWith('/workflow-trade')) {
   if (route.path.startsWith('/workflow-trade')) {
     return '2'
     return '2'
   }
   }
+  if (route.path.startsWith('/learning-system')) {
+    return '3'
+  }
   return '1' // 默认返回首页
   return '1' // 默认返回首页
 });
 });
 // 处理注销
 // 处理注销

+ 2 - 0
src/locales/en.js

@@ -16,6 +16,8 @@ export default {
     day: 'Day',
     day: 'Day',
     hour: 'Hour',
     hour: 'Hour',
     lijixuexi: 'Learn Now',
     lijixuexi: 'Learn Now',
+    renkanguo: 'People Have Seen',
+    qitakechengtuijian: 'Other Course Recommendations',
   },
   },
   login: {
   login: {
     smsLogin: 'SMS Login',
     smsLogin: 'SMS Login',

+ 2 - 0
src/locales/zh-CN.js

@@ -17,6 +17,8 @@ export default {
     day: '天',
     day: '天',
     hour: '小时',
     hour: '小时',
     lijixuexi: '立即学习',
     lijixuexi: '立即学习',
+    renkanguo: '人看过',
+    qitakechengtuijian: '其他课程推荐',
   },
   },
   login: {
   login: {
     smsLogin: '短信登录',
     smsLogin: '短信登录',

+ 2 - 2
src/pages/LearningSystem/LearningSystem.vue

@@ -90,7 +90,7 @@
               <div class="flex-center-between mt10">
               <div class="flex-center-between mt10">
                 <div class="gap5">
                 <div class="gap5">
                   <img :src="viewIcon" alt="" style="width:16px;height:16px">
                   <img :src="viewIcon" alt="" style="width:16px;height:16px">
-                  <div>{{item.viewCount}}人看过</div>
+                  <div>{{item.viewCount}}{{ $t('common.renkanguo') }}</div>
                 </div>
                 </div>
                 <div class="gap5 gradient border_radius_4 cursor-pointer xuexi" @click.stop.prevent="goDetail(item)">
                 <div class="gap5 gradient border_radius_4 cursor-pointer xuexi" @click.stop.prevent="goDetail(item)">
                   <img :src="playIcon" alt="" style="width:13px;height:15px">
                   <img :src="playIcon" alt="" style="width:13px;height:15px">
@@ -175,7 +175,7 @@
     getCategoryListTreeFn();
     getCategoryListTreeFn();
   })
   })
 
 
-   // 查询寻找工作流列表
+   // 列表
   const getList = async (type) => {
   const getList = async (type) => {
     if(type === 'init'){
     if(type === 'init'){
       searchFom.pageNum = 1
       searchFom.pageNum = 1

+ 17 - 0
src/pages/LearningSystem/LearningSystemDetail.vue

@@ -39,7 +39,21 @@
             </div>
             </div>
           </div>
           </div>
         </div>
         </div>
+      </div>
+      <div class="flex-between mt20">
+        <div class="flex_1 bg_color_fff padding16 border_radius_16 box_shadow_card mr20">
+          <el-tabs v-model="activeName" class="demo-tabs">
+            <el-tab-pane label="User" name="first">
+
+            </el-tab-pane>
+            <el-tab-pane label="Task" name="fourth">
 
 
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div class="detail_right bg_color_fff padding16 border_radius_16 box_shadow_card">
+          <Right />
+        </div>
       </div>
       </div>
     </div>
     </div>
   </div>
   </div>
@@ -48,6 +62,7 @@
 <script setup>
 <script setup>
   import playIcon from '@/assets/imgs/bofang.png'
   import playIcon from '@/assets/imgs/bofang.png'
   import zuIcon from '@/assets/imgs/zu.png'
   import zuIcon from '@/assets/imgs/zu.png'
+  import Right from './components/right.vue'
 
 
   // 引入api
   // 引入api
   import { getCourseDetail } from '@/api/course.js'
   import { getCourseDetail } from '@/api/course.js'
@@ -60,6 +75,8 @@
   import { useAppStore } from '@/pinia/appStore'
   import { useAppStore } from '@/pinia/appStore'
   const appStore = useAppStore()
   const appStore = useAppStore()
 
 
+  const activeName = ref('first');
+
  
  
 
 
   //获取参数
   //获取参数

+ 37 - 0
src/pages/LearningSystem/components/right.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <div class="gap10">
+      <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">
+      <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>
+         <el-button type="primary" size="mini" plain class="mt5" v-if="item.skillTagName">{{item.skillTagName}}</el-button>
+        <div class="font_size12 gray mt5">{{ item.viewCount }} {{ $t('common.renkanguo') }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { getCourseList } from '@/api/course.js'
+import { ref, onMounted } from 'vue'
+
+const list = ref([]);
+onMounted(() => {
+  getList();
+});
+const getList = async (type) => {
+  const res = await getCourseList({
+    pageNum: 1,
+    pageSize: 5,
+  })
+  if(res.code === 200){
+    list.value = res.rows || [];
+  }
+};
+</script>
+<style scoped>
+
+</style>