283 lines
9.1 KiB
HTML
283 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>登录 - WeChat Download API</title>
|
|
<style>
|
|
:root {
|
|
--primary-color: #1890ff;
|
|
--success-color: #52c41a;
|
|
--warning-color: #fa8c16;
|
|
--error-color: #ff4d4f;
|
|
--text-primary: #262626;
|
|
--text-secondary: #595959;
|
|
--bg-primary: #ffffff;
|
|
--bg-secondary: #fafafa;
|
|
--border-light: #f0f0f0;
|
|
--border-base: #d9d9d9;
|
|
--shadow-base: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
--radius-base: 8px;
|
|
--radius-large: 12px;
|
|
--font-xs: 12px;
|
|
--font-sm: 14px;
|
|
--font-base: 16px;
|
|
--font-lg: 20px;
|
|
--duration-fast: 200ms;
|
|
--duration-normal: 300ms;
|
|
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
background: var(--bg-secondary);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
}
|
|
|
|
.container {
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius-large);
|
|
box-shadow: var(--shadow-base);
|
|
padding: 40px 32px;
|
|
width: 100%;
|
|
max-width: 380px;
|
|
text-align: center;
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--font-lg);
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: var(--font-xs);
|
|
color: var(--text-secondary);
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.qr-area {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius-base);
|
|
padding: 24px;
|
|
margin-bottom: 24px;
|
|
min-height: 220px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.qr-area img {
|
|
max-width: 200px;
|
|
max-height: 200px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.status-msg {
|
|
font-size: var(--font-sm);
|
|
color: var(--text-secondary);
|
|
margin-bottom: 24px;
|
|
min-height: 22px;
|
|
}
|
|
|
|
.status-msg.success { color: var(--success-color); }
|
|
.status-msg.error { color: var(--error-color); }
|
|
.status-msg.waiting { color: var(--primary-color); }
|
|
|
|
.btn {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 10px 0;
|
|
border: 1px solid var(--border-base);
|
|
border-radius: var(--radius-base);
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: var(--font-sm);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all var(--duration-fast) var(--ease-in-out);
|
|
}
|
|
|
|
.btn:hover {
|
|
border-color: var(--primary-color);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.loading-spinner {
|
|
display: inline-block;
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 3px solid var(--border-light);
|
|
border-top-color: var(--primary-color);
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.back-link {
|
|
display: block;
|
|
margin-top: 16px;
|
|
font-size: var(--font-xs);
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
transition: color var(--duration-fast) var(--ease-in-out);
|
|
}
|
|
|
|
.back-link:hover { color: var(--primary-color); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>扫码登录</h1>
|
|
<p class="subtitle">使用微信扫描二维码登录公众平台</p>
|
|
|
|
<div class="qr-area" id="qrArea">
|
|
<div class="loading-spinner"></div>
|
|
</div>
|
|
|
|
<div class="status-msg waiting" id="status">正在加载二维码...</div>
|
|
|
|
<button class="btn" onclick="refreshQrcode()">刷新二维码</button>
|
|
<a href="/admin.html" class="back-link">返回管理面板</a>
|
|
</div>
|
|
|
|
<script>
|
|
let sessionid = '';
|
|
let checkTimer = null;
|
|
|
|
async function init() {
|
|
sessionid = Date.now() + '' + Math.floor(Math.random() * 100);
|
|
await startLogin();
|
|
await refreshQrcode();
|
|
setTimeout(startCheckQrcode, 2000);
|
|
}
|
|
|
|
async function startLogin() {
|
|
try {
|
|
await fetch('/api/login/session/' + sessionid, { method: 'POST' });
|
|
} catch (e) {
|
|
console.error('session error:', e);
|
|
}
|
|
}
|
|
|
|
async function refreshQrcode() {
|
|
setStatus('waiting', '正在加载二维码...');
|
|
const area = document.getElementById('qrArea');
|
|
const img = new Image();
|
|
img.style.maxWidth = '200px';
|
|
img.style.maxHeight = '200px';
|
|
img.style.borderRadius = '4px';
|
|
|
|
img.onload = function () {
|
|
area.innerHTML = '';
|
|
area.appendChild(img);
|
|
setStatus('waiting', '请使用微信扫描二维码');
|
|
};
|
|
|
|
img.onerror = function () {
|
|
setStatus('error', '二维码加载失败，请刷新重试');
|
|
};
|
|
|
|
img.src = '/api/login/getqrcode?rnd=' + Math.random();
|
|
}
|
|
|
|
async function startCheckQrcode() {
|
|
if (checkTimer) clearTimeout(checkTimer);
|
|
|
|
try {
|
|
const res = await fetch('/api/login/scan');
|
|
const data = await res.json();
|
|
|
|
if (data.base_resp && data.base_resp.ret !== 0) {
|
|
setStatus('error', '检查状态失败');
|
|
checkTimer = setTimeout(startCheckQrcode, 3000);
|
|
return;
|
|
}
|
|
|
|
const status = data.status || 0;
|
|
|
|
switch (status) {
|
|
case 1:
|
|
setStatus('success', '扫码成功，正在登录...');
|
|
await completeLogin();
|
|
break;
|
|
case 4:
|
|
case 6:
|
|
if ((data.acct_size || 0) > 1) {
|
|
setStatus('success', '扫码成功，请在手机上选择账号');
|
|
} else {
|
|
setStatus('success', '扫码成功，请在手机上确认登录');
|
|
}
|
|
checkTimer = setTimeout(startCheckQrcode, 1500);
|
|
break;
|
|
case 2:
|
|
setStatus('error', '二维码已过期，请刷新');
|
|
break;
|
|
case 3:
|
|
setStatus('error', '扫码失败，请重试');
|
|
break;
|
|
default:
|
|
checkTimer = setTimeout(startCheckQrcode, 3000);
|
|
}
|
|
} catch (e) {
|
|
console.error('check error:', e);
|
|
checkTimer = setTimeout(startCheckQrcode, 3000);
|
|
}
|
|
}
|
|
|
|
async function completeLogin() {
|
|
try {
|
|
const res = await fetch('/api/login/bizlogin', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' }
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.success && data.data) {
|
|
setStatus('success', '登录成功 — ' + (data.data.nickname || ''));
|
|
setTimeout(function () {
|
|
window.location.href = '/admin.html';
|
|
}, 1500);
|
|
} else {
|
|
setStatus('error', '登录失败: ' + (data.error || '未知错误'));
|
|
}
|
|
} catch (e) {
|
|
setStatus('error', '登录失败: ' + e.message);
|
|
}
|
|
}
|
|
|
|
function setStatus(type, message) {
|
|
const el = document.getElementById('status');
|
|
el.className = 'status-msg ' + type;
|
|
el.textContent = message;
|
|
}
|
|
|
|
window.addEventListener('load', init);
|
|
|
|
window.addEventListener('beforeunload', function () {
|
|
if (checkTimer) { clearTimeout(checkTimer); checkTimer = null; }
|
|
});
|
|
|
|
document.addEventListener('visibilitychange', function () {
|
|
if (document.hidden) {
|
|
if (checkTimer) clearTimeout(checkTimer);
|
|
} else {
|
|
if (!checkTimer) startCheckQrcode();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|