更新
This commit is contained in:
+200
-18
@@ -112,11 +112,12 @@
|
||||
.wechat-login {
|
||||
text-align: center;
|
||||
padding: 30px 0;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.wechat-login img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
@@ -129,6 +130,30 @@
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#qrcode-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#qrcode-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#qrcode-loading .layui-icon {
|
||||
font-size: 40px;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
#qrcode-loading p {
|
||||
margin-top: 10px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.layui-input-inline {
|
||||
margin-right: 0px !important;
|
||||
}
|
||||
@@ -144,6 +169,33 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
/* margin: 50px auto; */
|
||||
text-align: center;
|
||||
}
|
||||
.qrcode-container {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.qrcode-container img {
|
||||
max-width: 200px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.qrcode-container p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.status {
|
||||
color: #666;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.error {
|
||||
color: #ff4d4f;
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@@ -220,8 +272,15 @@
|
||||
</div> -->
|
||||
<div class="layui-tab-item" id="wechat">
|
||||
<div class="wechat-login">
|
||||
<img src="" alt="微信登录" class="layui-img">
|
||||
<p>点击使用微信登录</p>
|
||||
<div class="container">
|
||||
<h2>微信扫码登录</h2>
|
||||
<div class="qrcode-container">
|
||||
<img id="qrcode" src="" alt="微信登录二维码" onclick="reGenerateQrcode()">
|
||||
<p>点击二维码可刷新</p>
|
||||
</div>
|
||||
<div id="status" class="status">正在加载二维码...</div>
|
||||
<div id="error" class="error"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -232,6 +291,131 @@
|
||||
var form = layui.form;
|
||||
var element = layui.element;
|
||||
var $ = layui.jquery;
|
||||
var layer = layui.layer;
|
||||
|
||||
// 微信登录相关变量
|
||||
var checkLoginTimer = null;
|
||||
var currentSceneStr = '';
|
||||
var currentTicket = '';
|
||||
var qrcodeExpireTime = 0; // 二维码过期时间
|
||||
|
||||
// 获取微信登录二维码
|
||||
function getQrcode() {
|
||||
$.ajax({
|
||||
url: '/index/wechat/getLoginTicket',
|
||||
type: 'GET',
|
||||
success: function(res) {
|
||||
if (res.code === 0) {
|
||||
$('#qrcode').attr('src', res.data.url);
|
||||
currentSceneStr = res.data.scene_str;
|
||||
currentTicket = res.data.ticket;
|
||||
// 设置二维码过期时间（5分钟）
|
||||
qrcodeExpireTime = new Date().getTime() + (res.data.expire_seconds * 1000);
|
||||
$('#status').text('等待扫码...');
|
||||
$('#error').text('');
|
||||
// 开始检查登录状态
|
||||
startCheckLogin();
|
||||
} else {
|
||||
$('#error').text('获取二维码失败：' + res.msg);
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
$('#error').text('获取二维码失败，请刷新页面重试');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 重新生成二维码
|
||||
function reGenerateQrcode() {
|
||||
if (!currentSceneStr) {
|
||||
getQrcode();
|
||||
return;
|
||||
}
|
||||
|
||||
// 清除之前的定时器
|
||||
if (checkLoginTimer) {
|
||||
clearInterval(checkLoginTimer);
|
||||
checkLoginTimer = null;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: '/index/wechat/reGenerateQrcode',
|
||||
type: 'POST',
|
||||
data: {
|
||||
scene_str: currentSceneStr
|
||||
},
|
||||
success: function(res) {
|
||||
if (res.code === 0) {
|
||||
$('#qrcode').attr('src', res.data.url);
|
||||
currentSceneStr = res.data.scene_str;
|
||||
currentTicket = res.data.ticket;
|
||||
// 设置新的二维码过期时间（5分钟）
|
||||
qrcodeExpireTime = new Date().getTime() + (res.data.expire_seconds * 1000);
|
||||
$('#status').text('等待扫码...');
|
||||
$('#error').text('');
|
||||
// 开始检查登录状态
|
||||
startCheckLogin();
|
||||
} else {
|
||||
$('#error').text('刷新二维码失败：' + res.msg);
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
$('#error').text('刷新二维码失败，请重试');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 开始检查登录状态
|
||||
function startCheckLogin() {
|
||||
if (checkLoginTimer) {
|
||||
clearInterval(checkLoginTimer);
|
||||
}
|
||||
|
||||
checkLoginTimer = setInterval(function() {
|
||||
// 检查二维码是否过期
|
||||
if (new Date().getTime() > qrcodeExpireTime) {
|
||||
clearInterval(checkLoginTimer);
|
||||
$('#status').text('二维码已过期，请点击刷新');
|
||||
$('#qrcode').css('opacity', '0.5');
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: '/index/wechat/checkLoginStatus',
|
||||
type: 'POST',
|
||||
data: {
|
||||
scene_str: currentSceneStr,
|
||||
ticket: currentTicket
|
||||
},
|
||||
success: function(res) {
|
||||
if (res.code === 1) {
|
||||
// 登录成功
|
||||
clearInterval(checkLoginTimer);
|
||||
$('#status').text('登录成功，正在跳转...');
|
||||
// 保存用户信息到localStorage
|
||||
if (res.data && res.data.user_info) {
|
||||
localStorage.setItem('user_info', JSON.stringify(res.data.user_info));
|
||||
}
|
||||
// 跳转到首页或其他页面
|
||||
setTimeout(function() {
|
||||
window.location.href = '/';
|
||||
}, 1000);
|
||||
} else if (res.code === 0) {
|
||||
// 更新状态信息
|
||||
$('#status').text(res.msg);
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
$('#error').text('检查登录状态失败，请重试');
|
||||
}
|
||||
});
|
||||
}, 2000); // 每2秒检查一次
|
||||
}
|
||||
|
||||
// 页面加载完成后获取二维码
|
||||
$(document).ready(function() {
|
||||
getQrcode();
|
||||
});
|
||||
|
||||
// 检查极验验证是否开启
|
||||
<?php if ($config['geetest_open'] == 1): ?>
|
||||
@@ -327,17 +511,12 @@
|
||||
});
|
||||
|
||||
// 点击获取验证码按钮时验证
|
||||
document.getElementById('getCode').addEventListener('click', function () {
|
||||
var validate = captchaObj.getValidate();
|
||||
if (!validate) {
|
||||
layer.msg('请完成验证码验证', {
|
||||
icon: 2,
|
||||
time: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
console.log('获取验证码');
|
||||
});
|
||||
var getCodeBtn = document.getElementById('getCode');
|
||||
if (getCodeBtn) {
|
||||
getCodeBtn.addEventListener('click', function () {
|
||||
console.log('获取验证码');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 直接使用配置初始化极验验证，并添加错误处理
|
||||
@@ -418,9 +597,12 @@
|
||||
});
|
||||
|
||||
// 移除获取验证码按钮的验证码验证逻辑
|
||||
document.getElementById('getCode').addEventListener('click', function () {
|
||||
console.log('获取验证码');
|
||||
});
|
||||
var getCodeBtn = document.getElementById('getCode');
|
||||
if (getCodeBtn) {
|
||||
getCodeBtn.addEventListener('click', function () {
|
||||
console.log('获取验证码');
|
||||
});
|
||||
}
|
||||
<?php endif; ?>
|
||||
|
||||
// 页面加载时检查是否有保存的登录数据
|
||||
|
||||
Reference in New Issue
Block a user