@@ -340,29 +353,58 @@
// 动态生成筛选按钮
function generateFilterButtons(invitees, currentUser) {
const filterButtonsContainer = document.querySelector('.filter-buttons');
+ const filterSidebarBtn = document.getElementById('filterSidebarBtn');
+ const sidebarFilterButtons = document.getElementById('sidebarFilterButtons');
+
if (!filterButtonsContainer) return;
- // 清空现有按钮，保留"全部"和"我的二维码"
+ // 清空现有按钮，只保留"全部"和"我的"
filterButtonsContainer.innerHTML = `
-
-
+
+
`;
- // 添加每个邀请者的筛选按钮
- 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);
+ // 为管理员显示筛选按钮并填充侧边栏
+ if (invitees && invitees.length > 0) {
+ // 显示筛选按钮
+ if (filterSidebarBtn) {
+ filterSidebarBtn.style.display = 'block';
}
- });
-
- // 默认选中"全部"
- document.querySelector('.filter-btn[data-filter="all"]').classList.add('active');
+
+ // 填充侧边栏筛选按钮
+ if (sidebarFilterButtons) {
+ sidebarFilterButtons.innerHTML = '';
+
+ invitees.forEach(invitee => {
+ // 跳过当前用户自己
+ if (invitee.inviter && invitee.inviter !== (currentUser.name || currentUser.userName)) {
+ const button = document.createElement('button');
+ button.className = 'filter-btn';
+ button.style.width = '100%';
+ button.style.textAlign = 'left';
+ button.style.padding = '8px 12px';
+ button.style.border = '1px solid #ddd';
+ button.style.borderRadius = '4px';
+ button.style.backgroundColor = 'white';
+ button.style.color = '#666';
+ button.style.fontSize = '14px';
+ button.style.cursor = 'pointer';
+ button.style.transition = 'all 0.3s';
+ button.dataset.filter = `invitee_${encodeURIComponent(invitee.inviter)}`;
+ button.dataset.inviter = invitee.inviter;
+ button.textContent = invitee.inviter;
+
+ // 添加点击事件
+ button.addEventListener('click', function() {
+ filterQrCodes(this.dataset.filter, this.dataset.inviter);
+ closeSidebar();
+ });
+
+ sidebarFilterButtons.appendChild(button);
+ }
+ });
+ }
+ }
// 绑定筛选按钮事件
document.querySelectorAll('.filter-btn').forEach(btn => {
@@ -373,6 +415,26 @@
});
});
}
+
+ // 打开筛选侧边栏
+ function openSidebar() {
+ const sidebar = document.getElementById('filterSidebar');
+ const overlay = document.getElementById('sidebarOverlay');
+ if (sidebar && overlay) {
+ sidebar.style.right = '0';
+ overlay.style.display = 'block';
+ }
+ }
+
+ // 关闭筛选侧边栏
+ function closeSidebar() {
+ const sidebar = document.getElementById('filterSidebar');
+ const overlay = document.getElementById('sidebarOverlay');
+ if (sidebar && overlay) {
+ sidebar.style.right = '-300px';
+ overlay.style.display = 'none';
+ }
+ }
// 渲染二维码合集
function renderQrCollection(qrCodes, currentUser, isAdmin) {
@@ -482,6 +544,24 @@
// 页面加载时加载二维码合集
window.onload = function() {
loadQrCollection();
+
+ // 绑定筛选侧边栏按钮事件
+ const filterSidebarBtn = document.getElementById('filterSidebarBtn');
+ if (filterSidebarBtn) {
+ filterSidebarBtn.addEventListener('click', openSidebar);
+ }
+
+ // 绑定关闭侧边栏按钮事件
+ const closeSidebarBtn = document.getElementById('closeSidebarBtn');
+ if (closeSidebarBtn) {
+ closeSidebarBtn.addEventListener('click', closeSidebar);
+ }
+
+ // 点击遮罩层关闭侧边栏
+ const sidebarOverlay = document.getElementById('sidebarOverlay');
+ if (sidebarOverlay) {
+ sidebarOverlay.addEventListener('click', closeSidebar);
+ }
};