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

import Swiper from 'swiper/bundle'
import gsap from 'gsap'
import LocomotiveScroll from 'locomotive-scroll';
import Common from '../common/js/Common';
import {
    isMobile
} from '../common/js/utils';
import $ from '/dev/static/lib/jquery-2.1.1.min.js';

export default class App {
    constructor() {
        let common = new Common(document.querySelector('.main'),0)   //导航菜单高亮，0是首页，后面的按顺序添加
        this.isMobile = isMobile()
        
        this.scroll = new LocomotiveScroll();
        // 图片及视频资源懒加载。防止阻塞js执行
        let lazyDoms = document.querySelectorAll(".lazy");
        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();
            }
        });
        this.four();
    }
    four() {
        let isMob = this.isMobile;

        let fourCon = document.querySelector(".fourCon");
        let fourSons = document.querySelectorAll(".fourSon");
        let fourR = document.querySelector(".fourR");
        let fourRsons = document.querySelectorAll(".fourRson");

        let sonArr = [];
        fourSons.forEach((item, index) => {
            let childHeight = item.offsetHeight;
            if (index == 3) childHeight = childHeight * 0.5;
            sonArr.push([childHeight, index]);
        });
        
        fourRsons.forEach((item, index) => {
            item.style.width = fourR.offsetWidth+1 + 'px';
            item.style.height = fourR.offsetWidth+1 + 'px';
            item.style.zIndex = fourRsons.length - index;
        });
        function changeDiv(num, val) {
            fourSons.forEach((item, index) => {
                if (index == num) {
                    let nvl = val * 100;
                    nvl = nvl > 97 ? 100 : nvl < 3 ? 0 : nvl;
                    nvl = nvl.toFixed(2);
                    if (index < fourSons.length - 1) {
                        fourRsons[index].style.clipPath = 'inset(0px 0px ' + nvl + '%)';
                        if (index > 0) {
                            fourRsons[index - 1].style.clipPath = 'inset(0px 0px 100%)';
                        }
                    }
                    if (index < fourSons.length) fourSons[index + 1].style.opacity = 0.3 + (val > 0.7 ? 0.7 : val);
                }
            })
        }


        // 获取元素的滚动条高度
        let scrollHeight = fourCon.scrollHeight;
        let conStart = 0;
        let conEnd = 0;
        function updateScrollChange1() {
            try {
                let hh = fourCon.getBoundingClientRect();
                let scrollTop = hh.top;
                let scrollBottom = hh.bottom;
                let scrollY = window.scrollY;


                if (scrollTop < 0 & conStart == 0) {
                    conStart = scrollY;
                    conEnd = scrollY + scrollHeight;
                    let startH = 0;
                    sonArr.forEach((item, index) => {
                        let childH = scrollY + startH + item[0];
                        let childHs = scrollY + startH;
                        if(index==0){
                            startH += item[0]-80;
                        }else{
                            startH += item[0];
                        }
                        item.push(childH)
                        item.push(childHs)
                    });
                } else if (scrollTop < 0 && scrollY > conStart && scrollY < conEnd) {



                    sonArr.forEach((item, index) => {
                        let chazhi = item[2] - scrollY;
                        if (chazhi > 0 && scrollY < item[2] && scrollY > item[3]) {
                            let bili = chazhi / item[0];
                            bili = bili.toFixed(4);
                            bili = parseFloat(bili);
                            bili = 1 - bili;
                            bili = bili.toFixed(4);
                            bili = parseFloat(bili);
                            changeDiv(index, bili)
                        }
                    });
                }
            } catch (error) { }
        }


        // 添加滚动事件监听器
        if(!isMob){
            window.addEventListener('scroll', updateScrollChange1);
        }
        
        //弹框资质荣誉
        let pop=document.querySelector(".pop");
        let guanbi=document.querySelector(".icon-guanbi");
        let allNum=document.querySelector(".allNum");
        let honorsRis=document.querySelectorAll(".honorsRi");
        let nowNum=document.querySelector(".nowNum");
        let nowName=document.querySelector(".nowName");
        
        let mySwiper = new Swiper('.productSwiper', {
            autoplay: false,//可选选项，自动滑动
            // loop: true,
            // loopedSlides: 4,
            navigation: {
                nextEl: isMob?'.btn-nextP2':'.btn-nextP1',
                prevEl: isMob?'.btn-prevP2':'.btn-prevP1',
            },
            on:{
                slideChange: function(){
                    let index0=this.realIndex;
                    nowNum.textContent=index0+1;
                    // let name=honorsRis[index0].querySelector(".text").textContent;
                    // nowName.textContent=name;
                },
            },
        });
        
        
        honorsRis.forEach((item, index) => {
            item.addEventListener("click", (e) => {
                let lists=item.querySelectorAll(".swiper-slide");
                lists.forEach((item2,index2)=>{
                    let newSlide=item2.cloneNode(true);
                    mySwiper.appendSlide(newSlide);
                });
                allNum.textContent=lists.length;
                let name=item.querySelector(".text").textContent;
                nowName.textContent=name;
                nowNum.textContent=1;
                pop.classList.add("popShow");
            });
        });
        guanbi.addEventListener("click", (e) => {
            pop.classList.remove("popShow");
            mySwiper.removeAllSlides(); //移除全部
        });

        //企业架构
        if(!isMob){
            let fourMores=document.querySelectorAll(".fourMore");
            let threeDivs=document.querySelectorAll(".threeDiv");
            
            let moresList=[];
            // fourMores.forEach((item, index) => {
            //     let sonList=[];
            //     let lists=item.querySelectorAll(".fours");
            //     lists.forEach((item2,index2)=>{
            //         let newSlide=item2.cloneNode(true);
            //         sonList.push(newSlide);
            //     });
            //     moresList.push(sonList);
            //     item.addEventListener("click", (e) => {
            //         moresList[index].forEach((item2,index2)=>{
            //             item.parentElement.appendChild(item2);
            //         });
            //         item.parentElement.parentElement.classList.add("fourMoreShow");
            //         item.remove();
            //     });
            // });

            function doFun() {
                let fourMoress=document.querySelectorAll(".fourMore");
                fourMoress.forEach((item, index) => {
                    item.addEventListener("click", (e) => {
                        moresList[index].forEach((item2,index2)=>{
                            item.parentElement.appendChild(item2);
                        });
                        item.parentElement.parentElement.classList.add("fourMoreShow");
                        item.remove();
                    });
                });
            }

            // threeDivs.forEach((item, index) => {
            //     item.addEventListener("click", (e) => {
            //         if(item.parentElement.classList.contains("fourMoreShow")){
            //             item.parentElement.classList.remove("fourMoreShow");
            //             item.parentElement.querySelectorAll(".fours").forEach((item2,index2)=>{
            //                 if(index2>3){
            //                     item2.remove();
            //                 }
                            
            //             });
            //             let newDiv = document.createElement('div');
            //             newDiv.className = 'fours fourMore';

            //             let innerDiv = document.createElement('div');
            //             innerDiv.className = 'fourDiv';
            //             innerDiv.textContent = '展开更多';

            //             newDiv.appendChild(innerDiv);
            //             item.parentElement.querySelector(".threeSon").appendChild(newDiv);
            //             doFun();
            //         }
            //     });
            // });

            $(".twoDiv").click(function(){
                if($(this).parent().hasClass("closeDiv")){
                    $(this).parent().removeClass("closeDiv");
                    $(this).siblings().slideDown();
                }else{
                    $(this).parent().addClass("closeDiv");
                    $(this).siblings().slideUp();
                    
                }
            });
            $(".hasFour").click(function(){
                if($(this).parent().hasClass("closeDiv")){
                    $(this).parent().removeClass("closeDiv");
                    $(this).siblings().slideDown();
                }else{
                    $(this).parent().addClass("closeDiv");
                    $(this).siblings().slideUp();
                    
                }
            });
            $(".fourMore").click(function(){
                if($(this).hasClass("openSon")){
                    $(this).children(".fourMoreList").slideUp();
                    $(this).removeClass("openSon");
                    $(this).children(".fourDivMore").text("展开更多")
                }else{
                    $(this).children(".fourMoreList").slideDown()
                    $(this).addClass("openSon");
                    $(this).children(".fourDivMore").text("收起更多")
                }
                
            });
            
        }
        else{
            let fourMores=document.querySelectorAll(".fourMore");
            fourMores.forEach((item, index) => {
                let lists=item.querySelectorAll(".fours");
                lists.forEach((item2,index2)=>{
                    let newSlide=item2.cloneNode(true);
                    item.parentElement.appendChild(newSlide);
                });
                item.remove();
            });
            // let twoDivs=document.querySelectorAll(".twoDiv");
            // twoDivs.forEach((item, index) => {
            //     item.addEventListener("click", (e) => {
            //         if(item.parentElement.querySelectorAll('.three').length>0){
            //             if(item.parentElement.classList.contains("openDiv")){
            //                 item.parentElement.classList.remove("openDiv");
            //             }else{
            //                 item.parentElement.classList.add("openDiv");
            //             }
            //         }
                    
            //     });
            // });
            $(".twoDiv").click(function(){
                if($(this).parent().hasClass("openDiv")){
                    $(this).parent().removeClass("openDiv");
                    $(this).siblings().slideUp();
                }else{
                    $(this).parent().addClass("openDiv");
                    $(this).siblings().slideDown();
                    
                }
            });
            $(".threeDiv").click(function(){
                if($(this).parent().hasClass("openDiv")){
                    $(this).parent().removeClass("openDiv");
                    $(this).siblings().slideUp();
                }else{
                    $(this).parent().addClass("openDiv");
                    $(this).siblings().slideDown();
                    
                }
            });
            // let threeDivs=document.querySelectorAll(".threeDiv");
            // threeDivs.forEach((item, index) => {
            //     item.addEventListener("click", (e) => {
            //         if(item.parentElement.querySelectorAll('.fours').length>0){
            //             if(item.parentElement.classList.contains("openDiv")){
            //                 item.parentElement.classList.remove("openDiv");
            //             }else{
            //                 item.parentElement.classList.add("openDiv");
            //             }
            //         }
                    
            //     });
            // });
        }
    }

}