import Request from '@/utils/request';
import Cookies from 'js-cookie';
export default {
data() {
return {
overlaylongClass: 'overlaylong',
overlaytitleClass: 'overlaytitle',
displayMode: 0, // 默认显示登录页面
username: '',
password: '',
confirmPassword: '',
usernameError: '',
passwordError: '',
confirmPasswordError: '',
login: {
username: '',
password: ''
},
};
},
computed: {
isFormValid() {
return !this.usernameError && !this.passwordError && !this.confirmPasswordError;
},
isLoginFormValid() {
return this.login.username !== '' && this.login.password !== '';
}
},
methods: {
signIn() {
this.overlaylongClass = "overlaylongleft";
this.overlaytitleClass = "overlaytitleright";
setTimeout(() => {
this.displayMode = 1;
}, 200);
},
firstLoginpush() {
this.overlaylongClass = "overlaylongright";
this.overlaytitleClass = "overlaytitleleft";
setTimeout(() => {
this.displayMode = 0;
}, 200);
},
resetPassword() {
// 这里可以添加重置密码的逻辑
console.log('忘记密码');
},
signUp() {
if (this.login.username === '' || this.login.password === '') {
this.$message.error('请输入用户名和密码');
return;
}
Request.post('login/loginadmin', {
username: this.login.username,
password: this.login.password
}).then((res) => {
console.log(res);
if (res.data.msg != 0) {
// 登录成功后设置 Cookie 并直接跳转到 /firstpage
Cookies.set('admin', JSON.stringify(res.data.data));
this.$router.push('/firstpage').catch(() => {});
this.$message.success('登录成功');
} else {
this.$message.error('用户名或密码错误,请重新输入');
this.login.username = '';
this.login.password = '';
}
}).catch((error) => {
console.error('登录请求失败:', error);
this.$message.error('登录请求失败,请稍后再试');
});
},
validateUsername() {
if (this.username.trim() === '') {
this.usernameError = '用户名不能为空';
return;
}
if (this.username.length < 8 || this.username.length > 15) {
this.usernameError = '用户名必须在8到15个字符之间';
return;
}
const regex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d!@#$%^&*()_+\-=[\]{};':"|,.<>/?]*$/;
if (!regex.test(this.username)) {
this.usernameError = '用户名必须同时包含字母和数字,并且可以包含特殊字符';
return;
}
this.usernameError = '';
},
validatePassword() {
if (this.password.trim() === '') {
this.passwordError = '密码不能为空';
return;
}
if (this.confirmPassword.trim() === '') {
this.confirmPasswordError = '确认密码不能为空';
return;
}
if (this.password.length < 8 || this.password.length > 15) {
this.passwordError = '密码必须在8到15个字符之间';
return;
}
const regex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d!@#$%^&*()_+\-=[\]{};':"|,.<>/?]*$/;
if (!regex.test(this.password)) {
this.passwordError = '密码必须同时包含字母和数字,并且可以包含特殊字符';
return;
}
if (this.password !== this.confirmPassword) {
this.confirmPasswordError = '密码不一致';
return;
}
this.passwordError = '';
this.confirmPasswordError = '';
},
enroll() {
if (this.isFormValid) {
if (this.username === '' && this.password === '') {
this.$notify.error("请输入有效的用户名和密码后再进行注册");
} else if (this.username === '' && this.password !== '') {
this.$notify.error("请输入有效的用户名后再进行注册");
} else if (this.username !== '' && this.password === '') {
this.$notify.error("请输入有效的密码后再进行注册");
} else {
Request.post("login/enroll", { username: this.username, password: this.password })
.then((res) => {
console.log(res);
if (res.data.data === 0) {
this.$notify.success("注册成功");
this.username = '';
this.password = '';
this.confirmPassword = '';
} else if (res.data.data == 1) {
this.$notify.error("用户已存在");
}
}).catch((error) => {
console.error('申请异常', error);
this.$message.error('申请异常,请稍后再试');
});
}
} else {
this.$notify.error("请输入有效的用户名和密码后再次尝试");
}
}
}
};
.center {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
h1 {
font-size: 30px;
color: #333;
margin-bottom: 20px;
}
.error {
color: red;
font-size: 14px;
margin-top: 5px;
}
.inupbutton:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.logon {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
width: 768px;
max-width: 100%;
min-height: 480px;
display: flex;
overflow: hidden;
}
.overlaylong {
border-radius: 10px 0 0 10px;
width: 50%;
height: 100%;
background-color: #f9f9f9;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 20px;
}
.overlaylongleft {
border-radius: 0px 10px 10px 0px;
width: 50%;
height: 100%;
background-color: #f9f9f9;
transform: translateX(100%);
transition: transform 0.6s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 20px;
}
.overlaylongright {
border-radius: 10px 0 0 10px;
width: 50%;
height: 100%;
background-color: #f9f9f9;
transform: translateX(0%);
transition: transform 0.6s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 20px;
}
.overlaytitle {
border-radius: 0px 10px 10px 0px;
width: 50%;
height: 100%;
background-color: #29eac4;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 20px;
color: #fff;
}
.overlaytitleleft {
border-radius: 0px 10px 10px 0px;
width: 50%;
height: 100%;
background-color: #29eac4;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 20px;
color: #fff;
transform: translateX(0%);
transition: transform 0.6s ease-in-out;
}
.overlaytitleright {
border-radius: 0px 10px 10px 0px;
width: 50%;
height: 100%;
background-color: #29eac4;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 20px;
color: #fff;
transform: translateX(-100%);
transition: transform 0.6s ease-in-out;
}
.overlaytitleH2 {
font-size: 24px;
margin-bottom: 10px;
}
.overlaytitleP {
font-size: 16px;
margin-bottom: 20px;
}
.buttongohs {
width: 180px;
height: 40px;
border-radius: 50px;
border: 1px solid #fff;
color: #fff;
font-size: 15px;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.overlaylongH2 {
font-size: 24px;
color: #333;
margin-bottom: 20px;
}
input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 10px 0;
width: 240px;
border-radius: 5px;
font-size: 16px;
}
h3 {
font-size: 14px;
margin-top: 10px;
cursor: pointer;
color: #666;
}
.inupbutton {
background-color: #29eac4;
border: none;
width: 180px;
height: 40px;
border-radius: 50px;
font-size: 15px;
color: #fff;
text-align: center;
line-height: 40px;
margin-top: 30px;
cursor: pointer;
}