@ -296,16 +296,32 @@
const response = await fetch(apiUrl);
const response = await fetch(apiUrl);
const data = await response.json();
const data = await response.json();
if (data.success & & data.qrCodes & & data.qrCodes.length > 0) {
if (data.success) {
// 渲染二维码合集
// 动态生成筛选按钮
renderQrCollection(data.qrCodes, user, data.isAdmin);
if (data.isAdmin & & data.invitees & & data.invitees.length > 0) {
generateFilterButtons(data.invitees, user);
}
if (data.qrCodes & & data.qrCodes.length > 0) {
// 渲染二维码合集
renderQrCollection(data.qrCodes, user, data.isAdmin);
} 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 >
`;
}
} else {
} else {
// 显示空状态
// 显示错误 状态
qrCollectionElement.innerHTML = `
qrCollectionElement.innerHTML = `
< div class = "empty-state" >
< div class = "empty-state" >
< img src = "https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=empty" alt = "空状态" >
< img src = "https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=error" alt = "错误 状态" >
< p > 暂无二维码< / p >
< p > 加载失败 < / p >
< p style = "font-size: 14px; margin-top: 5px;" > 请先生成邀请二维码< / p >
< p style = "font-size: 14px; margin-top: 5px;" > 请稍后重试 < / p >
< / div >
< / div >
`;
`;
}
}
@ -320,6 +336,43 @@
`;
`;
}
}
}
}
// 动态生成筛选按钮
function generateFilterButtons(invitees, currentUser) {
const filterButtonsContainer = document.querySelector('.filter-buttons');
if (!filterButtonsContainer) return;
// 清空现有按钮,保留"全部"和"我的二维码"
filterButtonsContainer.innerHTML = `
< button class = "filter-btn" data-filter = "all" > 全部< / button >
< button class = "filter-btn" data-filter = "me" > 我的二维码< / button >
`;
// 添加每个邀请者的筛选按钮
invitees.forEach(invitee => {
// 跳过当前用户自己
if (invitee.inviter & & invitee.inviter !== (currentUser.name || currentUser.userName)) {
const button = document.createElement('button');
button.className = 'filter-btn';
button.dataset.filter = `invitee_${encodeURIComponent(invitee.inviter)}`;
button.dataset.inviter = invitee.inviter;
button.textContent = invitee.inviter;
filterButtonsContainer.appendChild(button);
}
});
// 默认选中"全部"
document.querySelector('.filter-btn[data-filter="all"]').classList.add('active');
// 绑定筛选按钮事件
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', function() {
if (!this.disabled) {
filterQrCodes(this.dataset.filter, this.dataset.inviter);
}
});
});
}
// 渲染二维码合集
// 渲染二维码合集
function renderQrCollection(qrCodes, currentUser, isAdmin) {
function renderQrCollection(qrCodes, currentUser, isAdmin) {
@ -372,7 +425,7 @@
}
}
// 筛选二维码
// 筛选二维码
function filterQrCodes(filter) {
function filterQrCodes(filter, inviterName ) {
const user = loadUserInfo();
const user = loadUserInfo();
const qrCollectionElement = document.getElementById('qrCollection');
const qrCollectionElement = document.getElementById('qrCollection');
@ -398,13 +451,14 @@
let filteredQrCodes = data.qrCodes;
let filteredQrCodes = data.qrCodes;
if (filter === 'me' & & user) {
if (filter === 'me' & & user) {
// 筛选当前用户自己的二维码
filteredQrCodes = data.qrCodes.filter(qrCode =>
filteredQrCodes = data.qrCodes.filter(qrCode =>
qrCode.inviter === (user.name || user.userName)
qrCode.inviter === (user.name || user.userName)
);
);
} else if (filter === 'others' & & user & & data.isAdmin ) {
} else if (filter.startsWith('invitee_') & & inviterName ) {
// 只有管理员可以查看他人 二维码
// 筛选特定邀请者的 二维码
filteredQrCodes = data.qrCodes.filter(qrCode =>
filteredQrCodes = data.qrCodes.filter(qrCode =>
qrCode.inviter !== (user.name || user.userName)
qrCode.inviter === inviterName
);
);
}
}
@ -427,39 +481,7 @@
// 页面加载时加载二维码合集
// 页面加载时加载二维码合集
window.onload = function() {
window.onload = function() {
const user = loadUserInfo();
// 根据用户角色调整筛选按钮
if (user) {
// 判断用户角色
const isAdmin = user.projectName & & (user.projectName.includes('管理员') || user.projectName.includes('Admin'));
if (!isAdmin) {
// 非管理员用户,只保留"我的二维码"按钮
document.querySelectorAll('.filter-btn').forEach(btn => {
if (btn.dataset.filter !== 'me') {
btn.disabled = true;
btn.style.opacity = '0.5';
btn.style.cursor = 'not-allowed';
}
});
// 默认选中"我的二维码"
document.querySelector('.filter-btn[data-filter="me"]').classList.add('active');
document.querySelector('.filter-btn[data-filter="all"]').classList.remove('active');
}
}
loadQrCollection();
loadQrCollection();
// 绑定筛选按钮事件
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', function() {
if (!this.disabled) {
filterQrCodes(this.dataset.filter);
}
});
});
};
};
< / script >
< / script >
< / body >
< / body >