You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
265 lines
9.0 KiB
265 lines
9.0 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>登录页面</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f5f5f5;
|
|
color: #333;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.login-container {
|
|
background-color: white;
|
|
width: 90%;
|
|
max-width: 400px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
padding: 40px;
|
|
}
|
|
|
|
.login-title {
|
|
text-align: center;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
margin-bottom: 30px;
|
|
color: #333;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #666;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
box-sizing: border-box;
|
|
transition: all 0.3s;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.form-input:hover {
|
|
border-color: #1677ff;
|
|
}
|
|
|
|
.form-input:focus {
|
|
outline: none;
|
|
border-color: #1677ff;
|
|
box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
|
|
}
|
|
|
|
.login-btn {
|
|
width: 100%;
|
|
padding: 14px;
|
|
background-color: #1677ff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.login-btn:hover {
|
|
background-color: #4096ff;
|
|
box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3);
|
|
}
|
|
|
|
.login-btn:disabled {
|
|
background-color: #d9d9d9;
|
|
cursor: not-allowed;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.error-message {
|
|
color: #f5222d;
|
|
font-size: 12px;
|
|
margin-top: 8px;
|
|
display: none;
|
|
}
|
|
|
|
.error-message.show {
|
|
display: block;
|
|
}
|
|
|
|
.loading {
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
border-top-color: white;
|
|
animation: spin 0.8s linear infinite;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-container">
|
|
<h1 class="login-title">审核系统登录</h1>
|
|
|
|
<form id="loginForm">
|
|
<div class="form-group">
|
|
<label class="form-label" for="projectName">职位名称</label>
|
|
<input type="text" class="form-input" id="projectName" name="projectName" placeholder="请输入职位名称" required>
|
|
<div class="error-message" id="projectNameError"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="userName">用户名</label>
|
|
<input type="text" class="form-input" id="userName" name="userName" placeholder="请输入用户名" required>
|
|
<div class="error-message" id="userNameError"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="password">密码</label>
|
|
<input type="password" class="form-input" id="password" name="password" placeholder="请输入密码" required>
|
|
<div class="error-message" id="passwordError"></div>
|
|
</div>
|
|
|
|
<div class="error-message" id="loginError"></div>
|
|
|
|
<button type="submit" class="login-btn" id="loginBtn">
|
|
登录
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
// 登录表单提交事件
|
|
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
// 获取表单数据
|
|
const projectName = document.getElementById('projectName').value.trim();
|
|
const userName = document.getElementById('userName').value.trim();
|
|
const password = document.getElementById('password').value.trim();
|
|
|
|
// 验证表单
|
|
let isValid = true;
|
|
|
|
// 职位名称验证
|
|
const projectNameError = document.getElementById('projectNameError');
|
|
if (!projectName) {
|
|
projectNameError.textContent = '请输入职位名称';
|
|
projectNameError.classList.add('show');
|
|
isValid = false;
|
|
} else {
|
|
projectNameError.classList.remove('show');
|
|
}
|
|
|
|
// 用户名验证
|
|
const userNameError = document.getElementById('userNameError');
|
|
if (!userName) {
|
|
userNameError.textContent = '请输入用户名';
|
|
userNameError.classList.add('show');
|
|
isValid = false;
|
|
} else {
|
|
userNameError.classList.remove('show');
|
|
}
|
|
|
|
// 密码验证
|
|
const passwordError = document.getElementById('passwordError');
|
|
if (!password) {
|
|
passwordError.textContent = '请输入密码';
|
|
passwordError.classList.add('show');
|
|
isValid = false;
|
|
} else {
|
|
passwordError.classList.remove('show');
|
|
}
|
|
|
|
if (!isValid) {
|
|
return;
|
|
}
|
|
|
|
// 显示加载状态
|
|
const loginBtn = document.getElementById('loginBtn');
|
|
const originalText = loginBtn.innerHTML;
|
|
loginBtn.innerHTML = '<span class="loading"></span>登录中...';
|
|
loginBtn.disabled = true;
|
|
|
|
const loginError = document.getElementById('loginError');
|
|
loginError.classList.remove('show');
|
|
|
|
try {
|
|
// 发送登录请求
|
|
const response = await fetch('/api/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
projectName,
|
|
userName,
|
|
password
|
|
})
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
// 登录成功，保存登录信息到localStorage
|
|
localStorage.setItem('userInfo', JSON.stringify(result.data.userInfo));
|
|
localStorage.setItem('token', result.data.token);
|
|
|
|
// 根据角色跳转到不同页面
|
|
const userInfo = result.data.userInfo;
|
|
if (userInfo.projectName === '管理员') {
|
|
// 管理员跳转到管理页面
|
|
window.location.href = 'Management.html';
|
|
} else if (userInfo.projectName === '采购员') {
|
|
// 采购员跳转到供应页面
|
|
window.location.href = 'supply.html';
|
|
} else {
|
|
// 其他角色默认跳转到审核页面
|
|
window.location.href = 'SupplierReview.html';
|
|
}
|
|
} else {
|
|
// 登录失败
|
|
loginError.textContent = result.message || '登录失败，请检查用户名和密码';
|
|
loginError.classList.add('show');
|
|
}
|
|
} catch (error) {
|
|
console.error('登录失败:', error);
|
|
loginError.textContent = '登录失败，请检查网络连接';
|
|
loginError.classList.add('show');
|
|
} finally {
|
|
// 恢复按钮状态
|
|
loginBtn.innerHTML = originalText;
|
|
loginBtn.disabled = false;
|
|
}
|
|
});
|
|
|
|
// 检查是否已登录
|
|
if (localStorage.getItem('userInfo') && localStorage.getItem('token')) {
|
|
// 如果已经登录，直接跳转到审核页面
|
|
window.location.href = 'SupplierReview.html';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|