fb31969195
All checks were successful
continuous-integration/drone/push Build is passing
tools.js syncLoginStatus 的 else 分支原来默认显示未登录, 但此时 AJAX 可能尚未返回。现在先检查 localStorage.jwt, 有 jwt 则不做操作等 AJAX 回调处理, 只有确认无 jwt 时才显示登录按钮
235 lines
8.6 KiB
JavaScript
235 lines
8.6 KiB
JavaScript
$(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 {
|
||
// 两者都隐藏 — 可能是 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';
|
||
}
|
||
}
|
||
}
|
||
|
||
// 移动端登录按钮事件绑定
|
||
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);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
})
|