BlackFruit-UI/js/index.js

$(function () {
  // ============================================
  // 滚动动画效果 - Intersection Observer
  // ============================================
  function initScrollAnimations() {
    const observerOptions = {
      threshold: 0.1,
      rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animated');
          // 一次性动画，触发后不再观察
          observer.unobserve(entry.target);
        }
      });
    }, observerOptions);

    // 为所有section添加滚动动画
    document.querySelectorAll('.section').forEach((section, index) => {
      section.classList.add('animate-on-scroll');
      observer.observe(section);
    });

    // 为服务卡片添加延迟动画
    document.querySelectorAll('.service-box').forEach((box, index) => {
      box.classList.add('animate-on-scroll', `delay-${(index % 3) + 1}`);
      observer.observe(box);
    });

    // 为解决方案卡片添加动画
    document.querySelectorAll('.resolve-box').forEach((box, index) => {
      box.classList.add('animate-on-scroll', `delay-${(index % 4) + 1}`);
      observer.observe(box);
    });

    // 为新闻列表添加动画
    document.querySelectorAll('.news-cont').forEach(cont => {
      cont.classList.add('scale-on-scroll');
      observer.observe(cont);
    });
  }

  // 页面加载完成后初始化动画
  setTimeout(initScrollAnimations, 100);

  // ============================================
  // 原有功能代码
  // ============================================

  // 获取url地址栏参数函数
  function getUrlParams() {
    const url = window.location.href;
    // 判断是否有参数
    if (url.indexOf("?") === -1) {
      return {};
    }
    const params = url.split("?")[1];
    const paramsArr = params.split("&");
    const paramsObj = {};
    paramsArr.forEach((item) => {
      const key = item.split("=")[0];
      const value = item.split("=")[1];
      // 解析中文
      paramsObj[key] = decodeURI(value);
    });
    return paramsObj;
  }
  //设置cookie
  function setCookie(c_name, value, expiredays = 1) {
    const exdate = new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie =
      c_name + "=" + value + (";expires=" + exdate.toGMTString());
  }
  // 判断首页是否为推荐页面
  function isRecommend() {
    const urlParams = getUrlParams();
    if (urlParams.recommend_c) {
      setCookie("recommend_c", urlParams.recommend_c);
    }
  }
  isRecommend();
  // 设置首页函数
  function setIndexData(commentObj) {
    // 荣誉资质
    if (commentObj.honor && commentObj.honor.length > 0) {
      commentObj.honor.forEach((item) => {
        $("#certBox").append(`
          <div class="honor-item">
            <div class="honor-icon">
              <img src="${item.img}" alt="${item.name}">
            </div>
            <h4 class="honor-name">${item.name}</h4>
          </div>
        `);
      });
    }
  }
  // 获取通用配置信息
  function getCommentInfo() {
    $.ajax({
      url: "/console/v1/common",
      method: "get",
      headers: {
        Authorization: "Bearer" + " " + localStorage.jwt,
      },
      success: function (res) {
        sessionStorage.commentData = JSON.stringify(res.data);
        setIndexData(res.data);
      },
    });
  }
  // 获取首页数据 - 优先使用 SSR 注入的数据
  if (window.__themeCommon) {
    // 如果有 SSR 数据，直接使用
    setIndexData(window.__themeCommon);
  } else if (sessionStorage.commentData) {
    // 如果有缓存数据，使用缓存
    setIndexData(JSON.parse(sessionStorage.commentData));
  } else {
    // 否则通过 AJAX 获取
    getCommentInfo();
  }
  var viewer = new Viewer(document.getElementById("viewer"), {
    button: true,
    inline: false,
    zoomable: true,
    title: true,
    tooltip: true,
    minZoomRatio: 0.5,
    maxZoomRatio: 100,
    movable: true,
    interval: 2000,
    navbar: true,
    loading: true,
  });

  // 点击显示图片（使用事件委托，因为元素是动态生成的）
  $(document).on("click", ".honor-item", function () {
    // 设置图片
    $("#viewer").attr("src", $(this).find("img").attr("src"));
    viewer.show();
  });
  function formateTimeFun(time) {
    const date = new Date(time * 1000);
    Y = date.getFullYear() + "-";
    M =
      (date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1) + "-";
    D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    return Y + M + D;
  }
  // 公告列表
  function getAnnounceList() {
    $.ajax({
      url: "/console/v1/announcement",
      method: "get",
      data: {
        page: 1,
        limit: 5,
      },
      success: function (res) {
        const announceList = res.data.list;
        announceList.forEach((item, index) => {
          $("#announceList").append(`      
          <div class="news-item">
          <div class="fboxRow Ycenter">
            <div class="number">${index + 1}</div>
            <a href="./announce-details.html?id=${item.id}">
              <div class="title font-ell1">${item.title}</div>
            </a>
          </div>
          <div class="time">${formateTimeFun(item.create_time)}</div>
        </div>
           `);
        });
      },
    });
  }
  getAnnounceList();
  // 新闻列表
  function getNewsList() {
    $.ajax({
      url: "/console/v1/news",
      method: "get",
      data: {
        page: 1,
        limit: 5,
      },
      success: function (res) {
        const announceList = res.data.list;
        announceList.forEach((item, index) => {
          $("#newsList").append(`      
          <div class="news-item">
          <div class="fboxRow Ycenter">
            <div class="number">${index + 1}</div>
            <a href="./news-details.html?id=${item.id}">
              <div class="title font-ell1">${item.title}</div>
            </a>
          </div>
          <div class="time">${formateTimeFun(item.create_time)}</div>
        </div>
           `);
        });
      },
    });
  }
  getNewsList();

  $("#myTabs a").click(function (e) {
    e.preventDefault();
    $(this).tab("show");
  });
  // 跳转函数
  function goOtherPage(url) {
    location.href = url;
  }
  $("#cloud-box").click(function () {
    location.href = "cloud.html";
  });
  $("#domain-box").click(function () {
    location.href = "domain.html";
  });
  $("#recomment-box").click(function () {
    location.href = "/home.htm";
  });
  $("#logon-box").click(function () {
    location.href = "/regist.htm";
  });
  $("#cps-box").click(function () {
    location.href = "partner/cps.html";
  });

  // ============================================
  // 全场景全栈解决方案 - 幻灯片功能
  // ============================================

  (function () {
    const $tabs = $('.solution-tab');
    const $slides = $('.solution-slide');
    const totalSlides = $slides.length;
    let currentIndex = 0;
    let autoPlayTimer = null;
    const autoPlayDuration = 3000; // 3秒自动切换

    // 切换到指定幻灯片
    function switchSlide(index) {
      if (index === currentIndex) return;

      // 更新幻灯片
      $slides.removeClass('active');
      $slides.eq(index).addClass('active');

      // 更新按钮
      $tabs.removeClass('active');
      $tabs.eq(index).addClass('active');

      currentIndex = index;
    }

    // 切换到下一张
    function nextSlide() {
      const nextIndex = (currentIndex + 1) % totalSlides;
      switchSlide(nextIndex);
    }

    // 启动自动播放
    function startAutoPlay() {
      stopAutoPlay();
      autoPlayTimer = setInterval(nextSlide, autoPlayDuration);
    }

    // 停止自动播放
    function stopAutoPlay() {
      if (autoPlayTimer) {
        clearInterval(autoPlayTimer);
        autoPlayTimer = null;
      }
    }

    // 按钮点击事件
    $tabs.on('click', function () {
      const index = $(this).data('index');
      switchSlide(index);
      startAutoPlay();
    });

    // 鼠标悬停时暂停自动播放
    $('.solution-wrapper').on('mouseenter', function () {
      stopAutoPlay();
    });

    // 鼠标离开时恢复自动播放
    $('.solution-wrapper').on('mouseleave', function () {
      startAutoPlay();
    });

    // 初始化
    if (totalSlides > 0) {
      startAutoPlay();
    }
  })();
});