From 37a7e4706d48be0652d767c7643757c117b5a7f0 Mon Sep 17 00:00:00 2001 From: Vion Date: Tue, 18 Jan 2022 22:57:23 +0800 Subject: [PATCH] Index bug fixed --- rc-busness/assets/css/global.less | 39 +- rc-busness/assets/css/index.less | 98 +++-- rc-busness/pages/index.vue | 656 +++++++++++++++++------------- 3 files changed, 458 insertions(+), 335 deletions(-) diff --git a/rc-busness/assets/css/global.less b/rc-busness/assets/css/global.less index 729c275f..fb0f3ba2 100644 --- a/rc-busness/assets/css/global.less +++ b/rc-busness/assets/css/global.less @@ -8,17 +8,35 @@ body{ .fade-leave-active { opacity: 0; } + +.ts-mask{ + width:100%; + height:100%; + position: fixed; + top:0; + left:0; + display:flex; + flex-direction: column; + justify-content: center; + align-items: center; + z-index:99; + + .ts-mask-bg{ + background-color:#000; + opacity:.6; + width:100%; + height:100%; + z-index:0; + position:absolute; + left:0; + top:0; + } +} .userloding { - position: fixed; - left: 50%; - margin-left: -1.56rem; - top: 50%; - margin-top: -3.75rem; background: url(../image/onloading.png) center center no-repeat; width: 3.12rem; background-size: contain; - height: 7.5rem; - z-index: 1000; + height: 3.12rem; animation: rolling 4s infinite; -webkit-animation:rolling 4s infinite; } @@ -229,13 +247,12 @@ img, picture { right: 0; top: 30%; background: #FFFFFF; - box-shadow: 0px 0px .62rem rgba(0, 0, 0, 0.16); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.16); border-radius: .25rem; z-index:3; ul{ width: 60px; height: 181px; - box-shadow: 0px 0px 6px rgb(0 0 0 / 10%); background-color: white; display: flex; flex-direction: column; @@ -323,9 +340,7 @@ img, picture { margin-top: 90px; } .rc-list__header { - background: none; - padding: .5rem 0; - border-bottom: none; + } .ts-right-arr { border-bottom:1px solid #E1001A; diff --git a/rc-busness/assets/css/index.less b/rc-busness/assets/css/index.less index e46a91ca..4463c181 100644 --- a/rc-busness/assets/css/index.less +++ b/rc-busness/assets/css/index.less @@ -18,28 +18,31 @@ text-align: center; } } +.ts-position-identifier{ -li{ - background: unset;; - img{ - border-radius: 50%; - } - &.active { +} +.ul-zhuan,.ul-dog{ + li{ + background: unset; img{ - border: 3px solid #E2001A; + border-radius: 50%; } - color: #E2001A; - - } - &.unactive { - color: #444444; - img{ - border: 3px solid #D7D7D7; + &.active { + img{ + border: 3px solid #E2001A; + } + color: #E2001A; + + } + &.unactive { + color: #444444; + img{ + border: 3px solid #D7D7D7; + } } } } - .uservideo{ overflow: hidden; video{ @@ -47,9 +50,40 @@ li{ width:auto; } } +.ul-dog{ + width: 100%; + display: flex; + justify-content: center; + flex-wrap: wrap; + flex-direction: row; + + span{ + margin-top: .5rem; + display: block; + } + img{ + width: 9.5rem; + height: auto; + display: block; + } + li{ + cursor: pointer; + font-size: 16px; + text-align: center; + margin-top:3rem; + margin-left:3rem; + } +} @media screen and (max-width:768px){ .ul-dog{ - display: none; + justify-content: space-evenly; + img{ + width:4rem; + height:auto; + } + li{ + margin-top:1.875rem; + } } .ts-banner-swiper-container{ margin-bottom:2.5rem; @@ -57,9 +91,9 @@ li{ .searchBara{ width: 100%; position: fixed; - top:66px; + top:3.75rem; background: white; - z-index: 9999; + z-index: 60; overflow-x: auto; white-space: nowrap; overflow-y:hidden; @@ -76,7 +110,6 @@ li{ display: inline-block; margin-left: 0.20rem; text-align: center; - background: #F6F6F6; border-radius: 50%; opacity: 1; } @@ -203,7 +236,7 @@ li{ width: 100%; display: flex; flex-direction: column; - justify-content: center; + justify-content: flex-start; align-items: center; } img{ @@ -560,30 +593,7 @@ img{ } .usermain{ - .ul-dog{ - width: 100%; - display: flex; - justify-content: center; - flex-wrap: wrap; - flex-direction: row; - - span{ - margin-top: .5rem; - display: block; - } - img{ - width: 9.5rem; - height: 9.5rem; - display: block; - } - li{ - cursor: pointer; - font-size: 16px; - text-align: center; - margin-top:3rem; - margin-left:3rem; - } - } + } .rc-main{ width: 100%; diff --git a/rc-busness/pages/index.vue b/rc-busness/pages/index.vue index eebc5841..a93c17ef 100644 --- a/rc-busness/pages/index.vue +++ b/rc-busness/pages/index.vue @@ -37,7 +37,7 @@
-
+
@@ -91,8 +91,8 @@
-

全价猫湿粮

- +

全价猫湿粮

+
    @@ -165,22 +165,18 @@
- - -
- 查看更多 -
- - - + +
+ 查看更多 +
+
- -
+
-

全价猫干粮

- +

全价猫干粮

+
    @@ -255,7 +251,7 @@ 立即购买
- +
查看更多 @@ -275,7 +271,7 @@
-

{{dogtitle}}

+

{{dogtitle}}

@@ -328,21 +324,20 @@
-

全价犬湿粮

- -
+

全价犬湿粮

+ -
+
  • - - {{ item.title }} + + {{ dogListitem.title }}
@@ -425,12 +420,11 @@ - - -
- 查看更多 -
- + +
+ 查看更多 +
+
@@ -445,20 +439,20 @@
-

全价犬干粮

- -
+

全价犬干粮

+ +
  • - - {{ item.title }} + + {{ userDogListItem.title }}
@@ -538,12 +532,11 @@
- - -
- 查看更多 -
- + +
+ 查看更多 +
+
@@ -556,8 +549,8 @@
-

处方用粮

- +

处方用粮

+
    @@ -701,7 +694,11 @@ 回到顶部
- +
+
+
+ 数据加载中 +
@@ -718,6 +715,8 @@ meta: {title: '首页'}, data(){ return{ + fixedHeader:false, + dataLoaded:true, useraindex:0, usertitle:'明星猫粮', dogtitle:'明星犬粮', @@ -740,18 +739,22 @@ userserachlist:[{}], doggan:[], dogtype:[ - { - title: "幼犬", - - }, - { - title: "成犬", - }, - { - title: "老年犬", - }, - - ], + { + title: "幼犬", + }, + { + title: "成犬", + }, + { + title: "老年犬", + }, + { + title: "品种犬", + }, + { + title: "亚健康", + } + ], anchor:'', dogshi:[], catlist:[], @@ -800,43 +803,43 @@ ] }, showingBanners:[], + maoganCurIndex:0, + maoshiCurIndex:0, + quanshiCurIndex:0, + quanganCurIndex:0, userdoglist: [ - { - title: "小型犬", - catimage: "/images/dog/small.png", - }, - { - title: "中型犬", - catimage: "/images/dog/medium.png", - }, - { - title: "大型犬", - catimage: "/images/dog/big.png", - }, - - ], - discoun: [ - { - title: "幼猫", - }, - { - title: "成猫", - }, - { - title: "老年猫", - }, - { - title: "品种猫", - - - }, - { - title: "亚健康猫", - - - }, - - ], + { + title: "小型犬", + catimage: "/images/dog/small.png", + }, + { + title: "中型犬", + catimage: "/images/dog/medium.png", + }, + { + title: "大型犬", + catimage: "/images/dog/big.png", + }, + ], + discoun: [ + { + title: "幼猫", + }, + { + title: "成猫", + }, + { + title: "老年猫", + }, + { + title: "品种猫", + + + }, + { + title: "亚健康猫" + }, + ], discountlist: [ { @@ -1147,8 +1150,14 @@ } window.addEventListener("scroll", this.handleScroll, true); this.userchufang();//查询处方粮商品信息 + this.catmessage();//查询猫的信息 + this.catclickGan(); + this.catclickShi(); + this.dogmessage();//查询狗的信息 + this.userdogShi(); + this.userdogGan(); }, destroyed () { window.removeEventListener('scroll', this.scrollToTop); @@ -1200,8 +1209,6 @@ ifadroind(item,index,order){ //console.log(item,index,order); - - var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; @@ -1212,8 +1219,8 @@ var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; - if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) { - //console.log("当前是电脑打开啊啊啊") + if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) { + //console.log("当前是电脑打开啊啊啊") if(item.title=='明星猫粮'){ this.catproduct=true; this.twomao=false; @@ -1298,19 +1305,43 @@ let dogtop=document.querySelector('.oc-top'); //console.log(dogtop); //console.log(mingxin.offsetTop); + + let positionIdentifier=document.querySelectorAll('.ts-position-identifier'); + let tmpTitle=''; + let scrollToTop=0; + let _self=this; + let transition = 230; + positionIdentifier.forEach(function(ele,index){ + tmpTitle = ele.getAttribute("data-rel"); + if(item.title==tmpTitle) + { + if(_self.fixedHeader && item.title!='明星猫粮') + { + transition+=130; + } + scrollToTop = _self.heightToTop(positionIdentifier[index]) - transition; + //positionIdentifier[index].scrollIntoView(true); + window.scrollTo({ + top:scrollToTop, + behavior:'smooth' + }) + //document.body.scrollTop = oPos; + } + }) + /* if(item.title=='犬湿粮'||item.title=='犬干粮'||item.title=='处方用粮'){ - userindex=userindex-2 + userindex=userindex-2 }else{ - userindex=userindex-1 + userindex=userindex-1 } if(item.title=='明星猫粮'){ - mingxin.scrollIntoView(true); + mingxin.scrollIntoView(true); }else{ - let catshiid=document.querySelectorAll('.selectionswitch'); - catshiid[userindex].scrollIntoView(true); + let catshiid=document.querySelectorAll('.selectionswitch'); + catshiid[userindex].scrollIntoView(true); } if(item.title=='明星犬粮') - dogtop.scrollIntoView(true); + dogtop.scrollIntoView(true); // if(item.title=="猫湿粮"){ // this.catproduct=false; // this.catfood=true; @@ -1320,83 +1351,117 @@ // } //console.log("当前是手机打开") + */ } }, - userdog(item,index){ + heightToTop(ele){ + //ele为指定跳转到该位置的DOM节点 + let root = document.body; + let height = 0; + do{ + height += ele.offsetTop; + ele = ele.offsetParent; + }while( ele !== root ) + return height; + }, + userdogShi(){ + this.activeIndex5=(this.activeIndex5?this.activeIndex5:0); + let apiDogSize=this.userdoglist[this.activeIndex5].title; + let apiDogFoodType=this.dogtype[this.quanshiCurIndex].title; + this.userstype=1; let petType={ petType:1, - name:index, + categoryName:"皇家犬湿粮", + name:apiDogFoodType, } for(let i =0;i0) - { - this.gotop = true - this.searchBar=false - } - else - { - this.gotop = false; - this.searchBar=true - } - }, - toTop() { - let top = document.documentElement.scrollTop || document.body.scrollTop; - // 实现滚动效果 - const timeTop = setInterval(() => { - document.body.scrollTop = document.documentElement.scrollTop = top -= 400; - if (top <= 0) { - clearInterval(timeTop); - } - }, 10); - }, - async courseId(item) { - let data = await postCourseId(this.productCode,1,this.usermessage.data.id,this.usermessage.data.mobile,item.picFile,item.name,item.basePrice,item.specifications); - if(data){ - this.productlist=data; - } - }, - //请求猫 - async catmessage(stype) { + let fixedCatbarSeperator = document.getElementById("fixed-catbar-seperator"); + if(!fixedCatbarSeperator) + { + return; + } + let scrolltop = document.documentElement.scrollTop || document.body.scrollTop; + if((scrolltop-fixedCatbarSeperator.offsetTop)>0) + { + this.fixedHeader=false; + this.gotop = true + this.searchBar=false + } + else + { + this.fixedHeader=true; + this.gotop = false; + this.searchBar=true + } + }, + toTop() { + let top = document.documentElement.scrollTop || document.body.scrollTop; + // 实现滚动效果 + const timeTop = setInterval(() => { + document.body.scrollTop = document.documentElement.scrollTop = top -= 400; + if (top <= 0) { + clearInterval(timeTop); + } + }, 10); + }, + async courseId(item) { + this.dataLoaded=false; + let data = await postCourseId(this.productCode,1,this.usermessage.data.id,this.usermessage.data.mobile,item.picFile,item.name,item.basePrice,item.specifications); + if(data){ + this.productlist=data; + this.dataLoaded=true; + } + }, + //请求猫 + async catmessage(stype,dataType) { + this.dataLoaded=false; let data=[]; if(stype==undefined||stype==null){ data = await biaomessage(0,'',1,6); @@ -1404,33 +1469,55 @@ data = await biaomessage(this.userserachlist,'',1,6); } if(data){ - this.catlist=data; let userlist=[]; - userlist=data.slice(0,6); - this.catshi=userlist; - this.catgan=userlist; + //userlist=data.slice(0,6); + if(dataType) + { + if(dataType=='Shi') + this.catshi=data; + else if(dataType=='Gan') + this.catgan=data; + } + else + { + this.catlist=data; + //this.catgan=userlist; + //this.catshi=userlist; + } + this.dataLoaded=true; } }, - //请求犬 - async dogmessage(stype) { - let data=[]; - if(stype==undefined||stype==null){ - - data = await biaomessage(1); - }else{ - data = await biaomessage(this.userserachlist); - } - if(data){ - let userlist=[]; - userlist=data.slice(0,6); - this.doglist=data; - this.doggan=userlist; - this.dogshi=userlist; - } - }, + //请求犬 + async dogmessage(stype,dataType) { + this.dataLoaded=false; + let data=[]; + if(stype==undefined||stype==null){ + data = await biaomessage(1,'',1,6); + }else{ + data = await biaomessage(this.userserachlist,'',1,6); + } + if(data){ + let userlist=[]; + //userlist=data.slice(0,6); + if(dataType) + { + if(dataType=='Shi') + this.dogshi=data; + else if(dataType=='Gan') + this.doggan=data; + } + else + { + this.doglist=data; + //this.doggan=userlist; + //this.dogshi=userlist; + } + this.dataLoaded=true; + } + }, - selectproduce(item,index){ + selectproduce(item,index){ if(item.productList[0]==undefined){ item.productlist[0].productCode=0; } @@ -1444,107 +1531,118 @@ productCode:item.productList[0].productCode }, }); - }, + }, - //请求处方量信息数据 - async userchufang() { - let list=[]; - let data = await userque(); - if(data){ - list=data.slice(0,6); - this.processinformation=list; - this.chufanlist=data; - - } - - }, - - //点击请求处方量标签信息数据 - async userquery(item) { - let data = await userquery(item); - if(data){ - this.processinformation=data; - } - - }, + //请求处方量信息数据 + async userchufang() { + this.dataLoaded=false; + let list=[]; + let data = await userque(); + if(data){ + list=data.slice(0,6); + this.processinformation=list; + this.chufanlist=data; + this.dataLoaded=true; + } + }, + //点击请求处方量标签信息数据 + async userquery(item) { + this.dataLoaded=false; + let data = await userquery(item); + if(data){ + this.processinformation=data; + this.dataLoaded=true; + } + }, //处方用粮筛选 userclick(item,index){ this.userquery(index) }, - //全价猫湿粮筛选 - catclick(item,index){ + //全价猫干粮筛选 + catclickGan(){ this.userstype=0; + this.maoganCurIndex=this.maoganCurIndex?this.maoganCurIndex:0; + let apiCatType=this.discoun[this.maoganCurIndex].title; let petType={ petType:0, - name:index, + name:apiCatType, } for(let i =0;i