做了国际化处理

src/layouts/components/Header.vue

@@ -58,6 +58,7 @@ export default {
     },
     setI18nLang(lang) {
       setI18nLang(lang);
+      this.$router.go(0);
     }
   }
 };

src/main.js

@@ -11,7 +11,7 @@ import '@/icons';
 import '@/styles/index.scss'; // global css
 import 'normalize.css/normalize.css';
 
-import { i18n } from '@/utils/i18n';
+import i18n from '@/utils/i18n';
 import '@/permission'; // 权限控制
 
 Vue.use(ElementUI);

src/router/index.js

@@ -59,7 +59,7 @@ const routes = [
 
 const createRouter = () =>
   new VueRouter({
-    mode: 'history',
+    // mode: 'history',
     scrollBehavior: () => ({ y: 0 }),
     routes
   });

src/styles/index.scss

@@ -53,3 +53,7 @@ div:focus {
   margin: 0 auto;
   height: 100%;
 }
+
+.t-right {
+  text-align: right;
+}

src/utils/i18n.js

@@ -1,18 +1,53 @@
 import Vue from 'vue';
 import VueI18n from 'vue-i18n';
-import Cookies from 'js-cookie';
 import { GetWordPack } from '@/api/app';
+import ElementLocale from 'element-ui/lib/locale';
+import zhLocal from 'element-ui/lib/locale/lang/zh-CN';
+import arLocal from 'element-ui/lib/locale/lang/ar';
+import enLocal from 'element-ui/lib/locale/lang/en';
+import jaLocal from 'element-ui/lib/locale/lang/ja';
+import deLocal from 'element-ui/lib/locale/lang/de';
+import ruLocal from 'element-ui/lib/locale/lang/ru-RU';
 
 Vue.use(VueI18n);
 
-export const i18n = new VueI18n({
-  locale: Cookies.get('lang') || 'zh',
-  messages: {},
+// function getBasicI18nMessage() {
+//   let lang = getI18nLang();
+//   GetWordPack({
+//     language_type: lang,
+//     word_key_list: {}
+//   });
+// }
+
+const i18n = new VueI18n({
+  locale: localStorage.getItem('lang') || 'ZH',
+  messages: {
+    ZH: {
+      ...zhLocal
+    },
+    AR: {
+      ...arLocal
+    },
+    EN: {
+      ...enLocal
+    },
+    JA: {
+      ...jaLocal
+    },
+    DE: {
+      ...deLocal
+    },
+    RU: {
+      ...ruLocal
+    }
+  },
   silentTranslationWarn: true
 });
 
+ElementLocale.i18n((key, value) => i18n.t(key, value));
+
 export function setI18nLang(lang) {
-  Cookies.set('lang', lang);
+  localStorage.setItem('lang', lang);
   i18n.locale = lang;
 }
 
@@ -20,10 +55,17 @@ export function setI18nLang(lang) {
  * @description 更新语言列表
  * @param {Object} Parameter word_key_list 需要读取的词汇
  */
-export function updateLanguageList(Parameter) {
+export function updateWordPack(Parameter) {
   Parameter.language_type = i18n.locale;
 
   GetWordPack(Parameter).then(data => {
-    i18n.setLocaleMessage(data.language_type, data.word_pack);
+    let localWord = i18n.messages[data.language_type];
+    if (localWord === undefined) {
+      localWord = {};
+    }
+    let wordPack = Object.assign(localWord, data.word_pack);
+    i18n.setLocaleMessage(data.language_type, wordPack);
   });
 }
+
+export default i18n;

src/views/live/index.vue

@@ -5,7 +5,12 @@
       <div class="title"></div>
       <div id="live"></div>
     </div>
-    <div></div>
+    <div class="button-group">
+      <button @click="startLive">开启直播</button>
+      <button @click="stopLive">结束直播</button>
+      <button @click="createLocalStream">创建本地流</button>
+      <button @click="publishStream">推流</button>
+    </div>
   </div>
 </template>
 
@@ -89,5 +94,14 @@ export default {
   .page-title {
     font-size: 12px;
   }
+  #live {
+    width: 100%;
+    height: 300px;
+  }
+  .button-group {
+    button {
+      margin-right: 20px;
+    }
+  }
 }
 </style>

src/views/live/live.js

@@ -78,9 +78,11 @@ export function initListener() {
 export function startLive() {
   rtc.startLive({
     success(data) {
+      console.log(data);
       alert('开启直播成功：' + JSON.stringify(data));
     },
     fail(data) {
+      console.log(data);
       alert('开启直播失败：' + JSON.stringify(data));
     }
   });
@@ -106,14 +108,13 @@ export function stopLive() {
  * @description 创建本地流
  */
 export function createLocalStream() {
-  const createData = { video: true, audio: true };
   rtc.createLocalStream({
     streamName: 'main',
-    createData,
     success: function (stream) {
       // 创建本地流成功，将流展示到id为 live 的dom元素盒子中
       stream.show('live');
       // publish(stream); // 如果需要立即推流，执行publish方法
+      console.log(stream);
       alert('创建本地流成功');
     },
     fail: function (data) {

src/views/login/index.vue

@@ -63,20 +63,20 @@
 </template>
 
 <script>
-import { updateLanguageList } from '@/utils/i18n';
+import { updateWordPack } from '@/utils/i18n';
 
 export default {
   data() {
     const validateUsername = (rule, value, callback) => {
       if (!value) {
-        callback(new Error(this.$i18n.tc('Learn_Login_user_warning')));
+        callback(new Error(this.$i18n.t('Learn_Login_user_warning')));
       } else {
         callback();
       }
     };
     const validatePassword = (rule, value, callback) => {
       if (value.length < 6) {
-        callback(new Error(this.$i18n.tc('Learn_Login_password_warning')));
+        callback(new Error(this.$i18n.t('Learn_Login_password_warning')));
       } else {
         callback();
       }
@@ -104,7 +104,7 @@ export default {
     }
   },
   created() {
-    updateLanguageList({
+    updateWordPack({
       word_key_list: [
         'login',
         'password',

src/views/teacher/cs_item_detail/ClassroomTask.vue

@@ -1,19 +1,22 @@
 <template>
   <div class="classroom-task-container">
-    <div><span>课堂任务</span></div>
+    <div>
+      <span>{{ $t('Learn_Classroom_Tasks') }}</span>
+    </div>
     <div class="classroom-task">
       <el-timeline>
         <!--课前任务-->
-        <el-timeline-item timestamp="课前任务" color="#F02828" placement="top">
+        <el-timeline-item :timestamp="$t('Learn_PreClass_Tasks')" color="#F02828" placement="top">
           <el-card v-for="(list, i) in preTaskList" :key="i">
             <el-collapse>
               <el-collapse-item>
                 <template slot="title">
                   <el-row class="classroom-task-title">
                     <el-col :span="4">{{ list.name }}</el-col>
-                    <el-col :span="16" class="title-date">2021-3-23</el-col>
-                    <el-col :span="4">
-                      已完成 {{ list.student_count_finish_task }}/{{ list.student_count }}
+                    <el-col :span="12" class="title-date">2021-3-23</el-col>
+                    <el-col :span="8" class="t-right">
+                      {{ $t('Learn_Completed') }}
+                      {{ list.student_count_finish_task }}/{{ list.student_count }}
                     </el-col>
                   </el-row>
                 </template>
@@ -21,9 +24,9 @@
                 <el-row>
                   <el-col :span="24">{{ list.content }}</el-col>
                 </el-row>
-                <el-row>
-                  <el-col :span="2">课件：</el-col>
-                  <el-col :span="22">
+                <div class="line">
+                  <span>{{ $t('Learn_Courseware') }}：</span>
+                  <span>
                     <el-tag
                       class="courseware-tag"
                       v-for="courseware in list.courseware_list"
@@ -31,12 +34,12 @@
                       type="info"
                       >{{ courseware.name }}</el-tag
                     >
-                  </el-col>
-                </el-row>
+                  </span>
+                </div>
 
-                <el-row>
-                  <el-col :span="2">附件：</el-col>
-                  <el-col :span="22">
+                <div class="line">
+                  <span>{{ $t('Learn_Enclosure') }}：</span>
+                  <span>
                     <el-tag
                       class="accessory-tag"
                       v-for="(accessory, j) in list.accessory_list"
@@ -45,19 +48,21 @@
                     >
                       <a :href="accessory.file_url" target="_blank">{{ accessory.file_name }}</a>
                     </el-tag>
-                  </el-col>
-                </el-row>
+                  </span>
+                </div>
+
                 <div>
-                  <span>完成情况：</span>
+                  <span>{{ $t('Learn_Completion') }}：</span>
                   <el-row>
-                    <el-col :span="20">
+                    <el-col :span="19">
                       <circle-progress
                         :total-count="list.student_count"
                         :finish-count="list.student_count_finish_task"
                       />
                     </el-col>
-                    <el-col :span="4">
-                      已完成 {{ list.student_count_finish_task }}/{{ list.student_count }}
+                    <el-col :span="5" class="t-right">
+                      {{ $t('Learn_Completed') }}
+                      {{ list.student_count_finish_task }}/{{ list.student_count }}
                     </el-col>
                   </el-row>
                 </div>
@@ -66,16 +71,17 @@
           </el-card>
         </el-timeline-item>
         <!--课中任务-->
-        <el-timeline-item timestamp="课中任务" color="#F02828" placement="top">
+        <el-timeline-item :timestamp="$t('Learn_Tasks_In_Class')" color="#F02828" placement="top">
           <el-card v-for="(list, i) in midTaskList" :key="i">
             <el-collapse>
               <el-collapse-item>
                 <template slot="title">
                   <el-row class="classroom-task-title">
                     <el-col :span="4">{{ list.name }}</el-col>
-                    <el-col :span="16" class="title-date">2021-3-23</el-col>
-                    <el-col :span="4">
-                      已完成 {{ list.student_count_finish_task }}/{{ list.student_count }}
+                    <el-col :span="12" class="title-date">2021-3-23</el-col>
+                    <el-col :span="8" class="t-right">
+                      {{ $t('Learn_Completed') }}
+                      {{ list.student_count_finish_task }}/{{ list.student_count }}
                     </el-col>
                   </el-row>
                 </template>
@@ -83,9 +89,9 @@
                 <el-row>
                   <el-col :span="24">{{ list.content }}</el-col>
                 </el-row>
-                <el-row>
-                  <el-col :span="2">课件：</el-col>
-                  <el-col :span="22">
+                <div class="line">
+                  <span>{{ $t('Learn_Courseware') }}：</span>
+                  <span>
                     <el-tag
                       class="courseware-tag"
                       v-for="courseware in list.courseware_list"
@@ -93,12 +99,12 @@
                       type="info"
                       >{{ courseware.name }}</el-tag
                     >
-                  </el-col>
-                </el-row>
+                  </span>
+                </div>
 
-                <el-row>
-                  <el-col :span="2">附件：</el-col>
-                  <el-col :span="22">
+                <div class="line">
+                  <span>{{ $t('Learn_Enclosure') }}：</span>
+                  <span>
                     <el-tag
                       class="accessory-tag"
                       v-for="(accessory, j) in list.accessory_list"
@@ -107,19 +113,20 @@
                     >
                       <a :href="accessory.file_url" target="_blank">{{ accessory.file_name }}</a>
                     </el-tag>
-                  </el-col>
-                </el-row>
+                  </span>
+                </div>
                 <div>
-                  <span>完成情况：</span>
+                  <span>{{ $t('Learn_Completion') }}：</span>
                   <el-row>
-                    <el-col :span="20">
+                    <el-col :span="19">
                       <circle-progress
                         :total-count="list.student_count"
                         :finish-count="list.student_count_finish_task"
                       />
                     </el-col>
-                    <el-col :span="4">
-                      已完成 {{ list.student_count_finish_task }}/{{ list.student_count }}
+                    <el-col :span="5" class="t-right">
+                      {{ $t('Learn_Completed') }}
+                      {{ list.student_count_finish_task }}/{{ list.student_count }}
                     </el-col>
                   </el-row>
                 </div>
@@ -128,16 +135,21 @@
           </el-card>
         </el-timeline-item>
         <!--课后任务-->
-        <el-timeline-item timestamp="课后任务" color="#F02828" placement="top">
+        <el-timeline-item
+          :timestamp="$t('Learn_After_Class_Tasks')"
+          color="#F02828"
+          placement="top"
+        >
           <el-card v-for="(list, i) in afterTaskList" :key="i">
             <el-collapse>
               <el-collapse-item>
                 <template slot="title">
                   <el-row class="classroom-task-title">
                     <el-col :span="4">{{ list.name }}</el-col>
-                    <el-col :span="16" class="title-date">2021-3-23</el-col>
-                    <el-col :span="4">
-                      已完成 {{ list.student_count_finish_task }}/{{ list.student_count }}
+                    <el-col :span="12" class="title-date">2021-3-23</el-col>
+                    <el-col :span="8" class="t-right">
+                      {{ $t('Learn_Completed') }}
+                      {{ list.student_count_finish_task }}/{{ list.student_count }}
                     </el-col>
                   </el-row>
                 </template>
@@ -145,9 +157,9 @@
                 <el-row>
                   <el-col :span="24">{{ list.content }}</el-col>
                 </el-row>
-                <el-row>
-                  <el-col :span="2">课件：</el-col>
-                  <el-col :span="22">
+                <div class="line">
+                  <span>{{ $t('Learn_Courseware') }}：</span>
+                  <span>
                     <el-tag
                       class="courseware-tag"
                       v-for="courseware in list.courseware_list"
@@ -155,12 +167,12 @@
                       type="info"
                       >{{ courseware.name }}</el-tag
                     >
-                  </el-col>
-                </el-row>
+                  </span>
+                </div>
 
-                <el-row>
-                  <el-col :span="2">附件：</el-col>
-                  <el-col :span="22">
+                <div class="line">
+                  <span>{{ $t('Learn_Enclosure') }}：</span>
+                  <span>
                     <el-tag
                       class="accessory-tag"
                       v-for="(accessory, j) in list.accessory_list"
@@ -169,19 +181,20 @@
                     >
                       <a :href="accessory.file_url" target="_blank">{{ accessory.file_name }}</a>
                     </el-tag>
-                  </el-col>
-                </el-row>
+                  </span>
+                </div>
                 <div>
-                  <span>完成情况：</span>
+                  <span>{{ $t('Learn_Completion') }}：</span>
                   <el-row>
-                    <el-col :span="20">
+                    <el-col :span="19">
                       <circle-progress
                         :total-count="list.student_count"
                         :finish-count="list.student_count_finish_task"
                       />
                     </el-col>
-                    <el-col :span="4">
-                      已完成 {{ list.student_count_finish_task }}/{{ list.student_count }}
+                    <el-col :span="5" class="t-right">
+                      {{ $t('Learn_Completed') }}
+                      {{ list.student_count_finish_task }}/{{ list.student_count }}
                     </el-col>
                   </el-row>
                 </div>
@@ -297,6 +310,12 @@ $card-radius: 18px;
         .accessory-tag {
           @extend .courseware-tag;
         }
+        .line {
+          word-break: break-all;
+          height: 36px;
+          line-height: 36px;
+          margin: 6px 0;
+        }
       }
     }
 

src/views/teacher/cs_item_detail/index.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="cs-item-detail-container">
     <div>
-      <span>讲次详情</span>
+      <span>{{ $t('Learn_Lecture_Details') }}</span>
       <div class="cs-item-info">
         <el-row>
-          <el-col :span="21">
+          <el-col :span="18">
             {{ CSItemInfoBox.date_stamp }} {{ CSItemInfoBox.minute_space }}
           </el-col>
-          <el-col :span="3" class="col_right">
-            任务{{
+          <el-col :span="6" class="t-right">
+            {{
               CSItemInfoBox.finish_status === 0
-                ? '未开始'
+                ? $t('Learn_Task_No_Started')
                 : CSItemInfoBox.finish_status === 1
-                ? '已开始'
-                : '已结束'
+                ? $t('Learn_Task_Has_Begun')
+                : $t('Learn_Task_Over')
             }}
           </el-col>
         </el-row>
@@ -23,8 +23,8 @@
         <el-row class="cs-item-class-name">
           <el-col :span="20">{{ CSItemInfoBox.class_name }}</el-col>
           <el-col :span="4">
-            <el-button plain @click.prevent="jumpLiveRoom">进入直播教室</el-button></el-col
-          >
+            <el-button plain @click.prevent="jumpLiveRoom">{{ $t('Learn_Enter_Live') }}</el-button>
+          </el-col>
         </el-row>
       </div>
     </div>
@@ -35,11 +35,13 @@
     />
     <!--学习资料-->
     <div class="learning-material">
-      <div class="learning-material-title">学习资料</div>
+      <div class="learning-material-title">{{ $t('Learn_Materials') }}</div>
       <div>
         <el-row>
           <el-col class="learning-material-upload" :span="24">
-            <el-upload action="/"><el-button>上传文件</el-button></el-upload>
+            <el-upload action="/">
+              <el-button>{{ $t('Learn_Upload') }}</el-button>
+            </el-upload>
           </el-col>
         </el-row>
         <el-tag
@@ -47,8 +49,9 @@
           v-for="(list, i) in CSItemInfoBox.learning_material_list"
           :key="i"
           type="info"
-          ><a href="list.file_url" target="_blank">{{ list.file_url }}</a></el-tag
         >
+          <a :href="list.file_url" target="_blank">{{ list.file_url }}</a>
+        </el-tag>
       </div>
     </div>
   </div>
@@ -58,6 +61,7 @@
 import { getCSItemInfoBox } from '@/api/table';
 import { createEnterLiveRoomLink } from '@/api/live';
 import ClassroomTask from './ClassroomTask';
+import { updateWordPack } from '@/utils/i18n';
 
 export default {
   data() {
@@ -79,7 +83,27 @@ export default {
   components: {
     ClassroomTask
   },
-  mounted() {
+  created() {
+    updateWordPack({
+      word_key_list: [
+        'Learn_Task_No_Started',
+        'Learn_Task_Has_Begun',
+        'Learn_Task_Over',
+        'Learn_Lecture_Details',
+        'Learn_Enter_Live',
+        'Learn_Materials',
+        'Learn_Upload',
+        'Learn_Classroom_Tasks',
+        'Learn_PreClass_Tasks',
+        'Learn_Tasks_In_Class',
+        'Learn_After_Class_Tasks',
+        'Learn_Completed',
+        'Learn_Courseware',
+        'Learn_Enclosure',
+        'Learn_Completion'
+      ]
+    });
+
     getCSItemInfoBox({ id: this.id }).then(response => {
       this.CSItemInfoBox = Object.assign(this.CSItemInfoBox, response);
     });
@@ -106,9 +130,7 @@ export default {
     padding: 15px 28px 20px 45px;
     margin-top: 11px;
     background-color: #eee;
-    .col_right {
-      text-align: right;
-    }
+
     .cs-item-name {
       padding: 16px 0;
     }

src/views/teacher/main/CurriculaManager.vue

@@ -56,7 +56,7 @@ export default {
           id: '1',
           name: '创建时间',
           sortType: 'createTime', // 数组对象中的哪一个属性进行排序
-          order: false //升序还是降序
+          order: false // 升序还是降序
         },
         {
           id: '2',
@@ -172,36 +172,38 @@ export default {
   &-header .el-input {
     width: 244px;
     height: 40px;
-    margin-top: 50px;
-    margin-left: 359px;
+    margin: 37px auto 0 auto;
+    display: block;
   }
-  &-body-button .el-button {
-    width: 97px;
-    height: 52px;
+  &-body-button {
+    display: flex;
+    justify-content: center;
+    margin-top: 35px;
     font-size: 16px;
-    margin-top: 50px;
-    margin-left: 338px;
+    .el-button {
+      width: 97px;
+      height: 52px;
+    }
+    .el-button + .el-button {
+      margin-left: 0;
+    }
   }
+
   .bg-color {
     background: #c4c4c4;
     border: 1px solid #c4c4c4;
     border-radius: 0;
     color: #0c0c0c;
-    margin-bottom: 20px;
     &.active {
       background: #e5e5e5;
       border: 1px solid #0c0c0c;
       border-radius: 0;
       color: #0c0c0c;
-      margin-bottom: 20px;
     }
   }
-  .el-button + .el-button {
-    margin-left: 0;
-  }
+
   .sort {
-    margin-top: 30px;
-    margin-bottom: -35px;
+    margin-top: 25px;
     &-body {
       margin-left: 20px;
     }

src/views/teacher/main/TaskKanban.vue

@@ -41,10 +41,14 @@
         @click.prevent="routerPush(item.id)"
       >
         <el-row class="task-date">
-          <el-col :span="20">{{ item.date_stamp }}&nbsp;{{ item.minute_space }}</el-col>
-          <el-col :span="4" :style="{ 'text-align': 'right' }">
-            任务{{
-              item.finish_status === 0 ? '未开始' : item.finish_status === 1 ? '已开始' : '已结束'
+          <el-col :span="12">{{ item.date_stamp }}&nbsp;{{ item.minute_space }}</el-col>
+          <el-col :span="12" :style="{ 'text-align': 'right' }">
+            {{
+              item.finish_status === 0
+                ? $t('Learn_Task_No_Started')
+                : item.finish_status === 1
+                ? $t('Learn_Task_Has_Begun')
+                : $t('Learn_Task_Over')
             }}
           </el-col>
         </el-row>
@@ -91,6 +95,7 @@ export default {
         this.cs_item_list = response.cs_item_list;
       });
     },
+    // 跳转到讲次详情
     routerPush(id) {
       this.$router.push({ path: `/cs_item_detail/index/${id}` });
     }

src/views/teacher/main/index.vue

@@ -6,7 +6,7 @@
         :key="item.id"
         :class="['tab-menu', { active: currentTab === item.tab }]"
         @click="currentTab = item.tab"
-        v-text="item.name"
+        v-t="item.name"
       ></span>
     </div>
     <keep-alive>
@@ -18,6 +18,7 @@
 <script>
 import TaskKanban from './TaskKanban';
 import CurriculaManager from './CurriculaManager';
+import { updateWordPack } from '@/utils/i18n';
 
 export default {
   name: 'Main',
@@ -27,12 +28,12 @@ export default {
       menu: [
         {
           id: 1,
-          name: '任务面板',
+          name: this.$i18n.t('Learn_Task_Panel'),
           tab: 'TaskKanban'
         },
         {
           id: 2,
-          name: '课程管理',
+          name: this.$i18n.t('Learn_Course_Management'),
           tab: 'CurriculaManager'
         }
       ]
@@ -42,6 +43,17 @@ export default {
     TaskKanban,
     CurriculaManager
   },
+  created() {
+    updateWordPack({
+      word_key_list: [
+        'Learn_Task_Panel',
+        'Learn_Course_Management',
+        'Learn_Task_No_Started',
+        'Learn_Task_Has_Begun',
+        'Learn_Task_Over'
+      ]
+    });
+  },
   computed: {
     currentTabComponent: function () {
       return this.currentTab;
@@ -65,8 +77,7 @@ export default {
     text-align: center;
 
     .tab-menu {
-      display: inline-block;
-      width: 70px;
+      min-width: 70px;
       cursor: pointer;
       padding-bottom: 4px;
       &:first-child {