From b67734b6ce807d4beb61c5435bf161e2ba62969d Mon Sep 17 00:00:00 2001
From: "952108534@qq.com" <952108534@qq.com>
Date: Tue, 18 Jan 2022 21:50:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BA=A7=E5=93=81=E4=BB=A5?=
 =?UTF-8?q?=E5=8F=8A=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 rc-busness/ajax/getData.js                    |   24 +-
 rc-busness/assets/css/global.less             |    3 +-
 rc-busness/assets/css/product-list.less       |  102 +-
 rc-busness/assets/css/search.less             |  112 +-
 .../pages/productdetails/productlist.vue      |  319 ++--
 rc-busness/pages/usersearch/search.vue        | 1291 ++++++++++-------
 6 files changed, 1191 insertions(+), 660 deletions(-)

diff --git a/rc-busness/ajax/getData.js b/rc-busness/ajax/getData.js
index 88f6404c..0c1a5e5d 100644
--- a/rc-busness/ajax/getData.js
+++ b/rc-busness/ajax/getData.js
@@ -224,14 +224,22 @@ export const biaomessage = (stype,name,curPage,curRow) => {
 	}
 }
 
-export const searchchanpin = (stype) => {
+export const searchchanpin = (stype,usertype,curPage,curRow) => {
+
+  console.log(stype,usertype);
+  
+  if(!curPage)
+		curPage=1;
+	if(!curRow)
+		curRow=10;
+	let queryTail='&page='+curPage+'&rows='+curRow;
   console.log(stype);
   let list={};
   stype.map(item=>{
     console.log(item);
     list=item
   }) 
-  var str = "?";
+  var str = "&";
             for(var key in list){
 
                 str = str + key + "=" + list[key] + "&";
@@ -242,7 +250,7 @@ export const searchchanpin = (stype) => {
     row:10
   }
   
-  return fetch('product/query'+ str, data, 'POST' )
+  return fetch('product/query?petType='+usertype+str+queryTail, data, 'POST' )
 }
 
 
@@ -294,14 +302,20 @@ export const biaomessa = (stype) => {
   return fetch('product/query', data, 'POST' )
 }
 
-export const biaome = (stype) => {
+export const biaome = (usertype,stype,curPage,rows) => {
+  if(!curPage)
+		curPage=1;
+    if(!rows)
+		rows=10;
+    let queryTail='&page='+curPage+'&rows='+rows;
+    let username='&name='+stype
   console.log(stype);
   var data = {
     name:stype,
     rows:10,
     page:1,
   }
-  return fetch('product/query?name='+stype,data, 'POST' )
+  return fetch('product/query?petType='+usertype+username+queryTail,data, 'POST' )
 }
 
 
diff --git a/rc-busness/assets/css/global.less b/rc-busness/assets/css/global.less
index c3305061..edefb690 100644
--- a/rc-busness/assets/css/global.less
+++ b/rc-busness/assets/css/global.less
@@ -378,7 +378,8 @@ img, picture {
 		}
 		.ts-scrollable{
 			li{
-				width: 4.125rem;
+				// width: 4.125rem;
+				padding: 0 0.62rem;
 				height: 1.625rem;
 				margin-left: .5rem;
 				font-size:.75rem;
diff --git a/rc-busness/assets/css/product-list.less b/rc-busness/assets/css/product-list.less
index 3490328c..cf1e3bef 100644
--- a/rc-busness/assets/css/product-list.less
+++ b/rc-busness/assets/css/product-list.less
@@ -16,12 +16,31 @@ ul li ol li em strong i {
 	 //rc-main end
 }
 
+
 //手机端
 @media screen and (max-width: 768px) {
 
 
+
 	.usercontentshow{
 		position: relative;
+		.userrccat{
+			width: 32%;
+			height: 34px;
+			background: #ffffff;
+			border-radius: 100px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-left: 0;
+			font-size: 12px;
+			margin-right: 0.2rem;
+			img {
+				width: 24px;
+				height: 16px;
+			}
+			border: 2px solid #d7d7d7;
+		}
 	}
 	.online{height:.08rem;}
 	.rc-mubu{
@@ -96,6 +115,25 @@ ul li ol li em strong i {
 				height: 16px;
 			}
 		}
+		.userrccat{
+			width: 32%;
+			height: 34px;
+			background: #ffffff;
+			border-radius: 100px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-left: 0;
+			font-size: 14px;
+			span {
+				margin-left: 3px;
+			}
+			img {
+				width: 24px;
+				height: 16px;
+			}
+			border: 2px solid #E2001A;
+		}
 	}
 
 }
@@ -233,14 +271,60 @@ ul li ol li em strong i {
 		}
 	}
 	*/
+	.ts-scrollable{
+		.useractive{
+			width: 126px;
+			height: 36px;
+			border: 2px solid #E1001A;
+		   border-radius: 100px;
+		 }
+		 .userunactive{
+			 width: 126px;
+			 height: 36px;
+			 background: #FFFFFF;
+			 border: 2px solid #D7D7D7;
+			 opacity: 1;
+			 border-radius: 100px;
+			 display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.14rem;
+	img{
+		width: 24px;
+    height: 16px;
+	display: block;
+    max-width: 100%;
+	}
+			 
+		 }
+	}
+	
 }
 
 //pc端
 @media screen and (min-width: 768px){
+	.userrccat{
+		width: 327px;
+    height: 48px;
+    border-radius: 30px;
+    background: #ffffff;
+    border-radius: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+	margin-left: 16px;
+
+		img {
+			width: 24px;
+			height: 16px;
+		}
+		border: 2px solid #d7d7d7;
+	}
 	.usersearch {
 		margin: 0 auto;
 		overflow: hidden;
-		margin-top: 5rem;
+		margin-top: 2.6rem;
 	}
 	.online{
 		width:100%;
@@ -457,4 +541,20 @@ border-radius: 30px;
         }
   }
 */
+.ts-scrollable-container{
+	overflow-y: hidden;
+	overflow-x: clip;
+	width: 100%;
+   h2{
+	   display: flex;
+	   align-items: center;
+	   width: 4%;
+   }
+	.ts-scrollable{
+		overflow-y: hidden;
+	overflow-x: clip;
+	width: 100%;
+	}
+	}
+	
 }
\ No newline at end of file
diff --git a/rc-busness/assets/css/search.less b/rc-busness/assets/css/search.less
index 86ff520b..5b777d36 100644
--- a/rc-busness/assets/css/search.less
+++ b/rc-busness/assets/css/search.less
@@ -13,11 +13,15 @@ ul li ol li em strong i {
 .rc-main {
   position: relative;
   margin-top: 5.25rem;
+
   .usersearch {
     width: 100%;
     margin: 0 auto;
     overflow: hidden;
     margin-top: 20px;
+    .rc-padding--md{
+      padding: 0;
+    }
   }
   .active{
     border: 2px solid #E2001A;
@@ -34,6 +38,41 @@ ul li ol li em strong i {
 }
 //手机端
 @media screen and (max-width: 768px) {
+  .rc-button
+  {
+    display: flex;
+    justify-content: center;
+    font-size: 14px;
+    width: 100%;
+    box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
+    height: 80px;
+    align-items: center;
+    span
+    {
+      width: 160px;
+      height: 48px;
+      border: 2px solid #E2001A;
+      border-radius: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #E2001A;
+    }
+    em{
+      font-style: normal;
+      width: 164px;
+      height: 48px;
+      background: #E2001A;
+      cursor: pointer;
+      border-radius: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #FFFFFF;
+      margin-left: 40px;
+    }
+  }
+  
   .active{
     border: 2px solid #E2001A;
     color: #E2001A;
@@ -48,6 +87,9 @@ ul li ol li em strong i {
    }
 //搜索
 .usersearch {
+  .ts-standard-btn{
+    display: none;
+  }
 strong{
   font-size: 18px;
   color: #333333;
@@ -83,7 +125,10 @@ strong{
   margin: 0 auto;
   color: #333333;
   margin-top: 1.5rem;
-
+  h2{
+    font-size: 18px;
+    font-weight: bold;
+  }
   span {
     font-size: 14px;
     color: #666666;
@@ -93,7 +138,6 @@ strong{
 }
 //  热门搜索
 .rc-variety {
-  margin-top: 1.06rem;
   ul {
     display: flex;
     align-items: center;
@@ -184,7 +228,12 @@ margin-left: 0.18rem;
        font-weight: normal;
     }
   }
-  
+  .rc-padding--md{
+    padding: 0;
+  }
+  h2{
+    margin-left: 0;
+  }
 }
 
 
@@ -286,7 +335,7 @@ border-radius: 100px;
     h2 {
       font-size: 18px;
       color: #333333;
-      margin-left: 12px;
+      font-weight: bold;
     }
     .ts-scrollable{
       margin-top: 1rem;
@@ -324,6 +373,30 @@ border-radius: 100px;
 }
 //pc端
 @media screen and (min-width: 768px){
+
+  /deep/.el-dialog__header {
+     padding: 0;
+     margin: 0;
+   }
+   /deep/.el-dialog__body {
+ 
+   }
+   .ts-scrollable-container{
+    // overflow-y: hidden;
+    // overflow-x: clip;
+    // margin-top: 0;
+     h2{
+       display: flex;
+       align-items: center;
+       width: 6%;
+     }
+    .ts-scrollable{
+    //   overflow-y: hidden;
+    // overflow-x: clip;
+    // width: 100%;
+    }
+    }
+   
 strong{
   font-size: 26px;
   color: #333333;
@@ -351,17 +424,19 @@ cursor: pointer;
 }
 /deep/.el-dialog {
   width: 920px;
-  height: 570px;
   background: #FFFFFF;
   }
   /deep/.van-search__action{
     display: block;
   }
   .rc-search {
-    width: 100%;
-    text-align: center;
-    font-size:1.25rem ;
-    color: #666666;
+    width: 4.31rem;
+  height: 2rem;
+  background: #e1001a;
+  border-radius: 2rem;
+  text-align: center;
+  color: white;
+  font-size:0.87rem ;
   }
   .rc-productcat {
     display: flex;
@@ -445,7 +520,8 @@ margin-left: 8px;
     justify-content: center;
     font-size: 16px;
     width: 100%;
-    padding: 40px 0 40px 0;
+    margin-top: 35px;
+
     span
     {
       width: 160px;
@@ -505,17 +581,28 @@ border-radius: 30px;
 }
   .form-search {
     width: 100%;
-    height: 110px;
+    display: flex;
+    align-items: center;
+    .ts-standard-btn{
+      
+    }
+    .rc-search{
+      display: none;
+    }
+   
   }
   /deep/.van-search__content--square{
    background: white;
   }
   .van-search__content--square{
-    height: 110px;
         display: flex;
         align-items: center;
         justify-content: center;
         background: white;
+        border: 1px solid #D7D7D7;
+        height: 80px;
+        width: 1200px;
+        border-radius: 200px;
   }
   /deep/.van-field__left-icon
   {
@@ -525,7 +612,6 @@ border-radius: 30px;
   }
   /deep/.van-field__body
   {
-  height: 110px;
   }
 
 
diff --git a/rc-busness/pages/productdetails/productlist.vue b/rc-busness/pages/productdetails/productlist.vue
index d4ec3058..46c7d047 100644
--- a/rc-busness/pages/productdetails/productlist.vue
+++ b/rc-busness/pages/productdetails/productlist.vue
@@ -1,5 +1,10 @@
 <template>
   <div>
+ <transition name="fade">
+       <div class="userloding" v-show="isLoading"></div>
+            
+            </transition>
+
     <Myheader></Myheader>
     <div class="rc-top"></div>
     <div class="rc-max-width--xl rc-main">
@@ -11,6 +16,7 @@
                 class="rc-cat"
                 v-for="(item, index) in userproduct"
                 :key="index"
+                ref="userclicks"
                 @click="selectGoods(item, index)"
                 :class="activeIndex == index ? 'active' : 'unactive'"
               >
@@ -27,7 +33,7 @@
                 v-for="(item, index) in prefecture"
                 :key="index"
                 @click="selectproduct(item, index)"
-                :class="activeIndexb == index ? 'active' : 'unactive'"
+                :class="item.checked ? 'active' : 'unactive'"
                 ref="chosebox"
               >
                 {{ item.tagName }}
@@ -42,7 +48,7 @@
                 v-for="(item, index) in catage"
                 :key="index"
                 @click="selectage(item, index)"
-                :class="activeIndexc == index ? 'active' : 'unactive'"
+                :class="item.checked ? 'active' : 'unactive'"
                 ref="chosebox1"
               >
                 {{ item.tagName }}
@@ -57,8 +63,8 @@
                 v-for="(item, index) in catagea"
                 :key="index"
                 @click="selectagc(item, index)"
-                :class="activeIndexd == index ? 'active' : 'unactive'"
-                ref="chosebox2"
+                :class="item.checked ? 'active' : 'unactive'"
+                ref="cgosebox4"
               >
                 {{ item.tagName }}
               </li>
@@ -72,7 +78,7 @@
                 v-for="(item, index) in catageb"
                 :key="index"
                 @click="selectagd(item, index)"
-                :class="activeIndexe == index ? 'active' : 'unactive'"
+                :class="item.checked ? 'active' : 'unactive'"
                 ref="chosebox3"
               >
                 {{ item.tagName }}
@@ -181,7 +187,7 @@
                 :key="index"
                 @click="selectagc(item, index)"
                 :class="activeIndexd == index ? 'active' : 'unactive'"
-                ref="chosebox2"
+                ref="cgosebox4"
               >
                 {{ item.tagName }}
               </li>
@@ -219,6 +225,7 @@
               v-for="(item, index) in userproduct"
               :key="index"
               @click="selectGoodsa(item, index)"
+              ref="usercliak"
               :class="activeIndex1 == index ? 'active' : 'unactive'"
             >
               <img :src="item.name" alt="" />
@@ -262,7 +269,7 @@
                 :key="index"
                 @click="selectagc(item, index)"
                 :class="activeIndexd == index ? 'active' : 'unactive'"
-                ref="chosebox2"
+                ref="cgosebox4"
               >
                 {{ item.tagName }}
               </li>
@@ -299,7 +306,7 @@ import Myheader from "~/components/header.vue";
 import $ from "jquery";
 import {
   userstype,
-  biaomessa,
+  biaome,
   biaomessage,
   searchchanpin,
 } from "../../ajax/getData";
@@ -307,6 +314,7 @@ export default {
   data() {
     return {
       value: "",
+       isLoading: true,
       userstype: [],
       activeIndex: "0",
       allacindex:0,
@@ -314,7 +322,14 @@ export default {
       userishwo1: true,
       userishwo2: true,
       userishwo3: true,
-      userserachlist: [{}],
+       userishwo4: true,
+ userserachlist: [{
+         categoryName:'', //专区
+              tagUsedAge:'',//年龄
+              tagFunction:'',//功能
+              tagBreed:'', //品种
+
+      }],
       activeIndex1: 0,
       activeIndexa: "-1",
       dialogInfo1: false,
@@ -504,13 +519,14 @@ export default {
   
   },
   methods: {
-    async usersearch(stype) {
-      let data = await searchchanpin(stype);
+    async usersearch(stype,usertype) {
+      let data = await searchchanpin(stype,usertype,1,10);
       if (data) {
         this.rccontair = data;
       }
     },
     async userst() {
+        this.isLoading = true;
       let pinzhong = [];
       let zhuanqu = [];
       let age = [];
@@ -518,39 +534,59 @@ export default {
       let data = await userstype();
       if (data) {
         this.userstype = data;
+            this.isLoading = false;
       }
       this.usercatlist = this.userstype.filter((item) => item.petType == "0");
       this.usercatlist.map((element) => {
         if (element.name == "品种") {
           pinzhong.push(element);
           this.catageb = pinzhong;
+             this.catageb.forEach(element => {
+              element.checked=false;
+          })
         }
         if (element.name == "功能") {
           gonneg.push(element);
           this.catagea = gonneg;
+           this.catagea.forEach(element => {
+              element.checked=false;
+          })
         }
         if (element.name == "年龄") {
           age.push(element);
           this.catage = age;
+             this.catage.forEach(element => {
+              element.checked=false;
+          })
         }
         if (element.name == "专区") {
           zhuanqu.push(element);
-          this.prefecture = gonneg;
+          this.prefecture = zhuanqu;
+          this.prefecture.forEach(element => {
+              element.checked=false;
+          })
+         
         }
+          console.log(pinzhong);
+          //  debugger
       });
       this.userdoglisgt = this.userstype.filter((item) => item.petType == "1");
     },
 
     async usetmessage() {
-      let data = await biaomessa();
+          this.isLoading = true;
+      let data = await biaome(this.activeIndex1,'', 1, 10);
       if (data) {
         this.rccontair = data;
+         this.isLoading = false;
       }
     },
     async onmessage(stype) {
-      let data = await biaomessage(stype);
+        this.isLoading = true;
+      let data = await biaomessage(stype,'',1,10);
       if (data) {
         this.rccontair = data;
+          this.isLoading = false;
       }
     },
 
@@ -615,18 +651,87 @@ export default {
     },
 
     selectGoods(item, index) {
+      this.activeIndex1 = index;
       this.activeIndex = index;
-      this.allacindex=index
-      console;
-      let petType = {
-        petType: this.allacindex,
-      };
-      for (let i = 0; i < this.userserachlist.length; i++) {
-        if (!this.userserachlist.includes(petType)) {
-          this.userserachlist.push(petType);
+      this.allacindex=index;
+   this.usersearch(this.userserachlist,this.activeIndex1);
+
+
+      // for (let i = 0; i < this.userserachlist.length; i++) {
+      //   if (!this.userserachlist.includes(petType)) {
+      //     this.userserachlist.push(petType);
+      //   }
+      // }
+      this.userserachlist=[
+        {
+           categoryName:'', //专区
+              tagUsedAge:'',//年龄
+              tagFunction:'',//功能
+              tagBreed:'', //品种
         }
+      ]
+         let pinzhong = [];
+      let zhuanqu = [];
+      let age = [];
+      let gonneg = [];
+      if (this.activeIndex1 == 0) {
+        this.usercatlist.map((element) => {
+          if (element.name == "品种") {
+            pinzhong.push(element);
+         
+            this.catageb = pinzhong;
+          }
+          if (element.name == "功能") {
+            gonneg.push(element);
+            this.catagea = gonneg;
+         
+          }
+          if (element.name == "年龄") {
+            age.push(element);
+            this.catage = age;
+          
+          }
+          if (element.name == "专区") {
+            zhuanqu.push(element);
+            this.prefecture = zhuanqu;
+          
+          }
+        });
+      } else if (this.activeIndex1 == 1) {
+        this.userdoglisgt.map((element) => {
+          if (element.name == "品种") {
+            pinzhong.push(element);
+            this.catageb = pinzhong;
+           this.catageb.forEach((element) => {
+              element.checked = false;
+            });
+          }
+          if (element.name == "功能") {
+            gonneg.push(element);
+            this.catagea = gonneg;
+         this.catagea.forEach((element) => {
+              element.checked = false;
+            });
+          }
+          if (element.name == "年龄") {
+            age.push(element);
+            this.catage = age;
+          this.catage.forEach((element) => {
+              element.checked = false;
+            });
+          }
+          if (element.name == "专区") {
+            zhuanqu.push(element);
+            this.prefecture = zhuanqu;
+               this.prefecture.forEach((element) => {
+              element.checked = false;
+            });
+          }
+        });
       }
-      this.usersearch(this.userserachlist);
+
+      this.activeIndex = index;
+
     },
     selectGoodsa(item, index) {
       this.activeIndex1 = index;
@@ -652,99 +757,107 @@ export default {
       this.activeIndexc = index;
       this.userishwo1 = !this.userishwo1;
       console.log(this.userishwo1);
-      if (this.userishwo1 == false) {
-        tagUsedAge = {
-          petType: this.allacindex,
-          tagUsedAge: item.tagName,
-        };
-      } else {
-        console.log("这是false");
-        tagUsedAge = {
-          petType: this.allacindex,
-        };
+          if(item.checked==false){
+      item.checked = true;
+        this.userserachlist[0].tagUsedAge=item.tagName;
+        this.$refs.chosebox1[index].className = "active";
+      }else{
+      this.userserachlist[0].tagUsedAge='';
+        item.checked = false;
+        this.$refs.chosebox1[index].className = "unactive";
       }
-      this.$refs.chosebox1[index].className = "unactive";
-      for (let i = 0; i < this.userserachlist.length; i++) {
-        if (!this.userserachlist.includes(tagUsedAge)) {
-          this.userserachlist.push(tagUsedAge);
-        }
-      }
-      this.usersearch(this.userserachlist);
+   
+      // for (let i = 0; i < this.userserachlist.length; i++) {
+      //   if (!this.userserachlist.includes(tagUsedAge)) {
+      //     this.userserachlist.push(tagUsedAge);
+      //   }
+      // }
+      this.usersearch(this.userserachlist,this.activeIndex1);
     },
     selectagc(item, index) {
-      let tagFunction = {};
+      // let tagFunction = {};
       this.activeIndexd = index;
       this.userishwo2 = !this.userishwo2;
-      if (this.userishwo2 == false) {
-        tagFunction = {
-          petType: this.allacindex,
-          tagFunction: item.tagName,
-        };
-      } else {
-        console.log("这是false");
-        tagFunction = {
-          petType: this.allacindex,
-        };
+            if(item.checked==false){
+        item.checked = true;
+        this.$refs.cgosebox4[index].className = "active";
+         this.userserachlist[0].tagFunction=item.tagName;
+      }else{
+      item.checked = false;
+        this.$refs.cgosebox4[index].className = "unactive";
+         this.userserachlist[0].tagFunction='';
       }
-      this.$refs.chosebox2[index].className = "unactive";
-
-      for (let i = 0; i < this.userserachlist.length; i++) {
-        if (!this.userserachlist.includes(tagFunction)) {
-          this.userserachlist.push(tagFunction);
-        }
-      }
-      this.usersearch(this.userserachlist);
+      // if (this.userishwo2 == false) {
+      //   tagFunction = {
+      //     petType: this.allacindex,
+      //     tagFunction: item.tagName,
+      //   };
+      // } else {
+      //   console.log("这是false");
+      //   tagFunction = {
+      //     petType: this.allacindex,
+      //   };
+      // }
+      // for (let i = 0; i < this.userserachlist.length; i++) {
+      //   if (!this.userserachlist.includes(tagFunction)) {
+      //     this.userserachlist.push(tagFunction);
+      //   }
+      // }
+      this.usersearch(this.userserachlist,this.activeIndex1);
     },
     selectagd(item, index) {
       let tagBreed = {};
       this.activeIndexe = index;
       this.userishwo3 = !this.userishwo3;
-      if (this.userishwo3 == false) {
-        tagBreed = {
-          petType: this.allacindex,
-          tagBreed: item.tagName,
-        };
-      } else {
-        console.log("这是false");
-        tagBreed = {
-          petType: this.allacindex,
-        };
-      }
-      this.$refs.chosebox3[index].className = "unactive";
-      for (let i = 0; i < this.userserachlist.length; i++) {
-        if (!this.userserachlist.includes(tagBreed)) {
-          this.userserachlist.push(tagBreed);
-        }
-      }
-      this.usersearch(this.userserachlist);
-    },
-    selectproduct(item, index) {
-      //  console.log(this.userishwo=!this.userishwo)
-      let categoryName = {};
-      this.activeIndexb = index;
-      console.log(this.activeIndex);
-      this.userishwo = !this.userishwo;
-      console.log(this.userishwo);
-      if (this.userishwo == false) {
-        console.log("====");
-        categoryName = {
-          petType: this.allacindex,
-          categoryName: item.tagName,
-        };
-      } else {
-        categoryName = {
-          petType: this.allacindex,
-        };
-      }
-      console.log(this.$refs.chosebox);
-      this.$refs.chosebox[index].className = "unactive";
-      for (let i = 0; i < this.userserachlist.length; i++) {
-        if (!this.userserachlist.includes(categoryName)) {
-          this.userserachlist.push(categoryName);
-        }
+         if(item.checked==false){
+        item.checked = true;
+        this.$refs.chosebox3[index].className = "active";
+         this.userserachlist[0].tagBreed=item.tagName;
+      }else{
+        item.checked = false;
+        this.$refs.chosebox3[index].className = "unactive";
+         this.userserachlist[0].tagBreed='';
       }
 
-      this.usersearch(this.userserachlist);
+      // this.$refs.chosebox3[index].className = "unactive";
+      // for (let i = 0; i < this.userserachlist.length; i++) {
+      //   if (!this.userserachlist.includes(tagBreed)) {
+      //     this.userserachlist.push(tagBreed);
+      //   }
+      // }
+      this.usersearch(this.userserachlist,this.activeIndex1);
+    },
+    selectproduct(item, index) {
+            this.activeIndexb = index;
+      //  console.log(this.userishwo=!this.userishwo)
+      if(item.checked==false){
+        item.checked = true;
+        this.$refs.chosebox[index].className = "active";
+        this.userserachlist[0].categoryName=item.tagName;
+      }else{
+       item.checked = false;
+        this.$refs.chosebox[index].className = "unactive";
+         this.userserachlist[0].categoryName='';
+      }
+      // if (this.userishwo == false) {
+      //   console.log("====");
+      //   categoryName = {
+      //     petType: this.allacindex,
+      //     categoryName: item.tagName,
+      //   };
+      // } else {
+      //   categoryName = {
+      //     petType: this.allacindex,
+      //   };
+      // }
+      // this.$refs.chosebox[index].className = "unactive";
+      // for (let i = 0; i < this.userserachlist.length; i++) {
+      //   if (!this.userserachlist.includes(categoryName)) {
+      //     this.userserachlist.push(categoryName);
+      //   }
+      // }
+
+      this.usersearch(this.userserachlist,this.activeIndex1);
     },
 
     //弹框的显示隐藏
diff --git a/rc-busness/pages/usersearch/search.vue b/rc-busness/pages/usersearch/search.vue
index 4f8b276c..51aa7612 100644
--- a/rc-busness/pages/usersearch/search.vue
+++ b/rc-busness/pages/usersearch/search.vue
@@ -1,249 +1,360 @@
 <template>
-<div>
-  <Myheader></Myheader>
-<div class="rc-top"></div>
-  <div class="rc-max-width--xl rc-main">
-    <div class="usersearch">
-      <div class="form-search">
-        <van-search
-          v-model="value"
-          show-action
-          placeholder="请输入搜索关键词"
-          @search="onSearch"
-          class="rc-keyword"
-        >
-          <template #action>
-            <div @click="onSearch" class="rc-search">搜索</div>
-          </template>
-        </van-search>
-      </div>
-      <div class="rc-max-width--xl rc-title">
-        <strong>热门搜索</strong>
-        <span class="rc-change">换一批</span>
-      </div>
-      <div class="rc-max-width--xl rc-variety">
-        <ul>
-          <li v-for="(item, index) in searchdata" :key="index"  @click="selectsearch(item, index)" :class="activeIndexa == index ? 'active' : 'unactive'">
-            {{ item.title }}
-          </li>
-        </ul>
-      </div>
-      <div class="usersearch">
-      <div class="usercontentshow" ref="usercontent">
-        
-      <div class="usercontentshow rc-product">
-        <strong>我想搜</strong>
-        <div class="rc-productcat ts-scrollable">
-             <ol>
-               <li v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" class="ts-standard-btn" ref="userstandard">
-                   <img :src="item.catimage" alt=""  />
-            <span>{{ item.title }}</span>
-               </li>
+  <div>
+    <transition name="fade">
+      <div class="userloding" v-show="isLoading"></div>
+    </transition>
 
-             </ol>
-          <div class="rc-productcat userselect" @click="userselect" >
-            <img src="../../assets/image/rc-usericon.png" alt="" />
-            <span @click="usershow()">筛选</span>
+    <Myheader></Myheader>
+    <div class="rc-top"></div>
+    <div class="rc-max-width--xl rc-main">
+      <div class="usersearch">
+        <div class="form-search">
+          <van-search
+            v-model="value"
+            show-action
+            placeholder="请输入搜索关键词"
+            @search="onSearch"
+            class="rc-keyword"
+          >
+            <template #action>
+              <div @click="onSearch" class="rc-search">搜索</div>
+            </template>
+          </van-search>
+                 <div class="ts-stand">
+                  <span @click="onSearch" class="ts-standard-btn">搜索</span>
+                </div>
+        </div>
+        <div class="rc-max-width--xl rc-title">
+          <h2>热门搜索</h2>
+          <span class="rc-change" @click="userbatch">换一批</span>
+        </div>
+        <div class="rc-max-width--xl rc-variety">
+          <ul>
+            <li
+              v-for="(item, index) in searchdata"
+              :key="index"
+              @click="selectsearch(item, index)"
+              :class="activeIndexa == index ? 'active' : 'unactive'"
+            >
+              {{ item.title }}
+            </li>
+          </ul>
+        </div>
+        <div class="usersearch">
+          <div class="usercontentshow" ref="usercontent">
+            <div class="usercontentshow rc-product">
+              <h2>我想搜</h2>
+              <div class="rc-productcat ts-scrollable">
+                <ol>
+                  <li
+                    v-for="(item, index) in userproduct"
+                    :key="index"
+                    @click="selectGoods(item, index)"
+                    :class="activeIndex == index ? 'active' : 'unactive'"
+                    class="ts-standard-btn"
+                    ref="userstandard"
+                  >
+                    <img :src="item.catimage" alt="" />
+                    <span>{{ item.title }}</span>
+                  </li>
+                </ol>
+                <div class="rc-productcat userselect" @click="userselect">
+                  <img src="../../assets/image/rc-usericon.png" alt="" />
+                  <span @click="usershow()">筛选</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="ts-scrollable-container">
+              <h2>专区:</h2>
+              <ol class="ts-scrollable">
+                <li
+                  v-for="(item, index) in prefecture"
+                  :key="index"
+                  ref="chosebox"
+                  @click="selectproduct(item, index)"
+                  :class="item.checked ? 'active' : 'unactive'"
+                >
+                  {{ item.tagName }}
+                </li>
+              </ol>
+            </div>
+
+            <div class="ts-scrollable-container">
+              <h2>年龄:</h2>
+              <ol class="ts-scrollable">
+                <li
+                  v-for="(item, index) in catage"
+                  :key="index"
+                  @click="selectage(item, index)"
+                  :class="item.checked ? 'active' : 'unactive'"
+                  ref="chosebox1"
+                >
+                  {{ item.tagName }}
+                </li>
+              </ol>
+            </div>
           </div>
         </div>
       </div>
-
-      <div class="ts-scrollable-container">
-        <strong>专区:</strong>
-      	<ol class="ts-scrollable">
-						<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
-							{{ item.tagName }}
-						</li>
-					</ol>
-      </div>
-
-        <div class="ts-scrollable-container">
-        <strong>年龄:</strong>
-      		<ol class="ts-scrollable">
-						<li v-for="(item, index) in catage" :key="index"  @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
-							{{ item.tagName }}
-						</li>
-					</ol>
-      </div>
-</div>
-</div>
     </div>
-  </div>
-  	<div class="online"></div>
-  	<!-- rc-main start -->
-	<div class="rc-max-width--xl">
-		<div class="usersearch">
-			<div class="rc-contair">		
-				<ul class="ts-product-list">
-				    <li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md">
-								 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item)">
-									<div class="rc-rccontair">
-										<img :src=item.picture alt="">   
-									</div>
-								</div>
-								<div class="rc-column">
-									<div class="rc-click" @click="selectproduce(item)">
-										<span>{{item.categoryName}}</span>
-										<i>0.001{{item.price}}</i>
-									</div>
-									<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="userbuy()">立即购买</strong>
-								</div>
-				    </li>
-				</ul>
-			</div>
-			<div class="usershow" v-if="openshow">
-				<div class="rc-show"></div>
-			</div>
-		</div>
-    <div v-if="isadrond" class="useronshow">
-    <div class="rc-mubu" v-if="isshow" @click="usershow()">
-   </div>
-     <div class="rc-bottom rc-full-width" v-if="isshow">
-  <div class="usersearch">
-      <div class="usercontentshow rc-column" ref="usercontent">
-      <div class="usercontentshow rc-product">
-        <div class="rc-productcat ts-scrollable">
-             <ol>
-               <li v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" class="ts-standard-btn" ref="userstandard">
-                   <img :src="item.catimage" alt=""  />
-            <span>{{ item.title }}</span>
-               </li>
-
-             </ol>
+    <div class="online"></div>
+    <!-- rc-main start -->
+    <div class="rc-max-width--xl">
+      <div class="usersearch">
+        <div class="rc-contair">
+          <ul class="ts-product-list">
+            <li
+              v-for="(item, index) in rccontair"
+              :key="index"
+              class="rc-margin-top--md"
+            >
+              <div
+                class="rc-click rc-margin-bottom--md"
+                @click="selectproduce(item)"
+              >
+                <div class="rc-rccontair">
+                  <img :src="item.picture" alt="" />
+                </div>
+              </div>
+              <div class="rc-column">
+                <div class="rc-click" @click="selectproduce(item)">
+                  <span>{{ item.categoryName }}</span>
+                  <i>0.001{{ item.price }}</i>
+                </div>
+                <strong
+                  class="
+                    ts-standard-btn ts-standard-btn--two
+                    rc-margin-y--md
+                    center
+                  "
+                  @click="userbuy()"
+                  >立即购买</strong
+                >
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="usershow" v-if="openshow">
+          <div class="rc-show"></div>
         </div>
       </div>
+      <div v-if="isadrond" class="useronshow">
+        <div class="rc-mubu" v-if="isshow" @click="usershow()"></div>
+        <div class="rc-bottom rc-full-width" v-if="isshow">
+          <div class="usersearch">
+            <div class="usercontentshow rc-column" ref="usercontent">
+              <div class="usercontentshow rc-product">
+                <div class="rc-productcat ts-scrollable">
+                  <ol>
+                    <li
+                      v-for="(item, index) in userproduct"
+                      :key="index"
+                      @click="selectGoods(item, index)"
+                      :class="activeIndex == index ? 'active' : 'unactive'"
+                      class="ts-standard-btn"
+                      ref="userstandard"
+                    >
+                      <img :src="item.catimage" alt="" />
+                      <span>{{ item.title }}</span>
+                    </li>
+                  </ol>
+                </div>
+              </div>
 
-      <div class="ts-scrollable-container">
-        <strong>专区:</strong>
-      	<ol class="ts-scrollable">
-						<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
-							{{ item.tagName }}
-						</li>
-					</ol>
-      </div>
+              <div class="ts-scrollable-container">
+                <h2>专区:</h2>
+                <ol class="ts-scrollable">
+                  <li
+                    v-for="(item, index) in prefecture"
+                    :key="index"
+                      ref="chosebox"
+                    @click="selectproduct(item, index)"
+                    :class="item.checked ? 'active' : 'unactive'"
+                  >
+                    {{ item.tagName }}
+                  </li>
+                </ol>
+              </div>
 
-        <div class="ts-scrollable-container">
-        <strong>年龄:</strong>
-      		<ol class="ts-scrollable">
-						<li v-for="(item, index) in catage" :key="index"  @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
-							{{ item.tagName }}
-						</li>
-					</ol>
-      </div>
-          <div class="ts-scrollable-container">
-        <strong>功能:</strong>
-      		<ol class="ts-scrollable">
-						<li v-for="(item, index) in catagea" :key="index"  @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
-							{{ item.tagName }}
-						</li>
-					</ol>
-      </div>
-       <div class="ts-scrollable-container">
-        <strong>品种:</strong>
-      		<ol class="ts-scrollable">
-						<li v-for="(item, index) in catageb" :key="index"  @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
-							{{ item.tagName }}
-						</li>
-					</ol>
-      </div>
-</div>
-</div>
-  </div>
-  </div>
-    <el-dialog
-    :visible.sync="dialogInfo1"
-    hegight="700px"
-  
-    v-if="!isadrond"
-  >
-  <div class="usersearch">
-      <div class="usercontentshow" ref="usercontent">
-      <div class="usercontentshow rc-product">
-        <div class="rc-productcat ts-scrollable">
-             <ol>
-               <li v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" class="ts-standard-btn" ref="userstandard">
-                   <img :src="item.catimage" alt=""  />
-            <span>{{ item.title }}</span>
-               </li>
-             </ol>
+              <div class="ts-scrollable-container">
+                <h2>年龄:</h2>
+                <ol class="ts-scrollable">
+                  <li
+                    v-for="(item, index) in catage"
+                    :key="index"
+                    @click="selectage(item, index)"
+                    :class="item.checked ? 'active' : 'unactive'"
+                    ref="chosebox1"
+                  >
+                    {{ item.tagName }}
+                  </li>
+                </ol>
+              </div>
+              <div class="ts-scrollable-container">
+                <h2>功能:</h2>
+                <ol class="ts-scrollable">
+                  <li
+                    v-for="(item, index) in catagea"
+                    ref="cgosebox4"
+                    :key="index"
+                    @click="selectagc(item, index)"
+                   :class="item.checked ? 'active' : 'unactive'"
+                  >
+                    {{ item.tagName }}
+                  </li>
+                </ol>
+              </div>
+              <div class="ts-scrollable-container">
+                <h2>品种:</h2>
+                <ol class="ts-scrollable">
+                  <li
+                    v-for="(item, index) in catageb"
+                    :key="index"
+                    @click="selectagd(item, index)"
+                    :class="item.checked ? 'active' : 'unactive'"
+                    ref="chosebox3"
+                  >
+                    {{ item.tagName }}
+                  </li>
+                </ol>
+              </div>
+                 <div class="rc-button">
+          <span @click="openclose()">取消</span>
+          <em @click="openclose()">确认</em>
         </div>
+            </div>
+          </div>
+        </div>
+      
       </div>
-      <div class="ts-scrollable-container">
-        <strong>专区:</strong>
-      	<ol class="ts-scrollable">
-						<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
-							{{ item.tagName }}
-						</li>
-					</ol>
-      </div>
-
-        <div class="ts-scrollable-container">
-        <strong>年龄:</strong>
-      		<ol class="ts-scrollable">
-						<li v-for="(item, index) in catage" :key="index"  @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
-							{{ item.tagName }}
-						</li>
-					</ol>
-      </div>
-          <div class="ts-scrollable-container">
-        <strong>功能:</strong>
-      		<ol class="ts-scrollable">
-						<li v-for="(item, index) in catagea" :key="index"  @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
-							{{ item.tagName }}
-						</li>
-					</ol>
-      </div>
-       <div class="ts-scrollable-container">
-        <strong>品种:</strong>
-      		<ol class="ts-scrollable">
-						<li v-for="(item, index) in catageb" :key="index"  @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
-							{{ item.tagName }}
-						</li>
-					</ol>
-      </div>
-</div>
-</div>
-   <div class="rc-button">
-     <span @click="openclose()">取消</span>
-     <em>确认</em>
-   </div>
-  </el-dialog>
-
-
-	</div>
-  	<!-- rc-main end -->
-
-
+      <el-dialog :visible.sync="dialogInfo1" hegight="700px" v-if="!isadrond">
+        <div class="usersearch">
+          <div class="usercontentshow" ref="usercontent">
+            <div class="usercontentshow rc-product">
+              <div class="rc-productcat ts-scrollable">
+                <ol>
+                  <li
+                    v-for="(item, index) in userproduct"
+                    :key="index"
+                    @click="selectGoods(item, index)"
+                    :class="activeIndex == index ? 'active' : 'unactive'"
+                    class="ts-standard-btn"
+                    ref="userstandard"
+                  >
+                    <img :src="item.catimage" alt="" />
+                    <span>{{ item.title }}</span>
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <div class="ts-scrollable-container">
+              <h2>专区:</h2>
+              <ol class="ts-scrollable">
+                <li
+                  v-for="(item, index) in prefecture"
+                  :key="index"
+                  @click="selectproduct(item, index)"
+                  :class="item.checked ? 'active' : 'unactive'"
+                >
+                  {{ item.tagName }}
+                </li>
+              </ol>
+            </div>
 
+            <div class="ts-scrollable-container">
+              <h2>年龄:</h2>
+              <ol class="ts-scrollable">
+                <li
+                  v-for="(item, index) in catage"
+                  :key="index"
+                  @click="selectage(item, index)"
+                  :class="item.checked ? 'active' : 'unactive'"
+                  ref="chosebox1"
+                >
+                  {{ item.tagName }}
+                </li>
+              </ol>
+            </div>
+            <div class="ts-scrollable-container">
+              <h2>功能:</h2>
+              <ol class="ts-scrollable">
+                <li
+                  v-for="(item, index) in catagea"
+                  :key="index"
+                  ref="cgosebox4"
+                  @click="selectagc(item, index)"
+                  :class="item.checked ? 'active' : 'unactive'"
+                >
+                  {{ item.tagName }}
+                </li>
+              </ol>
+            </div>
+            <div class="ts-scrollable-container">
+              <h2>品种:</h2>
+              <ol class="ts-scrollable">
+                <li
+                  v-for="(item, index) in catageb"
+                  :key="index"
+                  @click="selectagd(item, index)"
+                  :class="item.checked ? 'active' : 'unactive'"
+                  ref="chosebox3"
+                >
+                  {{ item.tagName }}
+                </li>
+              </ol>
+            </div>
+          </div>
+        </div>
+        <div class="rc-button rc-padding-bottom--md">
+          <span @click="openclose()">取消</span>
+          <em @click="openclose()">确认</em>
+        </div>
+      </el-dialog>
+    </div>
+    <!-- rc-main end -->
   </div>
 </template>
 
 <script>
-import Myheader from '~/components/header.vue' 
- import { biaome,userstype,searchchanpin } from "../../ajax/getData";
+import Myheader from "~/components/header.vue";
+import { biaome, userstype, searchchanpin } from "../../ajax/getData";
 export default {
   data() {
     return {
       value: "",
-      userserachlist:[
-        {
+      isLoading: true,
 
-        }
-      ],
-      userstype:[],
-      activeIndex:0,
-      activeIndex1:0,
-      activeIndexa:0,
-      dialogInfo1:false,
-      activeIndexb:'-1',
-       activeIndexc:'-1',
-       activeIndexd:'-1',
-       activeIndexe:'-1',
-       activeIndexf:'-1',
-       isadrond:true,
-       isshow:false,
-       openshow:false,
-       direction:'btt',
+      userserachlist: [{
+         categoryName:'', //专区
+              tagUsedAge:'',//年龄
+              tagFunction:'',//功能
+              tagBreed:'', //品种
+
+      }],
+      userstype: [],
+      activeIndex: "-1",
+      activeIndex1: 0,
+      activeIndexa: "-1",
+      // userpeolist:[
+      //   {
+      //        categoryName:'', //专区
+      //         tagUsedAge:'',//年龄
+      //         tagFunction:'',//功能
+      //         tagBreed:'', //品种
+      // }
+      // ],
+      allsearch: false,
+      dialogInfo1: false,
+      activeIndexb: "-1",
+      activeIndexc: "-1",
+      activeIndexd: "-1",
+      activeIndexe: "-1",
+      activeIndexf: "-1",
+      isadrond: true,
+      isshow: false,
+      openshow: false,
+      direction: "btt",
       searchdata: [
         {
           title: "猫罐头",
@@ -278,7 +389,7 @@ export default {
         },
       ],
 
-            catproduct: [
+      catproduct: [
         {
           title: "猫产品",
           ordernum: "1",
@@ -332,7 +443,7 @@ export default {
           ordernum: "4",
         },
       ],
-          catagea: [
+      catagea: [
         {
           title: "绝育呵护",
           ordernum: "1",
@@ -350,7 +461,7 @@ export default {
           ordernum: "4",
         },
       ],
-          catageb: [
+      catageb: [
         {
           title: "英短",
           ordernum: "1",
@@ -369,10 +480,10 @@ export default {
         },
       ],
 
-            rccontair: [
+      rccontair: [
         {
           title: "皇家英国短毛猫全价湿粮",
-          price:'￥123.45',
+          price: "￥123.45",
           ordernum: 1,
 
           catimage: require("../../assets/image/rc-cat.png"),
@@ -380,104 +491,164 @@ export default {
 
         {
           title: "皇家英国短毛猫全价湿粮",
-           price:'￥123.45',
+          price: "￥123.45",
           ordernum: "2",
           catimage: require("../../assets/image/rc-dog.png"),
         },
-           {
+        {
           title: "皇家英国短毛猫全价湿粮",
-           price:'￥123.45',
+          price: "￥123.45",
           ordernum: "2",
           catimage: require("../../assets/image/rc-dog.png"),
         },
-            {
+        {
           title: "皇家英国短毛猫全价湿粮",
-           price:'￥123.45',
+          price: "￥123.45",
           ordernum: "2",
           catimage: require("../../assets/image/rc-dog.png"),
         },
-             {
+        {
           title: "皇家英国短毛猫全价湿粮",
-           price:'￥123.45',
+          price: "￥123.45",
           ordernum: "2",
           catimage: require("../../assets/image/rc-dog.png"),
         },
       ],
-         usercatlist:[],
-         userdoglisgt:[], 
+      usercatlist: [],
+      userdoglisgt: [],
     };
   },
-    components: {
+  components: {
     Myheader,
   },
-  mounted(){
-this.usetmessage();
-this.userst();
+  mounted() {
+    this.usetmessage();
+    this.userst();
   },
   methods: {
+    //换一批
+    userbatch() {
+      this.allsearch = !this.allsearch;
+      if (this.allsearch == false) {
+        this.searchdata = [
+          {
+            title: "法国斗牛犬",
+            ordernum: "7",
+          },
+          {
+            title: "老年",
+            ordernum: "8",
+          },
+          {
+            title: "布偶",
+            ordernum: "9",
+          },
+          {
+            title: "柴犬",
+            ordernum: "10",
+          },
+        ];
+        this.activeIndexa = 0;
+      } else {
+        this.searchdata = [
+          {
+            title: "猫罐头",
+            ordernum: "1",
+          },
 
-      async usersearch(stype){
-       let data=await searchchanpin(stype);
-       console.log(data);
-       if(data){
-       this.rccontair=data;
+          {
+            title: "犬罐头",
+            ordernum: "2",
+          },
+          {
+            title: "布偶猫",
+            ordernum: "3",
+          },
+          {
+            title: "博美犬",
+            ordernum: "4",
+          },
+        ];
+        this.activeIndexa = 0;
+      }
+    },
 
-       }
-      },
-          async userst() {
-            let pinzhong=[];
-            let zhuanqu=[];
-            let age=[];
-            let gonneg=[];
+    async usersearch(stype,usertype) {
+      let data = await searchchanpin(stype,usertype,1,10);
+      if (data) {
+        this.rccontair = data;
+      }
+    },
+    async userst() {
+      this.isLoading = true;
+      let pinzhong = [];
+      let zhuanqu = [];
+      let age = [];
+      let gonneg = [];
       let data = await userstype();
-      if(data){
-        this.userstype=data;
+      if (data) {
+        this.userstype = data;
+        this.isLoading = false;
       }
-          this.usercatlist=this.userstype.filter(item=>item.petType=='0')
-                       this.usercatlist.map(element=>{
-               if(element.name=='品种'){
-                 pinzhong.push(element);
-                 this.catageb=pinzhong
-               }
-                 if(element.name=='功能'){
-                 gonneg.push(element);
-                 this.catagea=gonneg
-               }
-                 if(element.name=='年龄'){
-                 age.push(element);
-                 this.catage=age
-               }
-                 if(element.name=='专区'){
-                 zhuanqu.push(element);
-                 this.prefecture=gonneg
-               }
-           })
-       
-             this.userdoglisgt=this.userstype.filter(item=>item.petType=='1')
+      this.usercatlist = this.userstype.filter((item) => item.petType == "0");
+      this.usercatlist.map((element) => {
+        if (element.name == "品种") {
+          pinzhong.push(element);
+          this.catageb = pinzhong;
+               this.catageb.forEach((element) => {
+              element.checked = false;
+            });
+        }
+        if (element.name == "功能") {
+          gonneg.push(element);
+          this.catagea = gonneg;
+               this.catagea.forEach((element) => {
+              element.checked = false;
+            });
+        }
+        if (element.name == "年龄") {
+          age.push(element);
+          this.catage = age;
+             this.catage.forEach((element) => {
+              element.checked = false;
+            });
+        }
+        if (element.name == "专区") {
+          zhuanqu.push(element);
+          this.prefecture = zhuanqu;
+             this.prefecture.forEach((element) => {
+              element.checked = false;
+            });
+        }
+      });
 
+      this.userdoglisgt = this.userstype.filter((item) => item.petType == "1");
     },
 
-           async usetmessage() {
-             this.$nextTick(() => {
-   this.$refs.userstandard[0].style.margin=0 + 'px'
-})
-            
-      let data = await biaome(this.value,10);
-      if(data){
-        this.rccontair=data;
+    async usetmessage() {
+      this.isLoading = true;
+      this.$nextTick(() => {
+        this.$refs.userstandard[0].style.margin = 0 + "px";
+      });
+      let data = await biaome(this.activeIndex1,this.value, 1, 10);
+      if (data) {
+        this.rccontair = data;
+        this.isLoading = false;
       }
-      console.log( this.rccontair);
+      this.userproduct.forEach((element) => {
+        element.checked = false;
+      });
     },
-       selectproduce(item){
-                    this.$router.push({
+    selectproduce(item) {
+      this.$router.push({
         path: "/productdetails/producted",
         query: {
           stype: 1,
-          productCode:item.productList[0].productCode
+          productCode: item.productList[0].productCode,
         },
       });
     },
-    userbuy(){
+    userbuy() {
       this.$router.push({
         path: "/myorder/userrecord",
         query: {
@@ -485,262 +656,308 @@ this.userst();
         },
       });
     },
-    openclose(){
-this.dialogInfo1=false;
+    openclose() {
+      this.dialogInfo1 = false;
+      this.isshow=false
     },
-          ifadroind(){
-    var sUserAgent = navigator.userAgent.toLowerCase();
-    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
-    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
-    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
-    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
-    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
-    var bIsAndroid = sUserAgent.match(/android/i) == "android";
-    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("当前是电脑打开")
-       this.$nextTick(() => {
-    
-        this.isadrond=false;
-         this.dialogInfo1=true;
-          this.isadrond=false;
-            this.isshow=false;
-      
-        })
-      
-        
-    }else{
-        console.log("当前是手机打开")
-           this.$nextTick(() => {
-    
-        this.isadrond=true;
-        this.isshow=true;
-          //  this.$refs.usercontent.style.display='none  ';
-    this.dialogInfo1=false;
-      
-        })
+    ifadroind() {
+      var sUserAgent = navigator.userAgent.toLowerCase();
+      var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
+      var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
+      var bIsMidp = sUserAgent.match(/midp/i) == "midp";
+      var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
+      var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
+      var bIsAndroid = sUserAgent.match(/android/i) == "android";
+      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("当前是电脑打开");
+        this.$nextTick(() => {
+          this.isadrond = false;
+          this.dialogInfo1 = true;
+          this.isadrond = false;
+          this.isshow = false;
+        });
+      } else {
+        console.log("当前是手机打开");
+        this.$nextTick(() => {
+          this.isadrond = true;
+          this.isshow = true;
+          //  this.$refs.usercontent.style.display='none  ';
+          this.dialogInfo1 = false;
+        });
+      }
+    },
     //搜索
     onSearch(e) {
-   this.usetmessage(this.value);
-  console.log(e);
+      this.usetmessage(this.activeIndex1,this.value,);
     },
-       selectGoods(item, index) {
-            this.activeIndex1=index;
-            let petType={
-          petType:this.activeIndex1,    
-           }
-                for(let i =0;i<this.userserachlist.length;i++){
-                if(!this.userserachlist.includes(petType)){
-                  this.userserachlist.push(petType)
-                }
-                console.log(this.userserachlist);
-             }
-              this.usersearch(this.userserachlist)
-         console.log(index);
-          let pinzhong=[];
-            let zhuanqu=[];
-            let age=[];
-            let gonneg=[];
-             if(this.activeIndex1==0){
-                  this.usercatlist.map(element=>{
-               if(element.name=='品种'){
-                 pinzhong.push(element);
-                 this.catageb=pinzhong
-               }
-                 if(element.name=='功能'){
-                 gonneg.push(element);
-                 this.catagea=gonneg
-               }
-                 if(element.name=='年龄'){
-                 age.push(element);
-                 this.catage=age
-               }
-                 if(element.name=='专区'){
-                 zhuanqu.push(element);
-                 this.prefecture=gonneg
-               }
-           })
-           console.log(pinzhong);
-      
-
-             }else if(this.activeIndex1==1){
-                             this.userdoglisgt.map(element=>{
-               if(element.name=='品种'){
-                 pinzhong.push(element);
-                 this.catageb=pinzhong
-               }
-                 if(element.name=='功能'){
-                 gonneg.push(element);
-                 this.catagea=gonneg
-               }
-                 if(element.name=='年龄'){
-                 age.push(element);
-                 this.catage=age
-               }
-                 if(element.name=='专区'){
-                 zhuanqu.push(element);
-                 this.prefecture=gonneg
-               }
-           })
-             }
-             console.log(index);
-             console.log('----');
-
-
-             this.activeIndex=index;
-             console.log('----');
-    },
-     selectGoodsa(item, index) {
-           let pinzhong=[];
-            let zhuanqu=[];
-            let age=[];
-            let gonneg=[];
-             this.activeIndex1=index;
-             if(this.activeIndex1==0){
-                  this.usercatlist.map(element=>{
-               if(element.name=='品种'){
-                 pinzhong.push(element);
-                 this.catageb=pinzhong
-               }
-                 if(element.name=='功能'){
-                 gonneg.push(element);
-                 this.catagea=gonneg
-               }
-                 if(element.name=='年龄'){
-                 age.push(element);
-                 this.catage=age
-               }
-                 if(element.name=='专区'){
-                 zhuanqu.push(element);
-                 this.prefecture=gonneg
-               }
-           })
-           console.log(pinzhong);
-
-
-             }else if(this.activeIndex1==1){
-                             this.userdoglisgt.map(element=>{
-               if(element.name=='品种'){
-                 pinzhong.push(element);
-                 this.catageb=pinzhong
-               }
-                 if(element.name=='功能'){
-                 gonneg.push(element);
-                 this.catagea=gonneg
-               }
-                 if(element.name=='年龄'){
-                 age.push(element);
-                 this.catage=age
-               }
-                 if(element.name=='专区'){
-                 zhuanqu.push(element);
-                 this.prefecture=gonneg
-               }
-           })
-             }
-             console.log(index);
-             console.log('----');
-    },
-    userselect(){
-    this.$nextTick(() => {
-    
-       this.ifadroind();
-      console.log( this.$refs.usercontent)
-      
-        })
-    },
-    usershow(){
-        this.$nextTick(() => {
-      this.isshow=false;
-            // dom元素更新后执行，因此这里能正确打印更改之后的值
-            // this.$refs.usercontent.style.display='block  ';
-        })
-    },
-
-       selectsearch(item, index) {
-           console.log(item)
-                 this.value=item.title;
-             this.activeIndexa=index;
-    },
-        selectage(item, index) {
-           console.log(item)
-           let tagUsedAge={
-          petType:this.activeIndex1,    
-             tagUsedAge:item.tagName
-
-           }
-       for(let i =0;i<this.userserachlist.length;i++){
-                if(!this.userserachlist.includes(tagUsedAge)){
-                  this.userserachlist.push(tagUsedAge)
-                }
-                console.log(this.userserachlist);
-             }
-              this.usersearch(this.userserachlist)
-             this.activeIndexc=index;
-    },
-        selectagc(item, index) {
-           console.log(item)
-  let tagFunction={
-     petType:this.activeIndex1,   
-             tagFunction:item.tagName
-           }
-               for(let i =0;i<this.userserachlist.length;i++){
-                if(!this.userserachlist.includes(tagFunction)){
-                  this.userserachlist.push(tagFunction)
-                }
-                console.log(this.userserachlist);
-             }
-              this.usersearch(this.userserachlist)
-            this.activeIndexd=index;
-    },
-        selectagd(item, index) {
-           console.log(item)
-  let tagBreed={
-     petType:this.activeIndex1,   
-             tagBreed:item.tagName
-           }
-            for(let i =0;i<this.userserachlist.length;i++){
-                if(!this.userserachlist.includes(tagBreed)){
-                  this.userserachlist.push(tagBreed)
-                }
-                console.log(this.userserachlist);
-             }
-              this.usersearch(this.userserachlist)
-             this.activeIndexe=index;
-    },
-    selectproduct(item, index){
-           console.log(item)
-          this.activeIndexb=index;
-             let categoryName={
-                petType:this.activeIndex1,   
-            categoryName:item.tagName,
-             }
-             for(let i =0;i<this.userserachlist.length;i++){
-                if(!this.userserachlist.includes(categoryName)){
-                  this.userserachlist.push(categoryName)
-                }
-                console.log(this.userserachlist);
-             }
-
-             this.usersearch(this.userserachlist)
+    selectGoods(item, index) {
+      this.activeIndex1 = index;
+      this.usersearch(this.userserachlist,this.activeIndex1);
+      let pinzhong = [];
+      let zhuanqu = [];
+      let age = [];
+      let gonneg = [];
+      if (this.activeIndex1 == 0) {
+        this.usercatlist.map((element) => {
+          if (element.name == "品种") {
+            pinzhong.push(element);
           
+            this.catageb = pinzhong;
+            
+          }
+          if (element.name == "功能") {
+            gonneg.push(element);
+            this.catagea = gonneg;
+         
+          }
+          if (element.name == "年龄") {
+            age.push(element);
+            this.catage = age;
+          
+          }
+          if (element.name == "专区") {
+            zhuanqu.push(element);
+            this.prefecture = zhuanqu;
+          
+          }
+        });
+      } else if (this.activeIndex1 == 1) {
+        this.userdoglisgt.map((element) => {
+          if (element.name == "品种") {
+            pinzhong.push(element);
+            this.catageb = pinzhong;
+                this.catageb.forEach((element) => {
+              element.checked = false;
+            });
+      
+          }
+          if (element.name == "功能") {
+            gonneg.push(element);
+            this.catagea = gonneg;
+             this.catagea.forEach((element) => {
+              element.checked = false;
+            });
+      
+          }
+          if (element.name == "年龄") { 
+            age.push(element);
+            this.catage = age;
+              this.catage.forEach((element) => {
+              element.checked = false;
+            });
+        
+          }
+          if (element.name == "专区") {
+            zhuanqu.push(element);
+            this.prefecture = zhuanqu;
+               this.prefecture.forEach((element) => {
+              element.checked = false;
+            });
+        
+          }
+        });
+      }
+
+      this.activeIndex = index;
     },
-    //        selectage(item, index) {
-    //          this.activeIndexc=index;
-    // },
-    //        selectage(item, index) {
-    //          this.activeIndexc=index;
-    // },
+    selectGoodsa(item, index) {
+      let pinzhong = [];
+      let zhuanqu = [];
+      let age = [];
+      let gonneg = [];
+      this.activeIndex1 = index;
+      if (this.activeIndex1 == 0) {
+        this.usercatlist.map((element) => {
+          if (element.name == "品种") {
+            pinzhong.push(element);
+            this.catageb = pinzhong;
+          }
+          if (element.name == "功能") {
+            gonneg.push(element);
+            this.catagea = gonneg;
+          }
+          if (element.name == "年龄") {
+            age.push(element);
+            this.catage = age;
+          }
+          if (element.name == "专区") {
+            zhuanqu.push(element);
+            this.prefecture = gonneg;
+          }
+        });
+      } else if (this.activeIndex1 == 1) {
+        this.userdoglisgt.map((element) => {
+          if (element.name == "品种") {
+            pinzhong.push(element);
+            this.catageb = pinzhong;
+          }
+          if (element.name == "功能") {
+            gonneg.push(element);
+            this.catagea = gonneg;
+          }
+          if (element.name == "年龄") {
+            age.push(element);
+            this.catage = age;
+          }
+          if (element.name == "专区") {
+            zhuanqu.push(element);
+            this.prefecture = gonneg;
+          }
+        });
+      }
+    },
+    userselect() {
+      this.$nextTick(() => {
+        this.ifadroind();
+      });
+    },
+    usershow() {
+      this.$nextTick(() => {
+        this.isshow = false;
+        // dom元素更新后执行，因此这里能正确打印更改之后的值
+        // this.$refs.usercontent.style.display='block  ';
+      });
+    },
+
+    selectsearch(item, index) {
+      this.value = item.title;
+      this.activeIndexa = index;
+      this.usetmessage(item.title);
+    },
+    selectage(item, index) {
+      // debugger;
+      // this.userishwo1 = !this.userishwo1;
+      let tagUsedAge = {};
+      // this.userishwo1 = !this.userishwo1;
+      if (item.checked == false) {
+        item.checked = true;
+        this.userserachlist[0].tagUsedAge=item.tagName;
+        this.$refs.chosebox1[index].className = "active";
+      } else {
+        this.userserachlist[0].tagUsedAge='';
+        item.checked = false;
+        this.$refs.chosebox1[index].className = "unactive";
+      }
+      // if (this.userishwo1 == false) {
+      //   tagUsedAge = {
+      //     petType: this.activeIndex1,
+      //     tagUsedAge: item.tagName,
+      //   };
+      // } else {
+      //   tagUsedAge = {
+      //     petType: this.activeIndex1,
+      //   };
+      // }
+      // for (let i = 0; i < this.userserachlist.length; i++) {
+      //   if (!this.userserachlist.includes(tagUsedAge)) {
+      //     this.userserachlist.push(tagUsedAge);
+      //   }
+      // }
+      this.usersearch(this.userserachlist,this.activeIndex1);
+      this.activeIndexc = index;
+    },
+    selectagc(item, index) {
+      // let tagFunction = {
+      //   petType: this.activeIndex1,
+      //   tagFunction: item.tagName,
+      // };
+            if (item.checked == false) {
+        item.checked = true;
+        this.$refs.cgosebox4[index].className = "active";
+         this.userserachlist[0].tagFunction=item.tagName;
+      } else {
+        item.checked = false;
+        this.$refs.cgosebox4[index].className = "unactive";
+         this.userserachlist[0].tagFunction='';
+      }
+
+      // for (let i = 0; i < this.userserachlist.length; i++) {
+      //   if (!this.userserachlist.includes(tagFunction)) {
+      //     this.userserachlist.push(tagFunction);
+      //   }
+      // }
+      this.usersearch(this.userserachlist,this.activeIndex1);
+      this.activeIndexd = index;
+    },
+    selectagd(item, index) {
+      let tagBreed = {};
+      if (item.checked == false) {
+        item.checked = true;
+        this.$refs.chosebox3[index].className = "active";
+         this.userserachlist[0].tagBreed=item.tagName;
+      } else {
+        item.checked = false;
+        this.$refs.chosebox3[index].className = "unactive";
+         this.userserachlist[0].tagBreed='';
+      }
+      // if (this.userishwo3 == false) {
+      //   tagBreed = {
+      //     petType: this.activeIndex1,
+      //     tagBreed: item.tagName,
+      //   };
+      // } else {
+      //   tagBreed = {
+      //     petType: this.activeIndex1,
+      //   };
+      // }
+      // for (let i = 0; i < this.userserachlist.length; i++) {
+      //   if (!this.userserachlist.includes(tagBreed)) {
+      //     this.userserachlist.push(tagBreed);
+      //   }
+      // }
+      this.usersearch(this.userserachlist,this.activeIndex1);
+      this.activeIndexe = index;
+    },
+    selectproduct(item, index) {
+      this.activeIndexb = index;
+      if (item.checked == false) {
+        item.checked = true;
+        this.$refs.chosebox[index].className = "active";
+        this.userserachlist[0].categoryName=item.tagName;
+      } else {
+        item.checked = false;
+        this.$refs.chosebox[index].className = "unactive";
+         this.userserachlist[0].categoryName='';
+     
+       }
+      // this.userishwo = !this.userishwo;
+      // if (this.userishwo == false) {
+      //   categoryName = {
+      //     petType: this.activeIndex1,
+      //     categoryName: item.tagName,
+      //   };
+      // } else {
+      //   categoryName = {
+      //     petType: this.activeIndex1,
+      //   };
+      // }
+      console.log(this.userserachlist[0].categoryName);
+      // for (let i = 0; i < this.userserachlist.length; i++) {
+      //   if (!this.userserachlist.includes(categoryName)) {
+      //     this.userserachlist.push(categoryName);
+      //   }
+      //   console.log(this.userserachlist);
+      // }
+
+      this.usersearch(this.userserachlist,this.activeIndex1);
+    },
+
     //弹框的显示隐藏
   },
-    
-
 };
 </script>