zhongze-front/src/pages/partyBuilding/App.js

import Swiper from 'swiper/bundle'
import gsap from 'gsap'
import Common from '../common/js/Common'
import {
    isMobile
} from '../common/js/utils'
// const BASEURL = 'http://192.168.1.33:9100';
const BASEURL = 'http://localhost:3002/api';
const pageSize = 5;

export default class App {
    constructor() {
        let common = new Common(document.querySelector('.main'),4)   //导航菜单高亮，0是首页，后面的按顺序添加
        this.isMobile = isMobile()
        let lazyDoms = document.querySelectorAll(".lazy");
        let Time = null;
        let isMob=this.isMobile;
        lazyDoms.forEach((item) => {
            if (item.nodeName == "PICTURE") {
                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
                item.children[1].setAttribute("src", item.children[1].dataset.src);
            }
            if (item.nodeName == "IMG") {
                if(isMob){item.setAttribute("src", item.dataset.srcm);}
                else{
                    item.setAttribute("src", item.dataset.src);
                }
                
            }
            if (item.nodeName == "VIDEO") {
                console.log(item, 'item---2')
                item.setAttribute("src", item.dataset.src);
                // item.load();
            }
        });
        bindDom();
        banner()
        function banner() {
        
            let menuChange=true;
            let menuType = document.querySelector(".headCon");
            menuType.classList.add("menuType");
            let mySwiper = new Swiper('.bannerSwiper1', {
                autoplay: true,//可选选项，自动滑动
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },
                
                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.btn-nextB',
                    prevEl: '.btn-prevB',
                },
                on:{
                    slideChange: function(){
                        // if(menuChange){
                        //     if(this.activeIndex==0){
                        //         menuType.classList.add("menuType");
                        //     }else{
                        //         menuType.classList.remove("menuType");
                        //     }
                        // }
                    },
                  },
            });
            let mySwiper2 = new Swiper('.bannerSwiper2', {
                autoplay: true,//可选选项，自动滑动
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },
                
                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.btn-nextB',
                    prevEl: '.btn-prevB',
                },
                on:{
                    slideChange: function(){
                        // if(menuChange){
                        //     if(this.activeIndex==0){
                        //         menuType.classList.add("menuType");
                        //     }else{
                        //         menuType.classList.remove("menuType");
                        //     }
                        // }
                    },
                  },
            });
            
            
            // 获取滚动条位置并更新显示
            function updateScrollInfo() {
                let scrollY = window.scrollY;
                
                if(scrollY>110){
                    if(menuChange){
                        menuChange=false;
                        menuType.classList.remove("menuType");
                    }
                }else if(scrollY<110&&menuChange==false){
                    menuChange=true;
                    if(mySwiper.activeIndex==0){
                        menuType.classList.add("menuType");
                    }else{
                        menuType.classList.remove("menuType");
                    }
                }
                
            }
            
                
            // 添加滚动事件监听器
            window.addEventListener('scroll', updateScrollInfo);
            // 初始化显示
            updateScrollInfo();
            
        }

        function bindDom(){
            const tabs_ul =  document.querySelectorAll(".tabs_li");
            tabs_ul.forEach((item,index)=>{
            
                item.addEventListener('click',()=>{
                    tabs_ul.forEach((li) => {
                        li.classList.remove('tabs_lis');
                    });
            
                    // 给当前点击的元素添加 tabs_lis 类名
                    item.classList.add('tabs_lis');
                })
            })
        }
        function hotNews(){
            const news_banner = document.querySelector('.news_banner');
            const img = news_banner.querySelector('img')
            const cont1 = news_banner.querySelector('.cont1')
            const cont2 = news_banner.querySelector('.cont2')
            const cont3 = news_banner.querySelector('.cont3')
            fetch(BASEURL+'/system/news/top')
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应不是 OK');
                }
                return response.json();
            })
            .then(response => {
                if (response.surfaceUrl) img.src = response.surfaceUrl
                cont1.textContent = response.title
                cont2.textContent = response.digest
                cont3.textContent = response.date
                news_banner.addEventListener('click',() => {
                    window.open('/articleDetails.html?id='+response.uuid)
                })

            })
            .catch(error => {
                console.error('请求失败:', error); // 处理错误
            });
        }

        function pageTurningClickEvent (){
            // 上一页
            const previousPage = document.querySelector('#previousPage');
            previousPage.addEventListener('click', function(event) {
                event.preventDefault()
                const currentPage = sessionStorage.getItem('news_currentPage');
                if(currentPage && parseInt(currentPage) > 1){
                    initList(parseInt(currentPage) - 1)
                }
                
            })
            //下一页
            const nextPage = document.querySelector('#nextPage');
            nextPage.addEventListener('click', function(event) {
                event.preventDefault()
                const currentPage = sessionStorage.getItem('news_currentPage');
                const pageCount = Math.ceil(parseInt(sessionStorage.getItem('news_total')) / pageSize)
                if(currentPage && parseInt(currentPage) < pageCount){
                    initList(parseInt(currentPage) + 1)
                }
            })
        }
    }
    

   
}