登录 - 手工店演示门�?/title>
<!-- 引入全局样式 -->
<link rel="stylesheet" href="styles/global.css">
<!-- 引入移动端优化样�?-->
<link rel="stylesheet" href="styles/mobile.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #fff0f5 0%, #ffe4e1 100%);
background-image:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="2" fill="#ffb6c1" opacity="0.5"/></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="#ff69b4" opacity="0.3"/></svg>'),
linear-gradient(135deg, #fff0f5 0%, #ffe4e1 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.login-container {
background: white;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 100%;
max-width: 400px;
text-align: center;
}
.logo {
font-size: 48px;
margin-bottom: 20px;
}
h1 {
font-size: 28px;
color: #333;
margin-bottom: 10px;
}
.subtitle {
color: #666;
margin-bottom: 30px;
font-size: 14px;
}
.form-group {
margin-bottom: 20px;
text-align: left;
}
label {
display: block;
color: #555;
margin-bottom: 8px;
font-weight: 500;
}
.phone-input {
display: flex;
align-items: center;
border: 2px solid #e1e5e9;
border-radius: 10px;
padding: 0 15px;
transition: all 0.3s;
}
.phone-input:focus-within {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.country-code {
color: #666;
font-weight: 500;
margin-right: 10px;
padding-right: 10px;
border-right: 1px solid #e1e5e9;
}
input {
width: 100%;
padding: 15px 0;
border: none;
outline: none;
font-size: 16px;
}
.btn {
width: 100%;
padding: 16px;
background: linear-gradient(135deg, #ffb6c1 0%, #ff69b4 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
margin-top: 10px;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(255, 105, 180, 0.3);
}
.btn:active {
transform: translateY(0);
}
.message {
margin-top: 20px;
padding: 15px;
border-radius: 8px;
font-size: 14px;
}
.message.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.message.error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
@media (max-width: 480px) {
.login-container {
padding: 30px 20px;
}
h1 {
font-size: 24px;
}
}
</style>
</head>
<body>
<div class="login-container">
<div class="logo">🐱</div>
<h1>手工店演示门�?/h1>
<p class="subtitle">欢迎来到可爱手工制作的世�?/p>
<div id="message"></div>
<form id="loginForm" novalidate>
<div class="form-group">
<label for="phone">手机�?/label>
<div class="phone-input">
<span class="country-code">+86</span>
<input type="tel" id="phone" name="phone" placeholder="请输入手机号" pattern="^1[3-9]\\d{9}$">
</div>
</div>
<button type="submit" class="btn">立即登录</button>
</form>
<!-- 历史登录账号列表 -->
<div id="historyAccounts" class="history-accounts" style="margin-top: 20px;"></div>
</div>
<style>
/* 历史登录账号样式 */
.history-accounts {
margin-top: 20px;
text-align: left;
}
.history-title {
font-size: 14px;
color: #666;
margin-bottom: 10px;
font-weight: 500;
}
.history-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.history-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 15px;
background: #f8f9fa;
border: 1px solid #e1e5e9;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
}
.history-item:hover {
background: #e9ecef;
border-color: #667eea;
}
.history-phone {
font-weight: 500;
color: #333;
}
.history-actions {
display: flex;
gap: 5px;
}
.history-btn {
background: none;
border: none;
color: #666;
cursor: pointer;
font-size: 14px;
padding: 5px;
border-radius: 4px;
transition: all 0.3s;
}
.history-btn:hover {
background: #dee2e6;
color: #333;
}
.history-btn.delete:hover {
color: #dc3545;
}
/* 新增账号按钮 */
.add-account-btn {
width: 100%;
padding: 10px;
margin-top: 15px;
background: white;
color: #667eea;
border: 1px dashed #667eea;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
}
.add-account-btn:hover {
background: #667eea;
color: white;
}
</style>
<script>
// 获取当前页面的基础URL
const getBaseUrl = () => {
// 返回空字符串，让浏览器自动处理相对路�?
return '';
};
const baseUrl = getBaseUrl();
// 保存登录账号到本地存�?
function saveLoginAccount(phone) {
try {
// 获取现有历史账号
const accounts = JSON.parse(localStorage.getItem('loginAccounts') || '[]');
// 如果账号已存在，先移�?
const filteredAccounts = accounts.filter(account => account.phone !== phone);
// 添加到开�?
filteredAccounts.unshift({ phone, lastLogin: Date.now() });
// 最多保�?0个账�?
const limitedAccounts = filteredAccounts.slice(0, 10);
// 保存回本地存�?
localStorage.setItem('loginAccounts', JSON.stringify(limitedAccounts));
} catch (error) {
console.error('保存登录账号失败:', error);
}
}
// 获取历史登录账号
function getLoginAccounts() {
try {
return JSON.parse(localStorage.getItem('loginAccounts') || '[]');
} catch (error) {
console.error('获取登录账号失败:', error);
return [];
}
}
// 删除历史登录账号
function deleteLoginAccount(phone) {
try {
const accounts = JSON.parse(localStorage.getItem('loginAccounts') || '[]');
const filteredAccounts = accounts.filter(account => account.phone !== phone);
localStorage.setItem('loginAccounts', JSON.stringify(filteredAccounts));
renderHistoryAccounts();
} catch (error) {
console.error('删除登录账号失败:', error);
}
}
// 渲染历史登录账号
function renderHistoryAccounts() {
const accounts = getLoginAccounts();
const container = document.getElementById('historyAccounts');
if (accounts.length === 0) {
container.innerHTML = '';
return;
}
let html = '<div class="history-title">历史登录账号</div>';
html += '<div class="history-list">';
accounts.forEach(account => {
html += `<div class="history-item">
<div class="history-phone">${account.phone}</div>
<div class="history-actions">
<button class="history-btn" onclick="useHistoryAccount('${account.phone}')">使用</button>
<button class="history-btn delete" onclick="deleteLoginAccount('${account.phone}')">删除</button>
</div>
</div>`;
});
html += '</div>';
html += '<button class="add-account-btn" onclick="clearPhoneInput()">新增账号登录</button>';
container.innerHTML = html;
}
// 使用历史账号登录
function useHistoryAccount(phone) {
document.getElementById('phone').value = phone;
// 自动提交表单
document.getElementById('loginForm').dispatchEvent(new Event('submit'));
}
// 清空手机号输入框
function clearPhoneInput() {
document.getElementById('phone').value = '';
document.getElementById('phone').focus();
}
// 登录表单提交
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const phone = document.getElementById('phone').value.trim();
const messageDiv = document.getElementById('message');
// 简单验�?
if (!/^1[3-9]\d{9}$/.test(phone)) {
messageDiv.innerHTML = '<div class="message error">请输入正确的手机�?/div>';
return;
}
// 显示加载状�?
const submitBtn = this.querySelector('button[type="submit"]');
const originalText = submitBtn.textContent;
submitBtn.textContent = '登录�?..';
submitBtn.disabled = true;
// 发送登录请�?
fetch(`${baseUrl}?api=login`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
credentials: 'same-origin', // 确保包含凭证信息，保存会话cookie
body: JSON.stringify({ phone: phone })
})
.then(response => {
if (!response.ok) {
throw new Error('网络请求失败');
}
return response.json();
})
.then(data => {
if (data.success) {
// 保存登录账号
saveLoginAccount(phone);
messageDiv.innerHTML = '<div class="message success">登录成功！正在跳�?..</div>';
// 获取当前页面的URL参数，特别是page和id参数
const currentUrl = new URL(window.location.href);
const returnPage = currentUrl.searchParams.get('return_page') || 'home';
const returnParams = currentUrl.searchParams.get('return_params') || '';
// 构建跳转URL
let redirectUrl = `${baseUrl}?page=${returnPage}`;
if (returnParams) {
redirectUrl += `&${returnParams}`;
}
// 跳转到指定页面或首页
setTimeout(() => {
window.location.href = redirectUrl;
}, 1500);
} else {
messageDiv.innerHTML = `<div class="message error">${data.message || '登录失败'}</div>`;
}
})
.catch(error => {
// 尝试直接跳转，可能是登录成功但响应格式异�?
try {
// 保存登录账号
saveLoginAccount(phone);
// 获取当前页面的URL参数，特别是page和id参数
const currentUrl = new URL(window.location.href);
const returnPage = currentUrl.searchParams.get('return_page') || 'home';
const returnParams = currentUrl.searchParams.get('return_params') || '';
// 构建跳转URL
let redirectUrl = `${baseUrl}?page=${returnPage}`;
if (returnParams) {
redirectUrl += `&${returnParams}`;
}
window.location.href = redirectUrl;
} catch (e) {
messageDiv.innerHTML = '<div class="message error">登录异常，请刷新页面重试</div>';
console.error('登录失败:', error);
}
})
.finally(() => {
submitBtn.textContent = originalText;
submitBtn.disabled = false;
});
});
// 手机号输入框自动格式�?
document.getElementById('phone').addEventListener('input', function(e) {
// 只允许输入数�?
this.value = this.value.replace(/[^\d]/g, '');
// 限制长度�?1�?
if (this.value.length > 11) {
this.value = this.value.slice(0, 11);
}
});
// 页面加载完成后渲染历史账�?
document.addEventListener('DOMContentLoaded', function() {
renderHistoryAccounts();
});
</script>
</body>
</html>