BlackFruit-UI/js/tools.js

$(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');

    if (localStorage.jwt) {
      // 有 jwt: 隐藏登录按钮, 显示已登录区域
      if (desktopNoLogin) desktopNoLogin.style.display = 'none';
      if (desktopLoginIn) desktopLoginIn.style.display = 'flex';
      if (mobileNoLogin) mobileNoLogin.style.display = 'none';
      if (mobileLoginIn) mobileLoginIn.style.display = 'block';

      // 同步用户信息到移动端
      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 {
      // 无 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);
        }
      }
    });
  }
})