Sfoglia il codice sorgente

```
feat(video-player): 增强视频播放器组件功能并添加国际化支持

- 移除调试用的 console.log 语句
- 为视频播放器添加响应式 props 监听,支持动态更新视频源和封面
- 优化 VideoPlayer 组件的初始化逻辑,添加 initPlay 方法
- 为课程卡片组件添加国际化文本支持
- 在多语言文件中添加下载工作流和平台相关的翻译
- 修复 WorkflowDetail 页面中的错别字,将"当前及格"改为"当前价格"
- 使用国际化文本替换硬编码的中文文本
- 为工作流详情页面添加下载功能并移除调试日志
- 优化路由守卫中的调试输出
```

zhangningning 1 mese fa
parent
commit
3605b75036

+ 0 - 1
src/App.vue

@@ -98,7 +98,6 @@ function goMyLearning() {
 };
 // 将 activeIndex 改为响应式,并根据当前路由动态计算
 const activeIndex = computed(() => {
-  console.log(route)
   if (route.path === '/') return '1'
   if (route.path.startsWith('/workflow-trade')) {
     return '2'

+ 0 - 1
src/components/Breadcrumb.vue

@@ -24,7 +24,6 @@ const router = useRouter()
 const breadcrumbItems = computed(() => {
   const items = []
   const processedPaths = new Set() // 用于跟踪已处理的路径
-  console.log(2222, route,router)
   // 获取匹配的路由记录
   const matchedRoutes = route.matched.filter(item => item.meta && item.meta.title)
   

+ 31 - 21
src/components/VideoPlayer.vue

@@ -126,6 +126,32 @@ let player = null
 
 // 初始化播放器
 onMounted(() => {
+  initPlay();
+})
+
+// 监听src变化,更新视频源
+watch(() => props.src, (newSrc, oldSrc) => {
+  console.log('newSrc', newSrc, 'oldSrc', oldSrc)
+  if (player && newSrc !== oldSrc && newSrc !== '') {
+    player.src({ src: newSrc, type: props.type })
+    player.load()
+    if (props.autoplay) {
+      player.play()
+    }
+  }
+})
+
+// 监听poster变化,更新封面
+watch(() => props.poster, (newPoster) => {
+  if (player) {
+    player.poster(newPoster)
+  }
+})
+const initPlay = ()=>{
+   if (player) {
+    player.dispose()
+    player = null
+  }
   // 创建video.js播放器实例
   player = videojs(videoElement.value, {
     autoplay: props.autoplay,
@@ -134,6 +160,7 @@ onMounted(() => {
     preload: props.preload,
     aspectRatio: "16:9",
     // playbackRates: props.playbackRates,// 播放速度选项
+    sources: [{ src: props.src, type: props.type }], // 添加这行
     controlBar: props.controlBar,
   })
 
@@ -145,25 +172,7 @@ onMounted(() => {
   player.on('loadedmetadata', () => emit('loadedmetadata', player.duration()))
   player.on('error', () => emit('error', player.error()))
   player.on('ready', () => emit('ready', player))
-})
-
-// 监听src变化,更新视频源
-watch(() => props.src, (newSrc, oldSrc) => {
-  if (player && newSrc !== oldSrc) {
-    player.src({ src: newSrc, type: props.type })
-    player.load()
-    if (props.autoplay) {
-      player.play()
-    }
-  }
-})
-
-// 监听poster变化,更新封面
-watch(() => props.poster, (newPoster) => {
-  if (player) {
-    player.poster(newPoster)
-  }
-})
+}
 
 // 组件销毁时清理播放器
 onUnmounted(() => {
@@ -198,8 +207,9 @@ defineExpose({
   // 获取播放速度
   getPlaybackRate: () => player && player.playbackRate(),
   // 获取播放器实例(高级用法)
-  getPlayerInstance: () => player
-})
+  getPlayerInstance: () => player,
+  initPlay,
+});
 </script>
 
 <style scoped lang="scss">

+ 2 - 2
src/components/course-card.vue

@@ -20,11 +20,11 @@
       <div class="mt10 flex-center-between">
         <div class="gap10">
           <el-avatar :size="24" :src="info.userAvatar || appStore.avatarDefault" />
-          <div class="font_size14">{{info.nickName || '张三'}}</div>
+          <div class="font_size14">{{info.nickName || ''}}</div>
         </div>
         <div class="gap10 contactInfo_bg border_radius_4">
           <img :src="yunIcon" alt="" style="width: 16px; height: 16px;" />
-          <div class="font_size13">{{info.categoryName1}}平台</div>
+          <div class="font_size13">{{info.categoryName1}} {{$t('common.platform')}}</div>
         </div>
       </div>
       <div class="gap10 mt16 button-container">

+ 1 - 0
src/locales/en.js

@@ -83,6 +83,7 @@ export default {
     startUsing: 'Start Using',
     total: 'Total',
     demandCount: 'Demand Count',
+    downloadWorkflow: 'Download Workflow',
   },
   login: {
     smsLogin: 'SMS Login',

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

@@ -87,6 +87,7 @@ export default {
     startUsing: '开始使用',
     total: '共',
     demandCount: '条需求',
+    downloadWorkflow: '下载工作流',
   },
   login: {
     smsLogin: '短信登录',

+ 3 - 5
src/pages/LearningSystem/CourseDetail.vue

@@ -102,7 +102,6 @@ import { getCourseDetail,collect } 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()
@@ -134,14 +133,12 @@ onMounted(() => {
 const getDetail = async () => {
     await getCourseDetail({id: courseId.value}).then(res => {
       if(res.code === 200){
-        console.log(res)
         info.value = res.data || {};
         currentCourseCover.value = info.value.coverImageUrl || ''
       }
     })
 };
 const purchaseFn = async (chapterId, chapterInfoItem={}) => {
-  console.log(chapterId, chapterInfoItem)
   isLoading.value = true;
   chapterInfo.value = chapterInfoItem || {};
   await purchase({
@@ -152,6 +149,7 @@ const purchaseFn = async (chapterId, chapterInfoItem={}) => {
     if(res.code === 200){
       if(res.data?.buyFlag == 1){
         currentVideoUrl.value = res.data?.contentUrl || ''
+        // videoPlayer.value.initPlay();
       }else{
         confirmBuy({
           callback:purchaseFn,
@@ -180,14 +178,14 @@ const playVideo = (video) => {
   if (!video) return
   
   // 更新当前播放的视频ID
-  currentPlayingVideoId.value = video.id
+  // currentPlayingVideoId.value = video.id
   
   // 这里可以根据video.id从API获取实际的视频地址
   // 暂时使用模拟地址
   // const videoUrl = `https://example.com/videos/${video.id}.mp4`
   
   // 更新视频源
-  // currentVideoUrl.value = videoUrl
+  currentVideoUrl.value = video.contentUrl;
   
   // 播放视频
   if (videoPlayer.value) {

+ 0 - 1
src/pages/LearningSystem/LearningSystem.vue

@@ -222,7 +222,6 @@
   //技能标签  bus_skill_tag
   const getDictTypeFn = (dictType) => {
     getDictType({dictType}).then(res => {
-      console.log(res)
       switch (dictType) {
         case 'bus_study_stage':
           bus_study_stage.value = res.rows || [];

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

@@ -97,7 +97,6 @@
   });
 
 
-  console.log(router,route)
   import { ref, computed, onMounted, onActivated } from 'vue'
   import { useAppStore } from '@/pinia/appStore'
   const appStore = useAppStore()
@@ -118,7 +117,6 @@
   const getDetail = async () => {
      getCourseDetail({id: courseId.value}).then(res => {
       if(res.code === 200){
-        console.log(res)
         info.value = res.data || {};
       }
     })

+ 8 - 4
src/pages/WorkflowDetail.vue

@@ -56,7 +56,7 @@
           <div class="padding16 bg_color_fff border_radius_16 box_shadow_card">
             <div class="flex-center-between">
               <div class="flex-column">
-                <div class="font_size16">当前格</div>
+                <div class="font_size16">当前格</div>
                 <div class="color_price">
                   <span class="font_size32">{{ruleForm.workflowPrice || 0}}</span> 
                   <span>{{$t('common.mibi')}}</span>
@@ -67,13 +67,13 @@
             <div class="mt20">
               <el-button type="primary" class="font_size16" size="large" style="width: 100%;">
                 <img :src="useNowIcon" alt="员工" style="width: 30px; height: 30px;">
-                <span class="font_size18">立即使用</span>
+                <span class="font_size18"> {{$t('common.startUsing')}}</span>
               </el-button>
             </div>
             <div class="mt20">
-              <el-button type="primary" size="large" plain style="width: 100%;" @click="downloadFile(ruleForm.workflowFile)">
+              <el-button type="primary" size="large" plain style="width: 100%;" @click="downloadWorkflow()">
                 <img :src="downIcon" alt="员工" style="width: 30px; height: 30px;">
-                <span class="font_size18">下载工作流</span>
+                <span class="font_size18"> {{$t('common.downloadWorkflow')}}</span>
               </el-button>
             </div>
           </div>
@@ -193,6 +193,10 @@ onMounted(() => {
     });
   })
 });
+// 下载工作流
+const downloadWorkflow = () => {
+  downloadFile(ruleForm.value.workflowFile, ruleForm.value.workflowTitle + '.json');
+};
 </script>
 
 <style scoped lang="scss">

+ 0 - 1
src/router/index.js

@@ -212,7 +212,6 @@ const router = createRouter({
 })
 // 全局路由守卫
 router.beforeEach((to, from, next) => {
-  console.log(33333333333, to)
   // 设置页面标题
   // document.title = to.meta.title || 'Boom Ai'