Manager.isReturningFromDetail(); if (isReturning) { // 从详情页返回 console.log('从详情页返回'); this.handleReturnFromDetail(); } else if (urlStoreId) { // URL中有参数(刷新页面或直接访问) console.log('从URL参数恢复分类'); this.currentStoreId = urlStoreId; this.currentCategoryId = urlCategoryId; this.currentLevel = urlLevel; if (this.currentLevel === 'single') { this.showSinglePage(this.currentStoreId); } else { this.selectStore(this.currentStoreId, true); if (this.currentLevel === 'category' && this.currentCategoryId) { setTimeout(() => { this.selectCategory(this.currentCategoryId, this.currentStoreId, true); }, 100); } } } else { // 检查sessionStorage中是否有保存的分类 const savedCategory = this.stateManager.getCurrentCategory(); if (savedCategory) { console.log('从sessionStorage恢复分类:', savedCategory); this.currentStoreId = savedCategory.storeId; this.currentCategoryId = savedCategory.categoryId; this.currentLevel = savedCategory.level; if (this.currentLevel === 'single') { this.showSinglePage(this.currentStoreId); } else { this.selectStore(this.currentStoreId, true); if (this.currentLevel === 'category' && this.currentCategoryId) { setTimeout(() => { this.selectCategory(this.currentCategoryId, this.currentStoreId, true); }, 100); } } } else { // 完全首次访问,选择第一个 console.log('完全首次访问,选择第一个店铺'); const firstTab = document.querySelector('.primary-tab'); if (firstTab) { this.currentStoreId = firstTab.getAttribute('data-scode'); this.selectStore(this.currentStoreId); } } } } static handleReturnFromDetail() { const savedState = this.stateManager.restoreState(); if (savedState) { console.log('从详情页返回,恢复完整状态:', savedState); // 优先使用URL参数(如果有的话) const urlParams = new URLSearchParams(window.location.search); const urlStoreId = urlParams.get('store'); const urlCategoryId = urlParams.get('category'); const urlLevel = urlParams.get('level') || 'store'; if (urlStoreId) { console.log('使用URL参数恢复分类'); this.currentStoreId = urlStoreId; this.currentCategoryId = urlCategoryId; this.currentLevel = urlLevel; } else { console.log('使用保存的状态恢复分类'); this.currentStoreId = savedState.storeId; this.currentCategoryId = savedState.categoryId; this.currentLevel = savedState.level; } // 恢复分类选择 if (this.currentStoreId) { if (this.currentLevel === 'single') { this.showSinglePage(this.currentStoreId); } else { this.selectStore(this.currentStoreId, true); if (this.currentLevel === 'category' && this.currentCategoryId) { setTimeout(() => { this.selectCategory(this.currentCategoryId, this.currentStoreId, true); }, 100); } } // 恢复滚动位置 if (savedState.scrollY > 0) { setTimeout(() => { console.log('恢复滚动位置:', savedState.scrollY); requestAnimationFrame(() => { window.scrollTo(0, savedState.scrollY); }); }, 300); } } } else { // 恢复失败,检查URL参数 const urlParams = new URLSearchParams(window.location.search); const urlStoreId = urlParams.get('store'); const urlCategoryId = urlParams.get('category'); const urlLevel = urlParams.get('level') || 'store'; if (urlStoreId) { console.log('恢复失败,使用URL参数恢复'); this.currentStoreId = urlStoreId; this.currentCategoryId = urlCategoryId; this.currentLevel = urlLevel; if (this.currentLevel === 'single') { this.showSinglePage(this.currentStoreId); } else { this.selectStore(this.currentStoreId, true); if (this.currentLevel === 'category' && this.currentCategoryId) { setTimeout(() => { this.selectCategory(this.currentCategoryId, this.currentStoreId, true); }, 100); } } } } } static bindEvents() { this.bindPrimaryTabEvents(); this.bindSecondaryTabEvents(); this.bindListLinkEvents(); } static bindPrimaryTabEvents() { document.querySelectorAll('.primary-tab').forEach(tab => { tab.addEventListener('click', (e) => { e.preventDefault(); const storeId = tab.getAttribute('data-scode'); const type = tab.getAttribute('data-type'); console.log('点击一级导航:', storeId, '类型:', type); // 检查是否是单页面(type为1表示单页面) if (type === '1') { // 单页面,直接显示内容 this.showSinglePage(storeId); } else { // 列表页面,正常显示 this.selectStore(storeId); } // 点击分类时滚动到顶部 requestAnimationFrame(() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); }); }); } static bindSecondaryTabEvents() { const secondaryNav = document.getElementById('secondaryNav'); if (!secondaryNav) return; // 使用事件委托 secondaryNav.addEventListener('click', (e) => { if (e.target.classList.contains('secondary-tab')) { e.preventDefault(); const categoryId = e.target.getAttribute('data-scode'); const storeId = e.target.getAttribute('data-parent'); this.selectCategory(categoryId, storeId); // 点击分类时滚动到顶部 requestAnimationFrame(() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); } }); } static bindListLinkEvents() { // 使用事件委托,一次性绑定 document.addEventListener('click', (e) => { const link = e.target.closest('.category-link'); if (link) { console.log('点击列表链接,准备进入详情页'); // 保存当前状态 this.stateManager.saveState(); // 修改链接添加返回参数 const originalHref = link.getAttribute('href'); if (originalHref && !originalHref.includes(this.stateManager.URL_RETURN_PARAM)) { const separator = originalHref.includes('?') ? '&' : '?'; const newHref = originalHref + separator + 'return_from_detail=1'; link.setAttribute('href', newHref); } } }); } static selectStore(storeId, isRestoring = false) { console.log('选择店铺:', storeId, '恢复状态:', isRestoring); this.currentStoreId = storeId; this.currentCategoryId = null; this.currentLevel = 'store'; // 更新UI this.updatePrimaryTabs(storeId); this.showSecondaryCategories(storeId); this.showStoreContent(storeId); // 隐藏所有单页面内容 this.hideAllSinglePages(); // 保存分类状态 if (!isRestoring) { this.stateManager.saveCurrentCategory(storeId, null, 'store'); } } static selectCategory(categoryId, storeId = null, isRestoring = false) { console.log('选择分类:', categoryId, '恢复状态:', isRestoring); const targetStoreId = storeId || this.currentStoreId; if (!targetStoreId) return; if (targetStoreId !== this.currentStoreId) { this.selectStore(targetStoreId, isRestoring); } this.currentCategoryId = categoryId; this.currentLevel = 'category'; // 更新UI this.updateSecondaryTabs(categoryId); this.showCategoryContent(targetStoreId, categoryId); // 隐藏所有单页面内容 this.hideAllSinglePages(); // 保存分类状态 if (!isRestoring) { this.stateManager.saveCurrentCategory(targetStoreId, categoryId, 'category'); } } // 显示单页面内容 static showSinglePage(storeId, isRestoring = false) { console.log('显示单页面:', storeId, '恢复状态:', isRestoring); this.currentStoreId = storeId; this.currentCategoryId = null; this.currentLevel = 'single'; // 更新UI this.updatePrimaryTabs(storeId); // 隐藏二级分类 this.hideAllSecondaryCategories(); // 隐藏所有分类内容 this.hideAllCategoryContent(); // 隐藏初始内容 document.getElementById('content-initial').classList.remove('active'); // 隐藏所有单页面内容 this.hideAllSinglePages(); // 显示单页面内容 const singlePage = document.getElementById(`single-page-${storeId}`); if (singlePage) { singlePage.classList.add('active'); console.log('显示单页面成功'); } else { // 如果没有单页面内容,显示初始内容并提示 document.getElementById('content-initial').classList.add('active'); document.getElementById('content-initial').innerHTML = `

这是一个单页面,正在加载内容...

点击查看详情

`; } // 保存分类状态 if (!isRestoring) { this.stateManager.saveCurrentCategory(storeId, null, 'single'); } } static updatePrimaryTabs(storeId) { document.querySelectorAll('.primary-tab').forEach(tab => { tab.classList.toggle('active', tab.getAttribute('data-scode') === storeId); }); } static showSecondaryCategories(storeId) { // 隐藏所有二级分类容器 document.querySelectorAll('.secondary-container').forEach(container => { container.style.display = 'none'; }); // 显示当前店铺的二级分类 const container = document.querySelector(`.secondary-container[data-store="${storeId}"]`); if (container) { container.style.display = 'block'; // 如果有当前选中的二级分类,设置选中状态 if (this.currentLevel === 'category' && this.currentCategoryId) { setTimeout(() => { this.updateSecondaryTabs(this.currentCategoryId); }, 50); } else { // 移除所有二级分类的active状态 document.querySelectorAll('.secondary-tab').forEach(tab => { tab.classList.remove('active'); }); } } else { // 如果没有二级分类,隐藏二级导航区域 document.getElementById('secondaryNav').style.display = 'none'; } } static hideAllSecondaryCategories() { document.querySelectorAll('.secondary-container').forEach(container => { container.style.display = 'none'; }); document.getElementById('secondaryNav').style.display = 'block'; } static updateSecondaryTabs(categoryId) { document.querySelectorAll('.secondary-tab').forEach(tab => { tab.classList.toggle('active', tab.getAttribute('data-scode') === categoryId); }); } static showStoreContent(storeId) { // 隐藏所有内容 this.hideAllContent(); const content = document.getElementById(`content-store-${storeId}`); if (content) { content.classList.add('active'); } else { document.getElementById('content-initial').classList.add('active'); } } static showCategoryContent(storeId, categoryId) { // 隐藏所有内容 this.hideAllContent(); const content = document.getElementById(`content-category-${storeId}-${categoryId}`); if (content) { content.classList.add('active'); } else { document.getElementById('content-initial').classList.add('active'); } } static hideAllCategoryContent() { document.querySelectorAll('.category-content').forEach(content => { content.classList.remove('active'); }); } static hideAllSinglePages() { document.querySelectorAll('.single-page-content').forEach(content => { content.classList.remove('active'); }); } static hideAllContent() { this.hideAllCategoryContent(); this.hideAllSinglePages(); document.getElementById('content-initial').classList.remove('active'); } } // ====== 无限滚动管理器 ====== class InfiniteScrollManager { static isLoading = false; static lastScrollTime = 0; static SCROLL_THROTTLE = 200; static scrollHandler = null; static init() { // 使用节流优化滚动事件 this.scrollHandler = this.throttle(() => { this.handleScroll(); }, this.SCROLL_THROTTLE); // 使用passive事件监听器提高性能 window.addEventListener('scroll', this.scrollHandler, { passive: true, capture: false }); console.log('无限滚动管理器初始化完成'); } // 节流函数 static throttle(func, limit) { let inThrottle; return function() { const args = arguments; const context = this; if (!inThrottle) { func.apply(context, args); inThrottle = true; setTimeout(() => inThrottle = false, limit); } }; } static handleScroll() { if (this.isLoading) return; const scrollTop = window.scrollY || document.documentElement.scrollTop; const windowHeight = window.innerHeight; const documentHeight = document.documentElement.scrollHeight; // 检查是否接近底部(距离底部150px) if (scrollTop + windowHeight >= documentHeight - 150) { this.loadMore(); } } static loadMore() { const activeContent = document.querySelector('.category-content.active'); if (!activeContent) return; const loadMoreContent = activeContent.querySelector('.load-more-content'); if (!loadMoreContent || loadMoreContent.children.length === 0) return; this.isLoading = true; const loadingIndicator = document.getElementById('loadingIndicator'); if (loadingIndicator) { loadingIndicator.classList.add('show'); } // 使用requestAnimationFrame确保动画流畅 requestAnimationFrame(() => { setTimeout(() => { const grid = activeContent.querySelector('.category-grid'); if (!grid) { this.isLoading = false; if (loadingIndicator) loadingIndicator.classList.remove('show'); return; } let loaded = 0; const fragment = document.createDocumentFragment(); // 批量添加元素,减少DOM操作 while (loadMoreContent.children.length > 0 && loaded < 12) { fragment.appendChild(loadMoreContent.children[0]); loaded++; } grid.appendChild(fragment); this.isLoading = false; if (loadingIndicator) loadingIndicator.classList.remove('show'); }, 600); }); } // 清理事件监听器 static cleanup() { if (this.scrollHandler) { window.removeEventListener('scroll', this.scrollHandler); } } } // ====== 返回顶部管理器 ====== class BackToTopManager { static scrollHandler = null; static init() { const btn = document.getElementById('backToTop'); if (!btn) return; // 使用节流优化滚动事件 let isScrolling = false; this.scrollHandler = () => { if (!isScrolling) { isScrolling = true; requestAnimationFrame(() => { btn.classList.toggle('show', window.scrollY > 300); isScrolling = false; }); } }; window.addEventListener('scroll', this.scrollHandler, { passive: true }); btn.addEventListener('click', () => { requestAnimationFrame(() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); }); } static cleanup() { if (this.scrollHandler) { window.removeEventListener('scroll', this.scrollHandler); } } } // ====== 页面初始化 ====== document.addEventListener('DOMContentLoaded', () => { console.log('DOM加载完成,开始初始化'); // 初始化分类管理器 CategoryManager.init(); // 优化滚动事件 - 使用节流保存滚动位置 let scrollSaveTimeout; const scrollSaveHandler = () => { clearTimeout(scrollSaveTimeout); scrollSaveTimeout = setTimeout(() => { CategoryManager.stateManager.saveScrollPosition(); }, 500); }; window.addEventListener('scroll', scrollSaveHandler, { passive: true }); // 监听浏览器前进/后退 let isPopStateHandling = false; window.addEventListener('popstate', () => { if (isPopStateHandling) return; isPopStateHandling = true; console.log('浏览器前进/后退'); // 重新获取URL参数 const urlParams = new URLSearchParams(window.location.search); const storeId = urlParams.get('store'); const categoryId = urlParams.get('category'); const level = urlParams.get('level') || 'store'; console.log('popstate URL参数:', { storeId, categoryId, level }); // 根据URL参数重新加载 if (storeId) { CategoryManager.currentStoreId = storeId; CategoryManager.currentCategoryId = categoryId; CategoryManager.currentLevel = level; if (CategoryManager.currentLevel === 'single') { CategoryManager.showSinglePage(CategoryManager.currentStoreId, false); } else { CategoryManager.selectStore(CategoryManager.currentStoreId, false); if (CategoryManager.currentLevel === 'category' && CategoryManager.currentCategoryId) { setTimeout(() => { CategoryManager.selectCategory( CategoryManager.currentCategoryId, CategoryManager.currentStoreId, false ); }, 100); } } } else { // 没有URL参数,回到初始状态 document.querySelectorAll('.category-content').forEach(content => { content.classList.remove('active'); }); document.getElementById('content-initial').classList.add('active'); // 清除保存的状态 CategoryManager.stateManager.clearState(); } setTimeout(() => { isPopStateHandling = false; }, 100); }); // 页面卸载时清理 window.addEventListener('beforeunload', () => { // 清理事件监听器 InfiniteScrollManager.cleanup(); BackToTopManager.cleanup(); // 清除滚动事件监听 window.removeEventListener('scroll', scrollSaveHandler); }); });