首页样式优化，跳转搜索页优化

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

@@ -69,27 +69,48 @@
 }
 .city-box {
   padding: 14px 18px;
-  width: 641px;
+  width: 641px;background: #F5F5F5;
 }
 .city {
   width: 129px;
   height: 69px;
-  background: #ee4454;
   border-radius: 10px;
   margin: 11px;
+  border: 1px solid #eee;
   display: inline-block;
   position: relative;
   cursor: pointer;
 }
+.city2 {
+  width: 76px;
+height: 32px;
+background: #DBDBDB;
+border-radius: 8px;
+font-weight: bold;
+line-height: 32px;
+overflow: hidden;
+padding: 0 8px;
+margin-right: 20px;
+  cursor: pointer;
+}
+.city3 {
+height: 32px;
+line-height: 32px;
+  /* display: inline-block; */
+  margin: 0 10px 18px 0;
+  cursor: pointer;
+font-weight: bold;
+}
 .city:hover {
   background-color: #eeeeee;
 }
 .city-img {
-  width: 129px;
-  height: 69px;
+  width: 127px;
+  height: 67px;
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 1;
+  left: 1;
+  border-radius: 10px;
 }
 .city-name-box {
   z-index: 10;
@@ -114,22 +135,23 @@
 margin-left: 10px;
 }
 .all-menu {
-  width: 820px;
+  width: 660px;
   padding: 10px;
 }
 .category-item {
-  width: 200px;
+  width: 160px;
   padding: 10px;
+border-radius: 8px;
+font-weight: bold;
 }
 .font-16 {
   font-size: 16px;
 }
 .category-l2 {
-  padding: 8px;
 height: 34px;
-/* border-radius: 8px; */
-line-height: 18px;
-/* padding:0 8px; */
+border-radius: 8px;
+line-height: 34px;
+padding:0 8px;
 cursor: pointer;
 }
 .category-l2:hover {
@@ -141,10 +163,10 @@ color: #fff;
 }
 .category-l3 {
   padding: 8px;
-font-size: 14px;
+font-size: 12px;
 font-weight: 400;
 color: #A0A0A0;
-/* padding-left: 8px; */
+border-radius: 8px;
 cursor: pointer;
 }
 .category-l3:hover {
@@ -153,6 +175,14 @@ cursor: pointer;
 .category-l3-select {
 color: #EE4454;
 }
+.category-box {
+  width: 140px;
+  padding:10px;
+  font-weight: bold;
+}
+.category-btn {
+  width: 100px;
+}
 </style>
 <template>
   <q-header
@@ -355,7 +385,8 @@ color: #EE4454;
                   </div>
                 </div>
               </div>
-              <div class="city-box">
+              <!-- 热门城市 -->
+              <div v-if="!selectedAreaId" class="city-box">
                 <div v-for="item in selectedArea" :key="item.Id">
                   <div @click="handleSelectArea(item)" class="city" >
                     <img class="city-img" v-if="item.ImageList.length" :src="item.ImageList[0]" />
@@ -371,11 +402,24 @@ color: #EE4454;
                   </template>
                 </div>
               </div>
+
+              <div v-else class="city-box">
+                
+                <div class="flex" v-for="item in selectedArea" :key="item.Id">
+                  <div @click="handleSelectArea(item)" class="city2" >
+                    {{item.Name}}
+                  </div>
+                    <div class="flex flex-wrap">
+                      <div @click="handleSelectArea(item2)" class="city3" v-for="item2 in item.SubList" :key="item2.Id">{{item2.Name}}</div>
+                    </div>
+                </div>
+              </div>
+
             </div>
           </q-menu>
         </q-btn>
         <q-separator style="height: 16px;margin: auto 0" vertical/>
-        <q-btn class="all-type" flat label="全部分類" @mouseenter="typeHoverAll(true)" @mouseleave="typeHoverAll(false)">
+        <q-btn class="all-type category-btn" flat label="全部分類" @mouseenter="typeHoverAll(true)" @mouseleave="typeHoverAll(false)">
           <q-menu ref="menu0" @mouseenter="menuFocusAll = 2" @mouseleave="menuLeaveAll">
             <div class="all-menu">
             <div class="flex">
@@ -402,8 +446,9 @@ color: #EE4454;
           </q-menu>
         </q-btn>
         <template v-for="(x, i) in dataList.CategoryList">
-          <q-btn :key="i" :label="x.CategoryName" flat :content-style="{ hover: '#ff0000' }" @mouseenter="typeHover(i,true)" @mouseleave="typeHover(i,false)">
+          <q-btn class="category-btn" :key="i" :label="x.CategoryName" flat :content-style="{ hover: '#ff0000' }" @mouseenter="typeHover(i,true)" @mouseleave="typeHover(i,false)">
             <q-menu ref="menu" :key="i" @mouseenter="menuFocus = 2" @mouseleave="menuLeave(i)">
+              <div class="category-box">
                   <div :key="item.Id" v-for="item in x.SubList">
                     <div @click="handleCategoryChage(item)" class="category-l2" :class="{'category-l2-select': selectCategory === item.Id}">{{item.CategoryName}}</div>
                     <div v-if="item.SubList.length">
@@ -416,7 +461,7 @@ color: #EE4454;
                           <div>{{item2.CategoryName}}</div>
                         </div>
                     </div>
-                  </div>
+                  </div></div>
             </q-menu>
           </q-btn>
         </template>

src/components/search_sf/search_sf2.vue

@@ -517,16 +517,17 @@ export default {
     },
     handleHotTagClick(item) {
       this.setectHotTag = item.Id
-      let val = item.Name
-      if(val!='' && typeof val == 'string'){
-        this.searchKey=val
-      }
-      this.historys=Array.from(new Set([this.searchKey].concat(this.historys)))
-      localStorage['recent_search'] = JSON.stringify(this.historys)
+      // let val = item.Name
+      // if(val!='' && typeof val == 'string'){
+      //   this.searchKey=val
+      // }
+      // this.historys=Array.from(new Set([this.searchKey].concat(this.historys)))
+      // localStorage['recent_search'] = JSON.stringify(this.historys)
       this.CommonJump("/search", {
         qsearchKey: this.searchKey,
         qsearchDate: this.searchDate,
         qsearchEndDate: this.searchEndDate,
+        areaId: item.Id
       });
     },
     //获取地区数据
@@ -761,6 +762,7 @@ line-height: 34px;
 padding-left: 8px;
 border-radius: 8px;
 margin: 12px 0 12px 12px;
+cursor: pointer;
 }
 .hot-tag-select {
 background: #EE4454;

src/components/searchdata/kkday.vue

@@ -11,7 +11,7 @@
           class="q-ma-md"
           @input="changeAddrSearchHandler"
         />
-        <template v-for="(x, i) in areaList">
+        <!-- <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
@@ -50,7 +50,18 @@
               </template>
             </div>
           </div>
-        </template>
+        </template> -->
+        
+        <q-tree
+          ref="area"
+          :nodes="areaList"
+          no-connectors
+          node-key="Id"
+          label-key="Name"
+          tick-strategy="leaf"
+          @update:ticked="handleAreaTicked"
+          :ticked="areaTicked"
+        />
       </q-card>
       <q-card flat class="rounded-borders q-py-md q-mt-lg">
         <div class="text-subtitle1 text-weight-bold q-mx-md">所有商品類別</div>
@@ -112,8 +123,8 @@
         <div class="row items-center justify-center col">
           <span class="text-grey-8">
             {{
-            dateRange.from
-            ? `${dateRange.from} - ${dateRange.to}`
+            msg.startDate
+            ? `${msg.startDate} - ${msg.endDate}`
             : "篩選出發日期"
             }}
           </span>
@@ -251,11 +262,11 @@
             </div>
             <div class="row items-end">
               <div class="col f12">
-                <span>剩餘空位：</span>
+                <!-- <span>剩餘空位：</span>
                 <span
                   class="text-primary text-weight-bold q-pr-sm q-mr-sm"
                   style="border-right: 1px solid #efefef"
-                >{{ x.surplus }}</span>
+                >{{ x.surplus }}</span> -->
                 <span>行程天數：</span>
                 <span class="text-secondary text-weight-bold">{{ x.dayNum }} 天</span>
               </div>
@@ -279,6 +290,9 @@
           active-design="unelevated"
           unelevated
           glossy
+          ellipses
+          :max-pages="6"
+      boundary-numbers
           size="13px"
           padding="sm md"
         ></q-pagination>
@@ -293,6 +307,7 @@ export default {
   props: ["qMsg"],
   data() {
     return {
+      areaTicked: [],
       ticked: [],
       selected: [],
       searchAdd: {
@@ -408,39 +423,47 @@ export default {
       this.ticked = target
       this.goSearchHandler();
     },
+    handleAreaTicked(target) {
+      console.log("handleAreaTicked", target, this.areaTicked);
+      this.areaTicked = target
+      this.goSearchHandler();
+    }, 
     initAreaList() {
       let jObj = JSON.parse(window.localStorage.getItem("baseifo"));
+      let arr = []
       jObj.AreaList.forEach(x => {
-        x.SubList.forEach(y => {
+        x.children = x.SubList
+        x.children.forEach(y => {
           y.checked = false;
           y.explsed = false;
           y.isShow = true;
           if(y.Id === this.msg.areaId) {
-            y.checked = true
-            this.chosenAddress.push(y);
-            this.changeCheckHandler(y)
-            this.msg.placeIds = this.getChoseAddressCity().join(',');
+            arr.push(y.Id)
           }
           if (y.SubList) {
-            y.SubList.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) {
-            z.checked = true
-            this.chosenAddress.push(z);
-            this.msg.placeIds = this.getChoseAddressCity().join(',');
-            this.changeCheckHandler(z,y)
+            arr.push(z.Id)
           }
           if(y.Id === this.msg.areaId) {
-            z.checked = true
+            arr.push(z.Id)
           }
             });
           }
         });
-        this.areaList.push(...x.SubList);
+        this.areaList = jObj.AreaList;
       });
       console.log("this.areaList", this.areaList, this.msg)
+      
+      if(this.msg.areaId) {
+        this.$nextTick(() => {
+          this.$refs.area.setTicked([...new Set(arr)], true)
+        })
+      }
     },
     changeExplesdHandler(x) {
       x.explsed = !x.explsed;
@@ -562,7 +585,6 @@ export default {
               z.explsed = false;
               z.isShow = true;
           if(z.Id === this.msg.categoryId) {
-            arr.push(y.Id)
             arr.push(z.Id)
           }
           if(y.Id === this.msg.categoryId) {
@@ -595,7 +617,7 @@ export default {
     },
     goSearchHandler() {
       this.msg.webSiteCategoryIds = this.ticked.join(',')
-      this.$q.loading.show();
+      // this.$q.loading.show();
       this.DataList = [];
       let minTripDay = -1,
         maxTripDay = -1,
@@ -622,6 +644,8 @@ export default {
           this.msg.priceOrderByField = 2;
         }
       }
+      this.PageCount = 0
+      this.TotalCount = 0
       this.apipost(
         "b2c_get_GetB2CMergeProductPageList",
         this.msg,

src/pages/Search.vue

 <style>
-  .SearchMain {
-    min-height: 800px;
-  }
+.SearchMain {
+  min-height: 800px;
+}
 
-  .SearchTop {
-    width: 100%;
-    /* margin: 32px 0 30px 0;
+.SearchTop {
+  width: 100%;
+  /* margin: 32px 0 30px 0;
     background-color: rgba(255, 255, 255, .95);
     border-top: 1px solid #eee;
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .03); */
-    min-height: 600px;
-  }
-
-  .SearchContent {
-    position: relative;
-    display: flex;
-    width: 100%;
-    margin: 6px auto 0;
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .03);
-  }
-
-  .SearchMain .showbox {
-    position: absolute;
-    box-sizing: border-box;
-    width: 100%;
-    height: 345px;
-    background: #fff;
-    left: 0;
-    top: 60px;
-    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
-  }
-
-  .Search_Zhi {
-    display: inline-block;
-    margin: 0 10px;
-    height: 40px;
-    line-height: 40px;
-  }
-
-  .full_price {
-    width: 40%;
-    display: inline-block;
-    margin-left: 20px;
-  }
-
-  .moreTiaojiao {
-    width: 100%;
-    height: 60px;
-    text-align: center;
-    line-height: 60px;
-    font-size: 18px;
-    border-bottom: 1px solid #eee;
-    color: #333;
-  }
-
-  .full_listDiv {
-    padding: 20px;
-    border-bottom: 1px solid #eee;
-  }
-
-  .full_title {
-    margin-bottom: 10px;
-    font-size: 15px;
-    font-weight: 700;
-    color: #666;
-  }
-
-  .full_btndiv {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    z-index: 2;
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    border-top: 1px solid #eee;
-    padding: 20px 10px;
-    background-color: #fff;
-  }
-
-  .search-bar-m {
-    display: flex;
-    width: 100%;
-    border-right: 1px solid #eee;
-    border-bottom: 1px solid #eee;
-  }
-
-  .search-bar-m .keyword-input {
-    width: calc(100% - 40px);
-    cursor: pointer;
-  }
-
-  .keyword-input {
-    height: 44px;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    font-size: 14px;
-    outline: none;
-    color: #333;
-    padding-left: 20px;
-  }
-
-  .search-bar-m i {
-    height: 45px;
-    line-height: 45px;
-    text-align: center;
-    margin-left: 20px;
-    color: #999;
-  }
-
-  .sortDiv {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    border-top: 1px solid #eee;
-    box-shadow: 0 2px 6px 0 rgba(0,0,0,.03);
-  }
-
-  .sortShaixuan {
-    width: 50%;
-    height: 57px;
-    line-height: 57px;
-    text-align: center;
-  }
-
-  @media only screen and (max-width: 1200px) {
-    .pd-list .pd-box {
-      flex-basis: calc(50% - 10px) !important;
-    }
-
-    .pd-list .pd-box:nth-child(even) {
-      margin-right: 0 !important;
-    }
-  }
-
-  @media only screen and (min-width: 768px) {
-    .pd-box:hover {
-      transform: translate(0, -4px) !important;
-      box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.1) !important;
-    }
-  }
-
-  @media only screen and (max-width: 425px) {
-    .pd-list .pd-box {
-      flex-basis: 100% !important;
-      margin-right: 0 !important;
-    }
-  }
-
+  min-height: 600px;
+}
+
+.SearchContent {
+  position: relative;
+  display: flex;
+  width: 100%;
+  margin: 6px auto 0;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.03);
+}
+
+.SearchMain .showbox {
+  position: absolute;
+  box-sizing: border-box;
+  width: 100%;
+  height: 345px;
+  background: #fff;
+  left: 0;
+  top: 60px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
+}
+
+.Search_Zhi {
+  display: inline-block;
+  margin: 0 10px;
+  height: 40px;
+  line-height: 40px;
+}
+
+.full_price {
+  width: 40%;
+  display: inline-block;
+  margin-left: 20px;
+}
+
+.moreTiaojiao {
+  width: 100%;
+  height: 60px;
+  text-align: center;
+  line-height: 60px;
+  font-size: 18px;
+  border-bottom: 1px solid #eee;
+  color: #333;
+}
+
+.full_listDiv {
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.full_title {
+  margin-bottom: 10px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #666;
+}
+
+.full_btndiv {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  border-top: 1px solid #eee;
+  padding: 20px 10px;
+  background-color: #fff;
+}
+
+.search-bar-m {
+  display: flex;
+  width: 100%;
+  border-right: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+}
+
+.search-bar-m .keyword-input {
+  width: calc(100% - 40px);
+  cursor: pointer;
+}
+
+.keyword-input {
+  height: 44px;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  outline: none;
+  color: #333;
+  padding-left: 20px;
+}
+
+.search-bar-m i {
+  height: 45px;
+  line-height: 45px;
+  text-align: center;
+  margin-left: 20px;
+  color: #999;
+}
+
+.sortDiv {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid #eee;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.03);
+}
+
+.sortShaixuan {
+  width: 50%;
+  height: 57px;
+  line-height: 57px;
+  text-align: center;
+}
+
+@media only screen and (max-width: 1200px) {
   .pd-list .pd-box {
-    margin-right: 20px;
-    margin-bottom: 30px;
-    flex-basis: calc(25% - 15px);
-    border-radius: 3px;
-    background-clip: padding-box;
-    box-shadow: 0 2px 3px rgba(0, 0, 0, .09);
-    transition: -webkit--webkit-transform .2s ease, box-shadow .2s ease;
-    background-color: #fff;
-  }
-
-  .pd-box .pd-img {
-    position: relative;
-    width: 100%;
-    padding-bottom: 66.237%;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
-    background-position: center;
-  }
-
-  .pd-box .pd-img .pd-price {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    z-index: 2;
-    width: 100%;
-    border-bottom: 4px solid #00afff;
-    text-align: right;
-  }
-
-  .pd-box .pd-img .pd-price .price {
-    display: inline-block;
-    padding: 4px 12px 0;
-    color: #fff;
-    font-size: 22px;
-    font-weight: 700;
-    background-color: #00afff;
-    -webkit-border-radius: 5px 0 0;
-    -webkit-background-clip: padding-box;
-    -moz-border-radius: 5px 0 0;
-    -moz-background-clip: padding;
-    border-radius: 5px 0 0;
-    background-clip: padding-box;
-  }
-
-  .pd-box .pd-img .pd-price .price small {
-    padding: 0 4px;
-    font-size: 14px;
-  }
-
-  .pd-box .pd-content {
-    padding: 15px 15px 20px;
-  }
-
-  .pd-box .pd-title {
-    font-size: 15px;
-    line-height: 1.5;
-    font-weight: 400;
-    color: #333;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-  }
-
-  .pd-box .pd-departure {
-    padding-top: 10px;
-    font-size: 14px;
-    color: #999;
-  }
-
-  .pd-box .pd-departure .more {
-    float: right;
-    font-size: 14px;
+    flex-basis: calc(50% - 10px) !important;
   }
 
-  .Search_center {
-    width: 100%;
-    max-width: 1200px;
-    margin: 20px auto;
-    padding: 0 20px;
-  }
-
-  .Search_center .pd-list {
-    display: flex;
-    flex-flow: wrap;
-    width: 100%;
-    margin: 0;
-    padding: 0;
+  .pd-list .pd-box:nth-child(even) {
+    margin-right: 0 !important;
   }
+}
 
-  .pd-list li:nth-child(4n) {
-    margin-right: 0;
+@media only screen and (min-width: 768px) {
+  .pd-box:hover {
+    transform: translate(0, -4px) !important;
+    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.1) !important;
   }
+}
 
-  .pd-list li {
-    list-style-type: none;
-  }
-
-  .SearchMain .search-content {
-    display: flex;
-    align-items: flex-start;
-    margin-top: 20px;
-  }
-
-  .wl-section-block {
-    width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
-  }
-
-  .search-filter-aside {
-    width: 300px;
-    margin-right: 30px;
-    margin-bottom: 30px;
-    background-color: #fff;
+@media only screen and (max-width: 425px) {
+  .pd-list .pd-box {
+    flex-basis: 100% !important;
+    margin-right: 0 !important;
+  }
+}
+
+.pd-list .pd-box {
+  margin-right: 20px;
+  margin-bottom: 30px;
+  flex-basis: calc(25% - 15px);
+  border-radius: 3px;
+  background-clip: padding-box;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
+  transition: -webkit--webkit-transform 0.2s ease, box-shadow 0.2s ease;
+  background-color: #fff;
+}
+
+.pd-box .pd-img {
+  position: relative;
+  width: 100%;
+  padding-bottom: 66.237%;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  background-position: center;
+}
+
+.pd-box .pd-img .pd-price {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  width: 100%;
+  border-bottom: 4px solid #00afff;
+  text-align: right;
+}
+
+.pd-box .pd-img .pd-price .price {
+  display: inline-block;
+  padding: 4px 12px 0;
+  color: #fff;
+  font-size: 22px;
+  font-weight: 700;
+  background-color: #00afff;
+  -webkit-border-radius: 5px 0 0;
+  -webkit-background-clip: padding-box;
+  -moz-border-radius: 5px 0 0;
+  -moz-background-clip: padding;
+  border-radius: 5px 0 0;
+  background-clip: padding-box;
+}
+
+.pd-box .pd-img .pd-price .price small {
+  padding: 0 4px;
+  font-size: 14px;
+}
+
+.pd-box .pd-content {
+  padding: 15px 15px 20px;
+}
+
+.pd-box .pd-title {
+  font-size: 15px;
+  line-height: 1.5;
+  font-weight: 400;
+  color: #333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+.pd-box .pd-departure {
+  padding-top: 10px;
+  font-size: 14px;
+  color: #999;
+}
+
+.pd-box .pd-departure .more {
+  float: right;
+  font-size: 14px;
+}
+
+.Search_center {
+  width: 100%;
+  max-width: 1200px;
+  margin: 20px auto;
+  padding: 0 20px;
+}
+
+.Search_center .pd-list {
+  display: flex;
+  flex-flow: wrap;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.pd-list li:nth-child(4n) {
+  margin-right: 0;
+}
+
+.pd-list li {
+  list-style-type: none;
+}
+
+.SearchMain .search-content {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 20px;
+}
+
+.wl-section-block {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.search-filter-aside {
+  width: 300px;
+  margin-right: 30px;
+  margin-bottom: 30px;
+  background-color: #fff;
+}
+
+.search-content .group-result-list {
+  display: flex;
+  flex-flow: wrap;
+  width: calc(100% - 300px);
+}
+
+.search-filter-aside .search-header {
+  position: relative;
+  padding: 10px 15px;
+  border-bottom: 1px solid #eee;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.search-filter-aside .clear-filter {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  bottom: auto;
+  left: auto;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  color: #999;
+  cursor: pointer;
+}
+
+.search-filter-aside .search-type {
+  position: relative;
+  padding: 15px;
+  border-bottom: 1px solid #eee;
+}
+
+.search-filter-aside .search-type .search-title {
+  margin-bottom: 20px;
+  font-size: 16px;
+  font-weight: 700;
+  color: #333;
+}
+
+.range-text {
+  display: flex;
+  justify-content: space-between;
+  letter-spacing: 0;
+  font-weight: 700;
+  color: #333;
+  font-size: 15px;
+}
+
+.SearchMain .row.inline {
+  display: flex !important;
+}
+
+.group-statis-block {
+  display: flex;
+  justify-content: flex-start;
+  width: 100%;
+  font-weight: 700;
+  margin-bottom: 15px;
+  font-size: 15px;
+  height: 45px;
+}
+
+.group-result-list .group-statis-block > * {
+  display: inline-block;
+  height: 100%;
+  line-height: 45px;
+}
+
+.group-result-list .group-statis-block .group-share {
+  position: relative;
+  width: 150px;
+  text-align: center;
+  background-color: #2a8dbd;
+  color: #fff;
+  margin-right: 15px;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 2px 7px 0 rgba(0, 0, 0, 0.12);
+}
+
+.group-result-list .group-statis-block .group-statis-detail {
+  padding-left: 10px;
+  background: #fff;
+  width: calc(100% - 150px);
+}
+
+.group-statis-detail .title {
+  font-size: 18px;
+}
+
+.group-statis-detail .num {
+  color: #fd992d;
+  margin: 0 3px;
+  font-size: 16px;
+}
+
+.group-box {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #fff;
+  border-radius: 3px;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  margin-bottom: 20px;
+}
+
+.group-cover {
+  position: relative;
+  width: 270px;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  background-position: center;
+  overflow: hidden;
+}
+
+.group-cover img {
+  position: absolute;
+  top: 0;
+  right: null;
+  bottom: null;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+}
+
+.group-box .group-main {
+  display: flex;
+  flex-wrap: wrap;
+  width: calc(100% - 270px);
+  flex-basis: calc(100% - 270px);
+}
+
+.group-box > div {
+  flex: 1;
+}
+
+.group-box .group-main .group-info {
+  padding: 20px;
+  width: calc(100% - 200px);
+  border-right: 1px solid #eee;
+}
+
+.group-box .group-main .group-info .group-detail {
+  margin-bottom: 5px;
+  font-size: 14px;
+  color: #666;
+}
+
+.group-box .group-main .group-info .group-detail i {
+  margin-right: 5px;
+  font-size: 18px;
+}
+
+.group-box .group-main .group-info .group-detail > * {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.group-name {
+  color: #333;
+  font-size: 16px;
+  line-height: 1.2;
+  font-weight: bold;
+}
+
+.group-list {
+  margin: 0;
+  padding: 0;
+}
+
+.group-list li {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
+  margin-bottom: 5px;
+  list-style-type: none;
+}
+
+.group-list li a {
+  padding: 5px;
+  font-size: 12px;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+  color: #0083bd;
+  border-radius: 3px;
+  background-clip: padding-box;
+}
+
+.price-info {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  padding: 20px 15px;
+  width: 200px;
+  font-size: 14px;
+}
+
+.price-wrap {
+  width: 100%;
+  text-align: right;
+}
+
+.price-wrap > * {
+  display: block;
+  width: 100%;
+}
+
+.price_Search {
+  font-size: 32px;
+  font-weight: 700;
+  color: #ff9a14;
+}
+
+.price_unit {
+  font-size: 14px;
+  padding-right: 5px;
+}
+
+.btn_warning {
+  text-align: center;
+  cursor: pointer;
+  padding: 0 15px;
+  height: 40px;
+  min-width: 135px;
+  font-size: 15px;
+  border-radius: 2px;
+  background-clip: padding-box;
+  letter-spacing: 0.05em;
+  background-color: #ff9a14;
+  color: #fff;
+  margin-top: 10px;
+  line-height: 40px;
+}
+
+@media only screen and (max-width: 1200px) {
+  .search-content .search-filter-aside {
+    display: none;
   }
 
   .search-content .group-result-list {
-    display: flex;
-    flex-flow: wrap;
-    width: calc(100% - 300px);
-  }
-
-  .search-filter-aside .search-header {
-    position: relative;
-    padding: 10px 15px;
-    border-bottom: 1px solid #eee;
-    font-size: 18px;
-    font-weight: 700;
-  }
-
-  .search-filter-aside .clear-filter {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    bottom: auto;
-    left: auto;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    font-size: 13px;
-    color: #999;
-    cursor: pointer;
-  }
-
-  .search-filter-aside .search-type {
-    position: relative;
-    padding: 15px;
-    border-bottom: 1px solid #eee;
-  }
-
-  .search-filter-aside .search-type .search-title {
-    margin-bottom: 20px;
-    font-size: 16px;
-    font-weight: 700;
-    color: #333;
-  }
-
-  .range-text {
-    display: flex;
-    justify-content: space-between;
-    letter-spacing: 0;
-    font-weight: 700;
-    color: #333;
-    font-size: 15px;
-  }
-
-  .SearchMain .row.inline {
-    display: flex !important;
-  }
-
-  .group-statis-block {
-    display: flex;
-    justify-content: flex-start;
     width: 100%;
-    font-weight: 700;
-    margin-bottom: 15px;
-    font-size: 15px;
-    height: 45px;
   }
+}
 
-  .group-result-list .group-statis-block>* {
-    display: inline-block;
-    height: 100%;
-    line-height: 45px;
+@media only screen and (max-width: 1200px) {
+  .search-content {
+    max-width: 768px;
   }
+}
 
-  .group-result-list .group-statis-block .group-share {
-    position: relative;
-    width: 150px;
-    text-align: center;
-    background-color: #2a8dbd;
-    color: #fff;
-    margin-right: 15px;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 2px 7px 0 rgba(0, 0, 0, .12);
+@media only screen and (max-width: 768px) {
+  .group-statis-block .group-statis-detail {
+    width: calc(100% - 45px);
   }
 
-  .group-result-list .group-statis-block .group-statis-detail {
-    padding-left: 10px;
-    background: #fff;
-    width: calc(100% - 150px);
-  }
-
-  .group-statis-detail .title {
-    font-size: 18px;
-  }
-
-  .group-statis-detail .num {
-    color: #fd992d;
-    margin: 0 3px;
-    font-size: 16px;
-  }
-
-  .group-box {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    background-color: #fff;
-    border-radius: 3px;
-    box-shadow: 0 2px 3px rgba(0, 0, 0, .09);
-    transition: transform .2s ease, box-shadow .2s ease;
-    margin-bottom: 20px;
-  }
-
-  .group-cover {
-    position: relative;
-    width: 270px;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
-    background-position: center;
-    overflow: hidden;
-  }
-
-  .group-cover img {
-    position: absolute;
-    top: 0;
-    right: null;
-    bottom: null;
-    left: 0;
-    z-index: 1;
+  .group-box .group-cover {
+    display: block;
     width: 100%;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    pointer-events: none;
+    padding-bottom: 60%;
   }
 
   .group-box .group-main {
-    display: flex;
-    flex-wrap: wrap;
-    width: calc(100% - 270px);
-    flex-basis: calc(100% - 270px);
-  }
-
-  .group-box>div {
-    flex: 1;
+    display: block;
+    width: 100%;
   }
 
   .group-box .group-main .group-info {
-    padding: 20px;
-    width: calc(100% - 200px);
-    border-right: 1px solid #eee;
-  }
-
-  .group-box .group-main .group-info .group-detail {
-    margin-bottom: 5px;
-    font-size: 14px;
-    color: #666;
-  }
-
-  .group-box .group-main .group-info .group-detail i {
-    margin-right: 5px;
-    font-size: 18px;
-  }
-
-  .group-box .group-main .group-info .group-detail>* {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  .group-name {
-    color: #333;
-    font-size: 16px;
-    line-height: 1.2;
-    font-weight: bold;
-  }
-
-  .group-list {
-    margin: 0;
-    padding: 0;
-  }
-
-  .group-list li {
-    display: inline-block;
-    vertical-align: middle;
-    margin-right: 10px;
-    margin-bottom: 5px;
-    list-style-type: none;
-  }
-
-  .group-list li a {
-    padding: 5px;
-    font-size: 12px;
-    background-color: #d9edf7;
-    border-color: #bce8f1;
-    color: #0083bd;
-    border-radius: 3px;
-    background-clip: padding-box;
-  }
-
-  .price-info {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-end;
-    padding: 20px 15px;
-    width: 200px;
-    font-size: 14px;
-  }
-
-  .price-wrap {
     width: 100%;
-    text-align: right;
+    padding-bottom: 0;
+    border-right: 0;
   }
 
-  .price-wrap>* {
+  .group-box .group-main .price-info {
     display: block;
     width: 100%;
-  }
-
-  .price_Search {
-    font-size: 32px;
-    font-weight: 700;
-    color: #ff9a14;
-  }
-
-  .price_unit {
-    font-size: 14px;
-    padding-right: 5px;
-  }
-
-  .btn_warning {
-    text-align: center;
-    cursor: pointer;
-    padding: 0 15px;
-    height: 40px;
-    min-width: 135px;
-    font-size: 15px;
-    border-radius: 2px;
-    background-clip: padding-box;
-    letter-spacing: .05em;
-    background-color: #ff9a14;
-    color: #fff;
-    margin-top: 10px;
-    line-height: 40px;
-  }
-
-  @media only screen and (max-width: 1200px) {
-    .search-content .search-filter-aside {
-      display: none;
-    }
-
-    .search-content .group-result-list {
-      width: 100%;
-    }
-  }
-
-  @media only screen and (max-width: 1200px) {
-    .search-content {
-      max-width: 768px;
-    }
-  }
-
-  @media only screen and (max-width: 768px) {
-    .group-statis-block .group-statis-detail {
-      width: calc(100% - 45px);
-    }
-
-    .group-box .group-cover {
-      display: block;
-      width: 100%;
-      padding-bottom: 60%;
-    }
-
-    .group-box .group-main {
-      display: block;
-      width: 100%;
-    }
-
-    .group-box .group-main .group-info {
-      width: 100%;
-      padding-bottom: 0;
-      border-right: 0;
-    }
-
-    .group-box .group-main .price-info {
-      display: block;
-      width: 100%;
-      padding-top: 0;
-    }
-
-    .price-info .price-wrap .price_Search {
-      font-size: 28px;
-    }
-  }
-
-  .SearchMain .q-field__control {
-    height: 46px;
-  }
-
-  .SearchMain .q-field__control {
-    min-height: 46px !important;
-  }
-
-  .SearchMain .q-field__native {
-    min-height: 46px;
-  }
-
-  .SearchMain .q-field__marginal {
-    height: 46px;
-  }
-
-  .search-filter-inner {
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    /* width: 100%; */
-    height: 48px;
-    margin: 0 auto;
-    max-width: 1160px;
-    align-items: center;
-    border-top:1px solid #eee;
-    border-bottom:1px solid #eee;
-  }
-
-  .SearchContent .search-item {
-    display: flex;
-    border-right: 1px solid #eee;
-    line-height: 44px;
-    padding-right: 20px;
-  }
-  .search-item:first-child{
-    border-left: 1px solid #eee;
-  }
-  .search-filter-inner i {
-    width: 50px;
-    height: 45px;
-    line-height: 45px;
-    text-align: center;
-    color: #999;
-    display: inline-block;
-  }
-
-  .full-height .q-textarea .q-field__control {
-    min-height: 25px !important;
-  }
-
-  .full_price .q-placeholder {
-    min-height: 25px !important;
-  }
-
-  /* .text-h6 {
+    padding-top: 0;
+  }
+
+  .price-info .price-wrap .price_Search {
+    font-size: 28px;
+  }
+}
+
+.SearchMain .q-field__control {
+  height: 46px;
+}
+
+.SearchMain .q-field__control {
+  min-height: 46px !important;
+}
+
+.SearchMain .q-field__native {
+  min-height: 46px;
+}
+
+.SearchMain .q-field__marginal {
+  height: 46px;
+}
+
+.search-filter-inner {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  /* width: 100%; */
+  height: 48px;
+  margin: 0 auto;
+  max-width: 1160px;
+  align-items: center;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+}
+
+.SearchContent .search-item {
+  display: flex;
+  border-right: 1px solid #eee;
+  line-height: 44px;
+  padding-right: 20px;
+}
+.search-item:first-child {
+  border-left: 1px solid #eee;
+}
+.search-filter-inner i {
+  width: 50px;
+  height: 45px;
+  line-height: 45px;
+  text-align: center;
+  color: #999;
+  display: inline-block;
+}
+
+.full-height .q-textarea .q-field__control {
+  min-height: 25px !important;
+}
+
+.full_price .q-placeholder {
+  min-height: 25px !important;
+}
+
+/* .text-h6 {
     text-align: center;
     padding: 0 20px;
     height: 60px;
@@ -627,78 +627,88 @@
     font-weight: 700;
     position: relative;
   } */
-  .text-h6 i {
-    position: absolute;
-    right:20px;
-    cursor: pointer;
-    font-size:23px;
-  }
-  .SearchContent .q-field--filled .q-field__control{
-    background:#fff;
-  }
-  .SearchContent .q-field--filled .q-field__control:before{
-    background-color: #fff;
-    border-bottom: 0;
-  }
-  .SearchContent .q-field--filled.q-field--focused .q-field__control:before{
-    background-color: #fff!important;
-  }
-  .sortDiv .q-field--filled .q-field__control{
-    background:#fff;
-  }
-  .sortDiv .q-field--filled .q-field__control:before{
-    background-color: #fff;
-    border-bottom: 0;
-  }
-  .sortDiv .q-field--filled.q-field--focused .q-field__control:before{
-    background-color: #fff!important;
-  }
-  .mobileSearch{
-    display:none;
-  }
-  @media only screen and (max-width: 768px){
-   .SearchContent {
-      display:none;
-    }
-    .mobileSearch{
-      display:block;
-    }
-  }
-  .SearchMain .blank-block{
-    margin: 100px auto;
-    width: 300px;
-    text-align: center;
-  }
-  .SearchMain .blank-block i{
-    font-size: 80px;
-    color: #ddd;
-  }
-  .SearchMain .blank-block p{
-    color: #999;
-    font-size: 15px;
-    letter-spacing: 1px;
+.text-h6 i {
+  position: absolute;
+  right: 20px;
+  cursor: pointer;
+  font-size: 23px;
+}
+.SearchContent .q-field--filled .q-field__control {
+  background: #fff;
+}
+.SearchContent .q-field--filled .q-field__control:before {
+  background-color: #fff;
+  border-bottom: 0;
+}
+.SearchContent .q-field--filled.q-field--focused .q-field__control:before {
+  background-color: #fff !important;
+}
+.sortDiv .q-field--filled .q-field__control {
+  background: #fff;
+}
+.sortDiv .q-field--filled .q-field__control:before {
+  background-color: #fff;
+  border-bottom: 0;
+}
+.sortDiv .q-field--filled.q-field--focused .q-field__control:before {
+  background-color: #fff !important;
+}
+.mobileSearch {
+  display: none;
+}
+@media only screen and (max-width: 768px) {
+  .SearchContent {
+    display: none;
   }
-  .desktop-page{
-    max-width:1200px;
-    margin:0 auto;
+  .mobileSearch {
+    display: block;
   }
+}
+.SearchMain .blank-block {
+  margin: 100px auto;
+  width: 300px;
+  text-align: center;
+}
+.SearchMain .blank-block i {
+  font-size: 80px;
+  color: #ddd;
+}
+.SearchMain .blank-block p {
+  color: #999;
+  font-size: 15px;
+  letter-spacing: 1px;
+}
+.desktop-page {
+  max-width: 1200px;
+  margin: 0 auto;
+}
 </style>
 <template>
   <div class="SearchMain" :class="{'desktop-page':$q.platform.is.desktop}">
     <div class="SearchTop">
       <div class="q-my-md" v-if="qMsg.searchKey">
         <q-breadcrumbs>
-          <q-breadcrumbs-el icon="home" label="首頁" class="cursor-pointer" @click="CommonJump('/index', {})"/>
+          <q-breadcrumbs-el
+            icon="home"
+            label="首頁"
+            class="cursor-pointer"
+            @click="CommonJump('/index', {})"
+          />
           <q-breadcrumbs-el :label="qMsg.searchKey" />
         </q-breadcrumbs>
       </div>
       <div class="text-h6 text-left" v-if="qMsg.searchKey">
-        搜尋結果 “<span class="text-primary">{{ qMsg.searchKey }}</span>”
+        搜尋結果 “
+        <span class="text-primary">{{ qMsg.searchKey }}</span>”
       </div>
       <!-- 电脑端 -->
       <div class="row SearchContent q-mt-md" v-if="!$q.screen.xs && 1==0">
         <div class="search-filter-inner">
-          <div class="search-item" style="width:200px;cursor:pointer;" @click="isShowDialog=true,goSearchHandler">
+          <div
+            class="search-item"
+            style="width:200px;cursor:pointer;"
+            @click="isShowDialog=true,goSearchHandler"
+          >
             <i class="iconfont iconchazhao"></i>
             {{qMsg.searchKey}}
           </div>
@@ -708,19 +718,40 @@
           </div>
 
           <div class="search-item" style="margin-left:20px;">
-            <q-select filled v-model="sortNum" :options="sortArray" @input="changeData" emit-value map-options />
+            <q-select
+              filled
+              v-model="sortNum"
+              :options="sortArray"
+              @input="changeData"
+              emit-value
+              map-options
+            />
           </div>
           <div class="search-item" style="margin-left:20px;">
             <span style="display:inline-block;cursor:pointer;" @click="fullHeight = true">更多篩選條件</span>
           </div>
         </div>
-        <div v-show="showSplitPannel" id="sb" style="z-index:999" transition-show="fade" elevated
-          transition-hide="scale" class="showbox row">
+        <div
+          v-show="showSplitPannel"
+          id="sb"
+          style="z-index:999"
+          transition-show="fade"
+          elevated
+          transition-hide="scale"
+          class="showbox row"
+        >
           <div style="width:180px;">
             <q-scroll-area :thumb-style="thumbStyle" :bar-style="barStyle" style="height: 100%;">
               <q-list>
-                <q-item v-for="(x, i) in areas" :key="i" clickable v-ripple :active="crtAreaIndex==i"
-                  @click="clkAreaHandler(i)" active-class="my-menu-link">
+                <q-item
+                  v-for="(x, i) in areas"
+                  :key="i"
+                  clickable
+                  v-ripple
+                  :active="crtAreaIndex==i"
+                  @click="clkAreaHandler(i)"
+                  active-class="my-menu-link"
+                >
                   <q-item-section>
                     <q-item-label>{{ x.Name }}</q-item-label>
                   </q-item-section>
@@ -731,7 +762,9 @@
           <q-separator vertical />
           <div class="col q-pa-md">
             <q-scroll-area :thumb-style="thumbStyle" :bar-style="barStyle" style="height: 100%;">
-              <template v-if="areas[crtAreaIndex]&&areas[crtAreaIndex].SubList&&areas[crtAreaIndex].SubList.length>0">
+              <template
+                v-if="areas[crtAreaIndex]&&areas[crtAreaIndex].SubList&&areas[crtAreaIndex].SubList.length>0"
+              >
                 <div class="area-box" v-for="(x, i) in areas[crtAreaIndex].SubList" :key="i">
                   <div class="q-mb-md">
                     <div class="h3" @click="chosenAreaHandler(x.Name)">{{x.Name}}</div>
@@ -740,9 +773,12 @@
                     <div class="q-mb-sm row to-end" v-for="(y, yi) in x.SubList" :key="yi">
                       <div class="h4" @click="chosenAreaHandler(y.Name)">{{y.Name}}</div>
                       <template v-if="y&&y.SubList&&y.SubList.length>0">
-                        <div class="h5" @click="chosenAreaHandler(z.Name)" v-for="(z, zi) in y.SubList" :key="zi">
-                          {{z.Name}}
-                        </div>
+                        <div
+                          class="h5"
+                          @click="chosenAreaHandler(z.Name)"
+                          v-for="(z, zi) in y.SubList"
+                          :key="zi"
+                        >{{z.Name}}</div>
                       </template>
                     </div>
                   </template>
@@ -754,17 +790,29 @@
         </div>
       </div>
 
-
       <!-- 手机端 -->
       <div class="mobileSearch q-mt-md">
         <div class="search-bar-m">
           <i class="iconfont iconchazhao"></i>
-          <input type="text" placeholder="搜尋" :value="SearchResult" @click="showPopup=true,goSearchHandler" readonly="readonly"
-            class="keyword-input">
+          <input
+            type="text"
+            placeholder="搜尋"
+            :value="SearchResult"
+            @click="showPopup=true,goSearchHandler"
+            readonly="readonly"
+            class="keyword-input"
+          />
         </div>
         <div class="sortDiv">
-          <q-select filled style="width:50%" v-model="sortNum" :options="sortArray" emit-value map-options
-            @input="changeData" />
+          <q-select
+            filled
+            style="width:50%"
+            v-model="sortNum"
+            :options="sortArray"
+            emit-value
+            map-options
+            @input="changeData"
+          />
           <div class="sortShaixuan" @click="fullHeight = true">更多篩選條件</div>
         </div>
       </div>
@@ -786,18 +834,29 @@
                   價格
                   <span class="clear-filter" @click="clearPrice()">清除篩選</span>
                 </div>
-                <div style="width:100%;height:57px;display:none">
-
-                </div>
+                <div style="width:100%;height:57px;display:none"></div>
                 <div class="range-text">
                   <div class="min">
-                    <q-input class="full_price" style="width:80%" placeholder="最低价" v-model="qMsg.minPrice"
-                      @input="changeData" filled autogrow />
-
+                    <q-input
+                      class="full_price"
+                      style="width:80%"
+                      placeholder="最低价"
+                      v-model="qMsg.minPrice"
+                      @input="changeData"
+                      filled
+                      autogrow
+                    />
                   </div>
                   <div class="max">
-                    <q-input class="full_price" style="width:80%" placeholder="最高价" v-model="qMsg.maxPrice"
-                      @input="changeData" filled autogrow />
+                    <q-input
+                      class="full_price"
+                      style="width:80%"
+                      placeholder="最高价"
+                      v-model="qMsg.maxPrice"
+                      @input="changeData"
+                      filled
+                      autogrow
+                    />
                   </div>
                 </div>
               </div>
@@ -806,8 +865,15 @@
                   天數
                   <span class="clear-filter" @click="clearDays()">清除篩選</span>
                 </div>
-                <q-checkbox right-label v-model="dayNum" v-for="(item,index) in dayArray" :label="item.text"
-                  :key="index" :val="item.id" @input="changeData" />
+                <q-checkbox
+                  right-label
+                  v-model="dayNum"
+                  v-for="(item,index) in dayArray"
+                  :label="item.text"
+                  :key="index"
+                  :val="item.id"
+                  @input="changeData"
+                />
               </div>
               <div class="search-type">
                 <div class="search-title">
@@ -821,15 +887,22 @@
                   <span class="clear-filter">清除篩選</span>
                 </div>
                 <q-checkbox right-label v-model="flight" label="長榮" />
-              </div> -->
+              </div>-->
               <div class="search-type">
                 <div class="search-title">
                   出發星期
                   <span class="clear-filter" @click="clearWeek()">清除篩選</span>
                 </div>
                 <div class="q-gutter-sm">
-                  <q-checkbox v-model="WeekDay" v-for="(item,index) in weekList" :val="item.value" :label="item.label"
-                    :key="index" color="teal" @input="changeData" />
+                  <q-checkbox
+                    v-model="WeekDay"
+                    v-for="(item,index) in weekList"
+                    :val="item.value"
+                    :label="item.label"
+                    :key="index"
+                    color="teal"
+                    @input="changeData"
+                  />
                 </div>
               </div>
             </div>
@@ -852,29 +925,61 @@
         <div class="moreTiaojiao">更多篩選條件</div>
         <div class="full_listDiv" style="padding-bottom:20px">
           <span>價格：</span>
-          <q-input class="full_price" style="width:30%;height:45px;" v-model="qMsg.minPrice" @input="changeData" filled
-            autogrow />
-          <q-input class="full_price" style="width:30%;height:45px;" v-model="qMsg.maxPrice" @input="changeData" filled
-            autogrow />
+          <q-input
+            class="full_price"
+            style="width:30%;height:45px;"
+            v-model="qMsg.minPrice"
+            @input="changeData"
+            filled
+            autogrow
+          />
+          <q-input
+            class="full_price"
+            style="width:30%;height:45px;"
+            v-model="qMsg.maxPrice"
+            @input="changeData"
+            filled
+            autogrow
+          />
         </div>
         <div class="full_listDiv">
           <div class="full_title">天數</div>
           <div class="q-gutter-sm">
-            <q-checkbox right-label v-model="dayNum" v-for="(item,index) in dayArray" :label="item.text" :key="index"
-              :val="item.id" @input="changeData" />
+            <q-checkbox
+              right-label
+              v-model="dayNum"
+              v-for="(item,index) in dayArray"
+              :label="item.text"
+              :key="index"
+              :val="item.id"
+              @input="changeData"
+            />
           </div>
         </div>
 
         <div class="full_listDiv">
           <div class="full_title">出發星期</div>
           <div class="q-gutter-sm">
-            <q-checkbox v-model="WeekDay" v-for="(item,index) in weekList" :val="item.value" :label="item.label"
-              :key="index" color="teal" @input="changeData" />
+            <q-checkbox
+              v-model="WeekDay"
+              v-for="(item,index) in weekList"
+              :val="item.value"
+              :label="item.label"
+              :key="index"
+              color="teal"
+              @input="changeData"
+            />
           </div>
         </div>
         <div class="full_btndiv">
           <q-btn color="white" style="width:49%" text-color="black" label="清除" />
-          <q-btn color="primary" style="width:49%" label="套用" v-close-popup @click="goSearchHandler" />
+          <q-btn
+            color="primary"
+            style="width:49%"
+            label="套用"
+            v-close-popup
+            @click="goSearchHandler"
+          />
         </div>
       </q-card>
     </q-dialog>
@@ -897,47 +1002,99 @@
               </q-tabs>
               <div v-show="tab=='dest'">
                 <div class="q-mb-md">
-                  <q-select filled v-model="chosenResult.fl" :options="areas" option-label="Name" option-value="Name"
-                    label="請選擇地區" />
+                  <q-select
+                    filled
+                    v-model="chosenResult.fl"
+                    :options="areas"
+                    option-label="Name"
+                    option-value="Name"
+                    label="請選擇地區"
+                  />
                 </div>
                 <div class="q-mb-md" v-if="chosenResult.fl.SubList">
-                  <q-select filled v-model="chosenResult.sl" :options="chosenResult.fl.SubList" option-label="Name"
-                    option-value="Name" label="請選擇地區" />
+                  <q-select
+                    filled
+                    v-model="chosenResult.sl"
+                    :options="chosenResult.fl.SubList"
+                    option-label="Name"
+                    option-value="Name"
+                    label="請選擇地區"
+                  />
                 </div>
                 <div class="q-mb-md" v-if="chosenResult.sl.SubList">
-                  <q-select filled v-model="chosenResult.tl" :options="chosenResult.sl.SubList" option-label="Name"
-                    option-value="Name" label="請選擇地區" />
+                  <q-select
+                    filled
+                    v-model="chosenResult.tl"
+                    :options="chosenResult.sl.SubList"
+                    option-label="Name"
+                    option-value="Name"
+                    label="請選擇地區"
+                  />
                 </div>
                 <div class="q-mb-md" v-if="chosenResult.tl.SubList">
-                  <q-select filled v-model="chosenResult.ful" @input="setSearchKey(chosenResult.ful)"
-                    :options="chosenResult.tl.SubList" option-label="Name" option-value="Name" label="請選擇地區" />
+                  <q-select
+                    filled
+                    v-model="chosenResult.ful"
+                    @input="setSearchKey(chosenResult.ful)"
+                    :options="chosenResult.tl.SubList"
+                    option-label="Name"
+                    option-value="Name"
+                    label="請選擇地區"
+                  />
                 </div>
               </div>
               <div v-show="tab=='kw'" class="q-mb-md">
-                <q-input filled id="search_key" v-model="qMsg.searchKey"  class="bg-grey-1"
-                  :label="$t('search')" />
+                <q-input
+                  filled
+                  id="search_key"
+                  v-model="qMsg.searchKey"
+                  class="bg-grey-1"
+                  :label="$t('search')"
+                />
               </div>
               <div class="q-mb-md row">
                 <div class="col">
-                  <q-input filled v-model="qMsg.startDate" style="width:99%" :label="$t('search_date_begin')" mask="date"
-                    class="bg-grey-1">
+                  <q-input
+                    filled
+                    v-model="qMsg.startDate"
+                    style="width:99%"
+                    :label="$t('search_date_begin')"
+                    mask="date"
+                    class="bg-grey-1"
+                  >
                     <template v-slot:append>
                       <q-icon name="event" class="cursor-pointer">
-                        <q-popup-proxy ref="qDateProxy7" >
-                          <q-date mask="YYYY-MM-DD" :title="$t('search_date_begin')" subtitle="選擇"
-                            v-model="qMsg.startDate" @input="() => $refs.qDateProxy7.hide()" />
+                        <q-popup-proxy ref="qDateProxy7">
+                          <q-date
+                            mask="YYYY-MM-DD"
+                            :title="$t('search_date_begin')"
+                            subtitle="選擇"
+                            v-model="qMsg.startDate"
+                            @input="() => $refs.qDateProxy7.hide()"
+                          />
                         </q-popup-proxy>
                       </q-icon>
                     </template>
                   </q-input>
                 </div>
                 <div class="col">
-                  <q-input filled v-model="qMsg.endDate" :label="$t('search_date_end')" mask="date" class="bg-grey-1">
+                  <q-input
+                    filled
+                    v-model="qMsg.endDate"
+                    :label="$t('search_date_end')"
+                    mask="date"
+                    class="bg-grey-1"
+                  >
                     <template v-slot:append>
                       <q-icon name="event" class="cursor-pointer">
-                        <q-popup-proxy ref="qDateProxy8" >
-                          <q-date mask="YYYY-MM-DD" :title="$t('search_date_begin')" subtitle="選擇"
-                            v-model="qMsg.endDate" @input="() => $refs.qDateProxy8.hide()" />
+                        <q-popup-proxy ref="qDateProxy8">
+                          <q-date
+                            mask="YYYY-MM-DD"
+                            :title="$t('search_date_begin')"
+                            subtitle="選擇"
+                            v-model="qMsg.endDate"
+                            @input="() => $refs.qDateProxy8.hide()"
+                          />
                         </q-popup-proxy>
                       </q-icon>
                     </template>
@@ -945,8 +1102,14 @@
                 </div>
               </div>
               <div>
-                <q-btn color="primary" unelevated style="width:100%;height:50px;margin-top:20px;" filled label="搜尋"
-                  @click="isShowDialog=false,goSearchHandler()" />
+                <q-btn
+                  color="primary"
+                  unelevated
+                  style="width:100%;height:50px;margin-top:20px;"
+                  filled
+                  label="搜尋"
+                  @click="isShowDialog=false,goSearchHandler()"
+                />
               </div>
             </div>
           </div>
@@ -955,7 +1118,6 @@
       </q-card>
     </q-dialog>
 
-
     <popup v-model="showPopup" mode="top" :safeAreaInsetBottom="true" border-radius="5">
       <div class="chosen-box">
         <!-- <div class="title">搜尋行程</div> -->
@@ -966,46 +1128,98 @@
           </q-tabs>
           <div v-show="tab=='dest'">
             <div class="q-mb-md">
-              <q-select filled v-model="chosenResult.fl" :options="areas" option-label="Name" option-value="Name"
-                label="請選擇地區" />
+              <q-select
+                filled
+                v-model="chosenResult.fl"
+                :options="areas"
+                option-label="Name"
+                option-value="Name"
+                label="請選擇地區"
+              />
             </div>
             <div class="q-mb-md" v-if="chosenResult.fl.SubList">
-              <q-select filled v-model="chosenResult.sl" :options="chosenResult.fl.SubList" option-label="Name"
-                option-value="Name" label="請選擇地區" />
+              <q-select
+                filled
+                v-model="chosenResult.sl"
+                :options="chosenResult.fl.SubList"
+                option-label="Name"
+                option-value="Name"
+                label="請選擇地區"
+              />
             </div>
             <div class="q-mb-md" v-if="chosenResult.sl.SubList">
-              <q-select filled v-model="chosenResult.tl" :options="chosenResult.sl.SubList" option-label="Name"
-                option-value="Name" label="請選擇地區" />
+              <q-select
+                filled
+                v-model="chosenResult.tl"
+                :options="chosenResult.sl.SubList"
+                option-label="Name"
+                option-value="Name"
+                label="請選擇地區"
+              />
             </div>
             <div class="q-mb-md" v-if="chosenResult.tl.SubList">
-              <q-select filled v-model="chosenResult.ful" @input="setSearchKey(chosenResult.ful)" :options="chosenResult.tl.SubList" option-label="Name"
-                option-value="Name" label="請選擇地區" />
+              <q-select
+                filled
+                v-model="chosenResult.ful"
+                @input="setSearchKey(chosenResult.ful)"
+                :options="chosenResult.tl.SubList"
+                option-label="Name"
+                option-value="Name"
+                label="請選擇地區"
+              />
             </div>
           </div>
           <div v-show="tab=='kw'" class="q-mb-md">
-            <q-input filled id="search_key" v-model="qMsg.searchKey"  class="bg-grey-1"
-              :label="$t('search')" />
+            <q-input
+              filled
+              id="search_key"
+              v-model="qMsg.searchKey"
+              class="bg-grey-1"
+              :label="$t('search')"
+            />
           </div>
           <div class="q-mb-md row">
             <div class="col">
-              <q-input filled v-model="qMsg.startDate" :label="$t('search_date_begin')" mask="date" class="bg-grey-1">
+              <q-input
+                filled
+                v-model="qMsg.startDate"
+                :label="$t('search_date_begin')"
+                mask="date"
+                class="bg-grey-1"
+              >
                 <template v-slot:append>
                   <q-icon name="event" class="cursor-pointer">
-                    <q-popup-proxy ref="qDateProxy7" >
-                      <q-date mask="YYYY-MM-DD" :title="$t('search_date_begin')" subtitle="選擇" v-model="qMsg.startDate"
-                        @input="() => $refs.qDateProxy7.hide()" />
+                    <q-popup-proxy ref="qDateProxy7">
+                      <q-date
+                        mask="YYYY-MM-DD"
+                        :title="$t('search_date_begin')"
+                        subtitle="選擇"
+                        v-model="qMsg.startDate"
+                        @input="() => $refs.qDateProxy7.hide()"
+                      />
                     </q-popup-proxy>
                   </q-icon>
                 </template>
               </q-input>
             </div>
             <div class="col">
-              <q-input filled v-model="qMsg.endDate" :label="$t('search_date_end')" mask="date" class="bg-grey-1">
+              <q-input
+                filled
+                v-model="qMsg.endDate"
+                :label="$t('search_date_end')"
+                mask="date"
+                class="bg-grey-1"
+              >
                 <template v-slot:append>
                   <q-icon name="event" class="cursor-pointer">
-                    <q-popup-proxy ref="qDateProxy8" >
-                      <q-date mask="YYYY-MM-DD" :title="$t('search_date_begin')" subtitle="選擇" v-model="qMsg.endDate"
-                        @input="() => $refs.qDateProxy8.hide()" />
+                    <q-popup-proxy ref="qDateProxy8">
+                      <q-date
+                        mask="YYYY-MM-DD"
+                        :title="$t('search_date_begin')"
+                        subtitle="選擇"
+                        v-model="qMsg.endDate"
+                        @input="() => $refs.qDateProxy8.hide()"
+                      />
                     </q-popup-proxy>
                   </q-icon>
                 </template>
@@ -1013,7 +1227,14 @@
             </div>
           </div>
           <div>
-            <q-btn color="primary" unelevated style="width:100%" filled label="搜尋" @click="showPopup=false,goSearchHandler()" />
+            <q-btn
+              color="primary"
+              unelevated
+              style="width:100%"
+              filled
+              label="搜尋"
+              @click="showPopup=false,goSearchHandler()"
+            />
           </div>
         </div>
       </div>
@@ -1021,415 +1242,434 @@
   </div>
 </template>
 <script>
-  import popup from "../components/props/index";
-  import searchBlock from "../components/searchdata/block";
-  import searchList from "../components/searchdata/list";
-  import kkday from '../components/searchdata/kkday.vue'
-  export default {
-    components: {
-      popup,
-      searchBlock,
-      searchList,
-      kkday
-    },
-    data() {
-      return {
-        SearchResult:'',
-        isShowDialog: false,
-        sortNum: 1, //排序
-        dayNum: [], //天数
-        WeekDay: [],
-        //天数数组
-        dayArray: [{
-            id: 1,
-            min: 1,
-            max: 1,
-            text: '1天'
-          },
-          {
-            id: 2,
-            min: 2,
-            max: 2,
-            text: '2天'
-          },
-          {
-            id: 3,
-            min: 3,
-            max: 3,
-            text: '3天'
-          },
-          {
-            id: 4,
-            min: 4,
-            max: 4,
-            text: '4天'
-          },
-          {
-            id: 5,
-            min: 5,
-            max: 5,
-            text: '5天'
-          },
-          {
-            id: 6,
-            min: 6,
-            max: 6,
-            text: '6天'
-          },
-          {
-            id: 7,
-            min: 7,
-            max: 8,
-            text: '7-8天'
-          },
-          {
-            id: 8,
-            min: 9,
-            max: 10,
-            text: '9-10天'
-          },
-          {
-            id: 9,
-            min: 10,
-            max: null,
-            text: '10天以上'
-          }
-        ],
-        flight: ['长荣'],
-
-        showSplitPannel: false,
-        fullHeight: false,
-        //地区样式
-        thumbStyle: {
-          right: "4px",
-          borderRadius: "5px",
-          backgroundColor: "#027be3",
-          width: "5px",
-          opacity: 0.75
+import popup from "../components/props/index";
+import searchBlock from "../components/searchdata/block";
+import searchList from "../components/searchdata/list";
+import kkday from "../components/searchdata/kkday.vue";
+export default {
+  components: {
+    popup,
+    searchBlock,
+    searchList,
+    kkday
+  },
+  data() {
+    return {
+      SearchResult: "",
+      isShowDialog: false,
+      sortNum: 1, //排序
+      dayNum: [], //天数
+      WeekDay: [],
+      //天数数组
+      dayArray: [
+        {
+          id: 1,
+          min: 1,
+          max: 1,
+          text: "1天"
+        },
+        {
+          id: 2,
+          min: 2,
+          max: 2,
+          text: "2天"
+        },
+        {
+          id: 3,
+          min: 3,
+          max: 3,
+          text: "3天"
+        },
+        {
+          id: 4,
+          min: 4,
+          max: 4,
+          text: "4天"
+        },
+        {
+          id: 5,
+          min: 5,
+          max: 5,
+          text: "5天"
+        },
+        {
+          id: 6,
+          min: 6,
+          max: 6,
+          text: "6天"
         },
-        //地区样式
-        barStyle: {
-          right: "2px",
-          borderRadius: "9px",
-          backgroundColor: "#027be3",
-          width: "9px",
-          opacity: 0.2
+        {
+          id: 7,
+          min: 7,
+          max: 8,
+          text: "7-8天"
         },
-        //地区数据
-        areas: [],
-        crtAreaIndex: 0,
-        sortArray: [{
-          label: '依推薦程度',
+        {
+          id: 8,
+          min: 9,
+          max: 10,
+          text: "9-10天"
+        },
+        {
+          id: 9,
+          min: 10,
+          max: null,
+          text: "10天以上"
+        }
+      ],
+      flight: ["长荣"],
+
+      showSplitPannel: false,
+      fullHeight: false,
+      //地区样式
+      thumbStyle: {
+        right: "4px",
+        borderRadius: "5px",
+        backgroundColor: "#027be3",
+        width: "5px",
+        opacity: 0.75
+      },
+      //地区样式
+      barStyle: {
+        right: "2px",
+        borderRadius: "9px",
+        backgroundColor: "#027be3",
+        width: "9px",
+        opacity: 0.2
+      },
+      //地区数据
+      areas: [],
+      crtAreaIndex: 0,
+      sortArray: [
+        {
+          label: "依推薦程度",
           value: 1
-        }, {
-          label: '低價優先',
+        },
+        {
+          label: "低價優先",
           value: 2
-        }, {
-          label: '高價優先',
+        },
+        {
+          label: "高價優先",
           value: 3
-        }, {
-          label: '最快出發日',
+        },
+        {
+          label: "最快出發日",
           value: 4
-        }, {
-          label: '最晚出發日',
+        },
+        {
+          label: "最晚出發日",
           value: 5
-        }, {
-          label: '天數少到多',
+        },
+        {
+          label: "天數少到多",
           value: 6
-        }, {
-          label: '天數多到少',
+        },
+        {
+          label: "天數多到少",
           value: 7
-        }],
-        weekList: [{
-          label: '星期日',
+        }
+      ],
+      weekList: [
+        {
+          label: "星期日",
           value: 0
-        }, {
-          label: '星期一',
+        },
+        {
+          label: "星期一",
           value: 1
-        }, {
-          label: '星期二',
+        },
+        {
+          label: "星期二",
           value: 2
-        }, {
-          label: '星期三',
+        },
+        {
+          label: "星期三",
           value: 3
-        }, {
-          label: '星期四',
+        },
+        {
+          label: "星期四",
           value: 4
-        }, {
-          label: '星期五',
-          value: 5
-        }, {
-          label: '星期六',
-          value: 6
-        }],
-        showPopup: false,
-        tab: "dest",
-        chosenResult: {
-          fl: "",
-          sl: "",
-          tl: "",
-          ful: ""
         },
-        //查询参数
-        qMsg: {
-           pageIndex: 1,
-            pageSize: 20,
-          companyId: 0,
-          startDate: "", //开始日期
-          endDate: "", //结束日期
-          // lineId: 0, //线路编号
-          // lineTeamId: 0, //系列编号
-          minPrice: "", //最低价格
-          maxPrice: "", //最高价格
-          // minTripDay: "", //最低行程条数
-          // maxTripDay: "", //最高行程天数
-          // orderByDate: 0,
-          // orderByPrice: 0,
-          // orderBySales: 0,
-          // pageIndex: 1,
-          // pageSize: 10,
-          // priceOrderByField: 4,
-          searchKey: "", // 搜索词
-          // startCityId: 0,
-          // PageCount: 0,
-          // TotalCount: 0,
-          dayNumList: [], // 天数
-          webSiteCategoryIds: '', // 分类Id
-          placeIds: '', // 目的地城市Id
-          orderBy: 0, // 排序  0默认   1价格升序   2价格降序
+        {
+          label: "星期五",
+          value: 5
         },
-        ShowType: 0, //显示样式(0-豆腐格，1-列表)
-        //行程列表
-        DataList: [],
+        {
+          label: "星期六",
+          value: 6
+        }
+      ],
+      showPopup: false,
+      tab: "dest",
+      chosenResult: {
+        fl: "",
+        sl: "",
+        tl: "",
+        ful: ""
+      },
+      //查询参数
+      qMsg: {
+        pageIndex: 1,
+        pageSize: 20,
+        companyId: 0,
+        startDate: "", //开始日期
+        endDate: "", //结束日期
+        // lineId: 0, //线路编号
+        // lineTeamId: 0, //系列编号
+        minPrice: "", //最低价格
+        maxPrice: "", //最高价格
+        // minTripDay: "", //最低行程条数
+        // maxTripDay: "", //最高行程天数
+        // orderByDate: 0,
+        // orderByPrice: 0,
+        // orderBySales: 0,
+        // pageIndex: 1,
+        // pageSize: 10,
+        // priceOrderByField: 4,
+        searchKey: "", // 搜索词
+        // startCityId: 0,
+        // PageCount: 0,
+        // TotalCount: 0,
+        dayNumList: [], // 天数
+        webSiteCategoryIds: "", // 分类Id
+        placeIds: "", // 目的地城市Id
+        orderBy: 0 // 排序  0默认   1价格升序   2价格降序
+      },
+      ShowType: 0, //显示样式(0-豆腐格，1-列表)
+      //行程列表
+      DataList: []
+    };
+  },
+  created() {},
+  mounted() {
+    if (localStorage.baseifo) {
+      var jObj = JSON.parse(localStorage.baseifo);
+      this.areas = jObj.AreaList;
+      this.ShowType = jObj.Config.ShowType;
+      this.ShowType = 2;
+    } else {
+      this.getAera();
+    }
+    document.addEventListener("click", this.clickHandler);
+    var qsearchKey = this.getUrlKey("qsearchKey", window.location.href);
+    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 categoryId = this.getUrlKey("categoryId", window.location.href);
+    if (qsearchKey) {
+      this.qMsg.searchKey = qsearchKey;
+    }
+    if (qsearchDate) {
+      this.qMsg.startDate = qsearchDate;
+    }
+    if (qsearchEndDate) {
+      this.qMsg.endDate = qsearchEndDate;
+    }
+    if (areaId) {
+      this.qMsg.areaId = Number(areaId);
+    }
+    if (categoryId) {
+      this.qMsg.categoryId = Number(categoryId);
+    }
+
+    if ((qsearchKey || qsearchDate || qsearchEndDate) && this.ShowType != 2) {
+      this.goSearchHandler();
+    }
+  },
+  methods: {
+    handlerSearchChange(value) {
+      console.log("handlerSearchChange", value);
+      this.qMsg = value;
+      this.goSearchHandler();
+    },
+    //清除所有条件
+    clearAll() {
+      let msg = {
+        companyId: 0,
+        startDate: "", //开始日期
+        endDate: "", //结束日期
+        // lineId: 0, //线路编号
+        // lineTeamId: 0, //系列编号
+        minPrice: "", //最低价格
+        maxPrice: "", //最高价格
+        // minTripDay: "", //最低行程条数
+        // maxTripDay: "", //最高行程天数
+        // orderByDate: 0,
+        // orderByPrice: 0,
+        // orderBySales: 0,
+        // pageIndex: 1,
+        // pageSize: 10,
+        // priceOrderByField: 4,
+        searchKey: "", // 搜索词
+        // startCityId: 0,
+        // PageCount: 0,
+        // TotalCount: 0,
+        dayNumList: [], // 天数
+        webSiteCategoryIds: "", // 分类Id
+        placeIds: "", // 目的地城市Id
+        orderBy: 0 // 排序  0默认   1价格升序   2价格降序
       };
+      this.qMsg = msg;
+      this.goSearchHandler();
     },
-    created() {
-
+    //清除价格
+    clearPrice() {
+      this.qMsg.minPrice = "";
+      this.qMsg.maxPrice = "";
+      this.goSearchHandler();
     },
-    mounted() {
-      if (localStorage.baseifo) {
-        var jObj = JSON.parse(localStorage.baseifo);
-        this.areas = jObj.AreaList;
-        this.ShowType = jObj.Config.ShowType;
-        this.ShowType = 2
-      } else {
-        this.getAera()
-      }
-      document.addEventListener("click", this.clickHandler);
-      var qsearchKey = this.getUrlKey("qsearchKey", window.location.href);
-      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 categoryId = this.getUrlKey("categoryId", window.location.href);
-      if (qsearchKey) {
-        this.qMsg.searchKey = qsearchKey;
+    //清除天数
+    clearDays() {
+      this.dayNum = [];
+      this.goSearchHandler();
+    },
+    //清除星期
+    clearWeek() {
+      this.WeekDay = [];
+      this.goSearchHandler();
+    },
+    //获取地区数据
+    getAera() {
+      this.apipost(
+        "ws_get_GetSearchArea",
+        {},
+        res => {
+          if (res.data.resultCode == 1) {
+            if (res.data.data) {
+              this.areas = res.data.data.AreaList;
+            }
+          }
+        },
+        err => {}
+      );
+    },
+    searchFocusHandler() {
+      if (this.qMsg.searchKey == "") {
+        setTimeout(() => {
+          this.showSplitPannel = true;
+        }, 200);
       }
-      if (qsearchDate) {
-        this.qMsg.startDate = qsearchDate;
+    },
+    searchBlurHandler() {},
+    searchChangeHandler() {
+      if (this.qMsg.searchKey == "") {
+        this.showSplitPannel = true;
+      } else {
+        this.showSplitPannel = false;
       }
-      if (qsearchEndDate) {
-        this.qMsg.endDate = qsearchEndDate;
+    },
+    clkAreaHandler(i) {
+      this.crtAreaIndex = i;
+    },
+    clickHandler(e) {
+      if (document.querySelector("#sb")) {
+        if (!document.querySelector("#sb").contains(e.target)) {
+          this.showSplitPannel = false;
+        }
       }
-      if (areaId) {
-        this.qMsg.areaId = Number(areaId);
+    },
+    chosenAreaHandler(name) {
+      this.qMsg.searchKey = name;
+      this.showSplitPannel = false;
+    },
+    //数据改变
+    changeData() {
+      this.qMsg.pageIndex = 1;
+      this.goSearchHandler();
+    },
+    //分页方法
+    getPage() {
+      this.goSearchHandler();
+    },
+    setSearchKey(obj) {
+      this.qMsg.searchKey = obj.Name;
+    },
+    goSearchHandler() {
+      this.$q.loading.show();
+      this.DataList = [];
+      let minTripDay = -1,
+        maxTripDay = -1,
+        minPrice = -1,
+        maxPrice = -1;
+      if (this.qMsg.minPrice != "") {
+        minPrice = parseFloat(this.qMsg.minPrice);
       }
-      if (categoryId) {
-        this.qMsg.categoryId = Number(categoryId);
+      if (this.qMsg.maxPrice != "") {
+        maxPrice = parseFloat(this.qMsg.maxPrice);
+        if (minPrice > maxPrice) {
+          //this.Error('价格区间的最低价格不能低于最大价格')
+          return false;
+        }
       }
-
-      if ((qsearchKey || qsearchDate || qsearchEndDate) && this.ShowType!=2) {
-        this.goSearchHandler();
+      var companyId = -1;
+      if (localStorage.groupinfo) {
+        var groupinfo = JSON.parse(localStorage.groupinfo);
+        companyId = groupinfo.siteList[0].companyId;
       }
-    },
-    methods: {
-      handlerSearchChange(value) {
-        console.log('handlerSearchChange', value)
-        this.qMsg = value
-        this.goSearchHandler();
-      },
-      //清除所有条件
-      clearAll(){
-        let msg={
-          companyId: 0,
-          startDate: "", //开始日期
-          endDate: "", //结束日期
-          // lineId: 0, //线路编号
-          // lineTeamId: 0, //系列编号
-          minPrice: "", //最低价格
-          maxPrice: "", //最高价格
-          // minTripDay: "", //最低行程条数
-          // maxTripDay: "", //最高行程天数
-          // orderByDate: 0,
-          // orderByPrice: 0,
-          // orderBySales: 0,
-          // pageIndex: 1,
-          // pageSize: 10,
-          // priceOrderByField: 4,
-          searchKey: "", // 搜索词
-          // startCityId: 0,
-          // PageCount: 0,
-          // TotalCount: 0,
-          dayNumList: [], // 天数
-          webSiteCategoryIds: '', // 分类Id
-          placeIds: '', // 目的地城市Id
-          orderBy: 0, // 排序  0默认   1价格升序   2价格降序
+      this.SearchResult =
+        this.qMsg.startDate +
+        "-" +
+        this.qMsg.endDate +
+        "  " +
+        this.qMsg.searchKey;
+      let msg = {
+        pageIndex: this.qMsg.pageIndex,
+        pageSize: this.qMsg.pageSize,
+        searchKey: this.qMsg.searchKey,
+        lineId: this.qMsg.lineId,
+        lineTeamId: this.qMsg.lineTeamId,
+        minTripDay: minTripDay,
+        maxTripDay: maxTripDay,
+        minPrice: minPrice,
+        maxPrice: maxPrice,
+        startDate: this.qMsg.startDate,
+        endDate: this.qMsg.endDate,
+        orderByDate: this.sortNum == 4 ? 1 : this.sortNum == 5 ? 2 : 0,
+        orderByPrice: this.sortNum == 2 ? 1 : this.sortNum == 3 ? 2 : 0,
+        orderByDay: this.sortNum == 6 ? 1 : this.sortNum == 7 ? 2 : 0,
+        priceOrderByField: 4,
+        companyId: companyId,
+        orderBySales: 0,
+        startCityId: this.qMsg.startCityId,
+        weekDayList: this.WeekDay,
+        dayNumList: this.dayNum
+      };
+      if (localStorage.b2bUser) {
+        var b2bUser = JSON.parse(window.localStorage.getItem("b2bUser"));
+        if (b2bUser) {
+          this.msg.priceOrderByField = 2;
         }
-        this.qMsg = msg;
-        this.goSearchHandler();
-      },
-      //清除价格
-      clearPrice(){
-        this.qMsg.minPrice='';
-        this.qMsg.maxPrice='';
-        this.goSearchHandler();
-      },
-      //清除天数
-      clearDays(){
-        this.dayNum=[];
-        this.goSearchHandler();
-      },
-      //清除星期
-      clearWeek(){
-        this.WeekDay=[];
-        this.goSearchHandler();
-      },
-      //获取地区数据
-      getAera() {
-        this.apipost(
-          "ws_get_GetSearchArea", {},
-          res => {
-            if (res.data.resultCode == 1) {
-              if (res.data.data) {
-                this.areas = res.data.data.AreaList;
-              }
+      }
+      this.apipost(
+        "b2c_get_GetB2CMergeProductPageList",
+        msg,
+        res => {
+          this.$q.loading.hide();
+          if (res.data.resultCode == 1) {
+            this.qMsg.PageCount = res.data.data.pageCount;
+            this.qMsg.TotalCount = res.data.data.count;
+            var tempArray = res.data.data.pageData;
+            if (tempArray && tempArray.length > 0) {
+              tempArray.forEach(item => {
+                if (item.imgCover && item.imgCover != "") {
+                  try {
+                    var imgArray = JSON.parse(item.imgCover);
+                    if (imgArray && imgArray.length > 0) {
+                      item.newCoverImg = imgArray[0].Url;
+                    } else {
+                      item.newCoverImg = "";
+                    }
+                  } catch (e) {}
+                }
+              });
+              this.DataList = tempArray;
             }
-          },
-          err => {}
-        );
-      },
-      searchFocusHandler() {
-        if (this.qMsg.searchKey == "") {
-          setTimeout(() => {
-            this.showSplitPannel = true;
-          }, 200);
-        }
-      },
-      searchBlurHandler() {
-
-      },
-      searchChangeHandler() {
-        if (this.qMsg.searchKey == "") {
-          this.showSplitPannel = true;
-        } else {
-          this.showSplitPannel = false;
-        }
-      },
-      clkAreaHandler(i) {
-        this.crtAreaIndex = i;
-      },
-      clickHandler(e) {
-        if (document.querySelector("#sb")) {
-          if (!document.querySelector("#sb").contains(e.target)) {
-            this.showSplitPannel = false;
-          }
-        }
-      },
-      chosenAreaHandler(name) {
-        this.qMsg.searchKey = name;
-        this.showSplitPannel = false;
-      },
-      //数据改变
-      changeData() {
-        this.qMsg.pageIndex = 1;
-        this.goSearchHandler();
-      },
-      //分页方法
-      getPage() {
-        this.goSearchHandler();
-      },
-      setSearchKey(obj) {
-        this.qMsg.searchKey = obj.Name;
-      },
-      goSearchHandler() {
-        this.$q.loading.show()
-        this.DataList = [];
-        let minTripDay = -1,
-          maxTripDay = -1,
-          minPrice = -1,
-          maxPrice = -1;
-        if (this.qMsg.minPrice != '') {
-          minPrice = parseFloat(this.qMsg.minPrice)
-        }
-        if (this.qMsg.maxPrice != '') {
-          maxPrice = parseFloat(this.qMsg.maxPrice)
-          if (minPrice > maxPrice) {
-            //this.Error('价格区间的最低价格不能低于最大价格')
-            return false
           }
-        }
-        var companyId = -1;
-        if (localStorage.groupinfo) {
-          var groupinfo = JSON.parse(localStorage.groupinfo);
-          companyId = groupinfo.siteList[0].companyId;
-        }
-        this.SearchResult=this.qMsg.startDate+'-'+this.qMsg.endDate+'  '+this.qMsg.searchKey;
-        let msg = {
-          pageIndex: this.qMsg.pageIndex,
-          pageSize: this.qMsg.pageSize,
-          searchKey: this.qMsg.searchKey,
-          lineId: this.qMsg.lineId,
-          lineTeamId: this.qMsg.lineTeamId,
-          minTripDay: minTripDay,
-          maxTripDay: maxTripDay,
-          minPrice: minPrice,
-          maxPrice: maxPrice,
-          startDate: this.qMsg.startDate,
-          endDate: this.qMsg.endDate,
-          orderByDate: this.sortNum == 4 ? 1 : (this.sortNum == 5 ? 2 : 0),
-          orderByPrice: this.sortNum == 2 ? 1 : (this.sortNum == 3 ? 2 : 0),
-          orderByDay: this.sortNum == 6 ? 1 : (this.sortNum == 7 ? 2 : 0),
-          priceOrderByField: 4,
-          companyId: companyId,
-          orderBySales: 0,
-          startCityId: this.qMsg.startCityId,
-          weekDayList: this.WeekDay,
-          dayNumList: this.dayNum,
-        }
-        if (localStorage.b2bUser) {
-          var b2bUser = JSON.parse(window.localStorage.getItem('b2bUser'))
-          if (b2bUser) {
-            this.msg.priceOrderByField = 2;
-          }
-        }
-        this.apipost(
-          "b2c_get_GetB2CMergeProductPageList", msg,
-          res => {
-            this.$q.loading.hide()
-            if (res.data.resultCode == 1) {
-              this.qMsg.PageCount = res.data.data.pageCount;
-              this.qMsg.TotalCount = res.data.data.count;
-              var tempArray = res.data.data.pageData;
-              if (tempArray && tempArray.length > 0) {
-                tempArray.forEach(item => {
-                  if (item.imgCover && item.imgCover != '') {
-                    try {
-                      var imgArray = JSON.parse(item.imgCover);
-                      if (imgArray && imgArray.length > 0) {
-                        item.newCoverImg = imgArray[0].Url;
-                      } else {
-                        item.newCoverImg = "";
-                      }
-                    } catch (e) {}
-                  }
-                });
-                this.DataList = tempArray;
-              }
-            }
-          },
-          err => {}
-        );
-      }
+        },
+        err => {}
+      );
     }
-  };
-
+  }
+};
 </script>