150 lines
7.4 KiB
HTML
150 lines
7.4 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}添加账号 - 微博超话签到{% endblock %}
|
||
|
||
{% block extra_css %}
|
||
<style>
|
||
.qr-wrapper { text-align: center; padding: 40px 20px; }
|
||
.qr-box {
|
||
background: #f8fafc;
|
||
padding: 28px;
|
||
border-radius: 24px;
|
||
display: inline-block;
|
||
border: 1.5px solid #e2e8f0;
|
||
margin-bottom: 20px;
|
||
}
|
||
.qr-box img { width: 220px; height: 220px; display: block; margin: 0 auto 14px; border-radius: 12px; }
|
||
#qr-timer { color: #94a3b8; font-size: 14px; }
|
||
#qr-status { margin-top: 18px; font-size: 16px; min-height: 24px; font-weight: 500; }
|
||
.status-waiting { color: #64748b; }
|
||
.status-scanned { color: #f59e0b; }
|
||
.status-success { color: #10b981; }
|
||
.status-error { color: #ef4444; }
|
||
.info-box {
|
||
background: #f8fafc; border-radius: 16px; padding: 18px 22px; margin-top: 24px;
|
||
font-size: 14px; color: #64748b; text-align: left; max-width: 480px;
|
||
margin-left: auto; margin-right: auto; border: 1px solid #e2e8f0;
|
||
}
|
||
.info-box li { margin: 6px 0; line-height: 1.7; }
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div style="max-width: 560px; margin: 0 auto;">
|
||
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;">
|
||
<h1 style="font-size:24px; font-weight:700; color:#1e293b;">📱 添加微博账号</h1>
|
||
<a href="{{ url_for('dashboard') }}" class="btn btn-secondary">返回</a>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="qr-wrapper">
|
||
<button id="generate-qr-btn" class="btn btn-primary" style="font-size:18px; padding:16px 40px; border-radius:18px;">
|
||
📱 生成二维码
|
||
</button>
|
||
<div id="qr-display" style="display:none;">
|
||
<div class="qr-box">
|
||
<img id="qr-image" src="" alt="QR Code">
|
||
<p style="color:#64748b; margin:0 0 4px;">请使用微博 APP 扫描</p>
|
||
<p id="qr-timer">有效期: 3:00</p>
|
||
</div>
|
||
<div id="qr-status" class="status-waiting">等待扫码...</div>
|
||
</div>
|
||
</div>
|
||
<div class="info-box">
|
||
<p style="margin:0 0 8px; font-weight:600; color:#334155;">使用说明</p>
|
||
<ol style="margin:0; padding-left:20px;">
|
||
<li>点击"生成二维码"</li>
|
||
<li>打开手机微博 APP，扫描二维码</li>
|
||
<li>在手机上点击"确认登录"</li>
|
||
<li>等待自动完成，跳转到控制台</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let pollInterval = null, timerInterval = null, currentQrid = null, timeLeft = 180, isProcessing = false;
|
||
|
||
document.getElementById('generate-qr-btn').addEventListener('click', async function() {
|
||
try {
|
||
const resp = await fetch('/api/weibo/qrcode/generate', {method:'POST', headers:{'Content-Type':'application/json'}});
|
||
const data = await resp.json();
|
||
if (!data.success) { alert('生成二维码失败: ' + (data.error || '未知错误')); return; }
|
||
currentQrid = data.qrid;
|
||
document.getElementById('qr-image').src = data.qr_image;
|
||
document.getElementById('generate-qr-btn').style.display = 'none';
|
||
document.getElementById('qr-display').style.display = 'block';
|
||
document.getElementById('qr-status').textContent = '等待扫码...';
|
||
document.getElementById('qr-status').className = 'status-waiting';
|
||
timeLeft = 180;
|
||
updateTimer();
|
||
timerInterval = setInterval(updateTimer, 1000);
|
||
pollInterval = setInterval(checkQRStatus, 2000);
|
||
} catch(e) { alert('生成二维码失败: ' + e.message); }
|
||
});
|
||
|
||
function updateTimer() {
|
||
if (timeLeft <= 0) {
|
||
clearInterval(timerInterval); clearInterval(pollInterval);
|
||
document.getElementById('qr-status').textContent = '二维码已过期，请重新生成';
|
||
document.getElementById('qr-status').className = 'status-error';
|
||
document.getElementById('generate-qr-btn').style.display = 'inline-block';
|
||
document.getElementById('qr-display').style.display = 'none';
|
||
return;
|
||
}
|
||
const m = Math.floor(timeLeft / 60), s = timeLeft % 60;
|
||
document.getElementById('qr-timer').textContent = `有效期: ${m}:${s.toString().padStart(2,'0')}`;
|
||
timeLeft--;
|
||
}
|
||
|
||
async function checkQRStatus() {
|
||
if (isProcessing) return;
|
||
isProcessing = true;
|
||
try {
|
||
const resp = await fetch(`/api/weibo/qrcode/check/${currentQrid}`);
|
||
const data = await resp.json();
|
||
if (data.status === 'waiting') {
|
||
document.getElementById('qr-status').textContent = '等待扫码...';
|
||
document.getElementById('qr-status').className = 'status-waiting';
|
||
} else if (data.status === 'scanned') {
|
||
document.getElementById('qr-status').textContent = '✓ 已扫码，请在手机上确认登录';
|
||
document.getElementById('qr-status').className = 'status-scanned';
|
||
} else if (data.status === 'success') {
|
||
clearInterval(pollInterval); pollInterval = null; clearInterval(timerInterval);
|
||
document.getElementById('qr-status').textContent = '✓ 登录成功，正在添加账号...';
|
||
document.getElementById('qr-status').className = 'status-success';
|
||
await new Promise(r => setTimeout(r, 500));
|
||
const addResp = await fetch('/api/weibo/qrcode/add-account', {
|
||
method:'POST', headers:{'Content-Type':'application/json'},
|
||
body: JSON.stringify({qrid: currentQrid})
|
||
});
|
||
const addResult = await addResp.json();
|
||
if (addResult.success) {
|
||
document.getElementById('qr-status').textContent = '✓ 账号添加成功，正在跳转...';
|
||
setTimeout(() => { window.location.href = '/dashboard'; }, 1000);
|
||
} else if (addResult.need_login || addResp.status === 401) {
|
||
document.getElementById('qr-status').textContent = '登录已过期，正在跳转...';
|
||
document.getElementById('qr-status').className = 'status-error';
|
||
setTimeout(() => { window.location.href = '/login'; }, 1500);
|
||
} else {
|
||
document.getElementById('qr-status').textContent = '添加失败: ' + addResult.message;
|
||
document.getElementById('qr-status').className = 'status-error';
|
||
}
|
||
return;
|
||
} else if (data.status === 'expired' || data.status === 'cancelled') {
|
||
clearInterval(pollInterval); pollInterval = null; clearInterval(timerInterval);
|
||
document.getElementById('qr-status').textContent = data.status === 'expired' ? '二维码已过期，请重新生成' : '已取消登录';
|
||
document.getElementById('qr-status').className = 'status-error';
|
||
document.getElementById('generate-qr-btn').style.display = 'inline-block';
|
||
document.getElementById('qr-display').style.display = 'none';
|
||
} else if (data.status === 'error') {
|
||
clearInterval(pollInterval); pollInterval = null; clearInterval(timerInterval);
|
||
document.getElementById('qr-status').textContent = '错误: ' + (data.error || '未知错误');
|
||
document.getElementById('qr-status').className = 'status-error';
|
||
}
|
||
} catch(e) { console.error('检查状态失败:', e); }
|
||
finally { isProcessing = false; }
|
||
}
|
||
</script>
|
||
{% endblock %}
|