145 lines
6.9 KiB
HTML
145 lines
6.9 KiB
HTML
<div class="mb-6 flex justify-between items-center">
|
||
<div class="flex items-center">
|
||
<a href="/admin/robots/{{.Robot.ID}}" class="text-gray-500 hover:text-gray-700 mr-4">
|
||
<i class="fas fa-arrow-left"></i>
|
||
</a>
|
||
<h1 class="text-2xl font-semibold text-gray-800">微信登录</h1>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="max-w-md mx-auto">
|
||
<div class="clean-card overflow-hidden">
|
||
<div class="text-center px-6 py-5 bg-gray-50 border-b border-gray-100">
|
||
<h2 class="text-lg font-medium text-gray-800">{{.Robot.Nickname}}</h2>
|
||
<p class="text-sm text-gray-600 mt-1">请使用微信扫描二维码登录</p>
|
||
</div>
|
||
|
||
<div class="p-6 flex flex-col items-center">
|
||
<div class="border border-gray-200 rounded-lg p-3 mb-6 bg-white">
|
||
<img src="{{.QRCode}}" alt="Login QR Code" class="w-64 h-64">
|
||
</div>
|
||
|
||
<div id="qrcode-status" class="text-center mb-4">
|
||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
|
||
<span class="relative flex h-3 w-3 mr-2">
|
||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
|
||
<span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
|
||
</span>
|
||
等待扫描
|
||
</span>
|
||
</div>
|
||
|
||
<p class="text-sm text-gray-500 mb-4 text-center">
|
||
请打开微信，使用"扫一扫"功能扫描上方二维码登录
|
||
</p>
|
||
|
||
<div id="timer" class="text-sm text-gray-500 mb-5">
|
||
二维码有效期: <span id="countdown">120</span>秒
|
||
</div>
|
||
|
||
<div class="w-full flex justify-between">
|
||
<a href="/admin/robots/{{.Robot.ID}}" class="py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
|
||
取消
|
||
</a>
|
||
<a href="/admin/robots/{{.Robot.ID}}/login" id="refresh-qrcode" class="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-800 hover:bg-gray-700 transition-colors hidden">
|
||
刷新二维码
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="text-center text-sm text-gray-500 mt-6">
|
||
<i class="fas fa-info-circle mr-1"></i> 请确保手机与电脑在同一网络环境
|
||
</p>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const qrcodeStatus = document.getElementById('qrcode-status');
|
||
const timer = document.getElementById('timer');
|
||
const countdown = document.getElementById('countdown');
|
||
const refreshQrcode = document.getElementById('refresh-qrcode');
|
||
|
||
let secondsLeft = 120;
|
||
let statusCheckInterval;
|
||
|
||
// 开始倒计时
|
||
const countdownTimer = setInterval(() => {
|
||
secondsLeft--;
|
||
countdown.textContent = secondsLeft;
|
||
|
||
if (secondsLeft <= 0) {
|
||
clearInterval(countdownTimer);
|
||
clearInterval(statusCheckInterval);
|
||
|
||
qrcodeStatus.innerHTML = `
|
||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
|
||
<i class="fas fa-times-circle mr-1"></i>
|
||
二维码已过期
|
||
</span>
|
||
`;
|
||
|
||
refreshQrcode.classList.remove('hidden');
|
||
}
|
||
}, 1000);
|
||
|
||
// 检查扫码状态
|
||
function checkQRCodeStatus() {
|
||
fetch(`/admin/robots/{{.Robot.ID}}/check-qrcode?uuid={{.UUID}}`)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
// 扫码阶段：0-未扫描, 1-已扫描未确认, 2-已登录
|
||
if (data.status === 0) {
|
||
qrcodeStatus.innerHTML = `
|
||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
|
||
<span class="relative flex h-3 w-3 mr-2">
|
||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
|
||
<span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
|
||
</span>
|
||
等待扫描
|
||
</span>
|
||
`;
|
||
} else if (data.status === 1) {
|
||
qrcodeStatus.innerHTML = `
|
||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
|
||
<span class="relative flex h-3 w-3 mr-2">
|
||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-400 opacity-75"></span>
|
||
<span class="relative inline-flex rounded-full h-3 w-3 bg-yellow-500"></span>
|
||
</span>
|
||
已扫描，等待确认
|
||
</span>
|
||
`;
|
||
} else if (data.status === 2) {
|
||
qrcodeStatus.innerHTML = `
|
||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
|
||
<i class="fas fa-check-circle mr-1"></i>
|
||
登录成功
|
||
</span>
|
||
`;
|
||
|
||
clearInterval(countdownTimer);
|
||
clearInterval(statusCheckInterval);
|
||
|
||
// 重定向到机器人详情页
|
||
setTimeout(() => {
|
||
window.location.href = `/admin/robots/{{.Robot.ID}}`;
|
||
}, 1500);
|
||
}
|
||
} else {
|
||
console.error('Error checking QR code status:', data.message);
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error:', error);
|
||
});
|
||
}
|
||
|
||
// 每3秒检查一次扫码状态
|
||
statusCheckInterval = setInterval(checkQRCodeStatus, 3000);
|
||
|
||
// 立即执行一次检查
|
||
checkQRCodeStatus();
|
||
});
|
||
</script>
|