<template>
|
<div class="login">
|
<div class="login-box">
|
<!-- <div class="top">
|
<div class="logo"><img src="~@/assets/img/login-logo.png"
|
alt=""></div>
|
</div> -->
|
<div class="mid">
|
<div class="midBg">
|
<el-form :model="dataForm"
|
:rules="dataRule"
|
ref="dataForm"
|
@keyup.enter.native="dataFormSubmit()"
|
status-icon>
|
<el-form-item prop="userName">
|
<el-input class="info"
|
v-model="dataForm.userName"
|
clearable
|
placeholder="帐号"></el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-input class="info"
|
v-model="dataForm.password"
|
clearable
|
show-password
|
type="password"
|
placeholder="密码"></el-input>
|
</el-form-item>
|
<el-form-item prop="googleAuthCode">
|
<el-input class="info"
|
type="number"
|
clearable
|
v-model="dataForm.googleAuthCode"
|
placeholder="谷歌验证码"></el-input>
|
</el-form-item>
|
<!-- <el-form-item prop="captcha">
|
<el-row :gutter="20">
|
<el-col :span="14">
|
<el-input v-model="dataForm.captcha"
|
placeholder="验证码">
|
</el-input>
|
</el-col>
|
<el-col :span="10"
|
class="login-captcha">
|
<img :src="captchaPath"
|
@click="getCaptcha()"
|
alt="">
|
</el-col>
|
</el-row>
|
</el-form-item> -->
|
<el-form-item>
|
<!-- <div class="item-btn"><input type="primary"
|
:loading="loading"
|
value="登录"
|
@click="dataFormSubmit()"></div> -->
|
<el-button type="primary" class="infoButton"
|
:loading="loading"
|
@click="dataFormSubmit()">
|
登录
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
|
<div class="bottom"></div>
|
</div>
|
<Verify
|
ref="verify"
|
:captcha-type="'blockPuzzle'"
|
:img-size="{width:'400px',height:'200px'}"
|
@success="login"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import { getUUID } from '@/utils'
|
import Verify from '@/components/verifition/Verify'
|
import { encrypt } from '@/utils/crypto'
|
export default {
|
components: {
|
Verify
|
},
|
data () {
|
return {
|
dataForm: {
|
userName: '',
|
password: '',
|
uuid: '',
|
captcha: '',
|
googleAuthCode:''
|
},
|
loading:false,
|
dataRule: {
|
userName: [
|
{ required: true, message: '账号不能为空', trigger: 'blur' }
|
],
|
password: [
|
{ required: true, message: '密码不能为空', trigger: 'blur' }
|
],
|
googleAuthCode: [
|
{ required: true, message: '谷歌验证码不能为空', trigger: 'blur' }
|
],
|
captcha: [
|
{ required: true, message: '验证码不能为空', trigger: 'blur' }
|
]
|
},
|
captchaPath: ''
|
}
|
},
|
beforeDestroy () {
|
document.removeEventListener('keyup', this.handerKeyup)
|
},
|
created () {
|
//this.getCaptcha() //图片验证
|
document.addEventListener('keyup', this.handerKeyup)
|
},
|
methods: {
|
handerKeyup (e) {
|
var keycode = document.all ? event.keyCode : e.which
|
if (keycode === 13) {
|
this.dataFormSubmit()
|
}
|
},
|
// 提交表单
|
dataFormSubmit () {
|
this.$refs['dataForm'].validate((valid) => {
|
if (valid) {
|
this.login()
|
//this.$refs.verify.show() //图片验证
|
}
|
})
|
},
|
login (verifyResult) {
|
// if (this.isSubmit) {
|
// return
|
// }
|
this.loading = true
|
this.isSubmit = true
|
this.$http({
|
url: this.$http.adornUrl('/adminLogin'),
|
method: 'post',
|
data: this.$http.adornData({
|
'userName': this.dataForm.userName,
|
'passWord': encrypt(this.dataForm.password),
|
'googleAuthCode':this.dataForm.googleAuthCode
|
// 'captchaVerification': verifyResult.captchaVerification
|
})
|
}).then(({ data }) => {
|
this.loading = false
|
//this.isSubmit = false
|
if(data.code == 0){
|
this.$cookie.set('Authorization', data.data.accessToken)
|
this.$router.push({ path: '/home' })
|
this.$login = true;
|
}else{
|
this.$message({
|
message: data.msg,
|
type: "error",
|
});
|
this.$login = false;
|
}
|
// this.$router.replace({ name: 'home' })
|
}).catch(() => {
|
this.loading = false
|
this.isSubmit = true
|
this.$login = false;
|
})
|
},
|
// dataFormSubmit () {
|
// this.$refs['dataForm'].validate((valid) => {
|
// if (valid) {
|
// this.$http({
|
// url: this.$http.adornUrl('/login?grant_type=admin'),
|
// method: 'post',
|
// data: this.$http.adornData({
|
// 'principal': this.dataForm.userName,
|
// 'credentials': this.dataForm.password,
|
// 'sessionUUID': this.dataForm.uuid,
|
// 'imageCode': this.dataForm.captcha
|
// })
|
// }).then(({ data }) => {
|
// this.$cookie.set('Authorization', 'bearer' + data.access_token)
|
// this.$router.replace({ name: 'home' })
|
// }).catch(() => {
|
// this.getCaptcha()
|
// })
|
// }
|
// })
|
// },
|
// 获取验证码
|
getCaptcha () {
|
this.dataForm.uuid = getUUID()
|
this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
*,
|
*:before,
|
*:after {
|
box-sizing: border-box;
|
}
|
.login {
|
width: 100%;
|
height: 100%;
|
background: url(~@/assets/img/Maskgroup.png) no-repeat top;
|
background-size: 100%;
|
position: fixed;
|
}
|
.mid{
|
background: url(~@/assets/img/longinBg.png) no-repeat center;
|
background-size: 100%;
|
width: 655px;
|
height: 536px;
|
padding-top: 101px;
|
}
|
.midBg{
|
width: 76%;
|
height: 320px;
|
background: #fff;
|
margin: 0 auto;
|
padding: 44px 0 0 56px;
|
}
|
.login .login-box {
|
position: absolute;
|
left: 50%;
|
transform: translateX(-50%);
|
height: 100%;
|
padding-top: 10%;
|
}
|
.login .login-box .top {
|
margin-bottom: 30px;
|
text-align: center;
|
}
|
.login .login-box .top .logo {
|
font-size: 0;
|
max-width: 50%;
|
margin: 0 auto;
|
}
|
.login .login-box .top .company {
|
font-size: 16px;
|
margin-top: 10px;
|
}
|
.login .login-box .mid {
|
font-size: 14px;
|
}
|
.login .login-box .mid .item-btn {
|
margin-top: 10px;
|
}
|
.login .login-box .mid .item-btn input {
|
border: 0;
|
width: 74%;
|
height: 40px;
|
box-shadow: 0;
|
background: #1f87e8;
|
color: #fff;
|
}
|
.info {
|
width: 400px;
|
margin: 0 auto;
|
border-radius: 30px;
|
|
}
|
.infoButton{
|
width: 400px;
|
margin: 0 auto;
|
margin-top: 10px;
|
border-radius: 30px;
|
}
|
.login-captcha {
|
height: 40px;
|
}
|
.login .login-box .bottom {
|
position: absolute;
|
bottom: 10%;
|
width: 100%;
|
color: #999;
|
font-size: 12px;
|
text-align: center;
|
}
|
.el-form-item {
|
margin-bottom: 15px !important;
|
}
|
.info input[type='number']::-webkit-outer-spin-button,
|
|
.info input[type='number']::-webkit-inner-spin-button {
|
-webkit-appearance: none;
|
|
}
|
::v-deep .el-input__inner{
|
background: #F4F6FA !important;
|
margin-bottom: 10px;
|
border: none;
|
border-radius: 30px;
|
}
|
.info::-webkit-outer-spin-button,
|
|
.info::-webkit-inner-spin-button {
|
-webkit-appearance: none;
|
|
}
|
</style>
|
