搜索页优化

src/components/searchdata/kkday.vue

@@ -51,7 +51,7 @@
             </div>
           </div>
         </template> -->
-        
+
         <q-tree
           ref="area"
           :nodes="areaList"
@@ -124,9 +124,9 @@
         <div class="row items-center justify-center col">
           <span class="text-grey-8">
             {{
-            msg.startDate
-            ? `${msg.startDate} - ${msg.endDate}`
-            : "篩選出發日期"
+              msg.startDate
+                ? `${msg.startDate} - ${msg.endDate}`
+                : "篩選出發日期"
             }}
           </span>
           <q-popup-proxy :offset="[0, 0]" ref="qDateProxy">
@@ -145,9 +145,9 @@
 
       <q-card flat class="rounded-borders q-pa-md q-mt-lg">
         <div class="text-subtitle1 text-weight-bold">價錢篩選（CNY）</div>
-        <div
-          class="q-mt-md text-grey-6 text-subtitle2 text-regular"
-        >{{ msg.priceRange.min }} - {{ msg.priceRange.max }}</div>
+        <div class="q-mt-md text-grey-6 text-subtitle2 text-regular">
+          {{ msg.priceRange.min }} - {{ msg.priceRange.max }}
+        </div>
         <q-range
           v-model="msg.priceRange"
           :min="1"
@@ -169,11 +169,16 @@
             v-for="(y, yi) in dayArray"
             :key="yi"
           >
-            <q-checkbox v-model="y.checked" size="xs" @input="changeTripDayHandler" />
-            <span class="col text-grey-8 text-subtitle2 text-regular q-mt-xs" style="font-weight: 400">
-              {{
-              y.text
-              }}
+            <q-checkbox
+              v-model="y.checked"
+              size="xs"
+              @input="changeTripDayHandler"
+            />
+            <span
+              class="col text-grey-8 text-subtitle2 text-regular q-mt-xs"
+              style="font-weight: 400"
+            >
+              {{ y.text }}
             </span>
           </div>
         </q-expansion-item>
@@ -184,9 +189,7 @@
         <div class="row q-col-gutter-sm items-center q-pa-md">
           <div class="text-subtitle2 q-mr-md">
             <span class="text-weight-bold text-primary q-mr-sm">
-              {{
-              TotalCount
-              }}
+              {{ TotalCount }}
             </span>
             <span>項體驗行程</span>
           </div>
@@ -200,7 +203,10 @@
             :label="x.Name"
           />
         </div>
-        <div class="q-pa-md row items-center" style="border-top: 1px solid #eee">
+        <div
+          class="q-pa-md row items-center"
+          style="border-top: 1px solid #eee"
+        >
           <span class="f12">排序：</span>
           <q-chip
             square
@@ -215,12 +221,20 @@
             v-for="(x, i) in sortArray"
             :key="i"
             @click="chosenSortHandler(x)"
-          >{{ x.label }}</q-chip>
+            >{{ x.label }}</q-chip
+          >
         </div>
       </div>
-      <div class="q-mt-lg" v-if="!$q.loading.isActive && DataList.length>0">
+      <div class="q-mt-lg" v-if="!$q.loading.isActive && DataList.length > 0">
         <div
-          class="rounded-borders cursor-pointer overflow-hidden q-mb-md row bg-white"
+          class="
+            rounded-borders
+            cursor-pointer
+            overflow-hidden
+            q-mb-md
+            row
+            bg-white
+          "
           @click="GotoDetails(x)"
           v-for="(x, i) in DataList"
           :key="i"
@@ -234,7 +248,9 @@
             class="bg-grey-3"
           />
           <div class="q-pa-md col column">
-            <div class="text-subtitle1 text-weight-bold text-grey-9">{{ x.title }}</div>
+            <div class="text-subtitle1 text-weight-bold text-grey-9">
+              {{ x.title }}
+            </div>
             <div class="col">
               <div class="row items-center q-my-sm">
                 <q-chip
@@ -243,7 +259,8 @@
                   class="f12 rounded-borders text-secondary"
                   label="急速確認"
                 />
-                <q-chip v-if="x.ltName"
+                <q-chip
+                  v-if="x.ltName"
                   style="background: #26a69a1a"
                   size="sm"
                   class="f12 rounded-borders text-secondary"
@@ -251,13 +268,26 @@
                 />
               </div>
               <div
-                class="text-subtitle2 text-grey-6 text-weight-regular ellipsis-2-lines"
+                class="
+                  text-subtitle2 text-grey-6 text-weight-regular
+                  ellipsis-2-lines
+                "
                 style="line-height: 1.6"
-              >{{ x.productRecommend }}</div>
+              >
+                {{ x.productRecommend }}
+              </div>
               <div class="row items-center f12 text-grey-6 q-mt-md">
-                <q-icon size="12px" name="iconfont icondingweixiao" class="q-mr-sm" />
+                <q-icon
+                  size="12px"
+                  name="iconfont icondingweixiao"
+                  class="q-mr-sm"
+                />
                 <span class="q-mr-lg">{{ x.countryName }}</span>
-                <q-icon size="12px" name="iconfont iconigw-l-date-trade" class="q-mr-sm"></q-icon>
+                <q-icon
+                  size="12px"
+                  name="iconfont iconigw-l-date-trade"
+                  class="q-mr-sm"
+                ></q-icon>
                 <span>{{ x.startDate }}</span>
               </div>
             </div>
@@ -269,24 +299,28 @@
                   style="border-right: 1px solid #efefef"
                 >{{ x.surplus }}</span> -->
                 <span>行程天數：</span>
-                <span class="text-secondary text-weight-bold">{{ x.dayNum }} 天</span>
+                <span class="text-secondary text-weight-bold"
+                  >{{ x.dayNum }} 天</span
+                >
+              </div>
+              <div class="text-h6 product-price">
+                CNY：{{ x.b2CPrice }}<span class="price-stuff">元</span>
               </div>
-              <div class="text-h6 product-price">CNY：{{ x.b2CPrice }}<span class="price-stuff">元</span></div>
             </div>
           </div>
         </div>
       </div>
-      <div v-else-if="!$q.loading.isActive && DataList.length==0" class="text-center q-mt-xl">
+      <div
+        v-else-if="!$q.loading.isActive && DataList.length == 0"
+        class="text-center q-mt-xl"
+      >
         <div class="text-center inline-block">
           <p>
-            <img
-              src="~assets/sad.svg"
-              style="width:30vw;max-width:150px;"
-            >
+            <img src="~assets/sad.svg" style="width: 30vw; max-width: 150px" />
           </p>
           <p class="text-faded">
             我们找不到有关
-            <span v-if="msg.searchKey">\"{{msg.searchKey}}\"</span>
+            <span v-if="msg.searchKey">\"{{ msg.searchKey }}\"</span>
             的旅游体验，输入其他字眼重试或探索以下人气体验
           </p>
         </div>
@@ -307,7 +341,7 @@
           glossy
           ellipses
           :max-pages="6"
-      boundary-numbers
+          boundary-numbers
           size="13px"
           padding="sm md"
         ></q-pagination>
@@ -327,7 +361,7 @@ export default {
       selected: [],
       searchAdd: {
         name: "",
-        value: 0
+        value: 0,
       },
       areaList: [],
       chosenAddress: [],
@@ -339,77 +373,77 @@ export default {
           id: 1,
           min: 1,
           max: 1,
-          text: "1天"
+          text: "1天",
         },
         {
           id: 2,
           min: 2,
           max: 2,
-          text: "2天"
+          text: "2天",
         },
         {
           id: 3,
           min: 3,
           max: 3,
-          text: "3天"
+          text: "3天",
         },
         {
           id: 4,
           min: 4,
           max: 4,
-          text: "4天"
+          text: "4天",
         },
         {
           id: 5,
           min: 5,
           max: 5,
-          text: "5天"
+          text: "5天",
         },
         {
           id: 6,
           min: 6,
           max: 6,
-          text: "6天"
+          text: "6天",
         },
         {
           id: 7,
           min: 7,
           max: 8,
-          text: "7-8天"
+          text: "7-8天",
         },
         {
           id: 8,
           min: 9,
           max: 10,
-          text: "9-10天"
+          text: "9-10天",
         },
         {
           id: 9,
           min: 10,
           max: 1000,
-          text: "10天以上"
-        }
+          text: "10天以上",
+        },
       ],
       dataList: [],
       sortArray: [
         {
           label: "默认排序",
           value: 0,
-          icon: "iconfont icongood"
+          icon: "iconfont icongood",
         },
         {
           label: "價格：低到高",
           value: 1,
-          icon: "iconfont iconmeiyuan"
+          icon: "iconfont iconmeiyuan",
         },
         {
           label: "價格：高到低",
           value: 2,
-          icon: "iconfont iconmeiyuan"
-        }
+          icon: "iconfont iconmeiyuan",
+        },
       ],
       TotalCount: 0,
-      PageCount: 0
+      PageCount: 0,
     };
   },
   created() {
@@ -419,66 +453,63 @@ export default {
     this.initGoods();
     this.msg.priceRange = {
       min: 1,
-      max: 100000
+      max: 100000,
     };
     this.msg.minPrice = 0;
     this.msg.maxPrice = 100000;
-    this.dayArray.forEach(x => {
+    this.dayArray.forEach((x) => {
       x.checked = false;
     });
     this.dateRange = { from: this.msg.startDate, to: this.msg.endDate };
     this.goSearchHandler();
-    console.log(this.msg)
   },
   methods: {
     handleSelected(target) {
       console.log("handleSelected", target);
     },
     handleTicked(target) {
-      console.log("handleTicked", target, this.ticked);
-      this.ticked = target
+      this.ticked = target;
       this.goSearchHandler();
     },
     handleAreaTicked(target) {
-      this.areaTicked = target
+      this.areaTicked = target;
       this.goSearchHandler();
-    }, 
+    },
     initAreaList() {
       let jObj = JSON.parse(window.localStorage.getItem("baseifo"));
-      let arr = []
-      jObj.AreaList.forEach(x => {
-        x.children = x.SubList
-        x.children.forEach(y => {
+      let arr = [];
+      jObj.AreaList.forEach((x) => {
+        x.children = x.SubList;
+        x.children.forEach((y) => {
           y.checked = false;
           y.explsed = false;
           y.isShow = true;
-          if(y.Id === this.msg.areaId) {
-            arr.push(y.Id)
+          if (y.Id === this.msg.areaId) {
+            arr.push(y.Id);
           }
           if (y.SubList) {
-          y.children = y.SubList
-            y.children.forEach(z => {
+            y.children = y.SubList;
+            y.children.forEach((z) => {
               z.checked = false;
               z.explsed = false;
               z.isShow = true;
-          if(z.Id === this.msg.areaId) {
-            arr.push(z.Id)
-          }
-          if(y.Id === this.msg.areaId) {
-            arr.push(z.Id)
-          }
+              if (z.Id === this.msg.areaId) {
+                arr.push(z.Id);
+              }
+              if (y.Id === this.msg.areaId) {
+                arr.push(z.Id);
+              }
             });
           }
         });
         this.areaList = jObj.AreaList;
-        this.areaListJSON = JSON.parse(JSON.stringify(this.areaList))
+        this.areaListJSON = JSON.parse(JSON.stringify(this.areaList));
       });
-      console.log("this.areaList", this.areaList, this.msg)
-      
-      if(this.msg.areaId) {
+
+      if (this.msg.areaId) {
         this.$nextTick(() => {
-          this.$refs.area.setTicked([...new Set(arr)], true)
-        })
+          this.$refs.area.setTicked([...new Set(arr)], true);
+        });
       }
     },
     changeExplesdHandler(x) {
@@ -500,19 +531,19 @@ export default {
     },
     changeCheckHandler(x, p = null) {
       if (p) {
-        let t = p.SubList.filter(x => x.checked);
+        let t = p.SubList.filter((x) => x.checked);
         p.checked =
           t.length == p.SubList.length ? true : t.length == 0 ? false : "half";
         this.changeChosenHandler(x);
       } else {
-        x.SubList.forEach(item => {
+        x.SubList.forEach((item) => {
           item.checked = x.checked;
           this.changeChosenHandler(item);
         });
       }
     },
     changeChosenHandler(x) {
-      let i = this.chosenAddress.findIndex(item => item.Id == x.Id) ?? -1;
+      let i = this.chosenAddress.findIndex((item) => item.Id == x.Id) ?? -1;
       if (!x.checked) {
         if (i > -1) {
           this.chosenAddress.splice(i, 1);
@@ -522,17 +553,15 @@ export default {
           this.chosenAddress.push(x);
         }
       }
-      this.msg.placeIds = this.getChoseAddressCity().join(',');
+      this.msg.placeIds = this.getChoseAddressCity().join(",");
       this.goSearchHandler();
     },
     getChoseAddressCity() {
-      console.log("this.chosenAddress", this.chosenAddress);
       let result = [];
-      this.chosenAddress.forEach(item => {
-        let arr = item.DestinationList.map(item => item.ID);
+      this.chosenAddress.forEach((item) => {
+        let arr = item.DestinationList.map((item) => item.ID);
         result = result.concat(arr);
       });
-      console.log("getChoseAddressCity", result);
       return result;
     },
     changeTripDayHandler() {
@@ -551,13 +580,13 @@ export default {
       //   this.msg.minTripDay == "0" ? "" : this.msg.minTripDay;
       // this.msg.maxTripDay =
       //   this.msg.maxTripDay == "0" ? "" : this.msg.maxTripDay;
-      let arr = []
-      this.dayArray.forEach(item => {
-        if(item.checked) {
-          arr.push(item.id)
+      let arr = [];
+      this.dayArray.forEach((item) => {
+        if (item.checked) {
+          arr.push(item.id);
         }
-      })
-      this.msg.dayNumList = arr
+      });
+      this.msg.dayNumList = arr;
       this.goSearchHandler();
     },
     optionsFn(cd) {
@@ -573,57 +602,84 @@ export default {
       this.goSearchHandler();
     },
     dateRangeHandler(e) {
-      console.log('dateRangeHandler', e)
       this.msg.startDate = `${e.from.year}/${e.from.month}/${e.from.day}`;
       this.msg.endDate = `${e.to.year}/${e.to.month}/${e.to.day} `;
       this.$refs.qDateProxy.hide();
       this.goSearchHandler();
     },
     initGoods() {
-      let arr = []
+      let arr = [];
       let jObj = JSON.parse(window.localStorage.getItem("baseifo"));
-      jObj.CategoryList.forEach(x => {
+      jObj.CategoryList.forEach((x) => {
         x.checked = false;
         x.explsed = false;
         x.isShow = true;
-        x.children = x.SubList
-        x.children.forEach(y => {
+        x.children = x.SubList;
+        x.children.forEach((y) => {
           y.checked = false;
           y.explsed = false;
           y.isShow = true;
-          if(y.Id === this.msg.categoryId) {
-            arr.push(y.Id)
+          if (y.Id === this.msg.categoryId) {
+            arr.push(y.Id);
           }
           if (y.SubList) {
-            y.children = y.SubList
-            y.children.forEach(z => {
+            y.children = y.SubList;
+            y.children.forEach((z) => {
               z.checked = false;
               z.explsed = false;
               z.isShow = true;
-          if(z.Id === this.msg.categoryId) {
-            arr.push(z.Id)
-          }
-          if(y.Id === this.msg.categoryId) {
-            arr.push(z.Id)
-          }
+              if (z.Id === this.msg.categoryId) {
+                arr.push(z.Id);
+              }
+              if (y.Id === this.msg.categoryId) {
+                arr.push(z.Id);
+              }
             });
           }
         });
         this.goodsType.push(x);
-        console.log('this.goodsType', this.goodsType, this.ticked, arr)
       });
-      if(this.msg.categoryId) {
-      this.$nextTick(() => {
-      this.$refs.category.setTicked([...new Set(arr)], true)
-      })
+      if (this.msg.categoryId) {
+        this.$nextTick(() => {
+          this.$refs.category.setTicked([...new Set(arr)], true);
+        });
       }
     },
+    dfs (tree, ope, filter) {
+    const walkAndCopy = (tree, depth = 1) => {
+        if(filter(tree.Name)) {
+            const copy = {...tree}
+            ope(tree.Name, depth)
+            if(tree.children) {
+                copy.children = []
+                tree.children.forEach((node) => {
+                    const subTree = walkAndCopy(node, depth + 1)
+                    subTree && copy.children.push(subTree)
+                })
+            }       
+            return copy
+        } else if(tree.children && tree.children.length) {
+            const copy = {...tree}
+            ope(tree.Name, depth)
+            copy.Name = tree.Name
+            if(tree.children) {
+                copy.children = []
+                tree.children.forEach((node) => {
+                    const subTree = walkAndCopy(node, depth + 1)
+                    subTree && copy.children.push(subTree)
+                })
+            }       
+            return copy
+        }
+    }
+    return walkAndCopy(tree)
+},
     changeAddrSearchHandler(v) {
-       this.areaListJSONTMP = JSON.parse(JSON.stringify(this.areaListJSON));
-      this.filterAddress(this.areaListJSON, v);
-      this.filterAddress2(this.areaListJSON, 1);
-      this.areaList = this.areaListJSON.filter(item => item.canFilter || item.children.length)
-      console.log('areaList >>>', this.areaList)
+      this.areaListJSONTMP = JSON.parse(JSON.stringify(this.areaListJSON));
+      let tree = this.dfs({Name: '', children: this.areaListJSONTMP}, (name, depth) => {}, (name) => {return name.indexOf(v) !== -1})
+      tree = this.dfs(tree, (name, depth) => {}, (name) => {return name.indexOf(v) !== -1})
+      tree = this.dfs(tree, (name, depth) => {}, (name) => {return name.indexOf(v) !== -1})
+      this.areaList = tree.children
       // this.areaList.forEach(x => {
       //   x.isShow = x.Name.indexOf(v) != -1;
       //   x.isShowChild = false;
@@ -635,40 +691,10 @@ export default {
       //     }
       //   });
       // });
-      
-    },
-    filterAddress(addressList, v) {
-      addressList.forEach(item => {
-        if(item.Name.indexOf(v) != -1) {
-          item.canFilter = true
-        } else {
-          item.canFilter = false
-        }
-        if(item.children && item.children.length) {
-          this.filterAddress(item.children, v)
-        }
-      })
-      console.log('filterAddress',this.areaListJSON, addressList)
-    },
-    filterAddress2(addressList, index) {
-      if(index === 2) {
-      addressList.forEach(item => {
-        if(item.children && item.children.length) {
-          item.children = item.children.filter(i => i.canFilter)
-        }
-      })
-      }
-      addressList.forEach(item => {
-        if(item.children && item.children.length) {
-          this.filterAddress2(item.children, 2)
-        }
-      })
-      console.log('filterAddress2',this.areaListJSON, addressList)
     },
     goSearchHandler() {
-      console.log(this.ticked)
-      this.msg.webSiteCategoryIds = this.ticked.join(',')
-      this.msg.placeIds = this.areaTicked.join(',')
+      this.msg.webSiteCategoryIds = this.ticked.join(",");
+      this.msg.placeIds = this.areaTicked.join(",");
       this.$q.loading.show();
       this.DataList = [];
       let minTripDay = -1,
@@ -696,14 +722,14 @@ export default {
           this.msg.priceOrderByField = 2;
         }
       }
-      this.PageCount = 0
-      this.TotalCount = 0
+      this.PageCount = 0;
+      this.TotalCount = 0;
       this.apipost(
         "b2c_get_GetB2CMergeProductPageList",
         this.msg,
-        res => {
+        (res) => {
           this.$q.loading.hide();
-          
+
           if (res.data.resultCode == 1) {
             this.PageCount = res.data.data.pageCount;
             this.TotalCount = res.data.data.count;
@@ -726,7 +752,7 @@ export default {
             }
           }
         },
-        err => {}
+        (err) => {}
       );
     },
     GotoDetails(item) {
@@ -734,8 +760,8 @@ export default {
         "/detail/" + encodeURIComponent(item.id) + "/" + item.tcid,
         {}
       );
-    }
-  }
+    },
+  },
 };
 </script>