diff --git a/js/tools.js b/js/tools.js index 23556ad..a4cbc9a 100644 --- a/js/tools.js +++ b/js/tools.js @@ -1,234 +1,214 @@ -$(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 () { + // 移动端侧边导航栏控制 + 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(); + } + }); + }); + + // 同步桌面端和移动端的登录状态(直接用 jwt 判断) 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 (localStorage.jwt) { + // 有 jwt: 隐藏登录按钮, 显示已登录区域 if (desktopNoLogin) desktopNoLogin.style.display = 'none'; - desktopLoginIn.style.display = 'flex'; + if (desktopLoginIn) 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; - } + // 同步用户信息到移动端 + var du = document.getElementById('username'); + var dh = document.getElementById('headImg'); + var mu = document.getElementById('mobileUsername'); + var mh = document.getElementById('mobileHeadImg'); + if (du && mu) mu.textContent = du.textContent; + if (dh && mh) mh.textContent = dh.textContent; } else { - // 两者都隐藏 — 可能是 AJAX 尚未返回 - // 若有 jwt 则不做操作, 等 common.js AJAX 回调处理 - if (!localStorage.jwt) { - // 确认未登录, 显示登录按钮 - if (desktopNoLogin) desktopNoLogin.style.display = 'flex'; - if (desktopLoginIn) desktopLoginIn.style.display = 'none'; - if (mobileNoLogin) mobileNoLogin.style.display = 'block'; - if (mobileLoginIn) mobileLoginIn.style.display = 'none'; - } + // 无 jwt: 显示登录按钮 + 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); - } - } - }); - } -}) + } + + // 移动端登录按钮事件绑定 + 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); + } + } + }); + } +})