$(function () { // 移动端侧边导航栏控制 const mobileMenuToggle = document.getElementById('mobileMenuToggle'); const mobileSidebar = document.getElementById('mobileSidebar'); const mobileSidebarOverlay = document.getElementById('mobileSidebarOverlay'); const mobileSidebarClose = document.getElementById('mobileSidebarClose'); // 打开侧边栏 if (mobileMenuToggle) { mobileMenuToggle.addEventListener('click', function() { mobileSidebar.classList.add('active'); mobileMenuToggle.classList.add('active'); document.body.style.overflow = 'hidden'; // 禁止页面滚动 }); } // 关闭侧边栏 function closeMobileSidebar() { if (mobileSidebar) { mobileSidebar.classList.remove('active'); } if (mobileMenuToggle) { mobileMenuToggle.classList.remove('active'); } document.body.style.overflow = ''; // 恢复页面滚动 } // 点击遮罩层关闭 if (mobileSidebarOverlay) { mobileSidebarOverlay.addEventListener('click', closeMobileSidebar); } // 点击关闭按钮关闭 if (mobileSidebarClose) { mobileSidebarClose.addEventListener('click', closeMobileSidebar); } // 点击侧边栏内的链接后关闭(可选) document.querySelectorAll('.mobile-nav-link').forEach(function(link) { link.addEventListener('click', function(e) { // 如果是 a 标签且不是 javascript:; 则关闭侧边栏 if (link.tagName === 'A' && link.getAttribute('href') !== 'javascript:;') { closeMobileSidebar(); } }); }); // 同步桌面端和移动端的登录状态 function syncLoginStatus() { const desktopNoLogin = document.querySelector('.nav-desktop-link.no-login'); const desktopLoginIn = document.querySelector('.nav-desktop-link.login-in'); const mobileNoLogin = document.querySelector('.mobile-no-login'); const mobileLoginIn = document.querySelector('.mobile-login-in'); // 使用计算后的样式而不是 inline style const noLoginComputedDisplay = desktopNoLogin ? window.getComputedStyle(desktopNoLogin).display : 'none'; const loginInComputedDisplay = desktopLoginIn ? window.getComputedStyle(desktopLoginIn).display : 'none'; // 检查桌面端登录状态 if (desktopNoLogin && noLoginComputedDisplay !== 'none') { // 未登录 desktopNoLogin.style.display = 'flex'; if (desktopLoginIn) desktopLoginIn.style.display = 'none'; if (mobileNoLogin) mobileNoLogin.style.display = 'block'; if (mobileLoginIn) mobileLoginIn.style.display = 'none'; } else if (desktopLoginIn && loginInComputedDisplay !== 'none') { // 已登录 if (desktopNoLogin) desktopNoLogin.style.display = 'none'; desktopLoginIn.style.display = 'flex'; if (mobileNoLogin) mobileNoLogin.style.display = 'none'; if (mobileLoginIn) mobileLoginIn.style.display = 'block'; // 同步用户信息 const desktopUsername = document.getElementById('username'); const desktopHeadImg = document.getElementById('headImg'); const mobileUsername = document.getElementById('mobileUsername'); const mobileHeadImg = document.getElementById('mobileHeadImg'); if (desktopUsername && mobileUsername) { mobileUsername.textContent = desktopUsername.textContent; } if (desktopHeadImg && mobileHeadImg) { mobileHeadImg.textContent = desktopHeadImg.textContent; } } else { // 默认显示未登录状态 if (desktopNoLogin) desktopNoLogin.style.display = 'flex'; if (desktopLoginIn) desktopLoginIn.style.display = 'none'; if (mobileNoLogin) mobileNoLogin.style.display = 'block'; if (mobileLoginIn) mobileLoginIn.style.display = 'none'; } } // 移动端登录按钮事件绑定 const mobileLoginBtn = document.getElementById('mobileLoginBtn'); const desktopLoginBtn = document.getElementById('loginBtn'); if (mobileLoginBtn && desktopLoginBtn) { mobileLoginBtn.addEventListener('click', function() { desktopLoginBtn.click(); closeMobileSidebar(); }); } // 移动端注册按钮事件绑定 const mobileRegistBtn = document.getElementById('mobileRegistBtn'); const desktopRegistBtn = document.getElementById('registBtn'); if (mobileRegistBtn && desktopRegistBtn) { mobileRegistBtn.addEventListener('click', function() { desktopRegistBtn.click(); closeMobileSidebar(); }); } // 移动端账户信息按钮事件绑定 const mobileAccountBtn = document.getElementById('mobileAccountBtn'); const desktopAccountBtn = document.getElementById('accountBtn'); if (mobileAccountBtn && desktopAccountBtn) { mobileAccountBtn.addEventListener('click', function() { desktopAccountBtn.click(); closeMobileSidebar(); }); } // 移动端未付款订单按钮事件绑定 const mobileFinanceBtn = document.getElementById('mobileFinanceBtn'); const desktopFinanceBtn = document.getElementById('financeBtn'); if (mobileFinanceBtn && desktopFinanceBtn) { mobileFinanceBtn.addEventListener('click', function() { desktopFinanceBtn.click(); closeMobileSidebar(); }); } // 移动端我的工单按钮事件绑定 const mobileTicketBtn = document.getElementById('mobileTicketBtn'); const desktopTicketBtn = document.getElementById('ticketBtn'); if (mobileTicketBtn && desktopTicketBtn) { mobileTicketBtn.addEventListener('click', function() { desktopTicketBtn.click(); closeMobileSidebar(); }); } // 移动端退出按钮事件绑定 const mobileLogout = document.getElementById('mobileLogout'); const desktopLogout = document.getElementById('logout'); if (mobileLogout && desktopLogout) { mobileLogout.addEventListener('click', function() { desktopLogout.click(); closeMobileSidebar(); }); } // 初始化时同步登录状态 setTimeout(syncLoginStatus, 100); // 监听登录状态变化(使用 MutationObserver) const observeLoginStatus = function() { const desktopNoLogin = document.querySelector('.nav-desktop-link.no-login'); const desktopLoginIn = document.querySelector('.nav-desktop-link.login-in'); if (desktopNoLogin) { const observer = new MutationObserver(syncLoginStatus); observer.observe(desktopNoLogin, { attributes: true, attributeFilter: ['style'] }); } if (desktopLoginIn) { const observer = new MutationObserver(syncLoginStatus); observer.observe(desktopLoginIn, { attributes: true, attributeFilter: ['style'] }); } }; observeLoginStatus(); // 产品详情页的图片预览轮播(仅在存在时初始化) if ($('.gallery-thumbs').length > 0 && $('.gallery-top').length > 0) { var galleryThumbs = new Swiper('.gallery-thumbs', { spaceBetween: 10, slidesPerView: 10, freeMode: true, watchSlidesVisibility: true, watchSlidesProgress: true, noSwiping: true }); var galleryTop = new Swiper('.gallery-top', { spaceBetween: 10, thumbs: { swiper: galleryThumbs }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); } // 首页 Banner 轮播(仅在存在时初始化) if ($('.banner-cont').length > 0) { const mySwiper = new Swiper(".banner-cont", { loop: true, autoplay: { delay: 5000, disableOnInteraction: false, }, speed: 800, pagination: { el: ".swiper-pagination", clickable: true, type: 'bullets', }, on: { slideChange: function () { document.querySelectorAll('.banner-cont .swiper-pagination-bullet').forEach(function(bullet) { bullet.classList.remove('progress-active'); }); const activeBullet = document.querySelector('.banner-cont .swiper-pagination-bullet-active'); if (activeBullet) { activeBullet.classList.add('progress-active'); } }, init: function () { setTimeout(function() { const activeBullet = document.querySelector('.banner-cont .swiper-pagination-bullet-active'); if (activeBullet) { activeBullet.classList.add('progress-active'); } }, 100); } } }); } })