搜索页面优化

src/components/navs/hor-big-one.vue

@@ -526,7 +526,7 @@ export default {
     this.searchEndDate = newEndDateStr;
     // this.initAreas()
     // this.initNavs();
-    this.getCategoryList();
+    // this.getCategoryList();
   },
   methods: {
     handleSelectArea(item) {

src/components/searchdata/kkday.vue

@@ -11,47 +11,6 @@
           class="q-ma-md"
           @input="changeAddrSearchHandler"
         />
-        <!-- <template v-for="(x, i) in areaList">
-          <div class="addr" :key="i">
-            <div class="addr-list q-px-md q-py-sm cursor-pointer row items-center" v-if="x.isShow">
-              <q-checkbox
-                indeterminate-value="half"
-                @input="changeCheckHandler(x)"
-                v-model="x.checked"
-                size="xs"
-              />
-              <span class="col" @click="changeExplesdHandler(x)">
-                {{
-                x.Name
-                }}
-              </span>
-              <q-icon
-                @click="changeExplesdHandler(x)"
-                v-if="
-                  searchAdd.name.length == 0 ||
-                  (searchAdd.name.length > 0 && x.isShowChild)
-                "
-                :name="!x.explsed ? 'keyboard_arrow_down' : 'keyboard_arrow_up'"
-                size="20px"
-              />
-            </div>
-            <div
-              class="q-mx-md"
-              v-if="
-                x.explsed ||
-                (x.SubList && x.isShowChild && searchAdd.name.length > 0)
-              "
-            >
-              <template v-for="(y, yi) in x.SubList">
-                <div class="addr-list q-px-md q-py-sm row items-center" :key="yi" v-if="y.isShow">
-                  <q-checkbox @input="changeCheckHandler(y, x)" v-model="y.checked" size="xs" />
-                  <span class="col">{{ y.Name }}</span>
-                </div>
-              </template>
-            </div>
-          </div>
-        </template> -->
-
         <q-tree
           ref="area"
           :nodes="areaList"
@@ -76,42 +35,6 @@
           @update:ticked="handleTicked"
           :ticked="ticked"
         />
-        <!-- <div class="add q-mt-md" v-for="(x, i) in goodsType" :key="i">
-          <div class="addr-list q-px-md q-py-sm cursor-pointer row items-center">
-            <span class="col" @click="changeExplesdHandler(x)">
-              {{
-              x.CategoryName
-              }}
-            </span>
-            <q-icon
-              @click="changeExplesdHandler(x)"
-              :name="!x.explsed ? 'keyboard_arrow_down' : 'keyboard_arrow_up'"
-              size="20px"
-            />
-          </div>
-          <div class="q-mx-md" v-if="x.explsed">
-            <div
-              
-              v-for="(y, yi) in x.SubList"
-              :key="yi"
-            >
-              <div class="addr-list q-px-md q-py-sm row items-center">
-                <q-checkbox v-model="y.checked" size="xs" @input="changeGoodTypeHandler(y)" />
-              <span class="col">{{ y.CategoryName }}</span>
-            </div>
-            <div class="q-mx-md" v-if="y.explsed">
-              <div
-                class="addr-list q-px-md q-py-sm row items-center"
-                v-for="(z, zi) in y.SubList"
-                :key="zi"
-              >
-                <q-checkbox v-model="z.checked" size="xs" @input="changeGoodTypeHandler(z)" />
-                <span class="col">{{ z.CategoryName }}</span>
-              </div>
-            </div>
-              </div>
-          </div>
-        </div> -->
       </q-card>
 
       <q-card flat class="rounded-borders q-mt-lg row no-padding">
@@ -150,8 +73,8 @@
         </div>
         <q-range
           v-model="msg.priceRange"
-          :min="1"
-          :max="100000"
+          :min="priceModel.min"
+          :max="priceModel.max"
           :step="1"
           @input="testHandler"
           color="primary"
@@ -444,6 +367,10 @@ export default {
       ],
       TotalCount: 0,
       PageCount: 0,
+      priceModel: {
+      min: 1,
+      max: 100000,
+      }
     };
   },
   created() {
@@ -473,6 +400,8 @@ export default {
     },
     handleAreaTicked(target) {
       this.areaTicked = target;
+      console.log('this.areaTicked', target)
+      this.msg.placeIds = this.getChoseAddressCity().join(",");
       this.goSearchHandler();
     },
     initAreaList() {
@@ -529,38 +458,21 @@ export default {
       this.msg.orderBy = x.value;
       this.goSearchHandler();
     },
-    changeCheckHandler(x, p = null) {
-      if (p) {
-        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) => {
-          item.checked = x.checked;
-          this.changeChosenHandler(item);
-        });
-      }
-    },
-    changeChosenHandler(x) {
-      let i = this.chosenAddress.findIndex((item) => item.Id == x.Id) ?? -1;
-      if (!x.checked) {
-        if (i > -1) {
-          this.chosenAddress.splice(i, 1);
-        }
-      } else {
-        if (i == -1) {
-          this.chosenAddress.push(x);
-        }
-      }
-      this.msg.placeIds = this.getChoseAddressCity().join(",");
-      this.goSearchHandler();
-    },
     getChoseAddressCity() {
       let result = [];
-      this.chosenAddress.forEach((item) => {
+      function treeToArray(tree) {
+        return tree.reduce((res, item) => {
+          const { children, ...i } = item
+          return res.concat(i, children && children.length ? treeToArray(children) : [])
+        }, [])
+      }
+      const areaList = treeToArray(this.areaList)
+      console.log('>>>>>>>>>>>>>>>>>>>>>', areaList)
+      areaList.forEach((item) => {
+        if(this.areaTicked.includes(item.Id)) {  
         let arr = item.DestinationList.map((item) => item.ID);
         result = result.concat(arr);
+        }
       });
       return result;
     },
@@ -623,7 +535,7 @@ export default {
           if (y.Id === this.msg.categoryId) {
             arr.push(y.Id);
           }
-          if (y.SubList) {
+          if (y.SubList && y.SubList.length) {
             y.children = y.SubList;
             y.children.forEach((z) => {
               z.checked = false;
@@ -640,6 +552,7 @@ export default {
         });
         this.goodsType.push(x);
       });
+      this.goodsTypeJSON = JSON.stringify(this.goodsType)
       if (this.msg.categoryId) {
         this.$nextTick(() => {
           this.$refs.category.setTicked([...new Set(arr)], true);
@@ -648,7 +561,7 @@ export default {
     },
     dfs (tree, ope, filter) {
     const walkAndCopy = (tree, depth = 1) => {
-        if(filter(tree.Name)) {
+        if(filter(tree)) {
             const copy = {...tree}
             ope(tree.Name, depth)
             if(tree.children) {
@@ -659,7 +572,7 @@ export default {
                 })
             }       
             return copy
-        } else if(tree.children && tree.children.length) {
+        } else if(tree && tree.children && tree.children.length) {
             const copy = {...tree}
             ope(tree.Name, depth)
             copy.Name = tree.Name
@@ -677,9 +590,9 @@ export default {
 },
     changeAddrSearchHandler(v) {
       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})
+      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;
@@ -695,7 +608,7 @@ export default {
     },
     goSearchHandler() {
       this.msg.webSiteCategoryIds = this.ticked.join(",");
-      this.msg.placeIds = this.areaTicked.join(",");
+      // this.msg.placeIds = this.areaTicked.join(",");
       this.$q.loading.show();
       this.DataList = [];
       let minTripDay = -1,
@@ -766,8 +679,20 @@ let areaInfo = condition.find(item => item.type === 1).list
 let dayInfo = condition.find(item => item.type === 2).list
 let priceInfo = condition.find(item => item.type === 3)
 let categoryInfo = condition.find(item => item.type === 4).list
-this.areaTicked = areaInfo;
-this.ticked = categoryInfo;
+// this.areaTicked = areaInfo;
+      this.areaListJSONTMP = JSON.parse(JSON.stringify(this.areaListJSON));
+      let tree = this.dfs({Name: '', children: this.areaListJSONTMP}, (name, depth) => {}, ({Id}) => {return areaInfo.includes(Id)})
+      tree = this.dfs(tree, (name, depth) => {}, ({Id}) => {return areaInfo.includes(Id)})
+      tree = this.dfs(tree, (name, depth) => {}, ({Id}) => {return areaInfo.includes(Id)})
+      this.areaList = tree.children
+      const categoryTmp = JSON.parse(this.goodsTypeJSON);
+      let category = this.dfs({Name: '', children: categoryTmp}, (name, depth) => {}, (item) => {return  categoryInfo.includes(item.Id)})
+      category = this.dfs(category, (name, depth) => {}, (item) => {return categoryInfo.includes(item.Id)})
+      category = this.dfs(category, (name, depth) => {}, (item) => {return categoryInfo.includes(item.Id)})
+      this.goodsType = category.children
+// this.ticked = categoryInfo;
+console.log('this.areaListJSONTMP', this.areaListJSONTMP, this.areaList)
+this.priceModel = {min: priceInfo.minPrice, max: priceInfo.maxPrice}
 this.msg.priceRange = {min: priceInfo.minPrice, max: priceInfo.maxPrice}
 let arr = []
 dayInfo.forEach(item => {
@@ -783,12 +708,13 @@ dayInfo.forEach(item => {
 })
 console.log('dayInfo', arr, dayInfo, this.dayArray)
 // arr = [... new Set(arr)]
-this.dayArray.forEach(item => {
-  if(arr.includes(item.id)) {
-    item.checked = true
-  }
-})
-this.msg.dayNumList = arr;
+// this.dayArray.forEach(item => {
+//   if(arr.includes(item.id)) {
+//     item.checked = true
+//   }
+// })
+this.dayArray = this.dayArray.filter(item => arr.includes(item.id))
+// this.msg.dayNumList = arr;
     },
     GotoDetails(item) {
       if(item.productType === 4) { // 接送机，包车