Browse Source

更新二维码合集页面,为每条二维码数据创建独立的section,每个section只包含一个二维码

master
Default User 1 month ago
parent
commit
90d2a40b32
  1. 49
      qr-collection.html

49
qr-collection.html

@ -440,57 +440,34 @@
function renderQrCollection(qrCodes, currentUser, isAdmin) { function renderQrCollection(qrCodes, currentUser, isAdmin) {
const qrCollectionElement = document.getElementById('qrCollection'); const qrCollectionElement = document.getElementById('qrCollection');
// 按邀请者分组
const groupedQrCodes = {};
qrCodes.forEach(qrCode => {
const inviterName = qrCode.inviter || '未知邀请者';
if (!groupedQrCodes[inviterName]) {
groupedQrCodes[inviterName] = [];
}
groupedQrCodes[inviterName].push(qrCode);
});
// 生成HTML // 生成HTML
let html = ''; let html = '';
Object.keys(groupedQrCodes).forEach(inviterName => { qrCodes.forEach((qrCode, index) => {
const inviterQrCodes = groupedQrCodes[inviterName];
// 生成唯一的section ID // 生成唯一的section ID
const sectionId = `section_${encodeURIComponent(inviterName)}`; const sectionId = `section_${index}_${encodeURIComponent(qrCode.sessionId || Math.random().toString(36).substr(2, 9))}`;
html += ` html += `
<div class="qr-section"> <div class="qr-section" style="margin-bottom: 20px;">
<div class="section-header" onclick="toggleSection('${sectionId}')" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #f8f9fa; border-radius: 8px; margin-bottom: 10px;"> <div class="section-header" onclick="toggleSection('${sectionId}')" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #f8f9fa; border-radius: 8px; margin-bottom: 10px;">
<div> <div>
<div style="font-size: 12px; color: #666;"> <div style="font-size: 12px; color: #666;">
<p style="margin: 2px 0;">主体名称: ${inviterQrCodes[0].company || '未知'}</p> <p style="margin: 2px 0;">主体名称: ${qrCode.company || '未知'}</p>
<p style="margin: 2px 0;">电话号码: ${inviterQrCodes[0].phoneNumber || '未知'}</p> <p style="margin: 2px 0;">电话号码: ${qrCode.phoneNumber || '未知'}</p>
<p style="margin: 2px 0;">开具日期: ${inviterQrCodes[0].createdAt || '未知'}</p> <p style="margin: 2px 0;">开具日期: ${qrCode.createdAt || '未知'}</p>
</div> </div>
</div> </div>
<span class="toggle-icon" id="toggle_${sectionId}" style="font-size: 18px; color: #28a745;"></span> <span class="toggle-icon" id="toggle_${sectionId}" style="font-size: 18px; color: #28a745;"></span>
</div> </div>
<div id="${sectionId}" class="qr-grid" style="display: none; padding: 10px; background-color: #fafafa; border-radius: 8px;"> <div id="${sectionId}" class="qr-grid" style="display: none; padding: 10px; background-color: #fafafa; border-radius: 8px;">
`; <div class="qr-item">
<img src="${qrCode.qrCodeUrl || `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrCode.url)}`}" alt="邀请二维码">
inviterQrCodes.forEach(qrCode => { <div class="qr-info">
// 使用数据库中存储的二维码URL <p class="name">${qrCode.inviter || '未知'}</p>
const qrImageUrl = qrCode.qrCodeUrl || `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrCode.url)}`; <p>${qrCode.inviterProjectName || '无职位'}</p>
<p>${qrCode.createdAt || ''}</p>
html += ` </div>
<div class="qr-item">
<img src="${qrImageUrl}" alt="邀请二维码">
<div class="qr-info">
<p class="name">${qrCode.inviter || '未知'}</p>
<p>${qrCode.inviterProjectName || '无职位'}</p>
<p>${qrCode.createdAt || ''}</p>
</div> </div>
</div> </div>
`;
});
html += `
</div>
</div> </div>
`; `;
}); });

Loading…
Cancel
Save