diff --git a/src/views/login.vue b/src/views/login.vue index 7cdc982..b4ab633 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -4,8 +4,12 @@
扫码登录

打开 微信 扫码登录

-
- +
+ +
+
+ + 刷新二维码
@@ -43,15 +47,155 @@ export default { }, data() { return { - url: 'https://example.com', - logoUrl: '/path/to/logo.png', - checked: false + checked: true, + qrCodeUrl: 'https://example.com', + token: '', + status: 'expired', // waiting, scanned, confirmed, expired, error + loginTime:'', } }, + created(){ + // this.generateQRCode() + }, + beforeDestroy() { + this.clearTimers(); + }, methods: { jumpDoc() { - } + }, + // 刷新二维码 + refreshCode() { + + }, + async generateQRCode() { + this.status = 'waiting'; + this.qrCodeUrl = ''; + + try { + await this.$http('POST', '/api/admin/generate_qrcode', { + device_type: 'web', + timestamp: Date.now() + }).then(response => { + this.token = response.data.token; + this.qrCodeUrl = response.data.qr_code_url; + + // 开始轮询检查状态 + this.startPolling(); + + // 设置二维码过期时间(5分钟) + this.setExpireTimer(); + }).catch(error => { + console.error('生成二维码失败:', error); + this.status = 'error'; + }); + } catch (error) { + console.error('生成二维码失败:', error); + this.status = 'error'; + } + }, + + // 开始轮询检查扫码状态 + startPolling() { + this.clearTimers(); + + this.pollInterval = setInterval(async () => { + if (this.status === 'confirmed' || this.status === 'expired' || this.status === 'error') { + this.clearTimers(); + return; + } + + try { + await this.$http('POST', '/api/admin/check_scan_status', { + token: this.token + }).then(response => { + this.status = response.data.status; + + if (response.data.status === 'scanned') { + // 扫码后等待确认 + setTimeout(() => { + this.handleLoginConfirm(); + }, 2000); + } else if (response.data.status === 'confirmed') { + this.handleLoginSuccess(response.data); + } else if (response.data.status === 'expired') { + this.status = 'expired'; + this.clearTimers(); + } + }).catch(error => { + console.error('检查扫码状态失败:', error); + this.status = 'error'; + this.clearTimers(); + }); + } catch (error) { + console.error('检查扫码状态失败:', error); + this.status = 'error'; + this.clearTimers(); + } + }, 2000); + }, + + // 处理登录确认 + async handleLoginConfirm() { + try { + await this.$http('POST', '/api/admin/confirm_login', { + token: this.token + }).then(response => { + if (response.data.success) { + this.handleLoginSuccess(response.data); + } else { + this.status = 'expired'; + } + }).catch(error => { + console.error('登录确认失败:', error); + this.status = 'error'; + }); + } catch (error) { + console.error('登录确认失败:', error); + this.status = 'error'; + } + }, + + // 处理登录成功 + handleLoginSuccess(data) { + this.status = 'confirmed'; + this.userInfo = data.user_info; + this.loginTime = new Date().toLocaleString(); + + // 保存登录状态 + localStorage.setItem('authToken', data.auth_token); + localStorage.setItem('nick', JSON.stringify(data.nick)); + localStorage.setItem('userInfo', JSON.stringify(data.user_info)); + + setTimeout(() => { + this.isLoggedIn = true; + this.$emit('login-success', data); + }, 1000); + }, + + // 设置过期定时器 + setExpireTimer() { + this.expireTimer = setTimeout(() => { + if (this.status !== 'confirmed') { + this.status = 'expired'; + this.clearTimers(); + } + }, 5 * 60 * 1000); // 5分钟过期 + }, + + // 清除所有定时器 + clearTimers() { + if (this.pollInterval) { + clearInterval(this.pollInterval); + this.pollInterval = null; + } + if (this.expireTimer) { + clearTimeout(this.expireTimer); + this.expireTimer = null; + } + }, + + } } @@ -140,9 +284,34 @@ export default { margin-bottom: 12px; } +.refreshCode { + width: 172px; + height: 172px; + background: rgba(255, 255, 255, 0.3); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + gap: 10px; + justify-content: center; + align-items: center; + color: #626573; + font-family: Arial, sans-serif; + font-weight: bold; + cursor: pointer; + margin: 20px auto; + i{ + font-size: 28px; + } +} + + @media(max-width: 1420px) { .index_rootContainer { - margin-right: 102px + margin-right: 102px; } }