fix: 彻底重写 syncLoginStatus 用 jwt 直接判断
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
根因: MutationObserver + CSS display检测 形成死循环, 先 common.js AJAX 隐藏按钮, 然后 observer 触发 syncLoginStatus 又错误显示登录按钮. 修复: syncLoginStatus 不再检测 CSS display 状态, 直接用 localStorage.jwt 判断: - 有 jwt → 隐藏登录/注册, 显示已登录 - 无 jwt → 显示登录/注册, 隐藏已登录 同时 common.js certification 接口失败不再 影响登录按钮显示
This commit is contained in:
yiqiu
424
js/tools.js
424
js/tools.js
@@ -1,234 +1,214 @@
|
|||||||
$(function () {
|
$(function () {
|
||||||
// 移动端侧边导航栏控制
|
// 移动端侧边导航栏控制
|
||||||
const mobileMenuToggle = document.getElementById('mobileMenuToggle');
|
const mobileMenuToggle = document.getElementById('mobileMenuToggle');
|
||||||
const mobileSidebar = document.getElementById('mobileSidebar');
|
const mobileSidebar = document.getElementById('mobileSidebar');
|
||||||
const mobileSidebarOverlay = document.getElementById('mobileSidebarOverlay');
|
const mobileSidebarOverlay = document.getElementById('mobileSidebarOverlay');
|
||||||
const mobileSidebarClose = document.getElementById('mobileSidebarClose');
|
const mobileSidebarClose = document.getElementById('mobileSidebarClose');
|
||||||
|
|
||||||
// 打开侧边栏
|
// 打开侧边栏
|
||||||
if (mobileMenuToggle) {
|
if (mobileMenuToggle) {
|
||||||
mobileMenuToggle.addEventListener('click', function() {
|
mobileMenuToggle.addEventListener('click', function() {
|
||||||
mobileSidebar.classList.add('active');
|
mobileSidebar.classList.add('active');
|
||||||
mobileMenuToggle.classList.add('active');
|
mobileMenuToggle.classList.add('active');
|
||||||
document.body.style.overflow = 'hidden'; // 禁止页面滚动
|
document.body.style.overflow = 'hidden'; // 禁止页面滚动
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 关闭侧边栏
|
// 关闭侧边栏
|
||||||
function closeMobileSidebar() {
|
function closeMobileSidebar() {
|
||||||
if (mobileSidebar) {
|
if (mobileSidebar) {
|
||||||
mobileSidebar.classList.remove('active');
|
mobileSidebar.classList.remove('active');
|
||||||
}
|
}
|
||||||
if (mobileMenuToggle) {
|
if (mobileMenuToggle) {
|
||||||
mobileMenuToggle.classList.remove('active');
|
mobileMenuToggle.classList.remove('active');
|
||||||
}
|
}
|
||||||
document.body.style.overflow = ''; // 恢复页面滚动
|
document.body.style.overflow = ''; // 恢复页面滚动
|
||||||
}
|
}
|
||||||
|
|
||||||
// 点击遮罩层关闭
|
// 点击遮罩层关闭
|
||||||
if (mobileSidebarOverlay) {
|
if (mobileSidebarOverlay) {
|
||||||
mobileSidebarOverlay.addEventListener('click', closeMobileSidebar);
|
mobileSidebarOverlay.addEventListener('click', closeMobileSidebar);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 点击关闭按钮关闭
|
// 点击关闭按钮关闭
|
||||||
if (mobileSidebarClose) {
|
if (mobileSidebarClose) {
|
||||||
mobileSidebarClose.addEventListener('click', closeMobileSidebar);
|
mobileSidebarClose.addEventListener('click', closeMobileSidebar);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 点击侧边栏内的链接后关闭（可选）
|
// 点击侧边栏内的链接后关闭（可选）
|
||||||
document.querySelectorAll('.mobile-nav-link').forEach(function(link) {
|
document.querySelectorAll('.mobile-nav-link').forEach(function(link) {
|
||||||
link.addEventListener('click', function(e) {
|
link.addEventListener('click', function(e) {
|
||||||
// 如果是 a 标签且不是 javascript:; 则关闭侧边栏
|
// 如果是 a 标签且不是 javascript:; 则关闭侧边栏
|
||||||
if (link.tagName === 'A' && link.getAttribute('href') !== 'javascript:;') {
|
if (link.tagName === 'A' && link.getAttribute('href') !== 'javascript:;') {
|
||||||
closeMobileSidebar();
|
closeMobileSidebar();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// 同步桌面端和移动端的登录状态
|
// 同步桌面端和移动端的登录状态（直接用 jwt 判断）
|
||||||
function syncLoginStatus() {
|
function syncLoginStatus() {
|
||||||
const desktopNoLogin = document.querySelector('.nav-desktop-link.no-login');
|
const desktopNoLogin = document.querySelector('.nav-desktop-link.no-login');
|
||||||
const desktopLoginIn = document.querySelector('.nav-desktop-link.login-in');
|
const desktopLoginIn = document.querySelector('.nav-desktop-link.login-in');
|
||||||
const mobileNoLogin = document.querySelector('.mobile-no-login');
|
const mobileNoLogin = document.querySelector('.mobile-no-login');
|
||||||
const mobileLoginIn = document.querySelector('.mobile-login-in');
|
const mobileLoginIn = document.querySelector('.mobile-login-in');
|
||||||
|
|
||||||
// 使用计算后的样式而不是 inline style
|
if (localStorage.jwt) {
|
||||||
const noLoginComputedDisplay = desktopNoLogin ? window.getComputedStyle(desktopNoLogin).display : 'none';
|
// 有 jwt: 隐藏登录按钮, 显示已登录区域
|
||||||
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';
|
if (desktopNoLogin) desktopNoLogin.style.display = 'none';
|
||||||
desktopLoginIn.style.display = 'flex';
|
if (desktopLoginIn) desktopLoginIn.style.display = 'flex';
|
||||||
if (mobileNoLogin) mobileNoLogin.style.display = 'none';
|
if (mobileNoLogin) mobileNoLogin.style.display = 'none';
|
||||||
if (mobileLoginIn) mobileLoginIn.style.display = 'block';
|
if (mobileLoginIn) mobileLoginIn.style.display = 'block';
|
||||||
|
|
||||||
// 同步用户信息
|
// 同步用户信息到移动端
|
||||||
const desktopUsername = document.getElementById('username');
|
var du = document.getElementById('username');
|
||||||
const desktopHeadImg = document.getElementById('headImg');
|
var dh = document.getElementById('headImg');
|
||||||
const mobileUsername = document.getElementById('mobileUsername');
|
var mu = document.getElementById('mobileUsername');
|
||||||
const mobileHeadImg = document.getElementById('mobileHeadImg');
|
var mh = document.getElementById('mobileHeadImg');
|
||||||
|
if (du && mu) mu.textContent = du.textContent;
|
||||||
if (desktopUsername && mobileUsername) {
|
if (dh && mh) mh.textContent = dh.textContent;
|
||||||
mobileUsername.textContent = desktopUsername.textContent;
|
|
||||||
}
|
|
||||||
if (desktopHeadImg && mobileHeadImg) {
|
|
||||||
mobileHeadImg.textContent = desktopHeadImg.textContent;
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
// 两者都隐藏 — 可能是 AJAX 尚未返回
|
// 无 jwt: 显示登录按钮
|
||||||
// 若有 jwt 则不做操作, 等 common.js AJAX 回调处理
|
if (desktopNoLogin) desktopNoLogin.style.display = 'flex';
|
||||||
if (!localStorage.jwt) {
|
if (desktopLoginIn) desktopLoginIn.style.display = 'none';
|
||||||
// 确认未登录, 显示登录按钮
|
if (mobileNoLogin) mobileNoLogin.style.display = 'block';
|
||||||
if (desktopNoLogin) desktopNoLogin.style.display = 'flex';
|
if (mobileLoginIn) mobileLoginIn.style.display = 'none';
|
||||||
if (desktopLoginIn) desktopLoginIn.style.display = 'none';
|
|
||||||
if (mobileNoLogin) mobileNoLogin.style.display = 'block';
|
|
||||||
if (mobileLoginIn) mobileLoginIn.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 移动端登录按钮事件绑定
|
// 移动端登录按钮事件绑定
|
||||||
const mobileLoginBtn = document.getElementById('mobileLoginBtn');
|
const mobileLoginBtn = document.getElementById('mobileLoginBtn');
|
||||||
const desktopLoginBtn = document.getElementById('loginBtn');
|
const desktopLoginBtn = document.getElementById('loginBtn');
|
||||||
if (mobileLoginBtn && desktopLoginBtn) {
|
if (mobileLoginBtn && desktopLoginBtn) {
|
||||||
mobileLoginBtn.addEventListener('click', function() {
|
mobileLoginBtn.addEventListener('click', function() {
|
||||||
desktopLoginBtn.click();
|
desktopLoginBtn.click();
|
||||||
closeMobileSidebar();
|
closeMobileSidebar();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 移动端注册按钮事件绑定
|
// 移动端注册按钮事件绑定
|
||||||
const mobileRegistBtn = document.getElementById('mobileRegistBtn');
|
const mobileRegistBtn = document.getElementById('mobileRegistBtn');
|
||||||
const desktopRegistBtn = document.getElementById('registBtn');
|
const desktopRegistBtn = document.getElementById('registBtn');
|
||||||
if (mobileRegistBtn && desktopRegistBtn) {
|
if (mobileRegistBtn && desktopRegistBtn) {
|
||||||
mobileRegistBtn.addEventListener('click', function() {
|
mobileRegistBtn.addEventListener('click', function() {
|
||||||
desktopRegistBtn.click();
|
desktopRegistBtn.click();
|
||||||
closeMobileSidebar();
|
closeMobileSidebar();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 移动端账户信息按钮事件绑定
|
// 移动端账户信息按钮事件绑定
|
||||||
const mobileAccountBtn = document.getElementById('mobileAccountBtn');
|
const mobileAccountBtn = document.getElementById('mobileAccountBtn');
|
||||||
const desktopAccountBtn = document.getElementById('accountBtn');
|
const desktopAccountBtn = document.getElementById('accountBtn');
|
||||||
if (mobileAccountBtn && desktopAccountBtn) {
|
if (mobileAccountBtn && desktopAccountBtn) {
|
||||||
mobileAccountBtn.addEventListener('click', function() {
|
mobileAccountBtn.addEventListener('click', function() {
|
||||||
desktopAccountBtn.click();
|
desktopAccountBtn.click();
|
||||||
closeMobileSidebar();
|
closeMobileSidebar();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 移动端未付款订单按钮事件绑定
|
// 移动端未付款订单按钮事件绑定
|
||||||
const mobileFinanceBtn = document.getElementById('mobileFinanceBtn');
|
const mobileFinanceBtn = document.getElementById('mobileFinanceBtn');
|
||||||
const desktopFinanceBtn = document.getElementById('financeBtn');
|
const desktopFinanceBtn = document.getElementById('financeBtn');
|
||||||
if (mobileFinanceBtn && desktopFinanceBtn) {
|
if (mobileFinanceBtn && desktopFinanceBtn) {
|
||||||
mobileFinanceBtn.addEventListener('click', function() {
|
mobileFinanceBtn.addEventListener('click', function() {
|
||||||
desktopFinanceBtn.click();
|
desktopFinanceBtn.click();
|
||||||
closeMobileSidebar();
|
closeMobileSidebar();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 移动端我的工单按钮事件绑定
|
// 移动端我的工单按钮事件绑定
|
||||||
const mobileTicketBtn = document.getElementById('mobileTicketBtn');
|
const mobileTicketBtn = document.getElementById('mobileTicketBtn');
|
||||||
const desktopTicketBtn = document.getElementById('ticketBtn');
|
const desktopTicketBtn = document.getElementById('ticketBtn');
|
||||||
if (mobileTicketBtn && desktopTicketBtn) {
|
if (mobileTicketBtn && desktopTicketBtn) {
|
||||||
mobileTicketBtn.addEventListener('click', function() {
|
mobileTicketBtn.addEventListener('click', function() {
|
||||||
desktopTicketBtn.click();
|
desktopTicketBtn.click();
|
||||||
closeMobileSidebar();
|
closeMobileSidebar();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 移动端退出按钮事件绑定
|
// 移动端退出按钮事件绑定
|
||||||
const mobileLogout = document.getElementById('mobileLogout');
|
const mobileLogout = document.getElementById('mobileLogout');
|
||||||
const desktopLogout = document.getElementById('logout');
|
const desktopLogout = document.getElementById('logout');
|
||||||
if (mobileLogout && desktopLogout) {
|
if (mobileLogout && desktopLogout) {
|
||||||
mobileLogout.addEventListener('click', function() {
|
mobileLogout.addEventListener('click', function() {
|
||||||
desktopLogout.click();
|
desktopLogout.click();
|
||||||
closeMobileSidebar();
|
closeMobileSidebar();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 初始化时同步登录状态
|
// 初始化时同步登录状态
|
||||||
setTimeout(syncLoginStatus, 100);
|
setTimeout(syncLoginStatus, 100);
|
||||||
|
|
||||||
// 监听登录状态变化（使用 MutationObserver）
|
// 监听登录状态变化（使用 MutationObserver）
|
||||||
const observeLoginStatus = function() {
|
const observeLoginStatus = function() {
|
||||||
const desktopNoLogin = document.querySelector('.nav-desktop-link.no-login');
|
const desktopNoLogin = document.querySelector('.nav-desktop-link.no-login');
|
||||||
const desktopLoginIn = document.querySelector('.nav-desktop-link.login-in');
|
const desktopLoginIn = document.querySelector('.nav-desktop-link.login-in');
|
||||||
|
|
||||||
if (desktopNoLogin) {
|
if (desktopNoLogin) {
|
||||||
const observer = new MutationObserver(syncLoginStatus);
|
const observer = new MutationObserver(syncLoginStatus);
|
||||||
observer.observe(desktopNoLogin, { attributes: true, attributeFilter: ['style'] });
|
observer.observe(desktopNoLogin, { attributes: true, attributeFilter: ['style'] });
|
||||||
}
|
}
|
||||||
if (desktopLoginIn) {
|
if (desktopLoginIn) {
|
||||||
const observer = new MutationObserver(syncLoginStatus);
|
const observer = new MutationObserver(syncLoginStatus);
|
||||||
observer.observe(desktopLoginIn, { attributes: true, attributeFilter: ['style'] });
|
observer.observe(desktopLoginIn, { attributes: true, attributeFilter: ['style'] });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
observeLoginStatus();
|
observeLoginStatus();
|
||||||
|
|
||||||
// 产品详情页的图片预览轮播（仅在存在时初始化）
|
// 产品详情页的图片预览轮播（仅在存在时初始化）
|
||||||
if ($('.gallery-thumbs').length > 0 && $('.gallery-top').length > 0) {
|
if ($('.gallery-thumbs').length > 0 && $('.gallery-top').length > 0) {
|
||||||
var galleryThumbs = new Swiper('.gallery-thumbs', {
|
var galleryThumbs = new Swiper('.gallery-thumbs', {
|
||||||
spaceBetween: 10,
|
spaceBetween: 10,
|
||||||
slidesPerView: 10,
|
slidesPerView: 10,
|
||||||
freeMode: true,
|
freeMode: true,
|
||||||
watchSlidesVisibility: true,
|
watchSlidesVisibility: true,
|
||||||
watchSlidesProgress: true,
|
watchSlidesProgress: true,
|
||||||
noSwiping: true
|
noSwiping: true
|
||||||
});
|
});
|
||||||
var galleryTop = new Swiper('.gallery-top', {
|
var galleryTop = new Swiper('.gallery-top', {
|
||||||
spaceBetween: 10,
|
spaceBetween: 10,
|
||||||
thumbs: {
|
thumbs: {
|
||||||
swiper: galleryThumbs
|
swiper: galleryThumbs
|
||||||
},
|
},
|
||||||
navigation: {
|
navigation: {
|
||||||
nextEl: '.swiper-button-next',
|
nextEl: '.swiper-button-next',
|
||||||
prevEl: '.swiper-button-prev',
|
prevEl: '.swiper-button-prev',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 首页 Banner 轮播（仅在存在时初始化）
|
// 首页 Banner 轮播（仅在存在时初始化）
|
||||||
if ($('.banner-cont').length > 0) {
|
if ($('.banner-cont').length > 0) {
|
||||||
const mySwiper = new Swiper(".banner-cont", {
|
const mySwiper = new Swiper(".banner-cont", {
|
||||||
loop: true,
|
loop: true,
|
||||||
autoplay: {
|
autoplay: {
|
||||||
delay: 5000,
|
delay: 5000,
|
||||||
disableOnInteraction: false,
|
disableOnInteraction: false,
|
||||||
},
|
},
|
||||||
speed: 800,
|
speed: 800,
|
||||||
pagination: {
|
pagination: {
|
||||||
el: ".swiper-pagination",
|
el: ".swiper-pagination",
|
||||||
clickable: true,
|
clickable: true,
|
||||||
type: 'bullets',
|
type: 'bullets',
|
||||||
},
|
},
|
||||||
on: {
|
on: {
|
||||||
slideChange: function () {
|
slideChange: function () {
|
||||||
document.querySelectorAll('.banner-cont .swiper-pagination-bullet').forEach(function(bullet) {
|
document.querySelectorAll('.banner-cont .swiper-pagination-bullet').forEach(function(bullet) {
|
||||||
bullet.classList.remove('progress-active');
|
bullet.classList.remove('progress-active');
|
||||||
});
|
});
|
||||||
const activeBullet = document.querySelector('.banner-cont .swiper-pagination-bullet-active');
|
const activeBullet = document.querySelector('.banner-cont .swiper-pagination-bullet-active');
|
||||||
if (activeBullet) {
|
if (activeBullet) {
|
||||||
activeBullet.classList.add('progress-active');
|
activeBullet.classList.add('progress-active');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
init: function () {
|
init: function () {
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
const activeBullet = document.querySelector('.banner-cont .swiper-pagination-bullet-active');
|
const activeBullet = document.querySelector('.banner-cont .swiper-pagination-bullet-active');
|
||||||
if (activeBullet) {
|
if (activeBullet) {
|
||||||
activeBullet.classList.add('progress-active');
|
activeBullet.classList.add('progress-active');
|
||||||
}
|
}
|
||||||
}, 100);
|
}, 100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user