` good.querySelector('.topFilter').insertAdjacentHTML('afterbegin',html) //分类筛选 good.querySelectorAll('.catFilterBox li a').forEach(item=>{ item.addEventListener('click',async()=>{ good.querySelector('.catFilterBox ul .active').classList.remove('active') item.classList.add('active') catId =item.innerText==='All'?initCatId:item.getAttribute('data-id') page=1;pmId = '';aValue = '';keywords='';lowestPrice='';highestPrice='';orderBy='' if(good.querySelector('.search.active'))good.querySelector('.search').click() openLoading() await getProduct('cat') setTimeout(()=>{ good.querySelector('.otherTag')?.remove() good.querySelector('.searchTag')?.remove() clearFilterActive() good.querySelector('.catFilterTag')?.remove() let html = ` Showing "${item.innerText}" ` if(item.innerText!=='All'){ tags.insertAdjacentHTML('afterbegin',html) if(window.innerWidth<=568){ tags.style.setProperty('margin-bottom','17px') } tags.querySelector('.catFilterTag').addEventListener('click',async()=>{ page=1;pmId = '';aValue = '';keywords='';lowestPrice='';highestPrice='';orderBy='';catId=initCatId openLoading() await getProduct('search') closeLoading() setTimeout(()=>{scrollToTop()},700) good.querySelector('.otherTag')?.remove() good.querySelector('.catFilterTag')?.remove() clearFilterActive() good.querySelector('.catFilterBox a.active').classList.remove('active') good.querySelector('.catFilterBox li:first-child a').classList.add('active') tags.style.setProperty('margin-bottom','') }) } },200) closeLoading() setTimeout(()=>{scrollToTop()},700) }) }) //展开筛选栏 good.querySelector('.categoryList>span').addEventListener('click',handleCatFilterBox) good.querySelector('.filter').addEventListener('click',handleFilterBox) good.querySelector('.search').addEventListener('click',handleSearchBox) } let catFilterOpen = null,catFilterClose = null,filterOpen = null,filterClose = null, searchOpen = null,searchClose=null //清除计时器 const clearTimeoutFun = (timeoutArr) =>{ timeoutArr.forEach(item=>{ clearTimeout(item) }) } const handleCatFilterBox = async(e)=>{ e.stopPropagation() let flagFilter = good.querySelector('.filter.active')?true:false let flagSearch = good.querySelector('.search.active')?true:false let catFilterUl = good.querySelector('.catFilterBox ul'),categories = e.target good.querySelectorAll('.topFilterRight .search.active,.topFilterRight .filter.active')?.forEach(item=>item.classList.remove('active')) categories.classList.toggle('active') if(haveClass(categories,'active')){ clearTimeout(catFilterClose) if(flagFilter){closeFilter();await delay(20);} if(flagSearch){closeSearch();await delay(20);} let catFilterBoxHeight =window.innerWidth<=768?catFilterUl.scrollHeight:catFilterUl.querySelector('li').scrollHeight catFilterUl.style.cssText=`height:${catFilterBoxHeight}px;padding:${window.innerWidth<=400?16:34}px 0 0 0;opacity:1;` catFilterOpen = setTimeout(()=>{ catFilterUl.style.cssText+=`height:unset` },280) }else{ closeCatFilter() } } const handleFilterBox = async(e)=>{ e.stopPropagation() let flag = good.querySelector('.categoryList>span.active')?true:false let flagSearch = good.querySelector('.search.active')?true:false good.querySelectorAll('.topFilterRight .search.active,.categoryList>span.active')?.forEach(item=>item.classList.remove('active')) let tit = e.target,filterBox = good.querySelector('.filterBox') tit.classList.toggle('active'); if(haveClass(tit,'active')){ if(flag){closeCatFilter();await delay(20);} if(flagSearch){closeSearch();await delay(20);} clearTimeout(filterClose) let filterBoxHeight = filterBox.scrollHeight filterBox.style.cssText=`height:${filterBoxHeight}px;padding:${window.innerWidth<=400?6:24}px 0 0 0;opacity:1;` filterOpen = setTimeout(()=>{ filterBox.style.cssText+=`height:unset` },280) }else{ closeFilter() } } const handleSearchBox = async(e)=>{ e.stopPropagation() let flagFilter = good.querySelector('.filter.active')?true:false let flag = good.querySelector('.categoryList>span.active')?true:false let tit = e.target.closest('.search'),searchBox = good.querySelector('.searchBox') good.querySelectorAll('.topFilterRight .filter.active,.categoryList>span.active')?.forEach(item=>item.classList.remove('active')) tit.classList.toggle('active'); if(haveClass(tit,'active')){ if(flag){closeCatFilter();await delay(20);} if(flagFilter){closeFilter();await delay(20);} clearTimeout(searchClose) let searchBoxHeight = searchBox.scrollHeight - searchBox.querySelector('p').scrollHeight searchBox.style.cssText=`height:${searchBoxHeight}px;padding:${window.innerWidth<=400?16:36}px 0 0 0;opacity:1;` searchOpen = setTimeout(()=>{ searchBox.style.cssText+=`height:unset` },280) }else{ closeSearch() } } const closeCatFilter = ()=>{ clearTimeout(catFilterOpen) let catFilterUl = good.querySelector('.catFilterBox ul') let catFilterBoxHeight = window.innerWidth<=400?catFilterUl.scrollHeight - 16:catFilterUl.scrollHeight - 34 catFilterUl.style.cssText=`height:${catFilterBoxHeight}px`; catFilterClose = setTimeout(()=>{catFilterUl.style.cssText=``},30) } const closeFilter = ()=>{ clearTimeout(filterOpen) let filterBox = good.querySelector('.filterBox') let filterBoxHeight = window.innerWidth<=400?filterBox.scrollHeight -6 :filterBox.scrollHeight - 24 filterBox.style.cssText=`height:${filterBoxHeight}px`; filterClose = setTimeout(()=>{filterBox.style.cssText=``},30) } const closeSearch = ()=>{ clearTimeout(searchOpen) let searchBox = good.querySelector('.searchBox') let searchBoxHeight searchBoxHeight = window.innerWidth<=400? searchBox.scrollHeight -16 :(input.value.trim()===''||input.value.length<2)? searchBox.scrollHeight - searchBox.querySelector('p').scrollHeight - 36:searchBox.scrollHeight - 36 input.value = ''; const event = new Event('input', { bubbles: true }); input.dispatchEvent(event); searchBox.style.cssText=`height:${searchBoxHeight}px`; searchClose = setTimeout(()=>{searchBox.style.cssText=``},30) } window.addEventListener('resize',()=>{ if(window.innerWidth<=400){ if(good.querySelector('.categoryList span.active')){ good.querySelector('.catFilterBox ul').style.setProperty('padding','16px 0 0 0') } if(good.querySelector('.filter.active')){ good.querySelector('.filterBox').style.setProperty('padding','6px 0 0 0') } if(good.querySelector('.search.active')){ good.querySelector('.searchBox').style.setProperty('padding','16px 0 0 0') } }else{ if(good.querySelector('.categoryList span.active')){ good.querySelector('.catFilterBox ul').style.setProperty('padding','34px 0 0 0') } if(good.querySelector('.filter.active')){ good.querySelector('.filterBox').style.setProperty('padding','24px 0 0 0') } if(good.querySelector('.search.active')){ good.querySelector('.searchBox').style.setProperty('padding','36px 0 0 0') } } if(window.innerWidth<=568&&good.querySelector('.catFilterTag')){ good.querySelector('.filterTag').style.cssText=`margin-bottom:17px` }else if(window.innerWidth>568&&!good.querySelector('.otherTag')&&!good.querySelector('.searchTag')){ good.querySelector('.filterTag').style.cssText=`` } }) //改变加载更多按钮的内容 const changeLoadMoreBtn = (flag)=>{ let canLoadMore = good.querySelector('.canLoadMore') let allLoaded = good.querySelector('.allLoaded') if(flag){ //显示Load More canLoadMore.classList.remove('hide') allLoaded.classList.add('hide') }else{ canLoadMore.classList.add('hide') allLoaded.classList.remove('hide') } } //渲染列表 const renderGoodsList = (data)=>{ totalPage = Math.ceil(Number(data.total) / Number(data.page_size)) if(totalPage ===page){changeLoadMoreBtn(false)}else{changeLoadMoreBtn(true)} let html = data.data.map(item=>``).join('') good.querySelector('.goodsContent').insertAdjacentHTML('beforeend',html) setTimeout(()=>{ //淡入效果 good.querySelectorAll('.unshow').forEach(item=>{ item.classList.remove('unshow') }) },300) } const getProduct = async(type='')=>{ let url =`/api/gatewayCms/shopGoods/getShopGoodsList?order=${orderBy}&page=${page}&s_price=${lowestPrice}&e_price=${highestPrice}&cat_id=${catId}&keywords=${keywords}&parameter_management_id=${pmId}&attr_value=${aValue}` let {data} = await getInfo(url) setTimeout(()=>{ if(data.total===0){ good.querySelector('.goodsContent').innerHTML=`

No products were found matching your selection.

` good.querySelector('.loadMore').classList.add('hide') good.querySelector('.goodsContent').style.cssText=`display:flex;gap:0;` return }else{ good.querySelector('.goodsContent').style.cssText=`` good.querySelector('.loadMore').classList.remove('hide') } },200) return new Promise((resolve,reject)=>{ if(type!=='')good.querySelector('.goodsContent').innerHTML = '' renderGoodsList(data) resolve() }) } //显示商品列表的loading const openLoading = ()=>{ good.querySelector('.loadingMask').style.setProperty('opacity','1') good.querySelector('.loadingMask').style.setProperty('z-index','9') good.querySelector('.goodsContent').style.setProperty('opacity','0') } const closeLoading = ()=>{ setTimeout(()=>{ good.querySelector('.loadingMask').style.setProperty('opacity','') good.querySelector('.loadingMask').style.setProperty('z-index','') good.querySelector('.goodsContent').style.setProperty('opacity','') },800) } const getInfo = (url)=>{ try{return $.ajax({url,type:'get'})}catch(e){} } init() //打开loadmore的loding const openLoadMoreLoading = ()=>{ return new Promise((resolve,reject)=>{ good.querySelector('.loadMoreLoading').classList.remove('hide') setTimeout(()=>{ resolve()//为了看起来效果丝滑一点 },500) }) } //关闭loadmore的loding const closeLoadMoreLoading = ()=>{ good.querySelector('.loadMoreLoading').classList.add('hide') } //分页的实现 const paging = async()=>{ if(page>=totalPage){ scrollToTop() return } await openLoadMoreLoading() page++ await getProduct() closeLoadMoreLoading() } //点击分页 good.querySelector('.loadMore').addEventListener('click',paging) let inputFlag = false input.addEventListener('input',()=>{ let inputValue = input.value let searchBox = good.querySelector('.searchBox') let height if(inputFlag){ height = searchBox.querySelector('.searchBox p').scrollHeight }else{ height = searchBox.querySelector('.searchBox p').scrollHeight } if(inputValue.trim()===''||inputValue.length<2){ good.querySelector('.searchBox p').style.setProperty('height','') inputFlag = false return } inputFlag = true good.querySelector('.searchBox p').style.setProperty('height',`${height}px`) }) //搜索 input.addEventListener('keydown',async(e)=>{ if (e.key === 'Enter') { page=1;pmId = '';aValue = '';keywords=input.value;lowestPrice='';highestPrice='';orderBy='';catId = initCatId clearFilterActive() good.querySelector('.searchBox p').style.setProperty('height','') inputFlag = false openLoading() await getProduct('search') closeLoading() setTimeout(()=>{scrollToTop()},700) tags.querySelector('.searchTag')?.remove() tags.querySelector('.otherTag')?.remove() tags.querySelector('.catFilterTag')?.remove() let html = ` Search results for "${input.value}" ` good.querySelector('.search').click() setTimeout(()=>{ tags.insertAdjacentHTML('beforeend',html) tags.querySelector('.searchTag').addEventListener('click',async(e)=>{ page=1;pmId = '';aValue = '';keywords='';lowestPrice='';highestPrice='';orderBy='' openLoading() await getProduct('search') closeLoading() setTimeout(()=>{scrollToTop()},700) tags.querySelector('.searchTag').remove() tags.querySelector('.otherTag').remove() clearFilterActive() tags.style.setProperty('margin-bottom','') }) },200) tags.style.setProperty('margin-bottom','17px') input.value = '' } }) //价格筛选 good.querySelectorAll('.priceFilter li a').forEach(item=>{ item.addEventListener('click',async()=>{ good.querySelector('.priceFilter ul .active')?.classList.remove('active') item.classList.add('active') if(item.innerText === 'All'){ lowestPrice='';highestPrice='' }else{ let arr = item.innerText.replaceAll('$','').split('-') if(arr[0].endsWith('+')){ lowestPrice=arr[0].replace('+','');highestPrice='' }else{ lowestPrice=arr[0].trim();highestPrice=arr[1].trim() } } page=1; openLoading() await getProduct('price') closeLoading() setTimeout(()=>{scrollToTop()},700) tags.querySelector('.otherTag')?.remove() let html = ` Filters active(1) ` if(item.innerText === 'All'){tags.style.setProperty('margin-bottom','');return} setTimeout(()=>{ tags.insertAdjacentHTML('afterbegin',html) tags.querySelector('.otherTag').addEventListener('click',async(e)=>{ page=1;lowestPrice='';highestPrice='' openLoading() await getProduct('price') tags.querySelector('.otherTag').remove() tags.querySelector('.searchTag')?null:tags.style.setProperty('margin-bottom','') good.querySelector('.priceFilter ul .active').classList.remove('active') good.querySelector('.priceFilter li:first-child a').classList.add('active') closeLoading() setTimeout(()=>{scrollToTop()},700) }) },200) tags.style.setProperty('margin-bottom','17px') }) }) //排序 good.querySelectorAll('.sortBy li a').forEach(item=>{ item.addEventListener('click',async()=>{ let index = item.getAttribute('data-index') let order = 'desc' if(index==='price'){ order = item.getAttribute('data-type')==='1'?'asc':'desc' } good.querySelector('.sortBy ul .active').classList.remove('active') item.classList.add('active') orderBy=index===''?'':`{"${index}":"${order}"}` openLoading() await getProduct('sort') closeLoading() setTimeout(()=>{scrollToTop()},700) }) }) //筛选展开 good.querySelectorAll('.filterBox h2').forEach(item=>{ item.addEventListener('click',()=>{ if(window.innerWidth>991)return let ul = item.closest('div').querySelector('ul') let height = ul.scrollHeight + 44 ul.style.setProperty('--ulHeight',`${height}px`) let active = good.querySelector('.filterBox h2.active') if(active===item){ ul.classList.remove('active') item.classList.remove('active') }else{ active?.classList.remove('active') active?.nextElementSibling.classList.remove('active') ul.classList.toggle('active') item.classList.toggle('active') } }) }) window.addEventListener('load',()=>{ good.querySelector('.elInput i').addEventListener('click',()=>{ good.querySelector('.search').click() }) }) }