zhongze-front/src/pages/socialResponsibility/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()
        this.num = 0;
        this.bindDom();
        // this.fold()
        // 获取当前链接的 hash 部分
        // 监听 hashchange 事件
        window.addEventListener('hashchange', ()=>this.handleHashChange());

        // 如果需要在页面加载时也获取一次当前 hash
        this.handleHashChange();
       
    }
    // 定义一个函数来处理 hash 变化
    handleHashChange() {
        const hash = window.location.hash; // 获取当前链接的 hash 部分
        const params = hash.substring(1); // 去掉 #
        console.log(params); // 输出变化后的参数
        if(!params) return;
        if(this.getAnchorPoint) {
            this.getAnchorPoint(params)
        }else {
            getAnchorPoint(params)
        }   
    }

    getAnchorPoint(params){
        const tabs_ul = document.querySelectorAll(".tabs_li");
        const news_ul = document.querySelector(".news_ul");
        const typeCon = document.querySelector(".typeCon");
        tabs_ul.forEach((item,index)=>{
        
            tabs_ul.forEach((li) => {
                li.classList.remove('tabs_lis');
            });
            if(params == 'p2'){
                tabs_ul[1].classList.add('tabs_lis')
                news_ul.style.display = 'none';
                typeCon.style.display = 'block';
            }else{
                tabs_ul[0].classList.add('tabs_lis')
                news_ul.style.display = 'block';
                typeCon.style.display = 'none';
            }
            // 获取目标元素
            const targetElement = document.querySelector('#tab');

            // 获取目标元素的位置信息
            if (targetElement) {
                const topPosition = targetElement.getBoundingClientRect().top + window.scrollY;

                // 滚动到目标元素的位置
                window.scrollTo({ top: topPosition, behavior: 'smooth' });
            }

        })
    }

    bindDom(){
        const tabs_ul = document.querySelectorAll(".tabs_li");
        const news_ul = document.querySelector(".news_ul");
        const typeCon = document.querySelector(".typeCon");
        
        tabs_ul.forEach((item,index)=>{
        
            item.addEventListener('click',()=>{
                tabs_ul.forEach((li) => {
                    li.classList.remove('tabs_lis');
                });
                if(index == 0){
                    news_ul.style.display = 'block';
                    typeCon.style.display = 'none';
                    
                }else{
                    news_ul.style.display = 'none';
                    typeCon.style.display = 'block';
                    this.fold() 
                }
                // 给当前点击的元素添加 tabs_lis 类名
                item.classList.add('tabs_lis');
            })
        })
    }

    fold(){
        let isMobile=this.isMobile;
        if(this.num == 0){
            let liTitleArray = document.querySelectorAll('.liTitle');
            liTitleArray.forEach((child )=>{
                child.addEventListener('click', (event) => {
                    // 获取被点击元素的父元素
                    let parentElement = event.currentTarget.parentNode;
                    let infoSonLi = parentElement.querySelector('.infoSonLi');
                    let actualHeight = infoSonLi.offsetHeight;
                    // 初始化子元素总高度
                    let childrenTotalHeight = isMobile?30:0;

                    // 遍历所有子元素，累加它们的高度
                    Array.from(infoSonLi.children).forEach(child => {
                        childrenTotalHeight += child.offsetHeight;
                    });
                    let totalHeight = actualHeight + childrenTotalHeight;
                    if (parentElement.classList.contains("infoLiShow")) {
                        parentElement.classList.remove('infoLiShow');
                        gsap.to(infoSonLi,{height:0,duration:0.5})
                    }else{
                        parentElement.classList.add('infoLiShow');
                        gsap.to(infoSonLi,{height:totalHeight,duration:0.5})
                        // gsap.to(infoSonLi,{height:totalHeight,duration:1,onComplete: () => infoSonLi.style.height = 'auto'})
                    }
                });
            });
            let typeTitCkArray = document.querySelectorAll('.typeTitCk');
            let inFoul = document.querySelector('.infoul');
            
            let infoLiArray = document.querySelectorAll('.infoLi');
            function addClassType() {
                infoLiArray.forEach((val)=>{
                    val.classList.remove('infoLiShow');
                })
                typeTitCkArray.forEach((child )=>{
                    child.classList.remove('ck');
                });
            }
            //
            let typeOld="all";
            let element=document.querySelector('.typeTitle');
            typeTitCkArray.forEach((child )=>{
                child.addEventListener('click', (event) => {
                    addClassType();
                    let domElement = event.target;
                    domElement.classList.add('ck');
                    let typeName = domElement.dataset.type;
                    inFoul.className = 'infoul '+ typeName;
                    if(isMobile){
                        if(typeName=='type2'&&typeOld!='type3'){
                            element.scrollLeft = element.scrollWidth - element.clientWidth;
                        }else if(typeName=='type2'&&typeOld=='type3'){
                            element.scrollLeft = 0;
                        }
                    }
                });
            });

        
            //添加表单动画
            let liTits = document.querySelectorAll('.liTit');
            liTits.forEach((val)=>{
                val.style.height = val.offsetHeight+'px';
                let liTitMove = val.querySelector('.liTitMove');
                if(isMobile){
                    liTitMove.classList.remove("moveUp");
                    liTitMove.classList.add("fadeInUp");
                }else{
                    // 获取 liTit 下的所有 div 元素
                    let divs = liTitMove.querySelector('div');
                    if(divs){
                        // 克隆 div 元素
                        let clonedDiv = divs.cloneNode(true);
                        
                        // 将克隆的 div 插入到 liTit 的后面
                        divs.parentElement.appendChild(clonedDiv);;
                    }
                }
                
            })
            this.num = 1;
        }
       
    }
    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); // 处理错误
        });
    }

    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)
            }
        })
    }
    

   
}