Skip to content

M
million
Commit 20cc4ce9 authored by 沈良进's avatar 沈良进
Browse files
Options

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

parent 42d66461
Show whitespace changes
Inline Side-by-side
Showing with 1456 additions and 1145 deletions
src/components/navs/hor-big-one.vue
View file @ 20cc4ce9
......@@ -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
View file @ 20cc4ce9
......@@ -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
View file @ 20cc4ce9
......@@ -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
View file @ 20cc4ce9
<style>
.SearchMain {
.SearchMain {
min-height: 800px;
}
}
.SearchTop {
.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 {
.SearchContent {
position: relative;
display: flex;
width: 100%;
margin: 6px auto 0;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .03);
}
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.03);
}
.SearchMain .showbox {
.SearchMain .showbox {
position: absolute;
box-sizing: border-box;
width: 100%;
......@@ -29,22 +29,22 @@
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 {
.Search_Zhi {
display: inline-block;
margin: 0 10px;
height: 40px;
line-height: 40px;
}
}
.full_price {
.full_price {
width: 40%;
display: inline-block;
margin-left: 20px;
}
}
.moreTiaojiao {
.moreTiaojiao {
width: 100%;
height: 60px;
text-align: center;
......@@ -52,21 +52,21 @@
font-size: 18px;
border-bottom: 1px solid #eee;
color: #333;
}
}
.full_listDiv {
.full_listDiv {
padding: 20px;
border-bottom: 1px solid #eee;
}
}
.full_title {
.full_title {
margin-bottom: 10px;
font-size: 15px;
font-weight: 700;
color: #666;
}
}
.full_btndiv {
.full_btndiv {
position: absolute;
bottom: 0;
left: 0;
......@@ -77,21 +77,21 @@
border-top: 1px solid #eee;
padding: 20px 10px;
background-color: #fff;
}
}
.search-bar-m {
.search-bar-m {
display: flex;
width: 100%;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
}
.search-bar-m .keyword-input {
.search-bar-m .keyword-input {
width: calc(100% - 40px);
cursor: pointer;
}
}
.keyword-input {
.keyword-input {
height: 44px;
border: 0;
margin: 0;
......@@ -100,32 +100,32 @@
outline: none;
color: #333;
padding-left: 20px;
}
}
.search-bar-m i {
.search-bar-m i {
height: 45px;
line-height: 45px;
text-align: center;
margin-left: 20px;
color: #999;
}
}
.sortDiv {
.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);
}
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.03);
}
.sortShaixuan {
.sortShaixuan {
width: 50%;
height: 57px;
line-height: 57px;
text-align: center;
}
}
@media only screen and (max-width: 1200px) {
@media only screen and (max-width: 1200px) {
.pd-list .pd-box {
flex-basis: calc(50% - 10px) !important;
}
......@@ -133,34 +133,34 @@
.pd-list .pd-box:nth-child(even) {
margin-right: 0 !important;
}
}
}
@media only screen and (min-width: 768px) {
@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) {
@media only screen and (max-width: 425px) {
.pd-list .pd-box {
flex-basis: 100% !important;
margin-right: 0 !important;
}
}
}
.pd-list .pd-box {
.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;
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 {
.pd-box .pd-img {
position: relative;
width: 100%;
padding-bottom: 66.237%;
......@@ -169,9 +169,9 @@
-o-background-size: cover;
background-size: cover;
background-position: center;
}
}
.pd-box .pd-img .pd-price {
.pd-box .pd-img .pd-price {
position: absolute;
right: 0;
bottom: 0;
......@@ -179,9 +179,9 @@
width: 100%;
border-bottom: 4px solid #00afff;
text-align: right;
}
}
.pd-box .pd-img .pd-price .price {
.pd-box .pd-img .pd-price .price {
display: inline-block;
padding: 4px 12px 0;
color: #fff;
......@@ -194,18 +194,18 @@
-moz-background-clip: padding;
border-radius: 5px 0 0;
background-clip: padding-box;
}
}
.pd-box .pd-img .pd-price .price small {
.pd-box .pd-img .pd-price .price small {
padding: 0 4px;
font-size: 14px;
}
}
.pd-box .pd-content {
.pd-box .pd-content {
padding: 15px 15px 20px;
}
}
.pd-box .pd-title {
.pd-box .pd-title {
font-size: 15px;
line-height: 1.5;
font-weight: 400;
......@@ -215,77 +215,77 @@
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
}
.pd-box .pd-departure {
.pd-box .pd-departure {
padding-top: 10px;
font-size: 14px;
color: #999;
}
}
.pd-box .pd-departure .more {
.pd-box .pd-departure .more {
float: right;
font-size: 14px;
}
}
.Search_center {
.Search_center {
width: 100%;
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
}
}
.Search_center .pd-list {
.Search_center .pd-list {
display: flex;
flex-flow: wrap;
width: 100%;
margin: 0;
padding: 0;
}
}
.pd-list li:nth-child(4n) {
.pd-list li:nth-child(4n) {
margin-right: 0;
}
}
.pd-list li {
.pd-list li {
list-style-type: none;
}
}
.SearchMain .search-content {
.SearchMain .search-content {
display: flex;
align-items: flex-start;
margin-top: 20px;
}
}
.wl-section-block {
.wl-section-block {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
}
.search-filter-aside {
.search-filter-aside {
width: 300px;
margin-right: 30px;
margin-bottom: 30px;
background-color: #fff;
}
}
.search-content .group-result-list {
.search-content .group-result-list {
display: flex;
flex-flow: wrap;
width: calc(100% - 300px);
}
}
.search-filter-aside .search-header {
.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 {
.search-filter-aside .clear-filter {
position: absolute;
top: 15px;
right: 15px;
......@@ -297,35 +297,35 @@
font-size: 13px;
color: #999;
cursor: pointer;
}
}
.search-filter-aside .search-type {
.search-filter-aside .search-type {
position: relative;
padding: 15px;
border-bottom: 1px solid #eee;
}
}
.search-filter-aside .search-type .search-title {
.search-filter-aside .search-type .search-title {
margin-bottom: 20px;
font-size: 16px;
font-weight: 700;
color: #333;
}
}
.range-text {
.range-text {
display: flex;
justify-content: space-between;
letter-spacing: 0;
font-weight: 700;
color: #333;
font-size: 15px;
}
}
.SearchMain .row.inline {
.SearchMain .row.inline {
display: flex !important;
}
}
.group-statis-block {
.group-statis-block {
display: flex;
justify-content: flex-start;
width: 100%;
......@@ -333,52 +333,52 @@
margin-bottom: 15px;
font-size: 15px;
height: 45px;
}
}
.group-result-list .group-statis-block>* {
.group-result-list .group-statis-block > * {
display: inline-block;
height: 100%;
line-height: 45px;
}
}
.group-result-list .group-statis-block .group-share {
.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);
}
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 {
.group-result-list .group-statis-block .group-statis-detail {
padding-left: 10px;
background: #fff;
width: calc(100% - 150px);
}
}
.group-statis-detail .title {
.group-statis-detail .title {
font-size: 18px;
}
}
.group-statis-detail .num {
.group-statis-detail .num {
color: #fd992d;
margin: 0 3px;
font-size: 16px;
}
}
.group-box {
.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;
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 {
.group-cover {
position: relative;
width: 270px;
-webkit-background-size: cover;
......@@ -387,9 +387,9 @@
background-size: cover;
background-position: center;
overflow: hidden;
}
}
.group-cover img {
.group-cover img {
position: absolute;
top: 0;
right: null;
......@@ -402,62 +402,62 @@
-ms-user-select: none;
user-select: none;
pointer-events: none;
}
}
.group-box .group-main {
.group-box .group-main {
display: flex;
flex-wrap: wrap;
width: calc(100% - 270px);
flex-basis: calc(100% - 270px);
}
}
.group-box>div {
.group-box > div {
flex: 1;
}
}
.group-box .group-main .group-info {
.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 {
.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 {
.group-box .group-main .group-info .group-detail i {
margin-right: 5px;
font-size: 18px;
}
}
.group-box .group-main .group-info .group-detail>* {
.group-box .group-main .group-info .group-detail > * {
display: inline-block;
vertical-align: middle;
}
}
.group-name {
.group-name {
color: #333;
font-size: 16px;
line-height: 1.2;
font-weight: bold;
}
}
.group-list {
.group-list {
margin: 0;
padding: 0;
}
}
.group-list li {
.group-list li {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-bottom: 5px;
list-style-type: none;
}
}
.group-list li a {
.group-list li a {
padding: 5px;
font-size: 12px;
background-color: #d9edf7;
......@@ -465,39 +465,39 @@
color: #0083bd;
border-radius: 3px;
background-clip: padding-box;
}
}
.price-info {
.price-info {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 20px 15px;
width: 200px;
font-size: 14px;
}
}
.price-wrap {
.price-wrap {
width: 100%;
text-align: right;
}
}
.price-wrap>* {
.price-wrap > * {
display: block;
width: 100%;
}
}
.price_Search {
.price_Search {
font-size: 32px;
font-weight: 700;
color: #ff9a14;
}
}
.price_unit {
.price_unit {
font-size: 14px;
padding-right: 5px;
}
}
.btn_warning {
.btn_warning {
text-align: center;
cursor: pointer;
padding: 0 15px;
......@@ -506,14 +506,14 @@
font-size: 15px;
border-radius: 2px;
background-clip: padding-box;
letter-spacing: .05em;
letter-spacing: 0.05em;
background-color: #ff9a14;
color: #fff;
margin-top: 10px;
line-height: 40px;
}
}
@media only screen and (max-width: 1200px) {
@media only screen and (max-width: 1200px) {
.search-content .search-filter-aside {
display: none;
}
......@@ -521,15 +521,15 @@
.search-content .group-result-list {
width: 100%;
}
}
}
@media only screen and (max-width: 1200px) {
@media only screen and (max-width: 1200px) {
.search-content {
max-width: 768px;
}
}
}
@media only screen and (max-width: 768px) {
@media only screen and (max-width: 768px) {
.group-statis-block .group-statis-detail {
width: calc(100% - 45px);
}
......@@ -560,25 +560,25 @@
.price-info .price-wrap .price_Search {
font-size: 28px;
}
}
}
.SearchMain .q-field__control {
.SearchMain .q-field__control {
height: 46px;
}
}
.SearchMain .q-field__control {
.SearchMain .q-field__control {
min-height: 46px !important;
}
}
.SearchMain .q-field__native {
.SearchMain .q-field__native {
min-height: 46px;
}
}
.SearchMain .q-field__marginal {
.SearchMain .q-field__marginal {
height: 46px;
}
}
.search-filter-inner {
.search-filter-inner {
position: relative;
display: flex;
flex-wrap: wrap;
......@@ -587,37 +587,37 @@
margin: 0 auto;
max-width: 1160px;
align-items: center;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
}
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.SearchContent .search-item {
.SearchContent .search-item {
display: flex;
border-right: 1px solid #eee;
line-height: 44px;
padding-right: 20px;
}
.search-item:first-child{
}
.search-item:first-child {
border-left: 1px solid #eee;
}
.search-filter-inner i {
}
.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 {
.full-height .q-textarea .q-field__control {
min-height: 25px !important;
}
}
.full_price .q-placeholder {
.full_price .q-placeholder {
min-height: 25px !important;
}
}
/* .text-h6 {
/* .text-h6 {
text-align: center;
padding: 0 20px;
height: 60px;
......@@ -627,78 +627,88 @@
font-weight: 700;
position: relative;
} */
.text-h6 i {
.text-h6 i {
position: absolute;
right:20px;
right: 20px;
cursor: pointer;
font-size:23px;
}
.SearchContent .q-field--filled .q-field__control{
background:#fff;
}
.SearchContent .q-field--filled .q-field__control:before{
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{
}
.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){
}
.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;
display: none;
}
.mobileSearch {
display: block;
}
.SearchMain .blank-block{
}
.SearchMain .blank-block {
margin: 100px auto;
width: 300px;
text-align: center;
}
.SearchMain .blank-block i{
}
.SearchMain .blank-block i {
font-size: 80px;
color: #ddd;
}
.SearchMain .blank-block p{
}
.SearchMain .blank-block p {
color: #999;
font-size: 15px;
letter-spacing: 1px;
}
.desktop-page{
max-width:1200px;
margin:0 auto;
}
}
.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,11 +1242,11 @@
</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 {
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,
......@@ -1034,68 +1255,69 @@
},
data() {
return {
SearchResult:'',
SearchResult: "",
isShowDialog: false,
sortNum: 1, //排序
dayNum: [], //天数
WeekDay: [],
//天数数组
dayArray: [{
dayArray: [
{
id: 1,
min: 1,
max: 1,
text: '1天'
text: "1天"
},
{
id: 2,
min: 2,
max: 2,
text: '2天'
text: "2天"
},
{
id: 3,
min: 3,
max: 3,
text: '3天'
text: "3天"
},
{
id: 4,
min: 4,
max: 4,
text: '4天'
text: "4天"
},
{
id: 5,
min: 5,
max: 5,
text: '5天'
text: "5天"
},
{
id: 6,
min: 6,
max: 6,
text: '6天'
text: "6天"
},
{
id: 7,
min: 7,
max: 8,
text: '7-8天'
text: "7-8天"
},
{
id: 8,
min: 9,
max: 10,
text: '9-10天'
text: "9-10天"
},
{
id: 9,
min: 10,
max: null,
text: '10天以上'
text: "10天以上"
}
],
flight: ['长荣'],
flight: ["长荣"],
showSplitPannel: false,
fullHeight: false,
......@@ -1118,50 +1340,66 @@
//地区数据
areas: [],
crtAreaIndex: 0,
sortArray: [{
label: '依推薦程度',
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: '星期五',
},
{
label: "星期五",
value: 5
}, {
label: '星期六',
},
{
label: "星期六",
value: 6
}],
}
],
showPopup: false,
tab: "dest",
chosenResult: {
......@@ -1194,26 +1432,24 @@
// PageCount: 0,
// TotalCount: 0,
dayNumList: [], // 天数
webSiteCategoryIds: '', // 分类Id
placeIds: '', // 目的地城市Id
orderBy: 0, // 排序 0默认 1价格升序 2价格降序
webSiteCategoryIds: "", // 分类Id
placeIds: "", // 目的地城市Id
orderBy: 0 // 排序 0默认 1价格升序 2价格降序
},
ShowType: 0, //显示样式(0-豆腐格，1-列表)
//行程列表
DataList: [],
DataList: []
};
},
created() {
},
created() {},
mounted() {
if (localStorage.baseifo) {
var jObj = JSON.parse(localStorage.baseifo);
this.areas = jObj.AreaList;
this.ShowType = jObj.Config.ShowType;
this.ShowType = 2
this.ShowType = 2;
} else {
this.getAera()
this.getAera();
}
document.addEventListener("click", this.clickHandler);
var qsearchKey = this.getUrlKey("qsearchKey", window.location.href);
......@@ -1237,19 +1473,19 @@
this.qMsg.categoryId = Number(categoryId);
}
if ((qsearchKey || qsearchDate || qsearchEndDate) && this.ShowType!=2) {
if ((qsearchKey || qsearchDate || qsearchEndDate) && this.ShowType != 2) {
this.goSearchHandler();
}
},
methods: {
handlerSearchChange(value) {
console.log('handlerSearchChange', value)
this.qMsg = value
console.log("handlerSearchChange", value);
this.qMsg = value;
this.goSearchHandler();
},
//清除所有条件
clearAll(){
let msg={
clearAll() {
let msg = {
companyId: 0,
startDate: "", //开始日期
endDate: "", //结束日期
......@@ -1270,33 +1506,34 @@
// PageCount: 0,
// TotalCount: 0,
dayNumList: [], // 天数
webSiteCategoryIds: '', // 分类Id
placeIds: '', // 目的地城市Id
orderBy: 0, // 排序 0默认 1价格升序 2价格降序
}
webSiteCategoryIds: "", // 分类Id
placeIds: "", // 目的地城市Id
orderBy: 0 // 排序 0默认 1价格升序 2价格降序
};
this.qMsg = msg;
this.goSearchHandler();
},
//清除价格
clearPrice(){
this.qMsg.minPrice='';
this.qMsg.maxPrice='';
clearPrice() {
this.qMsg.minPrice = "";
this.qMsg.maxPrice = "";
this.goSearchHandler();
},
//清除天数
clearDays(){
this.dayNum=[];
clearDays() {
this.dayNum = [];
this.goSearchHandler();
},
//清除星期
clearWeek(){
this.WeekDay=[];
clearWeek() {
this.WeekDay = [];
this.goSearchHandler();
},
//获取地区数据
getAera() {
this.apipost(
"ws_get_GetSearchArea", {},
"ws_get_GetSearchArea",
{},
res => {
if (res.data.resultCode == 1) {
if (res.data.data) {
......@@ -1314,9 +1551,7 @@
}, 200);
}
},
searchBlurHandler() {
},
searchBlurHandler() {},
searchChangeHandler() {
if (this.qMsg.searchKey == "") {
this.showSplitPannel = true;
......@@ -1351,20 +1586,20 @@
this.qMsg.searchKey = obj.Name;
},
goSearchHandler() {
this.$q.loading.show()
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.minPrice != "") {
minPrice = parseFloat(this.qMsg.minPrice);
}
if (this.qMsg.maxPrice != '') {
maxPrice = parseFloat(this.qMsg.maxPrice)
if (this.qMsg.maxPrice != "") {
maxPrice = parseFloat(this.qMsg.maxPrice);
if (minPrice > maxPrice) {
//this.Error('价格区间的最低价格不能低于最大价格')
return false
return false;
}
}
var companyId = -1;
......@@ -1372,7 +1607,12 @@
var groupinfo = JSON.parse(localStorage.groupinfo);
companyId = groupinfo.siteList[0].companyId;
}
this.SearchResult=this.qMsg.startDate+'-'+this.qMsg.endDate+' '+this.qMsg.searchKey;
this.SearchResult =
this.qMsg.startDate +
"-" +
this.qMsg.endDate +
" " +
this.qMsg.searchKey;
let msg = {
pageIndex: this.qMsg.pageIndex,
pageSize: this.qMsg.pageSize,
......@@ -1385,33 +1625,34 @@
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),
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,
}
dayNumList: this.dayNum
};
if (localStorage.b2bUser) {
var b2bUser = JSON.parse(window.localStorage.getItem('b2bUser'))
var b2bUser = JSON.parse(window.localStorage.getItem("b2bUser"));
if (b2bUser) {
this.msg.priceOrderByField = 2;
}
}
this.apipost(
"b2c_get_GetB2CMergeProductPageList", msg,
"b2c_get_GetB2CMergeProductPageList",
msg,
res => {
this.$q.loading.hide()
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 != '') {
if (item.imgCover && item.imgCover != "") {
try {
var imgArray = JSON.parse(item.imgCover);
if (imgArray && imgArray.length > 0) {
......@@ -1430,6 +1671,5 @@
);
}
}
};
};
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment