修改多语言问题

src/components/login/LoginNav.vue

@@ -118,7 +118,8 @@
 import Cookies from "js-cookie";
 import { getStaticContent, getContent } from "@/api/api";
 
-import { getToken, removeToken } from "@/utils/auth";
+import { getToken, removeToken, setToken } from "@/utils/auth";
+import { setI18nLang } from "@/utils/i18n";
 export default {
   props: [
     "type",
@@ -195,8 +196,16 @@ export default {
       this.lang = command.language_name;
       let lang_type = command.language_type;
       console.log(lang_type);
-      localStorage.setItem("language_type", lang_type);
-      //await setI18nLang(lang_type);
+      let userInfor = getToken();
+      if (userInfor) {
+        await setI18nLang(lang_type);
+        userInfor = JSON.parse(getToken());
+        userInfor.language_type = lang_type;
+        setToken(userInfor);
+      } else {
+        localStorage.setItem("language_type", lang_type);
+      }
+
       this.$router.go(0);
     },
     // 切换登录的注册

src/components/login/login.vue

@@ -93,18 +93,23 @@
           />
         </div>
         <div class="verificationCode-box">
-              <input
-                type="text"
-                :class="'input'"
-                :placeholder="$t('Key36')"
-                v-model="verificationCode"
-                @input="ChangeVericationCode"
-                maxlength="20"
-              />
-            <div class="verificationCode-img">
-                <img v-if="verificationCodeimg" :src="verificationCodeimg" :alt="$t('Key36')" @click="getVerificationCodeimg"/>
-            </div>
+          <input
+            type="text"
+            :class="'input'"
+            :placeholder="$t('Key36')"
+            v-model="verificationCode"
+            @input="ChangeVericationCode"
+            maxlength="20"
+          />
+          <div class="verificationCode-img">
+            <img
+              v-if="verificationCodeimg"
+              :src="verificationCodeimg"
+              :alt="$t('Key36')"
+              @click="getVerificationCodeimg"
+            />
           </div>
+        </div>
       </template>
       <!-- 验证码登录   v-show="loginType == '验证码'"
        -->
@@ -178,8 +183,18 @@
       </div>
     </div>
     <div v-show="shadow" class="shadow"></div>
-    <el-dialog :visible.sync="showUseragreement" width="80%" append-to-body :show-close="false" :close-on-click-modal="false" class="login-userAgree">
-        <UserAgreement class="userAgree-login" :changeAgreement="changeAgreement" />
+    <el-dialog
+      :visible.sync="showUseragreement"
+      width="80%"
+      append-to-body
+      :show-close="false"
+      :close-on-click-modal="false"
+      class="login-userAgree"
+    >
+      <UserAgreement
+        class="userAgree-login"
+        :changeAgreement="changeAgreement"
+      />
     </el-dialog>
   </div>
 </template>
@@ -190,11 +205,12 @@
 import { getLogin, getStaticContent } from "@/api/api";
 import { setToken } from "@/utils/auth";
 import { mapGetters } from "vuex";
-import UserAgreement from "./UserAgreement.vue" // 用户协议
-import md5 from 'js-md5'
+import UserAgreement from "./UserAgreement.vue"; // 用户协议
+import md5 from "js-md5";
+import { setI18nLang } from "@/utils/i18n";
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: {UserAgreement},
+  components: { UserAgreement },
   props: ["ForgetType", "changeLoginReg", "changeLoginType", "getChildSysList"],
   data() {
     //这里存放数据
@@ -214,10 +230,9 @@ export default {
       password: "",
       showUseragreement: false, // 是否显示用户协议
       verificationCode: "",
-      verificationCodeimg: '', // 图形验证码
-      verificationCodeimgID: '', // 图形验证码ID
+      verificationCodeimg: "", // 图形验证码
+      verificationCodeimgID: "", // 图形验证码ID
       verificationCodeLoading: true, // 图形验证码的flag
-
     };
   },
   //计算属性 类似于data概念
@@ -244,8 +259,8 @@ export default {
     ChangePassword() {
       this.password = this.password.trim();
     },
-    ChangeVericationCode(){
-        this.verificationCode = this.verificationCode.trim()
+    ChangeVericationCode() {
+      this.verificationCode = this.verificationCode.trim();
     },
     //选择密码登录和验证码登录
     selectLoginType(type) {
@@ -277,10 +292,10 @@ export default {
           flag = false;
           return;
         }
-        if(!this.verificationCode){
-            this.$message.warning(this.$t("Key37"))
-            flag = false;
-            return;
+        if (!this.verificationCode) {
+          this.$message.warning(this.$t("Key37"));
+          flag = false;
+          return;
         }
         if (!this.ageeemnt) {
           this.$message.warning(this.$t("Key543"));
@@ -299,7 +314,7 @@ export default {
         is_password_md5: "true",
         password: md5(this.password).toUpperCase(),
         verification_code_image_text: this.verificationCode,
-        verification_code_image_id: this.verificationCodeimgID
+        verification_code_image_id: this.verificationCodeimgID,
       };
       if (this.rememberMe) {
       } else {
@@ -318,22 +333,23 @@ export default {
             localStorage.setItem("user_name", JSON.stringify(obj));
           }
           setToken(res);
-          if (
-            res.popedom_code_list.indexOf(2000001) > -1 ||
-            res.user_type == "STUDENT"
-          ) {
-            this.$message.warning(this.$t("Key247") + "....");
-            location.href = `/GCLS-Learn/#/EnterSys`;
-          } else {
-            this.getChildSysList();
-          }
+          setI18nLang(this.language_type).then(() => {
+            if (
+              res.popedom_code_list.indexOf(2000001) > -1 ||
+              res.user_type == "STUDENT"
+            ) {
+              this.$message.warning(this.$t("Key247") + "....");
+              location.href = `/GCLS-Learn/#/EnterSys`;
+            } else {
+              this.getChildSysList();
+            }
+          });
         })
         .catch((err) => {
           this.isLogin = false;
-          setTimeout(()=>{
-              this.getVerificationCodeimg()
-          },1000)
-          
+          setTimeout(() => {
+            this.getVerificationCodeimg();
+          }, 1000);
         });
     },
     // 回车登录
@@ -347,34 +363,37 @@ export default {
       this.changeLoginReg(value);
     },
     viewUserAgreement() {
-        this.showUseragreement = true
+      this.showUseragreement = true;
     },
-    changeAgreement(flag){
-        this.ageeemnt = flag
-        this.showUseragreement = false
+    changeAgreement(flag) {
+      this.ageeemnt = flag;
+      this.showUseragreement = false;
     },
     // 图形验证码
-    getVerificationCodeimg(){
-        if(!this.verificationCodeLoading) return
-        this.verificationCodeLoading = false
-        let MethodName = "login_control-GetVerificationCodeImage";
-        let data = {};
-        getStaticContent(MethodName, data).then((res) => {
-            if(res){
-                this.verificationCodeLoading = true
-                this.verificationCodeimgID = res.image_id
-                this.verificationCodeimg = 'data:image/jpeg;base64,'+res.image_content_base64
-            }else{
-                this.verificationCodeLoading = true;
-            }
-        }).catch(() => {
+    getVerificationCodeimg() {
+      if (!this.verificationCodeLoading) return;
+      this.verificationCodeLoading = false;
+      let MethodName = "login_control-GetVerificationCodeImage";
+      let data = {};
+      getStaticContent(MethodName, data)
+        .then((res) => {
+          if (res) {
             this.verificationCodeLoading = true;
+            this.verificationCodeimgID = res.image_id;
+            this.verificationCodeimg =
+              "data:image/jpeg;base64," + res.image_content_base64;
+          } else {
+            this.verificationCodeLoading = true;
+          }
+        })
+        .catch(() => {
+          this.verificationCodeLoading = true;
         });
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    this.getVerificationCodeimg()
+    this.getVerificationCodeimg();
     let user_name = JSON.parse(localStorage.getItem("user_name"));
     if (user_name) {
       this.email_phone = user_name.email_phone;
@@ -382,9 +401,7 @@ export default {
     }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    
-  },
+  mounted() {},
   //生命周期-创建之前
   beforeCreated() {},
   //生命周期-挂载之前
@@ -526,26 +543,26 @@ export default {
           background: #f6f6f6;
         }
       }
-      &.verificationCode-box{
-          display: flex;
-          >.input{
-            width: 164px;
-            flex: 1;
-            padding-left: 10px;
-          }
-          >div{
-            &.verificationCode-img{
-                width: 128px;
-                height: 48px;
-                margin-left: 5px;
-                background: #C5C5C5;
-                border-radius: 4px;             
-                overflow: hidden;
-                >img{
-                    height: 48px;
-                    cursor: pointer;
-                }
+      &.verificationCode-box {
+        display: flex;
+        > .input {
+          width: 164px;
+          flex: 1;
+          padding-left: 10px;
+        }
+        > div {
+          &.verificationCode-img {
+            width: 128px;
+            height: 48px;
+            margin-left: 5px;
+            background: #c5c5c5;
+            border-radius: 4px;
+            overflow: hidden;
+            > img {
+              height: 48px;
+              cursor: pointer;
             }
+          }
         }
       }
     }
@@ -661,22 +678,22 @@ export default {
     }
   }
 }
-.login-userAgree{
-    .el-dialog{
-        border-radius: 8px;
-        height: 70%;
-    }
-    .el-dialog__header{
-        padding: 0;
-    }
-    .el-dialog__body{
-        padding: 0;
-        border-radius: 8px;
-        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-        height: 100%;
-    }
+.login-userAgree {
+  .el-dialog {
+    border-radius: 8px;
+    height: 70%;
+  }
+  .el-dialog__header {
+    padding: 0;
+  }
+  .el-dialog__body {
+    padding: 0;
+    border-radius: 8px;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    height: 100%;
+  }
 }
-.v-modal{
-    opacity: 0.1;
+.v-modal {
+  opacity: 0.1;
 }
 </style>

src/main.js

@@ -15,6 +15,7 @@ import router from './router'
 import "@/common/font/font.css"
 import i18n from "@/utils/i18n"
 
+
 // Vue.use(i18n)
 // import '@/icons' // icon
 // import '@/permission' // permission control

src/store/modules/lang.js

@@ -1,15 +1,29 @@
 import Cookies from 'js-cookie';
 import { getContent } from '@/api/api';
-import { getToken, removeToken } from "@/utils/auth";
+import { getToken, setToken } from "@/utils/auth";
 
+let locale = 'ZH';
+if (getToken()) {
+  const user = JSON.parse(getToken());
+  let language_type = user.language_type;
+  locale = language_type || localStorage.getItem('language_type') || "ZH";
+} else {
+  locale = localStorage.getItem('language_type') || "ZH";
+}
 
 const state = {
-  language_type: localStorage.getItem('language_type') || 'ZH'
+  language_type: locale
 }
 
 const mutations = {
   SET_UPDATE_LANGUAGE_TYPE: (state, language_type) => {
     localStorage.setItem('language_type', language_type);
+    let userInfor = getToken();
+    if (userInfor) {
+      userInfor = JSON.parse(getToken());
+      userInfor.language_type = language_type;
+      setToken(userInfor);
+    }
     state.language_type = language_type;
   },
 }

src/utils/i18n.js

@@ -1,7 +1,8 @@
 import Vue from 'vue';
 import VueI18n from 'vue-i18n';
-import store from '../store';
+import store from '@/store';
 import { getStaticContent } from '@/api/api';
+import { getToken } from '@/utils/auth';
 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';
@@ -9,10 +10,18 @@ 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);
+
+let locale = 'ZH';
+if (getToken()) {
+  const user = JSON.parse(getToken());
+  let language_type = user.language_type;
+  locale = language_type || localStorage.getItem('language_type') || "ZH";
+} else {
+  locale = localStorage.getItem('language_type') || "ZH";
+}
 const i18n = new VueI18n({
-  locale: localStorage.getItem('language_type') || "ZH", //store.getters.language_type,
+  locale: locale,//store.getters.language_type,
   messages: {
     ZH: {
       ...zhLocal