<template>
<el-form ref="AccountFrom"
:model="account"
:rules="rules"
label-position="left"
label-width="0px"
class="demo-ruleForm login-container">
<h3 class="title">系统登录</h3>
<el-form-item prop="username">
<el-input type="text" v-model="account.username" auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="pwd">
<el-input type="password" v-model="account.pwd" auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<el-form-item prop="verifycode">
<el-input
type="verity"
v-model="account.verifycode"
auto-complete="off"
placeholder="验证码"
class="verify1">
</el-input>
<div class="verify2" @click="refreshCode">
<Sidentify :identifyCode="identifyCode"></Sidentify>
</div>
</el-form-item>
<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" @click.native.prevent="handleLogin" :loading="logining" >登录</el-button>
</el-form-item>
</el-form>
</template>
<script>
import {requestLogin} from '../api/api';
//引用图形验证码
import Sidentify from '../components/identify.vue';
//import NProgress from 'nprogress'
export default {
data() {
// 验证码自定义验证规则
const validateVerifycode = (rule, value, callback) => {
if (value=='') {
callback(new Error('请输入验证码'));
console.log('你有', value);
} else if (value !== this.identifyCode) {
callback(new Error('验证码不正确!'));
console.log('validateVerifycode:', value);
} else {
callback(new Error('验证码不正确!'));
}
}
return {
logining: false,
account: {
username: 'admin',
pwd: '123456',
verifycode:''
},
rules: {
username: [
{required: true, message: '请输入账号', trigger: 'blur'},
//{ validator: validaePass }
],
pwd: [
{required: true, message: '请输入密码', trigger: 'blur'},
//{ validator: validaePass2 }
],
verifycode: [
{
trigger: 'blur',
validator: validateVerifycode
}
]
},
checked: true,
identifyCodes: "1234567890",
identifyCode: ""
};
},
mounted() {
this.identifyCode = "";
this.makeCode(this.identifyCodes, 4);
},
methods: {
// 图形验证码
randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min);
},
refreshCode() {
this.identifyCode = "";
this.makeCode(this.identifyCodes, 4);
},
makeCode(o, l) {
for (let i = 0; i < l; i++) {
this.identifyCode += this.identifyCodes[
this.randomNum(0, this.identifyCodes.length)
];
}
// console.log(this.identifyCode);
},
// 图形验证码E
handleLogin() {
this.$refs.AccountFrom.validate((valid) => {
if (valid) {
this.logining = true;
//NProgress.start();
var loginParams = { username: this.account.username, password: this.account.pwd };
// let loginParams = new URLSearchParams();
// loginParams.append("username",this.account.username);
// loginParams.append("password",this.account.pwd);
requestLogin(loginParams).then(data => {
this.logining = false;
let { msg, code, token } = data;
if(code == '200'){
//登录成功,把用户信息保存在sessionStorage中
sessionStorage.setItem('access-token', token);
//跳转到后台主界面
this.$router.push({ path: '/home' });
}else{
this.$message({
message: msg,
type: 'error'
});
}
});
} else {
this.$message({
message: '输入有误,请重新填写!',
type: 'error'
});
console.log('error submit!!');
return false;
}
});
}
},
components:{
Sidentify
}
}
</script>
<style>
body{
background:url(../assets/login/lgbg.png);
}
.login-container{
width:350px;
margin-left:35%;
}
.el-checkbox{
float: left;
}
.verify1 {
width:64%;
}
.verify2 {
width:35%;
float: right;
}
</style>
在 rules 里面 不加相关message相关信息绑定 才可正常使用callback