[update 登录] 登录页

2024-08-08 20:34:56 +08:00
parent 3818ed2497
commit 05a308c550
8 changed files with 222 additions and 265 deletions
@@ -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'
  }
 }
@@ -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: '验证码发送中'
  }
 }
@@ -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;
-        align-items: center;
-        img{
-          max-width: 70%;
+
+        .illustration-img {
+          margin-bottom: 40px;
+        }
+        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;
+          }
        }
      }
    }
@@ -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>
-        <a-row>
-          <a-col :span="3"></a-col>
-          <a-col :span="18">
-            <a-form-item>
+        <div class="lang-box">
+          <a-dropdown :trigger="['click']">
+            <div class="lang-btn">
+              <a-icon type="global" style="font-size: 16px;" />
+              <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="请输入帐号">
-                <a-icon slot="prefix" type="user" :style="{ color: '#B3B7C2',fontSize:'20px' }" />
+                :placeholder="$t('pleaseEnter') + $t('login.account')">
              </a-input>
            </a-form-item>
          </a-col>
-          <a-col :span="3"></a-col>
-        </a-row>
-        <a-row>
-          <a-col :span="3"></a-col>
-          <a-col :span="18">
-            <a-form-item>
+          <a-col>
+            <a-form-item :label="$t('login.password')">
              <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="显示密码"
-                        @click="passwordType='text'"
+                <a-icon :title="$t('login.showPassword')"
+                        @click="passwordStatus = !passwordStatus"
                        slot="suffix"
-                        v-if="passwordType==='password'"
-                        type="eye"
+                        :type="passwordStatus ? 'eye' : 'eye-invisible'"
                        :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-row>
-        <a-row style="margin-bottom: 2%;">
-          <a-col :span="3"></a-col>
-          <a-col :span="12">
-            <a-form-item>
+          <a-col>
+            <a-form-item :label="$t('login.code')">
              <a-input
+                class="input-code"
                v-decorator="['inputCode',validatorRules.inputCode]"
                size="large"
                type="text"
                @change="inputCodeChange"
                autocomplete="off"
-                placeholder="请输入验证码">
-                <a-icon slot="prefix" type="safety" :style="{ color: '#B3B7C2',fontSize:'20px'}" />
+                :placeholder="$t('pleaseEnter') + $t('login.code')">
+                <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">
-            <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-col class="login-btn">
            <a-form-item>
              <a-button
                block
@@ -105,102 +80,7 @@
                :loading="loginBtn"
                @click.stop.prevent="handleSubmit"
                :disabled="loginBtn">
-                {{ loginBtn ? '登录中' : '登录' }}
-              </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 ? '登录中' : '登录' }}
+                {{ $t('login.login') }}
              </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: [{
-            required: true,
-            message: '请输入用户名!'
-          }, { validator: this.handleUsernameOrEmail }]
+          rules: [
+            { required: true, message: this.$t('pleaseEnter') + this.$t('login.account') },
+            { validator: this.handleUsernameOrEmail }
+          ],
+          validateTrigger: 'blur'
        },
        password: {
-          rules: [{
-            required: true,
-            message: '请输入密码!',
-            validator: 'click'
-          }]
+          rules: [
+            { required: true, message: this.$t('pleaseEnter') + this.$t('login.password'), validator: 'click' }
+          ],
+          validateTrigger: 'blur'
        },
        mobile: { rules: [{ validator: this.validateMobile }] },
        captcha: {
-          rule: [{
-            required: true,
-            message: '请输入验证码!'
-          }]
+          rule: [
+            { required: true, message: this.$t('pleaseEnter') + this.$t('login.code') }
+          ]
        },
        inputCode: {
-          rules: [{
-            required: true,
-            message: '请输入验证码!'
-          }]
+          rules: [
+            { required: true, message: this.$t('pleaseEnter') + this.$t('login.code') }
+          ]
        }
      },
      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: '欢迎',
-        description: `${timeFix()}，欢迎回来`
+        message: this.$t('login.welcome'),
+        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: '登录失败',
-        description: ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试',
+        message: this.$t('login.loginFailMessage'),
+        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%;
-    height: 50%;
-    padding: 3% 0 3% 0;
+    width: 28%;
+    height: fit-content;
+    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;
-      flex-direction: column;
+
+      .lang-box {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        font-size: 14px;
+      }

      .title {
        display: block;
        color: #1891FF;
-        font-size: 28px;
-        font-weight: 500;
-        margin: 0 0 5% 0;
+        margin: 18px 0 48px 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;
-        font-size: 10px;
+        /deep/button {
+          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 {
-    right: 0;
-    width: 100%;
-    min-width: 0 !important;
-    height: 46% !important;
-    background: transparent;
-    min-height: 0;
-    padding: 0 2rem 0 2rem;
-    position: absolute;
-    top: 50%;
-    margin-top: 6rem;
-    transform: translateY(-50%);
+      .user-box {
+        .title {
+          margin: 18px 0 40px 0;
+          font-size: 30px;
+          line-height: 35px;
+        }

-    .ant-row {
-      margin-bottom: 0;
+        /deep/ .ant-input-lg {
+          height: 40px;
+        }
+
+        .login-btn {
+          /deep/ button {
+            height: 48px;
+            font-size: 16px;
+          }
+        }
+      }
    }
  }
 }
@@ -147,8 +147,8 @@ export default {
    },
    requestFailed (err) {
      this.$notification.error({
-        message: '登录失败',
-        description: ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试',
+        message: this.$t('login.loginFailMessage'),
+        description: ((err.response || {}).data || {}).message || err.message || this.$t('login.requestFailMessage'),
        duration: 4
      })
      this.loginBtn = false
@@ -86,15 +86,15 @@ export default {
      this.$router.replace({ path: INDEX_MAIN_PAGE_PATH })
      // TODO 这个提示是否还需要？
      this.$notification.success({
-        message: '欢迎',
-        description: `${timeFix()}，欢迎回来`
+        message: this.$t('login.welcome'),
+        description: `${timeFix()}${this.$t('login.welcomeBack')}`
      })
    },
    requestFailed (err) {
      this.$error({
-        title: '登录失败',
-        content: ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试',
-        okText: '重新登陆',
+        title: this.$t('login.loginFailMessage'),
+        content: ((err.response || {}).data || {}).message || err.message || this.$t('login.requestFailMessage'),
+        okText: this.$t('login.reLogin'),
        onOk () {
          window.location.reload()
        },