<template>
<div class="adminLogin">
<!-- 标题栏 -->
<div class="sys-title center">
<h1>后台管理系统</h1>
</div>
<!-- 登录框 -->
<div class="form">
<!-- 左侧图片 -->
<div class="form-img" >
<img src="https://f12.baidu.com/it/u=3037456133,794478415&fm=72" alt="" style="width:100%;height:100%">
</div>
<!-- 右侧form表单 -->
<div class="form-content">
<!-- title -->
<div class="login-title center">
<strong>登录</strong>
</div>
<!-- form表单 -->
<div class="login-form">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm login-container">
<el-form-item prop="loginName">
<el-input class="el-icon-yonghu" v-model="ruleForm.loginName" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<p >
<el-checkbox v-model="isChecked">记住密码</el-checkbox>
<span class="forget-pass" @click="forget">忘记密码</span>
</p>
<!-- <el-form-item label="验证码" prop="validCode">
<img :src="verifyImg"/>
<el-input v-model="ruleForm.verifyCode" auto-complete="off"></el-input>
</el-form-item> -->
<el-form-item>
<el-button type="danger" width="100%" @click="login">登陆</el-button>
</el-form-item>
</el-form>
<!-- 注册 -->
<!-- <div>
<p class="isRegister">
<span>还没账号？</span>
<span class="red">立即注册</span>
</p>
</div> -->
</div>
</div>
</div>
<!-- 版权所有 -->
<div class="copyright center">
<p> [版本 6.1.7601]版权所有 (c) 2019 Microsoft Corporation。保留所有权利。</p>
</div>
</div>
</template>
<script>
import CryptoJS from 'crypto-js' //加密插件
import forget from './forget.vue'
export default {
data() {
return {
isChecked: "",
verifyImg: null,
ruleForm: {
loginName: '',
password: '',
verifyCode: ''
},
rules: {
loginName: [
{ required: true, message: '请输入登录账号', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入登录密码', trigger: 'blur' }
]
}
}
},
mounted() {
this.load()
},
methods: {
load() {
// 调用获取cookie的值
this.getCookie()
this.setMenuActive(null)
this.setMenuList(null)
this.$api.user.getVerifyCode({width: 90, height: 100}).then(data=> {
this.verifyImg = data
})
},
login() {
let param = {loginName: this.ruleForm.loginName, password: this.ruleForm.password}
this.$api.user.login(param).then(data=> {
console.log(data)
if(data.retCode == 0) {
// 判断复选框是否被勾选; 勾选则调用配置Cookie方法
if (this.isChecked) { // 记住密码
this.setCookie(this.ruleForm.loginName, this.ruleForm.password, 30) // 保存期限为30天
} else {
this.clearCookie() // 清空 Cookie
}
// 检查用户名和密码是否一致
if(this.ruleForm.loginName == this.ruleForm.password){
console.log("一样？不行")
this.open(data)
}else{
// 把用户信息存放到store中，方便其他页面调用。
this.setUserInfo(data.user)
this.$router.push({path: '/index'})
}
} else {
this.$message.error('登录失败')
}
})
},
open(data){
this.$prompt('用户名和密码不能一致，请设置新密码', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
//inputType:'password',
inputPattern: /^[\w]{6,18}$/,
inputErrorMessage: '密码格式不正确,请输入6-18位的数字或字母'
}).then(({ value }) => {
let id = data.user.userId
let old = this.ruleForm.password
let newPass = value
let param = {userId: id,oldPassword:old, newPassword: newPass}
this.$api.user.modifyPassword(param).then(data=> {
this.$message({
type: 'success',
message: '修改成功，快去登录吧！'
})
})
}).catch(() => {
this.$message({
type: 'info',
message: '您取消了修改密码！'
})
})
},
// 设置Cookie
setCookie(username, password, exdays) { // 用户名, 密码, 保存天数
let text = CryptoJS.AES.encrypt(password, 'secret key 123');//使用CryptoJS方法加密
let exdate = new Date() // 获取时间
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays)
// 字符串拼接cookie
window.document.cookie = 'userName=' + username + ';path=/;expires=' + exdate.toGMTString()
window.document.cookie = 'userPwd=' + text + ';path=/;expires=' + exdate.toGMTString()
},
// 读取Cookie
getCookie() {
//console.log(document.cookie)
if (document.cookie.length > 0) {
// 检查cookie是否有过值
this.isChecked = true
let arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下
for (let i = 0; i < arr.length; i++) {
let arr2 = arr[i].split('=') // 再次切割
// 判断查找相对应的值
if (arr2[0] == 'userName') {
this.ruleForm.loginName = arr2[1] // 保存到保存数据的地方
} else if (arr2[0] == 'userPwd') {
//拿到拿到加密后的密码arr2[1]并解密
var bytes = CryptoJS.AES.decrypt(arr2[1].toString(), 'secret key 123');
var plaintext = bytes.toString(CryptoJS.enc.Utf8); //拿到解密后的密码（登录时输入的密码）
this.ruleForm.password = plaintext;
//this.ruleForm.password = arr2[1]
}
}
}
},
// 清除Cookie
clearCookie() {
this.setCookie('', '', -1) // 修改2值都为空，天数为负1天就好了
},
// 忘记密码
forget() {
this.$modal(forget, '50%')
},
}
}
</script>
<style lang="scss">
.adminLogin{
background-color: #b3080e;
padding: 5% 25%;
.sys-title{
padding-bottom:30px;
}
.form{
width:100%;
height:300px;
// border:1px solid #d3d3d3;
background-color: #fff;
.form-img{
float:left;
width:50%;
height:100%;
background-color:yellow;
}
.form-content{
float:left;
width:50%;
margin: 0 auto;
.login-title{
margin-top:20px;
}
.login-form{
padding: 30px;
.forget-pass{
float:right;
font-size: 12px;
color:#b3080e;
}
.el-button{
margin-top:30px;
width:100%;
background-color: #b3080e;
}
}
.isRegister{
font-size:12px;
color:#666;
}
}
}
.copyright{
padding-top:30px;
}
.center{
text-align: center;
}
.red{
color:#b3080e;
}
}
</style>
