|
|
|
@ -337,22 +337,50 @@ |
|
|
|
// 创建二维码容器 |
|
|
|
const qrContainer = document.createElement('div'); |
|
|
|
qrContainer.id = 'qrCodeDisplay'; |
|
|
|
qrContainer.style.cssText = ` |
|
|
|
margin: 12px 16px; |
|
|
|
padding: 12px; |
|
|
|
background-color: white; |
|
|
|
border-radius: 8px; |
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
|
|
text-align: center; |
|
|
|
`; |
|
|
|
|
|
|
|
// 创建二维码标题 |
|
|
|
const qrTitle = document.createElement('h3'); |
|
|
|
qrTitle.style.cssText = ` |
|
|
|
color: #28a745; |
|
|
|
margin-bottom: 10px; |
|
|
|
font-size: 16px; |
|
|
|
`; |
|
|
|
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; |
|
|
|
qrImage.style.cssText = ` |
|
|
|
max-width: 180px; |
|
|
|
max-height: 180px; |
|
|
|
margin-bottom: 10px; |
|
|
|
background-color: white; |
|
|
|
padding: 8px; |
|
|
|
border-radius: 6px; |
|
|
|
border: 1px solid #e0e0e0; |
|
|
|
`; |
|
|
|
|
|
|
|
// 创建提示文字 |
|
|
|
const qrText = document.createElement('div'); |
|
|
|
qrText.innerHTML = '<p style="margin-bottom: 8px;">扫描二维码查看完整信息</p><p>长按保存二维码</p>'; |
|
|
|
qrText.style.cssText = ` |
|
|
|
color: #666; |
|
|
|
font-size: 12px; |
|
|
|
text-align: center; |
|
|
|
line-height: 1.4; |
|
|
|
`; |
|
|
|
qrText.innerHTML = '<p style="margin-bottom: 4px;">扫描二维码查看完整信息</p><p>长按保存二维码</p>'; |
|
|
|
|
|
|
|
// 使用Google Charts API生成二维码 |
|
|
|
const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${encodeURIComponent(viewUrl)}`; |
|
|
|
qrImage.src = qrCodeUrl; |
|
|
|
|
|
|
|
// 组装容器 |
|
|
|
qrContainer.appendChild(qrTitle); |
|
|
|
|