提交产品以及搜索

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

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;

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%;
+	}
+	}
+	
 }

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%;
+    width: 4.31rem;
-    text-align: center;
+  height: 2rem;
-    font-size:1.25rem ;
+  background: #e1001a;
-    color: #666666;
+  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;
   }
 
 

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'"
+                :class="item.checked ? 'active' : 'unactive'"
-                ref="chosebox2"
+                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) {
+    async usersearch(stype,usertype) {
-      let data = await searchchanpin(stype);
+      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
+      this.allacindex=index;
-      console;
+   this.usersearch(this.userserachlist,this.activeIndex1);
-      let petType = {
+
-        petType: this.allacindex,
+
-      };
+      // for (let i = 0; i < this.userserachlist.length; i++) {
-      for (let i = 0; i < this.userserachlist.length; i++) {
+      //   if (!this.userserachlist.includes(petType)) {
-        if (!this.userserachlist.includes(petType)) {
+      //     this.userserachlist.push(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) {
+          if(item.checked==false){
-        tagUsedAge = {
+      item.checked = true;
-          petType: this.allacindex,
+        this.userserachlist[0].tagUsedAge=item.tagName;
-          tagUsedAge: item.tagName,
+        this.$refs.chosebox1[index].className = "active";
-        };
+      }else{
-      } else {
+      this.userserachlist[0].tagUsedAge='';
-        console.log("这是false");
+        item.checked = false;
-        tagUsedAge = {
+        this.$refs.chosebox1[index].className = "unactive";
-          petType: this.allacindex,
-        };
       }
-      this.$refs.chosebox1[index].className = "unactive";
+   
-      for (let i = 0; i < this.userserachlist.length; i++) {
+      // for (let i = 0; i < this.userserachlist.length; i++) {
-        if (!this.userserachlist.includes(tagUsedAge)) {
+      //   if (!this.userserachlist.includes(tagUsedAge)) {
-          this.userserachlist.push(tagUsedAge);
+      //     this.userserachlist.push(tagUsedAge);
-        }
+      //   }
-      }
+      // }
-      this.usersearch(this.userserachlist);
+      this.usersearch(this.userserachlist,this.activeIndex1);
     },
     selectagc(item, index) {
-      let tagFunction = {};
+      // let tagFunction = {};
       this.activeIndexd = index;
       this.userishwo2 = !this.userishwo2;
-      if (this.userishwo2 == false) {
+            if(item.checked==false){
-        tagFunction = {
+        item.checked = true;
-          petType: this.allacindex,
+        this.$refs.cgosebox4[index].className = "active";
-          tagFunction: item.tagName,
+         this.userserachlist[0].tagFunction=item.tagName;
-        };
+      }else{
-      } else {
+      item.checked = false;
-        console.log("这是false");
+        this.$refs.cgosebox4[index].className = "unactive";
-        tagFunction = {
+         this.userserachlist[0].tagFunction='';
-          petType: this.allacindex,
-        };
       }
-      this.$refs.chosebox2[index].className = "unactive";
+      // if (this.userishwo2 == false) {
-
+      //   tagFunction = {
-      for (let i = 0; i < this.userserachlist.length; i++) {
+      //     petType: this.allacindex,
-        if (!this.userserachlist.includes(tagFunction)) {
+      //     tagFunction: item.tagName,
-          this.userserachlist.push(tagFunction);
+      //   };
-        }
+      // } else {
-      }
+      //   console.log("这是false");
-      this.usersearch(this.userserachlist);
+      //   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) {
+         if(item.checked==false){
-        tagBreed = {
+        item.checked = true;
-          petType: this.allacindex,
+        this.$refs.chosebox3[index].className = "active";
-          tagBreed: item.tagName,
+         this.userserachlist[0].tagBreed=item.tagName;
-        };
+      }else{
-      } else {
+        item.checked = false;
-        console.log("这是false");
+        this.$refs.chosebox3[index].className = "unactive";
-        tagBreed = {
+         this.userserachlist[0].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);
-        }
       }
 
-      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);
     },
 
     //弹框的显示隐藏