登陆界面
<template>
<div class="login-box fillconctain">
<section class="form-contianer">
<div class="login-header">
<h4>HXC后台管理系统</h4>
</div>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<h4 class="title">欢迎登录平台</h4>
<el-input class="input-text" type="username" placeholder="用户名" v-model="ruleForm.username" autocomplete="off"></el-input>
<el-input class="input-text" type="password" placeholder="密码" v-model="ruleForm.pass" autocomplete="off"></el-input>
<el-checkbox v-model="checked">记住我</el-checkbox>
<el-button class="submit_btn" type="primary" @click="submitForm('ruleForm')">登录</el-button>
<p class="tip">温馨提示:</p>
<p class="tip">未登录过的用户,自动注册</p>
<p class="tip">注册过的用户可以凭借账户密码登录</p>
</el-form>
</section>
</div>
</template>
<script>
import {
mapActions,mapState} from 'vuex'
export default {
data() {
return {
ruleForm: {
pass: '',
checkPass: '',
age: ''
},
rules: {
username: [
{
trigger: 'blur' }
],
pass: [
{
trigger: 'blur' }
]
},
checked: true
};
},
mounted(){
if(!this.adminInfo.id){
this.getAdminData();
}
},
computed:{
...mapState(['adminInfo'])
},
methods: {
...mapActions(["getAdminData"]),
async submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$message({
type:'success',
message:'登录成功'
})
this.$router.push("manage");
} else {
this.$notify.error({
title:"错误",
message:'请输入正确的用户名或密码',
offset:100
})
return false;
}
});
},
watch:{
adminInfo:function(newValue){
console.log('ssa')
if(newValue.id){
this.$message({
type:'success',
message:'检测到您之前登陆过,将自动登录'
})
this.$router.push('manage')