多语言

src/App.vue

@@ -1,12 +1,27 @@
 <template>
-  <div id="app">
+  <div id="app" :dir="dir">
     <keep-alive>
       <router-view v-if="$route.meta.keepAlive" />
     </keep-alive>
     <router-view v-if="!$route.meta.keepAlive" />
   </div>
 </template>
-
+<script>
+export default {
+  name: "App",
+  data() {
+    return {
+      dir: "ltr",
+    };
+  },
+  created() {
+    let lang_type = localStorage.getItem("language_type");
+    if (lang_type == "AR") {
+      this.dir = "rtl";
+    }
+  },
+};
+</script>
 <style>
 * {
   margin: 0;

src/components/Header.vue

@@ -24,7 +24,7 @@
     <div class="userName">
       <template>
         <el-dropdown
-          style="margin-right: 16px; cursor: pointer"
+          style="cursor: pointer"
           trigger="click"
           @command="changeLang"
         >
@@ -57,7 +57,7 @@
           "
           alt=""
         />
-        <span @click="userShow = !userShow">{{
+        <span @click="userShow = !userShow" :class="[language_type=='AR'?'languageAR':'']">{{
           userMessage.user_real_name
         }}</span>
         <div class="userShow" v-show="userShow">
@@ -382,7 +382,6 @@ export default {
       display: flex;
       justify-content: center;
       align-items: center;
-      margin-left: 23px;
       cursor: pointer;
       img {
         width: 24px;
@@ -419,6 +418,7 @@ export default {
       cursor: pointer;
       position: relative;
       color: #000000;
+      margin: 0 23px 0 16px;
       > img {
         width: 34px;
         height: 34px;
@@ -427,6 +427,9 @@ export default {
         color: #000000;
         font-size: 16px;
         padding-left: 10px;
+        &.languageAR{
+            padding: 0 10px 0 0;
+        }
       }
       .userShow {
         position: absolute;

src/components/learnCenter/Course.vue

@@ -6,7 +6,7 @@
         <span>
           <img src="../../assets/learncenter/listTitleImg1.png" alt="" />
         </span>
-        课程
+        <b>课程</b>
       </div>
       <div class="more" @click="gotolist">
         <span> 查看更多 </span>
@@ -87,7 +87,6 @@ export default {
         height: 42px;
         border-radius: 50%;
         background: linear-gradient(215.75deg, #ffa05a 17.74%, #ffb952 82.17%);
-        margin-right: 16px;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -96,6 +95,9 @@ export default {
           height: 15px;
         }
       }
+      b{
+          margin: 0 16px;
+      }
     }
     .title2 {
       font-weight: bold;

src/components/learnCenter/HeaderOne.vue

@@ -1,27 +1,27 @@
 <template>
   <div :class="type ? 'HeaderTwo' : 'HeaderOne'">
     <div>
-      <span class="befor" @click="gohome">
+      <span class="befor" @click="gohome" :class="[language_type=='AR'?'languageAR':'']">
         <img src="../../assets/learncenter/Frame3.png" alt="" />
       </span>
-      <span v-if="classilfyID"> > </span>
+      <span v-if="classilfyID" :class="[language_type=='AR'?'languageAR':'']"> > </span>
       <span
         v-if="classilfyID"
-        v-text="classilfyID == 'TEXTBOOK' ? '教材' : '课程'"
+        v-text="classilfyID == 'TEXTBOOK' ? $t('Key44') : '课程'"
         @click="back"
       ></span>
-      <span class="arrows" v-if="title"> > </span>
+      <span class="arrows" v-if="title" :class="[language_type=='AR'?'languageAR':'']"> > </span>
       <span @click="back" class="text">{{ title }}</span>
       <!-- <span class="text" v-if="type"> TEXTBOOK </span> -->
 
-      <span class="arrows" v-if="text"> > </span>
+      <span class="arrows" v-if="text" :class="[language_type=='AR'?'languageAR':'']"> > </span>
       <span class="text" v-if="text">{{ name }}</span>
     </div>
     <div>
       <div :class="type ? 'Headseek' : 'seek'" @keydown="keyDownSeekData">
         <el-input
           style="width: 300px"
-          placeholder="请输入内容"
+          :placeholder="$t('Key46')"
           v-model="SeekName"
         >
         </el-input>
@@ -30,12 +30,14 @@
           @click="gotoSeekResult"
           src="../../assets/learncenter/Group2149.png"
           alt=""
+          :class="[language_type=='AR'?'languageAR':'']"
         />
         <img
           v-else
           @click="gotoSeekResult"
           src="../../assets/learncenter/Group 2148.png"
           alt=""
+          :class="[language_type=='AR'?'languageAR':'']"
         />
       </div>
     </div>
@@ -45,6 +47,8 @@
 <script>
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
+import { mapGetters } from "vuex";
+import { updateWordPack } from "@/utils/i18n";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
@@ -64,7 +68,9 @@ export default {
     };
   },
   //计算属性 类似于data概念
-  computed: {},
+  computed: {
+      ...mapGetters(["language_type"]),
+  },
   //监控data中数据变化
   watch: {
     keycode(newval, oldval) {
@@ -90,7 +96,7 @@ export default {
 
     gotoSeekResult() {
       if (this.SeekName == "") {
-        this.$message.warning("请输入内容");
+        this.$message.warning(this.$t('Key46'));
         return;
       }
       // 如果不是在搜索结果页面就跳到搜索结果页面
@@ -119,6 +125,10 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     this.SeekName = this.keycode || "";
+    updateWordPack({
+        word_key_list: ["Key44","Key46"],
+    });
+    console.log(this.title)
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -151,8 +161,12 @@ export default {
     display: flex;
     align-items: center;
     > span {
-      margin-left: 15px;
+    //   margin-left: 15px;
+      margin: 0 7px;
       cursor: pointer;
+    //   &.languageAR{
+    //       margin: 0 7px;
+    //   }
     }
     .befor {
       img {
@@ -168,6 +182,9 @@ export default {
       position: relative;
       right: 10px;
     }
+    .languageAR::before {
+      right: -10px;
+    }
     .text {
       font-weight: bold;
       font-size: 16px;
@@ -186,6 +203,10 @@ export default {
       right: 19px;
       top: 7px;
       cursor: pointer;
+      &.languageAR{
+          left: 19px;
+          right: auto;
+      }
     }
   }
 }

src/components/learnCenter/Textbook.vue

@@ -6,7 +6,7 @@
         <span>
           <img src="../../assets/learncenter/listTitleImg2.png" alt="" />
         </span>
-        教材
+        <b>{{$t("Key44")}}</b>
       </div>
       <div class="more" @click="gotolist">
         <span> 查看更多 </span>
@@ -30,6 +30,7 @@
 </template>
 
 <script>
+import { updateWordPack } from "@/utils/i18n";
 export default {
   props: ["classList", "type"],
   data() {
@@ -63,6 +64,11 @@ export default {
       window.open(href, "_blank");
     },
   },
+  created(){
+    updateWordPack({
+        word_key_list: ["Key44","Key46"],
+    });
+  },
 };
 </script>
 
@@ -87,7 +93,6 @@ export default {
         height: 42px;
         border-radius: 50%;
         background: linear-gradient(28.36deg, #ff7d8a 13.41%, #ff616c 84.14%);
-        margin-right: 16px;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -96,6 +101,9 @@ export default {
           height: 15px;
         }
       }
+      b{
+          margin: 0 16px;
+      }
     }
     .title2 {
       font-weight: bold;

src/main.js

@@ -17,7 +17,6 @@ import "@/common/font/font.css"
 import "@/permission"
 import i18n from "@/utils/i18n"
 
-Vue.use(i18n);
 // element 下拉框下拉加载
 Vue.directive('loadmore', {
     bind(el, binding) {
@@ -36,5 +35,6 @@ Vue.directive('loadmore', {
 new Vue({
     router,
     store,
+    i18n,
     render: h => h(App)
 }).$mount('#app')

src/store/modules/lang.js

@@ -18,17 +18,7 @@ const actions = {
     updateLanguageType({ commit }, language_type) {
         return new Promise((reslove, reject) => {
             let MethodName = "login_control-UpdateLanguageType";
-            let userInfor = JSON.parse(getToken());
-
-            let UserCode = "",
-                UserType = "",
-                SessionID = "";
-            if (userInfor) {
-                UserCode = userInfor.user_code;
-                UserType = userInfor.user_type;
-                SessionID = userInfor.session_id;
-            }
-            getContent(MethodName, UserCode, UserType, SessionID, { language_type })
+            getContent(MethodName, { language_type })
                 .then(() => {
                     commit('SET_UPDATE_LANGUAGE_TYPE', language_type);
                     reslove();

src/views/learn-center/ListPage.vue

@@ -43,6 +43,7 @@ import { cousrseAPI, TextbookAPI } from "@/api/api";
 
 import Cookies from "js-cookie";
 import HeaderOne from "@/components/learnCenter/HeaderOne";
+import { updateWordPack } from "@/utils/i18n";
 
 export default {
   name: "teacher_edu",
@@ -62,6 +63,7 @@ export default {
       pageNum: 1,
       pageSize: 8,
       loading: false,
+      headerOneTitle: ""
     };
   },
   computed: {
@@ -140,13 +142,16 @@ export default {
       }
     },
   },
-  created() {
+  async created() {
     this.navName = this.$route.query.id;
+    await updateWordPack({
+        word_key_list: ["Key44","Key46"],
+    });
     if (this.navName == "COURSE") {
       this.headerOneTitle = "课程";
     }
     if (this.navName == "TEXTBOOK") {
-      this.headerOneTitle = "教材";
+      this.headerOneTitle = this.$t("Key44");
     }
     this.getData();
   },

src/views/learn-center/Seekresult.vue

@@ -24,7 +24,7 @@
           {{ item }}
         </div>
       </div>
-      <template v-if="dataList.total_count != 0">
+      <template v-if="dataList && dataList.total_count !== 0">
         <div class="class_list" v-if="dataList">
           <!-- 根据课程和教材进行分别传值 -->
           <component
@@ -79,7 +79,7 @@ import HeaderOne from "@/components/learnCenter/HeaderOne";
 import ClassicalCourse from "@/components/learnCenter/ClassicalCourse";
 import Course from "@/components/learnCenter/Course";
 import Textbook from "@/components/learnCenter/Textbook";
-
+import { updateWordPack } from "@/utils/i18n";
 export default {
   props: [],
   components: {
@@ -101,7 +101,7 @@ export default {
       pageSize: 8,
       targetPage: 1,
       loading: false,
-      classilfyList: ['课程', '教材'],
+      classilfyList: ['课程', this.$t("Key44")],
       classilfyIndex: 0,
       classilfyID: null,
     }
@@ -214,6 +214,9 @@ export default {
     //   this.getData("教材");
     //   this.classilfyIndex = 1;
     // }
+    updateWordPack({
+        word_key_list: ["Key44"],
+    });
   },
 }
 </script>
@@ -261,12 +264,13 @@ export default {
       margin-top: 16px;
       margin-bottom: 16px;
       > div {
-        width: 72px;
+        min-width: 52px;
         height: 32px;
         display: flex;
         justify-content: center;
         align-items: center;
         cursor: pointer;
+        padding: 0 10px;
       }
       .sele {
         background: #ff9900;

src/views/learn-center/index.vue

@@ -13,7 +13,7 @@
           active-text-color="#FF9900"
         >
           <el-menu-item index="COURSE">课程</el-menu-item>
-          <el-menu-item index="TEXTBOOK">教材</el-menu-item>
+          <el-menu-item index="TEXTBOOK">{{$t("Key44")}}</el-menu-item>
           <!-- <el-menu-item index="LIVE LESSON">LIVE LESSON</el-menu-item>
         <el-menu-item index="VIDEO COURSE">VIDEO COURSE</el-menu-item> -->
         </el-menu>
@@ -21,13 +21,14 @@
           <el-input
             v-model="SeekName"
             style="width: 300px"
-            placeholder="请输入内容"
+            :placeholder="$t('Key46')"
           >
           </el-input>
           <img
             @click="gotoSeekResult"
             src="../../assets/learncenter/Group2149.png"
             alt=""
+            :class="[language_type=='AR'?'languageAR':'']"
           />
         </div>
       </div>
@@ -61,6 +62,7 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 import Header from "@/components/Header";
 import Course from "@/components/learnCenter/Course";
 import Textbook from "@/components/learnCenter/Textbook";
@@ -68,6 +70,7 @@ import Live from "@/components/learnCenter/Live";
 import VideoCourse from "@/components/learnCenter/VideoCourse";
 import Cookies from "js-cookie";
 import { cousrseAPI, TextbookAPI } from "@/api/api";
+import { updateWordPack } from "@/utils/i18n";
 export default {
   name: "lear_center",
   components: {
@@ -121,17 +124,6 @@ export default {
           price: "19.9",
         },
       ],
-      dimSeekData: [
-        {
-          value: "dsadqwjkldjwklqjdlkcnx",
-        },
-        {
-          value: "dsadqwjkldjwklqjdlkcnx",
-        },
-        {
-          value: "dsadqwjkldjwklqjdlkcnx",
-        },
-      ],
       disSeekShow: false,
       loading: false,
       ImageList: [
@@ -157,7 +149,9 @@ export default {
       SeekName: "",
     };
   },
-  computed: {},
+  computed: {
+    ...mapGetters(["language_type"]),
+  },
   methods: {
     // 切换导航
     handleSelect(key, keyPath) {
@@ -228,6 +222,9 @@ export default {
       .catch(() => {
         this.loading = false;
       });
+    updateWordPack({
+        word_key_list: ["Key44","Key46"],
+    });
   },
 };
 </script>
@@ -283,6 +280,10 @@ export default {
       right: 19px;
       top: 7px;
       cursor: pointer;
+      &.languageAR{
+          left: 19px;
+          right: auto;
+      }
     }
   }
   .main {