viewer 模块国际化

src/modules/index.js

-/* Automatically generated by './build/bin/build-entry.js' */
-/* 模块基于 element-ui，一定在 element-ui后加载 */
-
 import Discuss from './discuss'
+import Viewer from './viewer'
 
-const components = [Discuss]
+const components = [Discuss, Viewer]
 
 const install = function(Vue, opts = {}) {
   components.forEach(component => {
@@ -16,7 +14,4 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue)
 }
 
-export default {
-  install,
-  Discuss
-}
+export default { install, ...components }

src/modules/viewer/components/aside/chapter.vue

@@ -65,7 +65,7 @@ export default {
         const live = data.live
         const hasRecordUrl = live.enable_record && live.record_url
         if ([3, 5].includes(live.live_status) && !hasRecordUrl) {
-          this.$message.error('直播结束')
+          this.$message.error(this.$t('viewerMain.liveEnd'))
           return
         }
         window.open(live.record_url || live.join_url)
@@ -73,7 +73,7 @@ export default {
       }
       // 课程大作业
       if (data.id === 'course_work' && !this.data.survey) {
-        this.$message('请先填写教学评估，然后完成大作业。')
+        this.$message(this.$t('viewerMain.teachingEvaluationTips'))
         return
       }
       // 教学评估

src/modules/viewer/components/aside/index.vue

 <template>
   <aside class="course-viewer-aside">
     <el-tabs v-model="activeName">
-      <el-tab-pane label="章节" name="0">
+      <el-tab-pane :label="$t('viewerMain.chapter')" name="0">
         <div class="tab-pane">
           <aside-chapter :data="data" :chapters="chapters" :active="active"></aside-chapter>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="讲义" name="1" v-if="active && active.type === 2">
+      <el-tab-pane :label="$t('viewerMain.handout')" name="1" v-if="active && active.type === 2">
         <div class="tab-pane">
           <aside-lecture :ppts="ppts" :pptIndex="pptIndex" v-on="$listeners"></aside-lecture>
         </div>

src/modules/viewer/components/live/chapterLive.vue

 <template>
   <div style="width: 100%; height: 100%">
     <div class="course-viewer-content" v-if="isLiveEnd && !hasRecord">
-      <div class="empty">直播已结束</div>
+      <div class="empty">{{ $t('viewerLive.liveEnd') }}</div>
     </div>
     <iframe
       :src="iframeUrl"

src/modules/viewer/components/player/chapterPlayer.vue

@@ -25,10 +25,12 @@
     </div>
     <div class="player-footer">
       <em class="player-button player-button-download" v-if="chapter.pdf">
-        <a :href="chapter.pdf" download target="_blank">下载PPT</a>
+        <a :href="chapter.pdf" download target="_blank">{{ $t('viewerPlayer.downloadPPT') }}</a>
       </em>
-      <em :class="pptClass" @click="togglePPTVisible" v-if="chatperResources.ppts.length">同步显示PPT</em>
-      <em :class="skipClass" @click="toggleSkip">始终跳过片头</em>
+      <em :class="pptClass" @click="togglePPTVisible" v-if="chatperResources.ppts.length">
+        {{ $t('viewerPlayer.showPPT') }}
+      </em>
+      <em :class="skipClass" @click="toggleSkip">{{ $t('viewerPlayer.skipTitle') }}</em>
     </div>
   </div>
 </template>

src/modules/viewer/components/player/pptPlayer.vue

@@ -14,21 +14,22 @@
           </template>
         </div>
         <div class="ppt-player-controls__pages">
-          <span class="is-active">{{currentIndex + 1}}</span>
+          <span class="is-active">{{ currentIndex + 1 }}</span>
           /
-          <span>{{ppts.length}}</span>页
+          <span>{{ ppts.length }}</span>
+          {{ $t('viewerPlayer.pptPageText') }}
         </div>
         <div class="ppt-player-controls__tools">
-          <el-tooltip content="PPT同步视频播放">
-            <i :class="['el-icon-self-xuexiao', (isSync ? 'active' : '')]" @click="onToggleSync"></i>
+          <el-tooltip :content="$t('viewerPlayer.pptSyncPlay')">
+            <i :class="['el-icon-self-xuexiao', isSync ? 'active' : '']" @click="onToggleSync"></i>
           </el-tooltip>
-          <el-tooltip content="放大PPT">
+          <el-tooltip :content="$t('viewerPlayer.pptFullscreen')">
             <i class="el-icon-self-quanping" @click="fullscreen"></i>
           </el-tooltip>
-          <el-tooltip content="切换视频到当前PPT页">
+          <el-tooltip :content="$t('viewerPlayer.pptPosition')">
             <i class="el-icon-self-shipin" @click="setVideoTime"></i>
           </el-tooltip>
-          <el-tooltip content="关闭PPT">
+          <el-tooltip :content="$t('viewerPlayer.pptClose')">
             <i class="el-icon-self-guanbi" @click="$emit('close')"></i>
           </el-tooltip>
         </div>
@@ -62,9 +63,7 @@ export default {
   },
   computed: {
     pptUrl() {
-      return this.ppts[this.currentIndex]
-        ? this.ppts[this.currentIndex].ppt_url
-        : ''
+      return this.ppts[this.currentIndex] ? this.ppts[this.currentIndex].ppt_url : ''
     }
   },
   methods: {

src/modules/viewer/components/player/videoPlayer.vue

@@ -37,7 +37,8 @@ export default {
           controlBarVisibility: 'always',
           definition: 'FD,LD,SD',
           defaultDefinition: 'SD',
-          useHlsPluginForSafari: true
+          useHlsPluginForSafari: true,
+          language: this.$i18n.locale === 'zh-CN' ? 'zh-cn' : 'en-us'
         },
         function (player) {
           player.on('ready', function () {

src/modules/viewer/components/read/fileList.vue

@@ -8,14 +8,14 @@
         </a>
         <!-- <span v-if="file.file_size">{{ file.file_size }}</span> -->
         <a :href="file.file_url" :download="file.file_name" target="_blank">
-          <el-tooltip effect="dark" content="下载">
+          <el-tooltip effect="dark" :content="$t('viewerRead.download')">
             <i class="el-icon-download"></i>
           </el-tooltip>
         </a>
       </li>
     </ul>
     <div class="empty" v-else>
-      <slot name="empty">暂无课程资料</slot>
+      <slot name="empty">{{ $t('viewerRead.courseDataEmptyText') }}</slot>
     </div>
   </div>
 </template>
@@ -25,7 +25,12 @@ export default {
   name: 'FilePanel',
   props: {
     // 标题
-    title: { type: String, default: '课程资料' },
+    title: {
+      type: String,
+      default() {
+        return this.$t('viewerRead.courseData')
+      }
+    },
     // 文件列表
     files: { type: Array, default: () => [] }
   }

src/modules/viewer/index.js

-import Viewer from './index'
+import Viewer from './index.vue'
 import Routes from './routes'
+import zhCN from './languages/zh-CN'
+import en from './languages/en'
 
-Viewer.install = function(Vue, options = {}) {
+Viewer.install = function(Vue, opts = {}) {
   // 国际化
-  if (options.i18n) {
-    options.i18n.mergeLocaleMessage()
+  if (opts.i18n) {
+    opts.i18n.mergeLocaleMessage('zh-CN', zhCN)
+    opts.i18n.mergeLocaleMessage('en', en)
   }
   // 路由
-  if (options.router) {
-    options.router.addRoutes(Routes)
+  if (opts.router) {
+    opts.router.addRoutes(Routes)
   }
 }
 export default Viewer

src/modules/viewer/index.vue

@@ -8,14 +8,14 @@
         </router-link>
         <h1 class="course-viewer-main-hd__title">{{ detail.course_name }}</h1>
         <!-- 直播的时候显示帮助按钮 -->
-        <template v-if="isLive">
+        <template v-if="!isLive">
           <router-link to="/app/feedback/feedback-create" target="_blank">
-            <el-tooltip effect="light" content="意见反馈">
+            <el-tooltip effect="light" :content="$t('viewerMain.feedback')">
               <i class="el-icon-self-fankuiyijian"></i>
             </el-tooltip>
           </router-link>
           <router-link to="/mobile/help/student" target="_blank">
-            <el-tooltip effect="light" content="帮助">
+            <el-tooltip effect="light" :content="$t('viewerMain.help')">
               <i class="el-icon-self-icon-test"></i>
             </el-tooltip>
           </router-link>
@@ -107,17 +107,17 @@ export default {
         return []
       }
       const customeChapter = {
-        name: '大作业及资料',
+        name: this.$t('viewerMain.workData'),
         children: [
-          { name: '课程大作业', id: 'course_work', type: 99 },
-          { name: '课程资料', id: 'course_info', type: 100 },
-          { name: '教学评估', id: 'teach_evaluation', type: 102 }
+          { name: this.$t('viewerMain.courseWork'), id: 'course_work', type: 99 },
+          { name: this.$t('viewerMain.courseData'), id: 'course_info', type: 100 },
+          { name: this.$t('viewerMain.teachingEvaluation'), id: 'teach_evaluation', type: 102 }
         ]
       }
       // 课程考试
       if (this.detail.course_examination) {
         customeChapter.children.push({
-          name: '课程考试',
+          name: this.$t('viewerMain.courseExam'),
           id: 'course_exam',
           type: 101
         })

src/modules/viewer/languages/en.js

 export default {
-  viewerPlayer: {},
+  viewerMain: {
+    feedback: 'Feedback',
+    help: 'Help',
+    chapter: 'Chapter',
+    handout: 'Handout',
+    workData: 'Assignment & material',
+    courseWork: 'Final assignment',
+    courseData: 'Course materials',
+    courseExam: 'Course exam',
+    teachingEvaluation: 'Teaching evaluation',
+    teachingEvaluationTips: 'Please fill out the teaching assessment first, and then complete the big assignment.',
+    liveEnd: 'Live End'
+  },
+  viewerPlayer: {
+    downloadPPT: 'Download PPT',
+    showPPT: 'Show PPT synchronously',
+    skipTitle: 'Always skip titles',
+    pptSyncPlay: 'PPT synchronized video playback',
+    pptFullscreen: 'Zoom in PPT',
+    pptPosition: 'Switch the video to the current PPT page',
+    pptClose: 'Close PPT',
+    pptPageText: 'Page'
+  },
   viewerWork: {},
   viewerExam: {},
-  viewerRead: {},
-  viewerLive: {}
+  viewerRead: {
+    download: 'Download',
+    courseData: 'Course materials',
+    courseDataEmptyText: 'No course information'
+  },
+  viewerLive: {
+    liveEnd: 'Live End'
+  }
 }

src/modules/viewer/languages/zh-CN.js

 export default {
-  viewerPlayer: {},
+  viewerMain: {
+    feedback: '意见反馈',
+    help: '帮助',
+    chapter: '章节',
+    handout: '讲义',
+    workData: '大作业及资料',
+    courseWork: '课程大作业',
+    courseData: '课程资料',
+    courseExam: '课程考试',
+    teachingEvaluation: '教学评估',
+    teachingEvaluationTips: '请先填写教学评估，然后完成大作业。',
+    liveEnd: '直播结束'
+  },
+  viewerPlayer: {
+    downloadPPT: '下载PPT',
+    showPPT: '同步显示PPT',
+    skipTitle: '始终跳过片头',
+    pptSyncPlay: 'PPT同步视频播放',
+    pptFullscreen: '放大PPT',
+    pptPosition: '切换视频到当前PPT页',
+    pptClose: '关闭PPT',
+    pptPageText: '页'
+  },
   viewerWork: {},
   viewerExam: {},
-  viewerRead: {},
-  viewerLive: {}
+  viewerRead: {
+    download: '下载',
+    courseData: '课程资料',
+    courseDataEmptyText: '暂无课程资料'
+  },
+  viewerLive: {
+    liveEnd: '直播结束'
+  }
 }

src/router/routes.js

-import viewerRoutes from '@/modules/viewer/routes.js'
-
 export default [
   { path: '*', redirect: '/' },
   { path: '/', redirect: '/app/learn/course' },
@@ -211,7 +209,5 @@ export default [
     name: 'survey',
     component: () => import('@/pages/survey/survey.vue'),
     props: true
-  },
-  // viewer module routes
-  ...viewerRoutes
+  }
 ]