<template>
|
<div class="main">
|
<a-form-model class="user-layout-login" @keyup.enter.native="handleSubmit">
|
<div class="logo">
|
<a href="/">
|
<img src="~@/assets/logo.png" alt="logo">
|
</a>
|
</div>
|
|
<a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
|
@change="handleTabClick">
|
<a-tab-pane key="tab1" tab="账号密码登录">
|
<login-account ref="alogin" @validateFail="validateFail" @success="loginSuccess"
|
@fail="requestFailed"></login-account>
|
</a-tab-pane>
|
|
<a-tab-pane key="tab2" tab="手机号登录">
|
<login-phone ref="plogin" @validateFail="validateFail" @success="loginSuccess"
|
@fail="requestFailed"></login-phone>
|
</a-tab-pane>
|
</a-tabs>
|
|
<a-form-model-item class="forget-and-register">
|
<!--<a-checkbox @change="handleRememberMeChange" default-checked>自动登录</a-checkbox>-->
|
<router-link :to="{ name: 'alteration'}" class="forget-password">
|
忘记密码
|
</router-link>
|
<router-link :to="{ name: 'register'}" class="register">
|
注册账户
|
</router-link>
|
</a-form-model-item>
|
|
<a-form-model-item>
|
<a-button size="large" htmlType="submit" class="login-button" :loading="loginBtn"
|
@click.stop.prevent="handleSubmit" :disabled="loginBtn" >登 录
|
</a-button>
|
</a-form-model-item>
|
|
</a-form-model>
|
|
<two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess"
|
@cancel="stepCaptchaCancel"></two-step-captcha>
|
<!--<third-login ref="thirdLogin"></third-login>-->
|
</div>
|
</template>
|
|
<script>
|
import Vue from 'vue'
|
import { ACCESS_TOKEN, ENCRYPTED_STRING } from '@/store/mutation-types'
|
import ThirdLogin from './third/ThirdLogin'
|
import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
|
import { getEncryptedString } from '@/utils/encryption/aesEncrypt'
|
import { timeFix } from '@/utils/util'
|
import LoginAccount from './LoginAccount'
|
import LoginPhone from './LoginPhone'
|
|
export default {
|
components: {
|
TwoStepCaptcha,
|
ThirdLogin,
|
LoginAccount,
|
LoginPhone
|
},
|
data() {
|
return {
|
customActiveKey: 'tab1',
|
rememberMe: true,
|
loginBtn: false,
|
requiredTwoStepCaptcha: false,
|
stepCaptchaVisible: false,
|
encryptedString: {
|
key: '',
|
iv: ''
|
}
|
}
|
},
|
created() {
|
Vue.ls.remove(ACCESS_TOKEN)
|
this.getRouterData()
|
this.rememberMe = true
|
},
|
methods: {
|
handleTabClick(key) {
|
this.customActiveKey = key
|
},
|
handleRememberMeChange(e) {
|
this.rememberMe = e.target.checked
|
},
|
/**跳转到登录页面的参数-账号获取*/
|
getRouterData() {
|
this.$nextTick(() => {
|
let temp = this.$route.params.username || this.$route.query.username || ''
|
if (temp) {
|
this.$refs.alogin.acceptUsername(temp)
|
}
|
})
|
},
|
|
//登录
|
handleSubmit() {
|
this.loginBtn = true
|
if (this.customActiveKey === 'tab1') {
|
// 使用账户密码登录
|
this.$refs.alogin.handleLogin(this.rememberMe)
|
} else {
|
//手机号码登录
|
this.$refs.plogin.handleLogin(this.rememberMe)
|
}
|
},
|
// 校验失败
|
validateFail() {
|
this.loginBtn = false
|
},
|
// 登录后台成功
|
requestSuccess(loginResult) {
|
this.$refs.loginSelect.show(loginResult)
|
},
|
//登录后台失败
|
requestFailed(err) {
|
let description = ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试'
|
this.$notification['error']({
|
message: '登录失败',
|
description: description,
|
duration: 4
|
})
|
//账户密码登录错误后更新验证码
|
if (this.customActiveKey === 'tab1' && description.indexOf('密码错误') > 0) {
|
this.$refs.alogin.handleChangeCheckCode()
|
}
|
this.loginBtn = false
|
},
|
//登录成功
|
loginSuccess() {
|
this.$router.push({ path: '/dashboard/analysis' }).catch(() => {
|
console.log('登录跳转首页出错,这个错误从哪里来的')
|
})
|
this.$notification.success({
|
message: '欢迎',
|
description: `${timeFix()}，欢迎回来`
|
})
|
},
|
|
stepCaptchaSuccess() {
|
this.loginSuccess()
|
},
|
stepCaptchaCancel() {
|
this.Logout().then(() => {
|
this.loginBtn = false
|
this.stepCaptchaVisible = false
|
})
|
},
|
//获取密码加密规则
|
getEncrypte() {
|
var encryptedString = Vue.ls.get(ENCRYPTED_STRING)
|
if (encryptedString == null) {
|
getEncryptedString().then((data) => {
|
this.encryptedString = data
|
})
|
} else {
|
this.encryptedString = encryptedString
|
}
|
}
|
|
}
|
|
}
|
</script>
|
<style lang="less" scoped>
|
.user-layout-login {
|
.logo {
|
text-align: center;
|
img {
|
height: 80px;
|
}
|
}
|
|
/deep/ .ant-form-explain {
|
font-size: 14px;
|
margin-bottom: -1px;
|
margin-top: -2px;
|
min-height: 22px;
|
}
|
|
.forget-and-register {
|
margin-bottom: 5px;
|
font-size: 14px;
|
|
.forget-password {
|
color: #fff;
|
float: right;
|
}
|
|
.register {
|
float: right;
|
color: #fff;
|
margin-right: 10px;
|
}
|
}
|
|
button.login-button {
|
font-size: 24.7px;
|
color: #fff;
|
height: 55px;
|
width: 100%;
|
border-radius: 43px;
|
background-color: #80B9D7;
|
border: none;
|
font-weight: bold;
|
}
|
|
}
|
</style>
|
|
<style scoped lang="less">
|
/deep/ .ant-tabs-bar {
|
margin: 20px 0 20px;
|
}
|
|
/deep/ .ant-tabs-nav .ant-tabs-tab {
|
color: rgba(255, 255, 255, .5);
|
font-size: 19px;
|
font-weight: bold;
|
margin: 0 32px 0 0;
|
padding: 12px 16px;
|
|
&.ant-tabs-tab-active {
|
color: #fff;
|
}
|
}
|
|
/deep/ .ant-tabs-ink-bar {
|
width: 0 !important;
|
}
|
|
/deep/ .ant-form-item {
|
margin-bottom: 24px;
|
|
&.ant-form-item-with-help {
|
margin-bottom: 5px;
|
}
|
.ant-form-item-control {
|
line-height: 40px;
|
}
|
}
|
|
/deep/ .login-input {
|
border-radius: 43px;
|
background-color: rgba(255, 255, 255, .3);
|
padding-left: 20px;
|
display: flex;
|
align-items: center;
|
|
img {
|
margin-right: 10px;
|
height: 25px
|
}
|
}
|
|
/deep/ .ant-input,input {
|
border: none;
|
height: 55px;
|
background-color: transparent !important;
|
color: #fff;
|
font-size: 17.9px;
|
letter-spacing: 1px;
|
padding: 6px 11px;
|
|
/*获取焦点*/
|
&:focus {
|
border: none;
|
box-shadow: none;
|
}
|
|
/*自动填充*/
|
&:-webkit-autofill,
|
:-webkit-autofill:hover,
|
:-webkit-autofill:focus,
|
:-webkit-autofill:active{
|
-webkit-text-fill-color: #fff !important;
|
color: #fff;
|
transition: background-color 1000s ease-in-out 0.5s;
|
background-image: none;
|
}
|
|
/*提示栏*/
|
&::placeholder {
|
color: #fff; /* 设置占位符文本的颜色 */
|
font-size: 16px; /* 设置占位符文本的字体大小 */
|
}
|
}
|
</style>
|
