260 lines
10 KiB
JavaScript
260 lines
10 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
||
const video = document.getElementById('video');
|
||
const canvas = document.getElementById('canvas');
|
||
const ctx = canvas.getContext('2d');
|
||
const scanButton = document.getElementById('scan-button');
|
||
const stopButton = document.getElementById('stop-button');
|
||
const cameraContainer = document.getElementById('camera-container');
|
||
const scanPlaceholder = document.getElementById('scan-placeholder');
|
||
const scanResult = document.getElementById('scan-result');
|
||
const resultContent = document.getElementById('result-content');
|
||
|
||
// 固定的sign_wg和kps_wg值，实际应用中可能需要动态生成
|
||
const sign_wg = "AAQHaE4ww2nnIPvofH2SfMv3N6OplcPRjxlgScTZozm/ZCMfQP74bsMLyKW883hZCGY=";
|
||
const kps_wg = "AARWcp9UM71t5VzV9i5pBJ4dLXjJ7EZL5a9qz2QVVQtkkmcqS4wQGYtk38CRzW6HH4+5c7qsB9/EtUgkWcd8x/k7h9+PmAHUDvxKHUWnX7iL3h2fH86XJ4cEqwvUnQ77QGs=";
|
||
|
||
let scanning = false;
|
||
let stream = null;
|
||
let qrCodeToken = null;
|
||
|
||
// 创建一个显示消息的函数，使用Element UI的Message组件
|
||
function showMessage(message, type = 'info') {
|
||
//确保ELEMENT已定义
|
||
// 使用tailwindcss实现消息提示
|
||
// 获取或创建消息容器
|
||
let messageContainer = document.getElementById('message-container');
|
||
if (!messageContainer) {
|
||
messageContainer = document.createElement('div');
|
||
messageContainer.id = 'message-container';
|
||
messageContainer.className = 'fixed top-0 left-0 right-0 flex flex-col items-center mt-16 z-20 pointer-events-none';
|
||
document.body.appendChild(messageContainer);
|
||
}
|
||
|
||
const messageDiv = document.createElement('div');
|
||
messageDiv.textContent = message;
|
||
messageDiv.className = `px-4 py-2 rounded-md shadow-md mb-2 max-w-xs sm:max-w-sm md:max-w-md break-words ${
|
||
type === 'success' ? 'bg-green-500 text-white' :
|
||
type === 'error' ? 'bg-red-500 text-white' :
|
||
type === 'warning' ? 'bg-yellow-500 text-white' :
|
||
'bg-blue-500 text-white'
|
||
} transition-opacity duration-300 opacity-100`;
|
||
|
||
messageContainer.appendChild(messageDiv);
|
||
|
||
// 3秒后自动消失
|
||
setTimeout(() => {
|
||
messageDiv.classList.replace('opacity-100', 'opacity-0');
|
||
setTimeout(() => {
|
||
messageContainer.removeChild(messageDiv);
|
||
// 如果没有消息了，移除容器
|
||
if (messageContainer.children.length === 0) {
|
||
document.body.removeChild(messageContainer);
|
||
}
|
||
}, 300);
|
||
}, 3000);
|
||
//同时保留console.log以便调试
|
||
console.log(message);
|
||
}
|
||
|
||
// 开始扫码
|
||
scanButton.addEventListener('click', startScanning);
|
||
|
||
// 停止扫码
|
||
stopButton.addEventListener('click', stopScanning);
|
||
|
||
function startScanning() {
|
||
if (scanning) return;
|
||
|
||
// 显示摄像头区域，隐藏占位符
|
||
cameraContainer.style.display = 'block';
|
||
scanPlaceholder.style.display = 'none';
|
||
scanResult.style.display = 'none';
|
||
scanButton.style.display = 'none';
|
||
stopButton.style.display = 'block';
|
||
|
||
// 请求摄像头权限
|
||
navigator.mediaDevices.getUserMedia({
|
||
video: {
|
||
facingMode: 'environment',
|
||
width: { ideal: 1280 },
|
||
height: { ideal: 720 }
|
||
}
|
||
})
|
||
.then(function(mediaStream) {
|
||
stream = mediaStream;
|
||
video.srcObject = mediaStream;
|
||
video.setAttribute('playsinline', true);
|
||
video.play();
|
||
scanning = true;
|
||
requestAnimationFrame(tick);
|
||
showMessage('摄像头已启动，请对准二维码', 'success');
|
||
})
|
||
.catch(function(error) {
|
||
console.error('无法访问摄像头: ', error);
|
||
showMessage('无法访问摄像头，请确保已授予摄像头权限', 'error');
|
||
resetScanUI();
|
||
});
|
||
}
|
||
|
||
function stopScanning() {
|
||
if (!scanning) return;
|
||
|
||
if (stream) {
|
||
stream.getTracks().forEach(track => {
|
||
track.stop();
|
||
});
|
||
}
|
||
|
||
scanning = false;
|
||
resetScanUI();
|
||
showMessage('已停止扫码', 'warning');
|
||
}
|
||
|
||
function resetScanUI() {
|
||
cameraContainer.style.display = 'none';
|
||
scanPlaceholder.style.display = 'flex';
|
||
stopButton.style.display = 'none';
|
||
scanButton.style.display = 'block';
|
||
}
|
||
|
||
function tick() {
|
||
if (!scanning) return;
|
||
|
||
if (video.readyState === video.HAVE_ENOUGH_DATA) {
|
||
// 设置canvas大小与视频一致
|
||
canvas.width = video.videoWidth;
|
||
canvas.height = video.videoHeight;
|
||
|
||
// 在canvas上绘制当前视频帧
|
||
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||
|
||
// 获取图像数据
|
||
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||
|
||
// 使用jsQR库解析二维码
|
||
const code = jsQR(imageData.data, imageData.width, imageData.height, {
|
||
inversionAttempts: "dontInvert",
|
||
});
|
||
// 如果检测到二维码
|
||
if (code) {
|
||
// 使用Element UI的Message组件显示消息
|
||
showMessage("检测到二维码: " + code.data, 'success');
|
||
|
||
// 处理扫码结果
|
||
handleScanResult(code.data);
|
||
|
||
// 停止扫描
|
||
stopScanning();
|
||
return;
|
||
}
|
||
}
|
||
|
||
// 继续扫描
|
||
requestAnimationFrame(tick);
|
||
}
|
||
|
||
function handleScanResult(data) {
|
||
// 显示扫码结果
|
||
scanResult.style.display = 'block';
|
||
resultContent.textContent = "扫码成功，正在处理...";
|
||
|
||
try {
|
||
// 从URL中提取token
|
||
const tokenMatch = data.match(/token=([^&]+)/);
|
||
if (tokenMatch && tokenMatch[1]) {
|
||
qrCodeToken = tokenMatch[1];
|
||
showMessage("提取到token: " + qrCodeToken, 'success');
|
||
|
||
// 调用登录API
|
||
showMessage(qrCodeToken,'success');
|
||
callLoginAPI(qrCodeToken);
|
||
} else {
|
||
console.error("无法从二维码中提取token");
|
||
showMessage("无法从二维码中提取token，请重试", 'error');
|
||
resultContent.textContent = "无法从二维码中提取token，请重试";
|
||
}
|
||
} catch (e) {
|
||
console.error("处理二维码内容失败:", e);
|
||
showMessage("处理二维码内容失败: " + e.toString(), 'error');
|
||
resultContent.textContent = "扫码内容处理失败: " + e.toString();
|
||
}
|
||
}
|
||
|
||
// 调用夸克网盘登录API
|
||
function callLoginAPI(token) {
|
||
showMessage(token);
|
||
resultContent.textContent = "正在登录...";
|
||
showMessage("正在使用token登录...", 'info');
|
||
// 生成时间戳作为vcode
|
||
const vcode = new Date().getTime();
|
||
showMessage(vcode, 'info');
|
||
// request_id为vcode+5
|
||
const request_id = vcode + 5;
|
||
|
||
// 构建请求参数
|
||
const formData = new FormData();
|
||
formData.append('client_id', '532');
|
||
formData.append('v', '1.2');
|
||
formData.append('request_id', request_id.toString());
|
||
formData.append('sign_wg', sign_wg);
|
||
formData.append('kps_wg', kps_wg);
|
||
formData.append('vcode', vcode.toString());
|
||
formData.append('token', token);
|
||
|
||
// 构建完整的URL
|
||
const url = '/login';
|
||
// 发送请求
|
||
fetch(url, {
|
||
method: 'POST',
|
||
headers: {
|
||
"Content-Type": "application/json; charset=utf-8"
|
||
},
|
||
body: JSON.stringify({"token":token}),
|
||
})
|
||
.then(response => {
|
||
if (!response.status) {
|
||
throw new Error('网络请求失败: ' + response.status);
|
||
}
|
||
return response.json();
|
||
})
|
||
.then(data => {
|
||
showMessage("登录API响应: " + JSON.stringify(data), 'info');
|
||
|
||
if (data && data.status) {
|
||
// 登录成功，设置Cookie
|
||
resultContent.textContent = "登录成功";
|
||
showMessage("登录成功！", 'success');
|
||
sendCookieToPCPage(data.data);
|
||
} else {
|
||
// 登录失败
|
||
resultContent.textContent = "登录失败: " + (data.msg || "未知错误");
|
||
showMessage("登录失败: " + (data.msg || "未知错误"), 'error');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error("登录请求失败:", error);
|
||
resultContent.textContent = "登录请求失败: " + error.toString();
|
||
showMessage("登录请求失败: " + error.toString(), 'error');
|
||
});
|
||
}
|
||
|
||
// 向PC网页传入Cookie的函数
|
||
function sendCookieToPCPage(loginData) {
|
||
// 这里需要实现sendCookieToPCPage函数
|
||
showMessage("正在设置Cookie...", 'info');
|
||
}
|
||
|
||
// 监听来自iframe的消息
|
||
// window.addEventListener('message', function(event) {
|
||
// console.log("收到消息:", event.data);
|
||
// if (event.data && event.data.status) {
|
||
// if (event.data.status === 'success') {
|
||
// resultContent.textContent = "Cookie设置成功！请返回夸克网盘页面查看";
|
||
// showMessage("Cookie设置成功！请返回夸克网盘页面查看", 'success');
|
||
// } else {
|
||
// resultContent.textContent = "Cookie设置失败: " + event.data.message;
|
||
// showMessage("Cookie设置失败: " + event.data.message, 'error');
|
||
// }
|
||
// }
|
||
// });
|
||
}); |