[update 登录] 登录页

src/common/lang/en-us.js

@@ -777,5 +777,27 @@ module.exports = {
   regulatoryComplianceAssessmentDatabase,
   onlineEditor: {
     missRequireField: 'Missing required fields'
+  },
+  // 登录
+  login: {
+    systemName: 'Chery Standard regulation management system',
+    language: 'English',
+    userLogin: 'ACCOUNT LOGIN',
+    account: 'Account Number',
+    password: 'Cipher',
+    code: 'Verification Code',
+    login: 'Login',
+    showPassword: 'Show Password',
+    hidePassword: 'Hide Password',
+    loginFailMessage: 'Login Failed',
+    requestFailMessage: 'There was an error with the request, please try again later',
+    checkPhoneMessage: 'Your phone number format is incorrect',
+    checkCodeMessage: 'The verification code you entered is incorrect',
+    codeSendFail: 'Verification code sending failed',
+    welcome: 'Welcome',
+    welcomeBack: ',Welcome Back',
+    reLogin: 'Re Login',
+    phone: 'Mobile Phone Number',
+    codeSending: 'Verification code is being sent'
   }
 }

src/common/lang/zh-cn.js

@@ -777,5 +777,27 @@ module.exports = {
   regulatoryComplianceAssessmentDatabase,
   onlineEditor: {
     missRequireField: '缺少必填字段'
+  },
+  // 登录
+  login: {
+    systemName: '奇瑞标准法规管理系统',
+    language: '中文',
+    userLogin: '账号登录',
+    account: '账号',
+    password: '密码',
+    code: '验证码',
+    login: '登录',
+    showPassword: '显示密码',
+    hidePassword: '隐藏密码',
+    loginFailMessage: '登录失败',
+    requestFailMessage: '请求出现错误，请稍后再试',
+    checkPhoneMessage: '您的手机号码格式不正确',
+    checkCodeMessage: '您输入的验证码不正确',
+    codeSendFail: '验证码发送失败',
+    welcome: '欢迎',
+    welcomeBack: '，欢迎回来',
+    reLogin: '重新登陆',
+    phone: '手机号',
+    codeSending: '验证码发送中'
   }
 }

src/components/layouts/UserLayout.vue

@@ -13,7 +13,8 @@
         </div>
       </div>
       <div class="illustration" v-if="!mobile">
-        <img src="@/assets/home.png" alt="">
+        <div class="illustration-img"><img src="@/assets/image/loginLogo.png" alt=""></div>
+        <p class="illustration-title">{{$t('login.systemName')}}</p>
       </div>
       <route-view></route-view>
     </div>
@@ -124,15 +125,37 @@ function isMobile () {
 
       .illustration{
         position: absolute;
-        max-width: 50%;
+        left: 12vw;
+        top: 20vh;
+        max-width: 40%;
         max-height: 100%;
-        height: 100%;
         min-width: 400px;
-        display: flex;
+
-        justify-content: center;
+        .illustration-img {
-        align-items: center;
+          margin-bottom: 40px;
-        img{
+        }
-          max-width: 70%;
+        img {
+          max-width: 100%;
+        }
+
+        .illustration-title {
+          font-family: PingFang SC, PingFang SC, sans-serif;
+          font-weight: 600;
+          font-size: 40px;
+          color: #333333;
+          line-height: 1.2;
+        }
+      }
+      @media screen and (max-width: 1366px) {
+        .illustration{
+          top: 15vh;
+
+          .illustration-img {
+            margin-bottom: 32px;
+          }
+          .illustration-title {
+            font-size: 32px;
+          }
         }
       }
     }

src/views/user/Login.vue

@@ -1,101 +1,76 @@
 <template>
   <div class="main">
-    <a-form v-if="!mobile" :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
+    <a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin" hideRequiredMark>
       <div class="user-box">
-        <span class="title">用户登录</span>
+        <div class="lang-box">
-        <a-row>
+          <a-dropdown :trigger="['click']">
-          <a-col :span="3"></a-col>
+            <div class="lang-btn">
-          <a-col :span="18">
+              <a-icon type="global" style="font-size: 16px;" />
-            <a-form-item>
+              <span style="margin: 0 4px">{{ $t('login.language') }}</span>
+              <a-icon type="down" />
+            </div>
+            <a-menu slot="overlay" style="width: 100%;" @click="changeLang">
+              <a-menu-item key="zh-cn">中文</a-menu-item>
+              <a-menu-item key="en-us">English</a-menu-item>
+            </a-menu>
+          </a-dropdown>
+        </div>
+        <span class="title">{{ $t('login.userLogin') }}</span>
+        <a-row style="width: 80%; margin: auto;">
+          <a-col>
+            <a-form-item :label="$t('login.account')">
               <a-input
                 size="large"
-                v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
+                v-decorator="['username',validatorRules.username]"
                 type="text"
-                placeholder="请输入帐号">
+                :placeholder="$t('pleaseEnter') + $t('login.account')">
-                <a-icon slot="prefix" type="user" :style="{ color: '#B3B7C2',fontSize:'20px' }" />
               </a-input>
             </a-form-item>
           </a-col>
-          <a-col :span="3"></a-col>
+          <a-col>
-        </a-row>
+            <a-form-item :label="$t('login.password')">
-        <a-row>
-          <a-col :span="3"></a-col>
-          <a-col :span="18">
-            <a-form-item>
               <a-input
-                v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules,validateTrigger: 'blur'}]"
+                v-decorator="['password',validatorRules.password]"
                 size="large"
-                :type="passwordType"
+                :type="passwordStatus ? 'text' : 'password'"
                 autocomplete="false"
-                placeholder="请输入密码"
+                :placeholder="$t('pleaseEnter') + $t('login.password')"
                 @paste.native.capture.prevent="handleOperate"
               >
-                <a-icon title="显示密码"
+                <a-icon :title="$t('login.showPassword')"
-                        @click="passwordType='text'"
+                        @click="passwordStatus = !passwordStatus"
                         slot="suffix"
-                        v-if="passwordType==='password'"
+                        :type="passwordStatus ? 'eye' : 'eye-invisible'"
-                        type="eye"
                         :style="{ color: '#B3B7C2',fontSize:'20px' }" />
-                <a-icon title="隐藏密码"
-                        @click="passwordType='password'"
-                        slot="suffix"
-                        v-else
-                        type="eye-invisible"
-                        :style="{ color: '#B3B7C2',fontSize:'20px' }" />
-                <a-icon slot="prefix" type="lock" :style="{ color: '#B3B7C2',fontSize:'20px' }" />
               </a-input>
             </a-form-item>
           </a-col>
-          <a-col :span="3"></a-col>
+          <a-col>
-        </a-row>
+            <a-form-item :label="$t('login.code')">
-        <a-row style="margin-bottom: 2%;">
-          <a-col :span="3"></a-col>
-          <a-col :span="12">
-            <a-form-item>
               <a-input
+                class="input-code"
                 v-decorator="['inputCode',validatorRules.inputCode]"
                 size="large"
                 type="text"
                 @change="inputCodeChange"
                 autocomplete="off"
-                placeholder="请输入验证码">
+                :placeholder="$t('pleaseEnter') + $t('login.code')">
-                <a-icon slot="prefix" type="safety" :style="{ color: '#B3B7C2',fontSize:'20px'}" />
+                <template slot="suffix">
+                  <img v-if="requestCodeSuccess"
+                       style="margin: 6px; height: 36px;"
+                       :src="randCodeImage"
+                       @click="handleChangeCheckCode"
+                       alt="" />
+                  <img v-else
+                       style="margin: 6px; height: 36px;"
+                       src="../../assets/checkcode.png"
+                       @click="handleChangeCheckCode"
+                       alt="" />
+                </template>
               </a-input>
             </a-form-item>
           </a-col>
-          <a-col :span="6" style="text-align: right">
+          <a-col class="login-btn">
-            <img v-if="requestCodeSuccess"
-                 style="margin-top: 2px;"
-                 :src="randCodeImage"
-                 @click="handleChangeCheckCode"
-                 alt="" />
-            <img v-else
-                 style="margin-top: 2px;"
-                 src="../../assets/checkcode.png"
-                 @click="handleChangeCheckCode"
-                 alt="" />
-          </a-col>
-          <a-col :span="3"></a-col>
-        </a-row>
-        <!--<a-row style="margin-bottom: 2%;">-->
-        <!--  <a-col :span="3"></a-col>-->
-        <!--  <a-col :span="7">-->
-        <!--    <a-form-item>-->
-        <!--      <a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]">自动登录</a-checkbox>-->
-        <!--    </a-form-item>-->
-        <!--  </a-col>-->
-        <!--  <a-col :span="6"></a-col>-->
-        <!--  <a-col :span="5" style="text-align: right;color: #1891FF;">-->
-        <!--    <a-form-item>-->
-        <!--      <router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">-->
-        <!--        忘记密码-->
-        <!--      </router-link>-->
-        <!--    </a-form-item>-->
-        <!--  </a-col>-->
-        <!--</a-row>-->
-        <a-row class="login-btn">
-          <a-col :span="3"></a-col>
-          <a-col :span="18">
             <a-form-item>
               <a-button
                 block
@@ -105,102 +80,7 @@
                 :loading="loginBtn"
                 @click.stop.prevent="handleSubmit"
                 :disabled="loginBtn">
-                {{ loginBtn ? '登录中' : '登录' }}
+                {{ $t('login.login') }}
-              </a-button>
-            </a-form-item>
-          </a-col>
-          <a-col :span="3"></a-col>
-        </a-row>
-      </div>
-    </a-form>
-    <a-form v-if="mobile"
-            :form="form"
-            class="user-layout-login user-layout-login-mobile"
-            ref="formLogin"
-            id="formLogin">
-      <div class="user-box user-box-mobile">
-        <a-row>
-          <a-col :span="24">
-            <a-form-item>
-              <a-input
-                size="large"
-                v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
-                type="text"
-                placeholder="请输入帐号">
-                <a-icon slot="prefix" type="user" :style="{ color: '#B3B7C2',fontSize:'20px' }" />
-              </a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row>
-          <a-col :span="24">
-            <a-form-item>
-              <a-input
-                v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules,validateTrigger: 'blur'}]"
-                size="large"
-                type="password"
-                autocomplete="false"
-                placeholder="请输入密码"
-              >
-                <a-icon slot="prefix" type="lock" :style="{ color: '#B3B7C2',fontSize:'20px' }" />
-              </a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row>
-          <a-col :span="14">
-            <a-form-item>
-              <a-input
-                v-decorator="['inputCode',validatorRules.inputCode]"
-                size="large"
-                type="text"
-                @change="inputCodeChange"
-                placeholder="请输入验证码">
-                <a-icon slot="prefix" type="safety" :style="{ color: '#B3B7C2',fontSize:'20px'}" />
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :span="10" style="text-align: right">
-            <img v-if="requestCodeSuccess"
-                 style="margin-top: 2px;"
-                 :src="randCodeImage"
-                 @click="handleChangeCheckCode"
-                 alt="" />
-            <img v-else
-                 style="margin-top: 2px;"
-                 src="../../assets/checkcode.png"
-                 @click="handleChangeCheckCode"
-                 alt="" />
-          </a-col>
-        </a-row>
-        <a-row>
-          <a-col :span="10">
-            <a-form-item>
-              <a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]">自动登录
-              </a-checkbox>
-            </a-form-item>
-          </a-col>
-          <a-col :span="4"></a-col>
-          <a-col :span="9" style="text-align: right;color: #1891FF;">
-            <a-form-item>
-              <router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
-                忘记密码
-              </router-link>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row class="login-btn">
-          <a-col :span="24">
-            <a-form-item>
-              <a-button
-                block
-                size="large"
-                type="primary"
-                htmlType="submit"
-                :loading="loginBtn"
-                @click.stop.prevent="handleSubmit"
-                :disabled="loginBtn">
-                {{ loginBtn ? '登录中' : '登录' }}
               </a-button>
             </a-form-item>
           </a-col>
@@ -211,14 +91,14 @@
 </template>
 <script>
 import { mapActions } from 'vuex'
-import { timeFix } from '@/utils/util'
+import { isMobile, timeFix } from '@/utils/util'
 import Vue from 'vue'
 import { ACCESS_TOKEN/* , ENCRYPTED_STRING, USER_INFO */ } from '@/store/mutation-types'
 import { postAction, getAction } from '@/api/manage'
 
 import { getRSAPublicKey } from '@/utils/encryption.js'
 import { JSEncrypt } from 'jsencrypt'
-// const Base64 = require('js-base64').Base64
+import moment from 'moment/moment'
 
 export default {
   components: {},
@@ -236,30 +116,28 @@ export default {
       },
       validatorRules: {
         username: {
-          rules: [{
+          rules: [
-            required: true,
+            { required: true, message: this.$t('pleaseEnter') + this.$t('login.account') },
-            message: '请输入用户名!'
+            { validator: this.handleUsernameOrEmail }
-          }, { validator: this.handleUsernameOrEmail }]
+          ],
+          validateTrigger: 'blur'
         },
         password: {
-          rules: [{
+          rules: [
-            required: true,
+            { required: true, message: this.$t('pleaseEnter') + this.$t('login.password'), validator: 'click' }
-            message: '请输入密码!',
+          ],
-            validator: 'click'
+          validateTrigger: 'blur'
-          }]
         },
         mobile: { rules: [{ validator: this.validateMobile }] },
         captcha: {
-          rule: [{
+          rule: [
-            required: true,
+            { required: true, message: this.$t('pleaseEnter') + this.$t('login.code') }
-            message: '请输入验证码!'
+          ]
-          }]
         },
         inputCode: {
-          rules: [{
+          rules: [
-            required: true,
+            { required: true, message: this.$t('pleaseEnter') + this.$t('login.code') }
-            message: '请输入验证码!'
+          ]
-          }]
         }
       },
       velorifiedCode: '',
@@ -270,7 +148,7 @@ export default {
       randCodeImage: '',
       requestCodeSuccess: false,
       rsaPublicKey: '',
-      passwordType: 'password' // passwordType : password , text
+      passwordStatus: false // 密码状态，默认隐藏
     }
   },
   created () {
@@ -282,6 +160,12 @@ export default {
   },
   methods: {
     ...mapActions(['Login', 'Logout', 'PhoneLogin']),
+    changeLang ({ key }) {
+      localStorage.setItem('language', key)
+      moment.locale(key)
+      this.$i18n.locale = key
+      this.$root.Bus.$emit('switchLanguage', key)
+    },
     handleUsernameOrEmail (rule, value, callback) {
       const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
       if (regex.test(value)) {
@@ -329,7 +213,7 @@ export default {
       const that = this
       this.form.validateFields(['mobile'], { force: true }, (err, values) => {
         if (!values.mobile) {
-          that.cmsFailed('请输入手机号')
+          that.cmsFailed(this.$t('pleaseEnter') + this.$t('login.phone'))
         } else if (!err) {
           this.state.smsSendBtn = true
           const interval = window.setInterval(() => {
@@ -340,7 +224,7 @@ export default {
             }
           }, 1000)
 
-          const hide = this.$message.loading('验证码发送中..', 0)
+          const hide = this.$message.loading(this.$t('login.codeSending') + '..', 0)
           const smsParams = {}
           smsParams.mobile = values.mobile
           smsParams.smsmode = '0'
@@ -391,21 +275,21 @@ export default {
       this.$router.push({ path: '/' }).catch((/* res */) => {
       })
       this.$notification.success({
-        message: '欢迎',
+        message: this.$t('login.welcome'),
-        description: `${timeFix()}，欢迎回来`
+        description: `${timeFix()}${this.$t('login.welcomeBack')}`
       })
     },
     cmsFailed (err) {
       this.$notification.error({
-        message: '验证码发送失败',
+        message: this.$t('login.codeSendFail'),
         description: err,
         duration: 4
       })
     },
     requestFailed (err) {
       this.$notification.error({
-        message: '登录失败',
+        message: this.$t('login.loginFailMessage'),
-        description: ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试',
+        description: ((err.response || {}).data || {}).message || err.message || this.$t('login.requestFailMessage'),
         duration: 4
       })
 
@@ -422,14 +306,14 @@ export default {
       if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
         callback()
       } else {
-        callback(new Error('您的手机号码格式不正确!'))
+        callback(new Error(this.$t('login.checkPhoneMessage')))
       }
     },
     validateInputCode (rule, value, callback) {
       if (!value || this.verifiedCode === this.inputCodeContent) {
         callback()
       } else {
-        callback(new Error('您输入的验证码不正确!'))
+        callback(new Error(this.$t('login.checkCodeMessage')))
       }
     },
     generateCode (value) {
@@ -453,31 +337,6 @@ export default {
     }
   }
 }
-
-// 判断当前设备
-function isMobile () {
-  const userAgentInfo = navigator.userAgent
-
-  const mobileAgents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
-
-  let mobileFlag = false
-
-  // 根据userAgent判断是否是手机
-  for (let v = 0; v < mobileAgents.length; v++) {
-    if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
-      mobileFlag = true
-      break
-    }
-  }
-  const screenWidth = window.screen.width
-  const screenHeight = window.screen.height
-
-  // 根据屏幕分辨率判断是否是手机
-  if (screenWidth < 500 && screenHeight < 800) {
-    mobileFlag = true
-  }
-  return mobileFlag
-}
 </script>
 
 <style lang="less" scoped>
@@ -485,22 +344,20 @@ function isMobile () {
   padding-left: 40px;
 }
 
-.ant-row {
-  margin-bottom: 4%;
-}
-
 .main {
   height: 100%;
+  background-image: url("~@/assets/image/loginBg.png");
+  background-size: cover;
+  background-position: center;
 
   .user-layout-login {
     z-index: 99;
-    width: 24%;
+    width: 28%;
-    height: 50%;
+    height: fit-content;
-    padding: 3% 0 3% 0;
+    padding: 20px 16px 70px;
     min-width: 332px;
     min-height: 460px;
     background: #fff;
-    border-radius: 20px;
     position: absolute;
     right: 8%;
     top: 50%;
@@ -510,41 +367,74 @@ function isMobile () {
       width: 100%;
       height: 100%;
       overflow: hidden;
-      display: flex;
+
-      justify-content: space-between;
+      .lang-box {
-      flex-direction: column;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        font-size: 14px;
+      }
 
       .title {
         display: block;
         color: #1891FF;
-        font-size: 28px;
+        margin: 18px 0 48px 0;
-        font-weight: 500;
-        margin: 0 0 5% 0;
         text-align: center;
+        font-family: PingFang SC, PingFang SC, sans-serif;
+        font-weight: 600;
+        font-size: 30px;
+        color: rgba(0,0,0,0.9);
+        line-height: 35px;
+      }
+      /deep/.ant-input-lg {
+        height: 48px;
+      }
+      /deep/ .ant-form-item-label {
+        line-height: 16px;
+        margin-bottom: 12px;
+      }
+      .input-code {
+        /deep/ input {
+          padding-right: 130px;
+        }
+        /deep/ .ant-input-suffix {
+          right: 6px;
+        }
       }
 
       .login-btn {
-        margin-bottom: 0;
+        /deep/button {
-        font-size: 10px;
+          height: 58px;
+          font-weight: 500;
+          font-size: 18px;
+        }
       }
     }
   }
+  // 1366
+  @media screen and (max-width: 1366px) {
+    .user-layout-login {
+      width: 30%;
+      padding: 20px 16px;
 
-  .user-layout-login-mobile {
+      .user-box {
-    right: 0;
+        .title {
-    width: 100%;
+          margin: 18px 0 40px 0;
-    min-width: 0 !important;
+          font-size: 30px;
-    height: 46% !important;
+          line-height: 35px;
-    background: transparent;
+        }
-    min-height: 0;
-    padding: 0 2rem 0 2rem;
-    position: absolute;
-    top: 50%;
-    margin-top: 6rem;
-    transform: translateY(-50%);
 
-    .ant-row {
+        /deep/ .ant-input-lg {
-      margin-bottom: 0;
+          height: 40px;
+        }
+
+        .login-btn {
+          /deep/ button {
+            height: 48px;
+            font-size: 16px;
+          }
+        }
+      }
     }
   }
 }

src/views/user/LoginSelectTenant.vue

@@ -147,8 +147,8 @@ export default {
     },
     requestFailed (err) {
       this.$notification.error({
-        message: '登录失败',
+        message: this.$t('login.loginFailMessage'),
-        description: ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试',
+        description: ((err.response || {}).data || {}).message || err.message || this.$t('login.requestFailMessage'),
         duration: 4
       })
       this.loginBtn = false

src/views/user/oauth2/OAuth2Login.vue

@@ -86,15 +86,15 @@ export default {
       this.$router.replace({ path: INDEX_MAIN_PAGE_PATH })
       // TODO 这个提示是否还需要？
       this.$notification.success({
-        message: '欢迎',
+        message: this.$t('login.welcome'),
-        description: `${timeFix()}，欢迎回来`
+        description: `${timeFix()}${this.$t('login.welcomeBack')}`
       })
     },
     requestFailed (err) {
       this.$error({
-        title: '登录失败',
+        title: this.$t('login.loginFailMessage'),
-        content: ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试',
+        content: ((err.response || {}).data || {}).message || err.message || this.$t('login.requestFailMessage'),
-        okText: '重新登陆',
+        okText: this.$t('login.reLogin'),
         onOk () {
           window.location.reload()
         },