Default User
1 month ago
3 changed files with 486 additions and 5 deletions
@ -0,0 +1,428 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="zh-CN"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
||||
|
<title>二维码合集</title> |
||||
|
<style> |
||||
|
* { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; |
||||
|
background-color: #f5f5f5; |
||||
|
color: #333; |
||||
|
-webkit-overflow-scrolling: touch; |
||||
|
overflow-x: hidden; |
||||
|
position: relative; |
||||
|
touch-action: manipulation; |
||||
|
} |
||||
|
|
||||
|
html, body { |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
overscroll-behavior: none; |
||||
|
} |
||||
|
|
||||
|
.container { |
||||
|
max-width: 480px; |
||||
|
margin: 0 auto; |
||||
|
background-color: white; |
||||
|
height: 100%; |
||||
|
overflow-y: auto; |
||||
|
-webkit-overflow-scrolling: touch; |
||||
|
position: relative; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 16px; |
||||
|
background-color: #28a745; |
||||
|
color: white; |
||||
|
position: sticky; |
||||
|
top: 0; |
||||
|
z-index: 100; |
||||
|
margin: -20px -20px 20px; |
||||
|
} |
||||
|
|
||||
|
.header h1 { |
||||
|
font-size: 18px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.header-actions { |
||||
|
display: flex; |
||||
|
gap: 12px; |
||||
|
} |
||||
|
|
||||
|
.more-btn { |
||||
|
background: none; |
||||
|
border: none; |
||||
|
color: white; |
||||
|
font-size: 18px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.filter-section { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.filter-section h3 { |
||||
|
font-size: 16px; |
||||
|
color: #333; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.filter-buttons { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
|
||||
|
.filter-btn { |
||||
|
padding: 8px 12px; |
||||
|
border: 1px solid #ddd; |
||||
|
border-radius: 16px; |
||||
|
background-color: white; |
||||
|
color: #666; |
||||
|
font-size: 14px; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s; |
||||
|
} |
||||
|
|
||||
|
.filter-btn.active { |
||||
|
background-color: #28a745; |
||||
|
color: white; |
||||
|
border-color: #28a745; |
||||
|
} |
||||
|
|
||||
|
.qr-section { |
||||
|
margin-bottom: 30px; |
||||
|
} |
||||
|
|
||||
|
.qr-section h3 { |
||||
|
font-size: 16px; |
||||
|
color: #333; |
||||
|
margin-bottom: 15px; |
||||
|
padding-bottom: 8px; |
||||
|
border-bottom: 1px solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.qr-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(2, 1fr); |
||||
|
gap: 15px; |
||||
|
} |
||||
|
|
||||
|
.qr-item { |
||||
|
background-color: #f8f9fa; |
||||
|
border-radius: 8px; |
||||
|
padding: 12px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.qr-item img { |
||||
|
max-width: 100%; |
||||
|
max-height: 150px; |
||||
|
margin-bottom: 10px; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.qr-info { |
||||
|
font-size: 12px; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.qr-info p { |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.qr-info .name { |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.empty-state { |
||||
|
text-align: center; |
||||
|
padding: 40px 20px; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.empty-state img { |
||||
|
max-width: 100px; |
||||
|
margin-bottom: 15px; |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
|
||||
|
.action-buttons { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 15px; |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
padding: 15px; |
||||
|
border: none; |
||||
|
border-radius: 8px; |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
cursor: pointer; |
||||
|
text-align: center; |
||||
|
transition: background-color 0.3s; |
||||
|
} |
||||
|
|
||||
|
.btn-primary { |
||||
|
background-color: #28a745; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.btn-primary:hover { |
||||
|
background-color: #218838; |
||||
|
} |
||||
|
|
||||
|
.btn-secondary { |
||||
|
background-color: #6c757d; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.btn-secondary:hover { |
||||
|
background-color: #5a6268; |
||||
|
} |
||||
|
|
||||
|
.footer { |
||||
|
text-align: center; |
||||
|
margin-top: 40px; |
||||
|
padding: 20px 0; |
||||
|
font-size: 14px; |
||||
|
color: #999; |
||||
|
border-top: 1px solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 480px) { |
||||
|
.container { |
||||
|
max-width: 100%; |
||||
|
padding: 15px; |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
margin: -15px -15px 15px; |
||||
|
} |
||||
|
|
||||
|
.header h1 { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.qr-grid { |
||||
|
grid-template-columns: 1fr; |
||||
|
} |
||||
|
|
||||
|
.qr-item img { |
||||
|
max-height: 200px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="container"> |
||||
|
<div class="header"> |
||||
|
<h1>二维码合集</h1> |
||||
|
<div class="header-actions"> |
||||
|
<button class="more-btn">•••</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="filter-section"> |
||||
|
<h3>筛选</h3> |
||||
|
<div class="filter-buttons"> |
||||
|
<button class="filter-btn active" data-filter="all">全部</button> |
||||
|
<button class="filter-btn" data-filter="me">我的二维码</button> |
||||
|
<button class="filter-btn" data-filter="others">他人二维码</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div id="qrCollection"> |
||||
|
<div class="empty-state"> |
||||
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=empty" alt="空状态"> |
||||
|
<p>暂无二维码</p> |
||||
|
<p style="font-size: 14px; margin-top: 5px;">请先生成邀请二维码</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="action-buttons"> |
||||
|
<button class="btn btn-primary" onclick="window.location.href='invite.html'">生成邀请二维码</button> |
||||
|
<button class="btn btn-secondary" onclick="window.location.href='certificate.html'">返回主页面</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="footer"> |
||||
|
技术支持：四川又鸟蛋贸易有限公司 |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<script> |
||||
|
// 加载用户信息 |
||||
|
function loadUserInfo() { |
||||
|
const userInfo = localStorage.getItem('userInfo'); |
||||
|
if (userInfo) { |
||||
|
try { |
||||
|
return JSON.parse(userInfo); |
||||
|
} catch (error) { |
||||
|
console.error('解析用户信息失败:', error); |
||||
|
return null; |
||||
|
} |
||||
|
} |
||||
|
return null; |
||||
|
} |
||||
|
|
||||
|
// 加载二维码合集 |
||||
|
async function loadQrCollection() { |
||||
|
const user = loadUserInfo(); |
||||
|
const qrCollectionElement = document.getElementById('qrCollection'); |
||||
|
|
||||
|
try { |
||||
|
// 从服务器获取二维码合集 |
||||
|
const response = await fetch('/getQrCollection'); |
||||
|
const data = await response.json(); |
||||
|
|
||||
|
if (data.success && data.qrCodes && data.qrCodes.length > 0) { |
||||
|
// 渲染二维码合集 |
||||
|
renderQrCollection(data.qrCodes, user); |
||||
|
} else { |
||||
|
// 显示空状态 |
||||
|
qrCollectionElement.innerHTML = ` |
||||
|
<div class="empty-state"> |
||||
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=empty" alt="空状态"> |
||||
|
<p>暂无二维码</p> |
||||
|
<p style="font-size: 14px; margin-top: 5px;">请先生成邀请二维码</p> |
||||
|
</div> |
||||
|
`; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('获取二维码合集失败:', error); |
||||
|
qrCollectionElement.innerHTML = ` |
||||
|
<div class="empty-state"> |
||||
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=error" alt="错误状态"> |
||||
|
<p>加载失败</p> |
||||
|
<p style="font-size: 14px; margin-top: 5px;">请稍后重试</p> |
||||
|
</div> |
||||
|
`; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 渲染二维码合集 |
||||
|
function renderQrCollection(qrCodes, currentUser) { |
||||
|
const qrCollectionElement = document.getElementById('qrCollection'); |
||||
|
|
||||
|
// 按邀请者分组 |
||||
|
const groupedQrCodes = {}; |
||||
|
qrCodes.forEach(qrCode => { |
||||
|
const inviterName = qrCode.inviter || '未知邀请者'; |
||||
|
if (!groupedQrCodes[inviterName]) { |
||||
|
groupedQrCodes[inviterName] = []; |
||||
|
} |
||||
|
groupedQrCodes[inviterName].push(qrCode); |
||||
|
}); |
||||
|
|
||||
|
// 生成HTML |
||||
|
let html = ''; |
||||
|
Object.keys(groupedQrCodes).forEach(inviterName => { |
||||
|
const inviterQrCodes = groupedQrCodes[inviterName]; |
||||
|
|
||||
|
html += ` |
||||
|
<div class="qr-section"> |
||||
|
<h3>${inviterName}</h3> |
||||
|
<div class="qr-grid"> |
||||
|
`; |
||||
|
|
||||
|
inviterQrCodes.forEach(qrCode => { |
||||
|
// 生成二维码 |
||||
|
const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrCode.url)}`; |
||||
|
|
||||
|
html += ` |
||||
|
<div class="qr-item"> |
||||
|
<img src="${qrCodeUrl}" alt="邀请二维码"> |
||||
|
<div class="qr-info"> |
||||
|
<p class="name">${qrCode.inviter || '未知'}</p> |
||||
|
<p>${qrCode.inviterProjectName || '无职位'}</p> |
||||
|
<p>${qrCode.createdAt || ''}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
`; |
||||
|
}); |
||||
|
|
||||
|
html += ` |
||||
|
</div> |
||||
|
</div> |
||||
|
`; |
||||
|
}); |
||||
|
|
||||
|
qrCollectionElement.innerHTML = html; |
||||
|
} |
||||
|
|
||||
|
// 筛选二维码 |
||||
|
function filterQrCodes(filter) { |
||||
|
const user = loadUserInfo(); |
||||
|
const qrCollectionElement = document.getElementById('qrCollection'); |
||||
|
|
||||
|
// 更新筛选按钮状态 |
||||
|
document.querySelectorAll('.filter-btn').forEach(btn => { |
||||
|
btn.classList.remove('active'); |
||||
|
if (btn.dataset.filter === filter) { |
||||
|
btn.classList.add('active'); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 重新加载并筛选二维码 |
||||
|
fetch('/getQrCollection') |
||||
|
.then(response => response.json()) |
||||
|
.then(data => { |
||||
|
if (data.success && data.qrCodes && data.qrCodes.length > 0) { |
||||
|
let filteredQrCodes = data.qrCodes; |
||||
|
|
||||
|
if (filter === 'me' && user) { |
||||
|
filteredQrCodes = data.qrCodes.filter(qrCode => |
||||
|
qrCode.inviter === (user.name || user.userName) |
||||
|
); |
||||
|
} else if (filter === 'others' && user) { |
||||
|
filteredQrCodes = data.qrCodes.filter(qrCode => |
||||
|
qrCode.inviter !== (user.name || user.userName) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
if (filteredQrCodes.length > 0) { |
||||
|
renderQrCollection(filteredQrCodes, user); |
||||
|
} else { |
||||
|
qrCollectionElement.innerHTML = ` |
||||
|
<div class="empty-state"> |
||||
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=empty" alt="空状态"> |
||||
|
<p>暂无二维码</p> |
||||
|
</div> |
||||
|
`; |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
.catch(error => { |
||||
|
console.error('筛选二维码失败:', error); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 页面加载时加载二维码合集 |
||||
|
window.onload = function() { |
||||
|
loadQrCollection(); |
||||
|
|
||||
|
// 绑定筛选按钮事件 |
||||
|
document.querySelectorAll('.filter-btn').forEach(btn => { |
||||
|
btn.addEventListener('click', function() { |
||||
|
filterQrCodes(this.dataset.filter); |
||||
|
}); |
||||
|
}); |
||||
|
}; |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
Loading…
Reference in new issue