diff --git a/view.html b/view.html index a876fd0..a3ac09d 100644 --- a/view.html +++ b/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 = '
扫描二维码查看完整信息
长按保存二维码
'; + + // 组装容器 + 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); + } + } } // 显示错误信息