增加搜索框

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

@@ -188,7 +188,7 @@
         @click="CommonJump('/index', {})"
       /></div>
       <!-- <div style="transform:scale(0.6,0.6)"> -->
-          <!-- <searchSf2 v-if="$q.platform.is.desktop" :plugData="plugData"></searchSf2> -->
+          <searchSf2 v-if="!(isHome ||isSearch)" :plugData="plugData"></searchSf2>
           <!-- </div> -->
       <!-- pc -->
       <div v-if="$q.platform.is.desktop">
@@ -313,7 +313,6 @@
       </div>
       <!-- 移动端 -->
       <div v-else>
-          <!-- <searchSf2 :plugData="plugData"></searchSf2> -->
         <img
           @click="avatarClick"
           class="avatar q-mt-sm"
@@ -381,6 +380,7 @@ export default {
       selectedArea: [],
       selectedAreaId: "",
       isHome: false,
+      isSearch: false,
     };
   },
   watch: {
@@ -396,7 +396,9 @@ export default {
     },
     $route: {
       handler: function (val, oldVal) {
+        console.log('val', val, oldVal)
         this.isHome = val.path === "/" || val.path === "/index";
+        this.isSearch = val.path === "/search";
       },
       // 深度观察监听
       deep: true,
@@ -414,6 +416,7 @@ export default {
     this.isHome =
       this.$router.history.current.path === "/" ||
       this.$router.history.current.path === "/index";
+        this.isSearch = this.$router.history.current.path === "/search";
     console.log(
       'JSON.parse(window.localStorage.getItem("b2bUser"))',
       JSON.parse(window.localStorage.getItem("b2bUser"))

src/components/search_sf/search-top.vue

@@ -6,7 +6,7 @@
       style="border-radius: 6px"
     >
       <div>
-        <div v-if="!$q.screen.xs">
+        <div class="relative" v-if="!$q.screen.xs">
           <div
             class="row rounded-borders overflow-hidden"
             style="width: 300px"
@@ -34,7 +34,7 @@
                 icon="search"
                 style="
                   width: 100%;
-                  height: 56px;
+                  height: 40px;
                   border-bottom-left-radius: 0;
                   border-top-left-radius: 0;
                 "
@@ -100,8 +100,10 @@
             </div>
           </div>
         </div>
-        <div v-if="$q.screen.xs">
-          <q-input
+        <div v-if="$q.screen.xs" @click="showPopupHandler">
+          <i class="iconfont iconchazhao"></i>
+              <!-- <q-icon name="search" /> -->
+          <!-- <q-input
             filled
             v-model="searchKey"
             class="bg-grey-1 q-mx-md"
@@ -112,7 +114,7 @@
             <template v-slot:append>
               <q-icon name="search" />
             </template>
-          </q-input>
+          </q-input> -->
         </div>
       </div>
     </div>
@@ -135,7 +137,33 @@
             <q-tab class="text-teal" name="kw" label="關鍵字" />
           </q-tabs>
           <div v-show="tab == 'dest'">
-            <div class="q-mb-md">
+            
+      <q-card flat class="rounded-borders q-py-md">
+        <div class="text-subtitle1 text-weight-bold q-mx-md">篩選目的地</div>
+        <!-- <q-input
+          v-model="searchAdd.name"
+          type="text"
+          standout
+          placeholder="搜尋目的地"
+          class="q-ma-md"
+          @input="changeAddrSearchHandler"
+        /> -->
+        <q-tree
+          ref="area"
+          :nodes="areaList"
+          no-connectors
+          node-key="Id"
+          label-key="Name"
+          tick-strategy="leaf"
+          @update:ticked="handleAreaTicked"
+          @update:selected="handleAreaSelected"
+          :ticked="areaTicked"
+          text-color="#666"
+          no-nodes-label=" "
+          no-results-label=" "
+        />
+      </q-card>
+            <!-- <div class="q-mb-md">
               <q-select
                 filled
                 v-model="chosenResult.fl"
@@ -174,7 +202,7 @@
                 option-value="Name"
                 label="請選擇地區"
               />
-            </div>
+            </div> -->
           </div>
           <div v-show="tab == 'kw'" class="q-mb-md">
             <q-input
@@ -260,6 +288,8 @@ export default {
   },
   data() {
     return {
+      areaTicked: [],
+      areaList: [],
       setectHotTag: '',
       hotList: [],
       slide: 0,
@@ -296,12 +326,9 @@ export default {
     };
   },
   created() {
-    // this.$EventBus.$on('hotList', (hotList) => {
-    //   console.log('hotList', hotList);
-    //   this.hotList = hotList
-    // })
   },
   mounted() {
+    this.initAreaList()
     var jObj = JSON.parse(window.localStorage.getItem('baseifo'));
     const hotList = this.getHotList(jObj.AreaList)
     console.log('hotList mounted', jObj, hotList)
@@ -338,6 +365,44 @@ export default {
   },
   computed: {},
   methods: {
+    handleAreaTicked(target) {
+      console.log("this.areaTicked", target, this.areaTicked)
+      // if(!this.areaTicked.length) {
+      //   this.areaTicked = target
+      // } else if(this.areaTicked[0] === target[0]) {
+      //   this.areaTicked = target[1] ? [target[1]] : []
+      // } else {
+      //    this.areaTicked = target
+      // }
+         this.areaTicked = target
+    },
+    handleAreaSelected(target) {
+      // console.log("this.handleAreaSelected", target);
+    },
+    initAreaList() {
+      let jObj = JSON.parse(window.localStorage.getItem("baseifo"));
+      let arr = [];
+      jObj.AreaList.forEach((x) => {
+        x.selectable = false
+        x.children = x.SubList;
+        x.children.forEach((y) => {
+          y.checked = false;
+          y.explsed = false;
+          y.isShow = true;
+          if (y.SubList) {
+        y.selectable = false
+            y.children = y.SubList;
+            y.children.forEach((z) => {
+              z.checked = false;
+              z.explsed = false;
+              z.isShow = true;
+            });
+          }
+        });
+        this.areaList = jObj.AreaList;
+        this.areaListJSON = JSON.parse(JSON.stringify(this.areaList));
+      });
+    },
     getHotList(arr) {
       let hotArr = [];
       arr.forEach(item => {
@@ -436,9 +501,11 @@ export default {
       
       this.CommonJump("/search", {
         qsearchKey: this.searchKey,
+        areaIds: this.areaTicked.join(','),
         qsearchDate: this.searchDate,
         qsearchEndDate: this.searchEndDate,
       });
+      this.showSplitPannel = false
     },
     clearHistorys(){
       this.historys =[]
@@ -449,21 +516,6 @@ export default {
 </script>
 
 <style>
-::v-deep .q-field__control {
-  height: 40px;
-}
-::v-deep .q-field__control-container {
-  height: 40px;
-}
-::v-deep .q-field--auto-height .q-field__control {
-  min-height: 40px;
-}
-::v-deep .q-field__marginal {
-  height: 40px;
-}
-::v-deep .q-field--auto-height .q-field__native {
-  min-height: 40px;
-}
 .banner-style9 {
   /* margin-top: 0px; */
   /* position: relative; */
@@ -509,7 +561,7 @@ export default {
 .banner-style9 .showbox {
   position: absolute;
   box-sizing: border-box;
-  width: 100%;
+  width: 650px;
   height: 345px;
   background: #fff;
   left: 0;
@@ -603,7 +655,7 @@ export default {
 .chosen-box .split-word {
   font-size: 15px;
   color: #333;
-  line-height: 56px;
+  line-height: 40px;
 }
 </style>
 <style scoped>
@@ -620,4 +672,25 @@ cursor: pointer;
 background: #EE4454;
 color: #fff;
 }
+</style>
+<style lang="scss" scoped>
+
+::v-deep .q-field__control {
+  height: 40px;
+}
+::v-deep .q-field__control-container {
+  height: 40px;
+}
+::v-deep .q-field--auto-height .q-field__control {
+  height: 40px;
+}
+::v-deep .q-field__marginal {
+  height: 40px;
+}
+::v-deep .q-field--auto-height .q-field__native {
+  height: 40px;
+}
+::v-deep .q-field__label {
+  top: 13px
+}
 </style>
\ No newline at end of file

src/components/searchdata/kkday.vue

@@ -511,6 +511,9 @@ export default {
     this.goSearchHandler();
   },
   mounted() {
+    console.log('kkday', this.msg)
+      this.areaTicked = this.msg.areaId ? [this.msg.areaId] : (this.msg.areaIds ? this.msg.areaIds : []);
+      this.msg.placeIds = this.getChoseAddressCity().join(",");
     var CategoryName = this.getUrlKey("CategoryName", window.location.href);
     if (CategoryName) {
       let list = this.goodsType.find(
@@ -542,6 +545,7 @@ export default {
       this.areaTicked = target;
       console.log("this.areaTicked", target);
       this.msg.placeIds = this.getChoseAddressCity().join(",");
+      console.log('handleAreaTicked', this.areaTicked, this.msg.placeIds)
       this.goSearchHandler();
     },
     initAreaList() {
@@ -577,7 +581,7 @@ export default {
 
       if (this.msg.areaId) {
         this.$nextTick(() => {
-          this.$refs.area.setTicked([...new Set(arr)], true);
+          this.$refs.area?.setTicked([...new Set(arr)], true);
         });
       }
     },
@@ -701,7 +705,7 @@ export default {
       this.goodsTypeJSON = JSON.stringify(this.goodsType);
       if (this.msg.categoryId) {
         this.$nextTick(() => {
-          this.$refs.category.setTicked([...new Set(arr)], true);
+          this.$refs.category?.setTicked([...new Set(arr)], true);
         });
       }
     },

src/pages/Search.vue

@@ -1456,6 +1456,7 @@ export default {
     var qsearchDate = this.getUrlKey("qsearchDate", window.location.href);
     var qsearchEndDate = this.getUrlKey("qsearchEndDate", window.location.href);
     var areaId = this.getUrlKey("areaId", window.location.href);
+    var areaIds =  this.getUrlKey("areaIds", window.location.href)
     var categoryId = this.getUrlKey("categoryId", window.location.href);
     if (qsearchKey) {
       this.qMsg.searchKey = qsearchKey;
@@ -1469,6 +1470,9 @@ export default {
     if (areaId) {
       this.qMsg.areaId = Number(areaId);
     }
+    if (areaIds) {
+      this.qMsg.areaIds = areaIds.split(',').map(item => Number(item));
+    }
     if (categoryId) {
       this.qMsg.categoryId = Number(categoryId);
     }