diff --git a/qr-collection.html b/qr-collection.html index e40f67e..2ffa9f5 100644 --- a/qr-collection.html +++ b/qr-collection.html @@ -75,7 +75,24 @@ border-bottom: 1px solid #E0E0E0; display: flex; align-items: center; - justify-content: space-between; + gap: 12px; + } + + .filter-section .filter-toggle { + flex-shrink: 0; + } + + .filter-section .search-box { + flex: 1; + min-width: 150px; + } + + .filter-section .search-box input:focus { + border-color: #4CAF50; + } + + .filter-section .filter-sidebar-btn { + flex-shrink: 0; } .filter-title { @@ -331,7 +348,10 @@ - @@ -463,7 +483,8 @@ // 添加点击事件 button.addEventListener('click', function() { - filterQrCodes(this.dataset.filter, this.dataset.inviter); + const searchInput = document.getElementById('searchInput'); + filterQrCodes(this.dataset.filter, this.dataset.inviter, searchInput ? searchInput.value : ''); closeSidebar(); }); @@ -546,7 +567,7 @@ } // 筛选二维码 - function filterQrCodes(filter, inviterName) { + function filterQrCodes(filter, inviterName, searchKeyword = '') { const user = loadUserInfo(); const qrCollectionElement = document.getElementById('qrCollection'); @@ -583,6 +604,18 @@ ); } + // 搜索功能 + if (searchKeyword) { + const keyword = searchKeyword.toLowerCase(); + filteredQrCodes = filteredQrCodes.filter(qrCode => { + return ( + (qrCode.phoneNumber && qrCode.phoneNumber.toLowerCase().includes(keyword)) || + (qrCode.company && qrCode.company.toLowerCase().includes(keyword)) || + (qrCode.inviter && qrCode.inviter.toLowerCase().includes(keyword)) + ); + }); + } + if (filteredQrCodes.length > 0) { renderQrCollection(filteredQrCodes, user, data.isAdmin); } else { @@ -621,6 +654,31 @@ if (sidebarOverlay) { sidebarOverlay.addEventListener('click', closeSidebar); } + + // 绑定筛选切换按钮事件 + document.querySelectorAll('.filter-toggle-btn').forEach(btn => { + btn.addEventListener('click', function() { + // 更新按钮状态 + document.querySelectorAll('.filter-toggle-btn').forEach(b => { + b.classList.remove('active'); + }); + this.classList.add('active'); + + // 执行筛选 + const searchInput = document.getElementById('searchInput'); + filterQrCodes(this.dataset.filter, null, searchInput ? searchInput.value : ''); + }); + }); + + // 绑定搜索框输入事件 + const searchInput = document.getElementById('searchInput'); + if (searchInput) { + searchInput.addEventListener('input', function() { + const activeFilterBtn = document.querySelector('.filter-toggle-btn.active'); + const filter = activeFilterBtn ? activeFilterBtn.dataset.filter : 'all'; + filterQrCodes(filter, null, this.value); + }); + } };