Browse Source

修改view.html,添加二维码展示功能,确保扫描二维码进入页面后也能显示二维码

master
Default User 3 days ago
parent
commit
95e791865b
  1. 93
      view.html

93
view.html

@ -135,6 +135,43 @@
.signature-display img {
max-width: 200px;
max-height: 100px;
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 8px;
background-color: white;
}
/* 二维码展示样式 */
#qrCodeDisplay {
margin: 20px 16px;
padding: 16px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
}
#qrCodeDisplay h3 {
color: #28a745;
margin-bottom: 15px;
font-size: 18px;
}
#qrCodeImage {
max-width: 250px;
max-height: 250px;
margin-bottom: 15px;
background-color: white;
padding: 10px;
border-radius: 8px;
border: 1px solid #e0e0e0;
}
#qrCodeDisplay div {
color: #666;
font-size: 14px;
text-align: center;
line-height: 1.5;
}
.footer {
@ -278,6 +315,62 @@
}
container.innerHTML = html;
// 显示二维码
displayQRCode();
}
// 显示二维码
function displayQRCode() {
const sessionId = getSessionIdFromUrl();
if (!sessionId) return;
// 检查是否已有二维码容器,如有则先移除
const existingContainer = document.getElementById('qrCodeDisplay');
if (existingContainer) {
existingContainer.remove();
}
// 生成查看页面的URL,包含会话ID
const viewUrl = `http://8.137.125.67:3008/view.html?sessionId=${encodeURIComponent(sessionId)}`;
// 创建二维码容器
const qrContainer = document.createElement('div');
qrContainer.id = 'qrCodeDisplay';
// 创建二维码标题
const qrTitle = document.createElement('h3');
qrTitle.innerHTML = '📋 合格证二维码';
// 创建二维码图片
const qrImage = document.createElement('img');
qrImage.id = 'qrCodeImage';
// 使用Google Charts API生成二维码
const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=${encodeURIComponent(viewUrl)}`;
qrImage.src = qrCodeUrl;
// 创建提示文字
const qrText = document.createElement('div');
qrText.innerHTML = '<p style="margin-bottom: 8px;">扫描二维码查看完整信息</p><p>长按保存二维码</p>';
// 组装容器
qrContainer.appendChild(qrTitle);
qrContainer.appendChild(qrImage);
qrContainer.appendChild(qrText);
// 找到合适的位置插入二维码容器
// 在footer元素之前插入
const footerElement = document.querySelector('.footer');
if (footerElement) {
footerElement.parentNode.insertBefore(qrContainer, footerElement);
} else {
// 如果没有footer元素,就在container末尾插入
const container = document.querySelector('.container');
if (container) {
container.appendChild(qrContainer);
}
}
}
// 显示错误信息

Loading…
Cancel
Save