更改产品列表

rc-busness/pages/productdetails/productlist.vue

@@ -7,7 +7,13 @@
         <div class="usercontentshow" ref="usercontent">
           <div class="rc-product ts-scrollable-container">
             <div class="rc-productcat ts-scrollable">
-						<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" >
+              <div
+                class="rc-cat"
+                v-for="(item, index) in userproduct"
+                :key="index"
+                @click="selectGoods(item, index)"
+                :class="activeIndex == index ? 'active' : 'unactive'"
+              >
                 <img :src="item.catimage" alt="" />
                 <span>{{ item.title }}</span>
               </div>
@@ -17,7 +23,13 @@
           <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="activeIndexb == index ? 'active' : 'unactive'" >
+              <li
+                v-for="(item, index) in prefecture"
+                :key="index"
+                @click="selectproduct(item, index)"
+                :class="activeIndexb == index ? 'active' : 'unactive'"
+                ref="chosebox"
+              >
                 {{ item.tagName }}
               </li>
             </ol>
@@ -26,7 +38,13 @@
           <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="activeIndexc == index ? 'active' : 'unactive'">
+              <li
+                v-for="(item, index) in catage"
+                :key="index"
+                @click="selectage(item, index)"
+                :class="activeIndexc == index ? 'active' : 'unactive'"
+                ref="chosebox1"
+              >
                 {{ item.tagName }}
               </li>
             </ol>
@@ -35,7 +53,13 @@
           <div class="ts-scrollable-container">
             <h2>功能:</h2>
             <ol class="ts-scrollable">
-						<li v-for="(item, index) in catagea" :key="index"  @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
+              <li
+                v-for="(item, index) in catagea"
+                :key="index"
+                @click="selectagc(item, index)"
+                :class="activeIndexd == index ? 'active' : 'unactive'"
+                ref="chosebox2"
+              >
                 {{ item.tagName }}
               </li>
             </ol>
@@ -44,7 +68,13 @@
           <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="activeIndexe == index ? 'active' : 'unactive'">
+              <li
+                v-for="(item, index) in catageb"
+                :key="index"
+                @click="selectagd(item, index)"
+                :class="activeIndexe == index ? 'active' : 'unactive'"
+                ref="chosebox3"
+              >
                 {{ item.tagName }}
               </li>
             </ol>
@@ -54,16 +84,23 @@
       </div>
     </div>
     <!-- rc-main end -->
-	<div class="online bold" style="margin-top:127px"></div>
+    <div class="online bold"></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">
+            <li
-								 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item)">
+              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="">   
+                  <img :src="item.picture" alt="" />
                 </div>
               </div>
               <div class="rc-column">
@@ -71,7 +108,15 @@
                   <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>
+                <strong
+                  class="
+                    ts-standard-btn ts-standard-btn--two
+                    rc-margin-y--md
+                    center
+                  "
+                  @click="userbuy()"
+                  >立即购买</strong
+                >
               </div>
             </li>
           </ul>
@@ -83,22 +128,32 @@
     </div>
     <!-- rc-main end -->
 
-	
     <div v-if="isadrond">
       <div class="rc-mubu" v-if="isshow" @click="usershow()"></div>
       <div class="rc-bottom" v-if="isshow">
         <div class="rc-bottoma">
           <div class="rc-productcat ts-scrollable">
-          <div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoodsa(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" >
+            <div
+              class="rc-cat"
+              v-for="(item, index) in userproduct"
+              :key="index"
+              @click="selectGoodsa(item, index)"
+              :class="activeIndex1 == index ? 'active' : 'unactive'"
+            >
               <img :src="item.catimage" alt="" />
               <span>{{ item.tagName }}</span>
             </div>
-       
           </div>
           <div class="rc-prefecture">
             <h2>专区:</h2>
             <ol class="ts-scrollable">
-          <li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
+              <li
+                v-for="(item, index) in prefecture"
+                :key="index"
+                @click="selectproduct(item, index)"
+                :class="activeIndexb == index ? 'active' : 'unactive'"
+                ref="chosebox"
+              >
                 {{ item.tagName }}
               </li>
             </ol>
@@ -107,7 +162,13 @@
           <div class="ts-scrollable-container rc-margin-y--md">
             <h2>年龄:</h2>
             <ol class="ts-scrollable">
-          <li v-for="(item, index) in catage" :key="index"  @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
+              <li
+                v-for="(item, index) in catage"
+                :key="index"
+                @click="selectage(item, index)"
+                :class="activeIndexc == index ? 'active' : 'unactive'"
+                ref="chosebox1"
+              >
                 {{ item.tagName }}
               </li>
             </ol>
@@ -115,7 +176,13 @@
           <div class="ts-scrollable-container rc-margin-y--md">
             <h2>功能:</h2>
             <ol class="ts-scrollable">
-          <li v-for="(item, index) in catagea" :key="index"  @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
+              <li
+                v-for="(item, index) in catagea"
+                :key="index"
+                @click="selectagc(item, index)"
+                :class="activeIndexd == index ? 'active' : 'unactive'"
+                ref="chosebox2"
+              >
                 {{ item.tagName }}
               </li>
             </ol>
@@ -124,41 +191,50 @@
           <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="activeIndexe == index ? 'active' : 'unactive'">
+              <li
+                v-for="(item, index) in catageb"
+                :key="index"
+                @click="selectagd(item, index)"
+                :class="activeIndexe == index ? 'active' : 'unactive'"
+                ref="chosebox3"
+              >
                 {{ item.tagName }}
               </li>
             </ol>
           </div>
         </div>
         <div class="rc-footer">
-
           <span @click="usershow()">取消</span>
           <em @click="usershow()">确定</em>
         </div>
-
       </div>
     </div>
 
-    <el-dialog
+    <el-dialog :visible.sync="dialogInfo1" hegight="700px" v-if="!isadrond">
-    :visible.sync="dialogInfo1"
-    hegight="700px"
-  
-    v-if="!isadrond"
-  >
-      
       <div class="rc-bottom">
         <div class="rc-bottoma">
           <div class="rc-productcat ts-scrollable">
-          <div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoodsa(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" >
+            <div
+              class="rc-cat"
+              v-for="(item, index) in userproduct"
+              :key="index"
+              @click="selectGoodsa(item, index)"
+              :class="activeIndex1 == index ? 'active' : 'unactive'"
+            >
               <img :src="item.name" alt="" />
               <span>{{ item.title }}</span>
             </div>
-       
           </div>
           <div class="rc-prefecture">
             <h2>专区:</h2>
             <ol>
-          <li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
+              <li
+                v-for="(item, index) in prefecture"
+                :key="index"
+                @click="selectproduct(item, index)"
+                :class="activeIndexb == index ? 'active' : 'unactive'"
+                ref="chosebox"
+              >
                 {{ item.tagName }}
               </li>
             </ol>
@@ -167,7 +243,13 @@
           <div class="ts-scrollable-container rc-margin-y--md">
             <h2>年龄:</h2>
             <ol>
-          <li v-for="(item, index) in catage" :key="index"  @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
+              <li
+                v-for="(item, index) in catage"
+                :key="index"
+                @click="selectage(item, index)"
+                :class="activeIndexc == index ? 'active' : 'unactive'"
+                ref="chosebox1"
+              >
                 {{ item.tagName }}
               </li>
             </ol>
@@ -175,7 +257,13 @@
           <div class="ts-scrollable-container rc-margin-y--md">
             <h2>功能:</h2>
             <ol>
-          <li v-for="(item, index) in catagea" :key="index"  @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
+              <li
+                v-for="(item, index) in catagea"
+                :key="index"
+                @click="selectagc(item, index)"
+                :class="activeIndexd == index ? 'active' : 'unactive'"
+                ref="chosebox2"
+              >
                 {{ item.tagName }}
               </li>
             </ol>
@@ -184,7 +272,13 @@
           <div class="ts-scrollable-container">
             <h2>品种:</h2>
             <ol>
-          <li v-for="(item, index) in catageb" :key="index"  @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
+              <li
+                v-for="(item, index) in catageb"
+                :key="index"
+                @click="selectagd(item, index)"
+                :class="activeIndexe == index ? 'active' : 'unactive'"
+                ref="chosebox3"
+              >
                 {{ item.tagName }}
               </li>
             </ol>
@@ -201,29 +295,38 @@
 </template>
 
 <script>
-import Myheader from '~/components/header.vue' 
+import Myheader from "~/components/header.vue";
-  import { userstype,biaomessa,biaomessage,searchchanpin } from "../../ajax/getData";
+import $ from "jquery";
+import {
+  userstype,
+  biaomessa,
+  biaomessage,
+  searchchanpin,
+} from "../../ajax/getData";
 export default {
   data() {
     return {
       value: "",
       userstype: [],
-      activeIndex:0,
+      activeIndex: "0",
-      userserachlist:[
+      allacindex:0,
-        {}
+      userishwo: true,
-      ],
+      userishwo1: true,
+      userishwo2: true,
+      userishwo3: true,
+      userserachlist: [{}],
       activeIndex1: 0,
-      activeIndexa:'-1',
+      activeIndexa: "-1",
       dialogInfo1: false,
-      activeIndexb:'-1',
+      activeIndexb: "-1",
-       activeIndexc:'-1',
+      activeIndexc: "-1",
-       activeIndexd:'-1',
+      activeIndexd: "-1",
-       activeIndexe:'-1',
+      activeIndexe: "-1",
-       activeIndexf:'-1',
+      activeIndexf: "-1",
       isadrond: true,
       isshow: false,
       openshow: false,
-       direction:'btt',
+      direction: "btt",
       searchdata: [
         {
           title: "猫罐头",
@@ -352,7 +455,7 @@ export default {
       rccontair: [
         {
           title: "皇家英国短毛猫全价湿粮",
-          price:'￥123.45',
+          price: "￥123.45",
           ordernum: 1,
 
           catimage: require("../../assets/image/rc-cat.png"),
@@ -360,25 +463,25 @@ 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"),
         },
@@ -392,8 +495,9 @@ export default {
     let stype = this.$route.query.stype;
     this.userst();
     this.activeIndex = stype;
-     if(stype!==''&&stype!==undefined){
+    if (stype !== "" && stype !== undefined) {
-       this.onmessage(stype)
+      this.onmessage(stype);
+     
     } else {
       this.usetmessage();
     }
@@ -404,7 +508,6 @@ export default {
       let data = await searchchanpin(stype);
       if (data) {
         this.rccontair = data;
-
       }
     },
     async userst() {
@@ -416,27 +519,26 @@ export default {
       if (data) {
         this.userstype = data;
       }
-          this.usercatlist=this.userstype.filter(item=>item.petType=='0')
+      this.usercatlist = this.userstype.filter((item) => item.petType == "0");
-                       this.usercatlist.map(element=>{
+      this.usercatlist.map((element) => {
-               if(element.name=='品种'){
+        if (element.name == "品种") {
           pinzhong.push(element);
-                 this.catageb=pinzhong
+          this.catageb = pinzhong;
         }
-                 if(element.name=='功能'){
+        if (element.name == "功能") {
           gonneg.push(element);
-                 this.catagea=gonneg
+          this.catagea = gonneg;
         }
-                 if(element.name=='年龄'){
+        if (element.name == "年龄") {
           age.push(element);
-                 this.catage=age
+          this.catage = age;
         }
-                 if(element.name=='专区'){
+        if (element.name == "专区") {
           zhuanqu.push(element);
-                 this.prefecture=gonneg
+          this.prefecture = gonneg;
         }
-           })
+      });
-             this.userdoglisgt=this.userstype.filter(item=>item.petType=='1')
+      this.userdoglisgt = this.userstype.filter((item) => item.petType == "1");
-
     },
 
     async usetmessage() {
@@ -452,9 +554,6 @@ export default {
       }
     },
 
-
-
-
     userbuy() {
       this.$router.push({
         path: "/myorder/userrecord",
@@ -485,129 +584,171 @@ this.dialogInfo1=false;
       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)) {
+      if (
-      console.log("当前是电脑打开")
+        !(
+          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("当前是手机打开")
+        console.log("当前是手机打开");
         this.$nextTick(() => {
-    
           this.isadrond = true;
           this.isshow = true;
-           this.$refs.usercontent.style.display='none  ';
+          this.$refs.usercontent.style.display = "none  ";
           this.dialogInfo1 = false;
-      
+        });
-        })
-
-   
       }
     },
-    //搜索
-    onSearch() {},
-       selectGoods(item, index) {
 
+    selectGoods(item, index) {
       this.activeIndex = index;
+      this.allacindex=index
+      console;
       let petType = {
-          petType:this.activeIndex,    
+        petType: this.allacindex,
-           }
+      };
       for (let i = 0; i < this.userserachlist.length; i++) {
         if (!this.userserachlist.includes(petType)) {
-                  this.userserachlist.push(petType)
+          this.userserachlist.push(petType);
         }
       }
-              this.usersearch(this.userserachlist)
+      this.usersearch(this.userserachlist);
     },
     selectGoodsa(item, index) {
-         
       this.activeIndex1 = index;
     },
     userselect() {
       this.$nextTick(() => {
-    
         this.ifadroind();
-      
+      });
-        })
     },
     usershow() {
       this.$nextTick(() => {
         this.isshow = false;
         // dom元素更新后执行，因此这里能正确打印更改之后的值
-            this.$refs.usercontent.style.display='block  ';
+        this.$refs.usercontent.style.display = "block  ";
-        })
+      });
     },
 
     selectsearch(item, index) {
-         
       this.activeIndexa = index;
     },
     selectage(item, index) {
-           let tagUsedAge={
+      let tagUsedAge = {};
-          petType:this.activeIndex1,    
+      this.activeIndexc = index;
-             tagUsedAge:item.tagName
+      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,
+        };
       }
+      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.userserachlist.push(tagUsedAge);
         }
       }
-              this.usersearch(this.userserachlist)
+      this.usersearch(this.userserachlist);
-             this.activeIndexc=index;
     },
     selectagc(item, index) {
-  let tagFunction={
+      let tagFunction = {};
-     petType:this.activeIndex1,   
+      this.activeIndexd = index;
-             tagFunction:item.tagName
+      this.userishwo2 = !this.userishwo2;
+      if (this.userishwo2 == false) {
+        tagFunction = {
+          petType: this.allacindex,
+          tagFunction: item.tagName,
+        };
+      } else {
+        console.log("这是false");
+        tagFunction = {
+          petType: this.allacindex,
+        };
       }
+      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.userserachlist.push(tagFunction);
         }
       }
-              this.usersearch(this.userserachlist)
+      this.usersearch(this.userserachlist);
-             this.activeIndexd=index;
     },
     selectagd(item, index) {
-  let tagBreed={
+      let tagBreed = {};
-     petType:this.activeIndex1,   
+      this.activeIndexe = index;
-             tagBreed:item.tagName
+      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.userserachlist.push(tagBreed);
         }
       }
-              this.usersearch(this.userserachlist)
+      this.usersearch(this.userserachlist);
-             this.activeIndexe=index;
     },
     selectproduct(item, index) {
+      //  console.log(this.userishwo=!this.userishwo)
+      let categoryName = {};
       this.activeIndexb = index;
-             let categoryName={
+      console.log(this.activeIndex);
-                petType:this.activeIndex1,   
+      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.userserachlist.push(categoryName);
         }
       }
 
-             this.usersearch(this.userserachlist)
+      this.usersearch(this.userserachlist);
     },
 
     //弹框的显示隐藏
   },
-    
-
 };
 </script>