登录页无外乎就是一个表单 然后加密 调接口
效果如下:
代码如下:
<template>
<div class="login">
<div class="heads">
<img src="@/assets/logo.png" alt="">
众药联科技
</div>
<div class="logins">
<div class="loginpng">
<img src="@/assets/loginback.png" alt="">
</div>
<div class="logindiv">
<div class="dl">
登录
</div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="60px" class="demo-ruleForm">
<el-form-item label="账号" prop="username">
<el-input v-model="ruleForm.username" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="密码" prop="passwd">
<el-input v-model="ruleForm.passwd" :type="type" placeholder="请输入内容">
<i style="font-size: 22px;margin-right: 10px;cursor: pointer;" slot="suffix"
class="el-icon-view" @click="isShow"></i>
</el-input>
</el-form-item>
</el-form>
<el-button type="primary" @click="getUsers('ruleForm')">登录</el-button>
</div>
</div>
<div class="fixed">
</div>
</div>
</template>
<script>
import { getUser } from "@/api/index"
import { Base64 } from 'js-base64'; // 引入base64加密
export default {
data() {
return {
type: "password",
show: false,
ruleForm: {
username: "",
passwd: ""
},
rules: {
username: [
{ required: true, message: '请输入账号', trigger: 'blur' }
],
passwd: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 4, max: 10, message: '密码长度在 4 到 10 个字符', trigger: 'blur' }
]
}
}
},
methods: {
// 是否显示密码
isShow() {
this.show = !this.show
// 是则显示密码
if (this.show) {
this.type = "text"
} else { // 否则不显示
this.type = "password"
}
},
// 登录
getUsers(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// base64加密
let passwd = JSON.parse(JSON.stringify(Base64.encode(this.ruleForm.passwd))) // 深拷贝
getUser({ username: this.ruleForm.username, passwd }).then(res => {
if (res.code == 200){
this.$router.push({name: "user"})
}
})
} else {
console.log('error submit!!');
return false;
}
});
},
}
}
</script>
<style scoped>
.login {
width: 100%;
height: 100%;
position: relative;
}
.logins {
position: absolute;
bottom: 10vh;
left: 0;
right: 0;
margin: 0 auto;
height: 70%;
width: 80%;
border: 1px solid #f0eeee;
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
}
.loginpng {
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.loginpng img {
width: 80%;
height: 80%;
}
.heads {
height: 80px;
display: flex;
align-items: center;
font-weight: 600;
font-size: 24px;
color: #2d6fe9;
padding-left: 30px;
border-bottom: 1px solid #f0eeee;
}
.fixed {
position: absolute;
bottom: 0;
left: 0;
height: 10%;
width: 100%;
background-color: #2d6fe9;
}
.logindiv {
width: 50%;
height: 100%;
padding-top: 10%;
padding-right: 40px;
}
.dl {
font-size: 20px;
font-weight: 600;
color: #2d6fe9;
padding: 30px 10px;
}
::v-deep .el-button {
width: 100%;
}
</style>