add:国际化

lms/nladmin-ui/src/views/login.vue

@@ -1,34 +1,50 @@
 <template>
   <div class="login" :style="'background-image:url('+ Background +');'">
-    <img v-if="logo" :src="logo" class="sidebar-logo2" />
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
       <h3 class="title">
-        {{title}}</h3>
+        {{ title }}</h3>
       <el-form-item prop="username">
-        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+        <el-input v-model="loginForm.username" type="text" auto-complete="off" :placeholder="$t('common.account')">
           <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
-        <el-input v-model="loginForm.password" type="password" auto-complete="new-password" placeholder="密码" @keyup.enter.native="handleLogin">
+        <el-input v-model="loginForm.password" type="password" auto-complete="off" :placeholder="$t('common.password')" @keyup.enter.native="handleLogin">
           <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
       <el-form-item prop="code">
-        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
+        <el-input v-model="loginForm.code" auto-complete="off" :placeholder="$t('common.verification_code')" style="width: 63%" @keyup.enter.native="handleLogin">
           <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
         </el-input>
         <div class="login-code">
           <img :src="codeUrl" @click="getCode">
         </div>
       </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
-        记住我
-      </el-checkbox>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
+            {{ $t('common.login_rm') }}
+          </el-checkbox>
+        </el-col>
+        <el-col :span="12">
+          <el-dropdown style="display: flex; justify-content: right; color: #409EFF;" trigger="click" @command="changeLanguage">
+            <span class="el-dropdown-link">
+              {{ language }}
+            </span>
+            <!-- 国际化开发：1.修改语言列表-->
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item divided command="zh">简体中文</el-dropdown-item>
+              <el-dropdown-item divided command="en">English</el-dropdown-item>
+              <el-dropdown-item divided command="iv">Vietnamese</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-col>
+      </el-row>
       <el-form-item style="width:100%;">
         <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
+          <span v-if="!loading">{{ $t('common.login') }}</span>
+          <span v-else>{{ $t('common.login_ing') }}</span>
         </el-button>
       </el-form-item>
     </el-form>
@@ -47,27 +63,29 @@ import Config from '@/settings'
 import { getCodeImg } from '@/api/login'
 import Cookies from 'js-cookie'
 import Background from '@/assets/images/background.jpg'
-import Logo from '@/assets/images/hailaing2.png'
+import i18n from '@/i18n'
+import { fetchMessages } from '@/api/i18n'
 export default {
   name: 'Login',
   data() {
     return {
-      title: '印尼海亮铜箔LMS',
+      language: '简体中文',
+      title: i18n.t('platform.title'),
+      title_param: 'platform',
       Background: Background,
-      logo: Logo,
       codeUrl: '',
       cookiePass: '',
       loginForm: {
         username: 'admin',
-        password: '',
+        password: '123456',
         rememberMe: false,
         code: '',
         uuid: ''
       },
       loginRules: {
-        username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
-        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
-        code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
+        username: [{ required: true, trigger: 'blur', message: i18n.t('platform.tip1') }],
+        password: [{ required: true, trigger: 'blur', message: i18n.t('platform.tip2') }],
+        code: [{ required: true, trigger: 'change', message: i18n.t('platform.tip3') }]
       },
       loading: false,
       redirect: undefined
@@ -82,6 +100,7 @@ export default {
     }
   },
   created() {
+    this.setLang(localStorage.getItem('lang'))
     // 获取验证码
     this.getCode()
     // 获取用户名密码等Cookie
@@ -90,6 +109,36 @@ export default {
     this.point()
   },
   methods: {
+    // 中英文切换
+    // 语言切换-x
+    async changeLanguage(locale) {
+      // 如果已经加载过该语言，可以直接设置，避免重复请求
+      if (!this.$i18n.getLocaleMessage(locale)) {
+        const messages = await fetchMessages(locale)
+        this.$i18n.setLocaleMessage(locale, messages.content)
+      }
+      this.$i18n.locale = locale
+      // 可以将当前语言保存到本地存储，以便下次使用
+      localStorage.setItem('lang', locale)
+      this.setLang(locale)
+      location.reload()
+    },
+    langChange(command) {
+      this.$i18n.locale = command
+      localStorage.setItem('lang', command)
+      this.setLang(command)
+      location.reload()
+    },
+    // 国际化开发：2.设置
+    setLang(command) {
+      if (command === 'en') {
+        this.language = 'English'
+      } else if (command === 'zh') {
+        this.language = '简体中文'
+      } else if (command === 'iv') {
+        this.language = 'Vietnamese'
+      }
+    },
     getCode() {
       getCodeImg().then(res => {
         this.codeUrl = res.img
@@ -133,7 +182,11 @@ export default {
           }
           this.$store.dispatch('Login', user).then(() => {
             this.loading = false
-            this.$router.push({ path: this.redirect || '/' })
+            window.location.href = this.redirect
+            // if (this.redirect === 'http://localhost:8013/dashboard'){
+            //   window.location.href = this.redirect
+            // }
+            // this.$router.push({ path: this.redirect || '/' })
           }).catch(() => {
             this.loading = false
             this.getCode()
@@ -149,8 +202,8 @@ export default {
       console.log(point)
       if (point) {
         this.$notify({
-          title: '提示',
-          message: '当前登录状态已过期，请重新登录！',
+          title: i18n.t('common.Tips'),
+          message: i18n.t('common.Tip20'),
           type: 'warning',
           duration: 5000
         })
@@ -162,53 +215,47 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-  .login {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    background-size: cover;
-  }
-  .title {
-    margin: 0 auto 30px auto;
-    text-align: center;
-    color: #006cb6;
-  }
-  .sidebar-logo2 {
-    width: 370px;
-    height: 56px;
-    position: absolute; /* 绝对定位 */
-    top: 8px; /* 顶部对齐 */
-    left: 8px; /* 左侧对齐 */
-  }
-  .login-form {
-    border-radius: 6px;
-    background-color: rgb(252, 247, 247, 0.5); /* 白色背景，50%透明度 */
-    width: 385px;
-    padding: 25px 25px 5px 25px;
-    .el-input {
-      height: 38px;
-      input {
-        height: 38px;
-      }
-    }
-    .input-icon{
-      height: 39px;width: 14px;margin-left: 2px;
-    }
-  }
-  .login-tip {
-    font-size: 13px;
-    text-align: center;
-    color: #bfbfbf;
-  }
-  .login-code {
-    width: 33%;
-    display: inline-block;
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background-size: cover;
+}
+.title {
+  margin: 0 auto 30px auto;
+  text-align: center;
+  color: #707070;
+}
+
+.login-form {
+  border-radius: 6px;
+  background: #ffffff;
+  width: 385px;
+  padding: 25px 25px 5px 25px;
+  .el-input {
     height: 38px;
-    float: right;
-    img{
-      cursor: pointer;
-      vertical-align:middle
+    input {
+      height: 38px;
     }
   }
+  .input-icon{
+    height: 39px;width: 14px;margin-left: 2px;
+  }
+}
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+.login-code {
+  width: 33%;
+  display: inline-block;
+  height: 38px;
+  float: right;
+  img{
+    cursor: pointer;
+    vertical-align:middle
+  }
+}
 </style>