Skip to content

M
million
Commit 5582ce4c authored by 沈良进's avatar 沈良进
Browse files
Options

搜索页优化

parent 6de34457
Hide whitespace changes
Inline Side-by-side
Showing with 1655 additions and 138 deletions
quasar.conf.js
View file @ 5582ce4c
......@@ -164,6 +164,7 @@ module.exports = function( /* ctx */ ) {
'QBadge',
'QParallax',
'QField',
'QTree',
],
directives: [
......
src/boot/utils.js
View file @ 5582ce4c
......@@ -2,12 +2,12 @@ import Vue from 'vue'
import axios from 'axios'
import md5 from 'js-md5'
// import {eventBus} from './eventBus'
import VueCoreVideoPlayer from 'vue-core-video-players'
// import VueCoreVideoPlayer from 'vue-core-video-players'
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
// import VueCoreVideoPlayer from 'vue-core-video-player'
Vue.prototype.$EventBus = new Vue()
Vue.use(VueCoreVideoPlayer)
// Vue.use(VueCoreVideoPlayer)
Vue.use(VueViewer)
//域名管理对象
Vue.prototype.domainManager = function () {
......
src/components/navs/hor-big-one.vue
View file @ 5582ce4c
......@@ -318,11 +318,11 @@ color: #EE4454;
</q-toolbar>
<div class="header-box flex">
<q-tabs align="center" shrink>
<q-btn flat class="address-btn">
<q-btn flat class="address-btn" @mouseenter="mouseenterAddress" @mouseleave="mouseeleaveAddress">
<span slot="default" class="flex item-center">
<i class="iconfont icondingweixiao q-icon notranslate" style="font-size: 14px; margin-right: 8px"></i>選擇目的地
</span>
<q-menu>
<q-menu ref="address" @mouseenter="addressMenuEnter" @mouseleave="addressMenuLeave">
<div class="address-box flex">
<div class="menu-box">
<div
......@@ -343,7 +343,7 @@ color: #EE4454;
</div>
</div>
<div class="city-box">
<div v-for="item in selectedArea" :key="item">
<div v-for="item in selectedArea" :key="item.Id">
<div class="city" >
<img class="city-img" v-if="item.ImageList.length" :src="item.ImageList[0]" />
<div class="city-name-box flex flex-center"><div class="city-name">{{item.Name}}</div></div>
......@@ -362,8 +362,8 @@ color: #EE4454;
</q-menu>
</q-btn>
<q-separator style="height: 16px;margin: auto 0" vertical/>
<q-btn class="all-type" flat label="全部分類">
<q-menu>
<q-btn class="all-type" flat label="全部分類" @mouseenter="typeHoverAll(true)" @mouseleave="typeHoverAll(false)">
<q-menu ref="menu0" @mouseenter="menuFocus = 2" @mouseleave="menuLeaveAll">
<div class="all-menu">
<div class="flex">
<div class="category-item font-16" :key="i" v-for="(x, i) in dataList.CategoryList">{{x.CategoryName}}</div>
......@@ -389,8 +389,8 @@ 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' }">
<q-menu :key="i">
<q-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)">
<q-list>
<div :key="item.Id" v-for="item in x.SubList">
<q-item v-if="item.SubList.length" clickable>
......@@ -437,6 +437,7 @@ export default {
},
data() {
return {
menuFocus: 0,
selectCategory: undefined,
categoryList: [],
subTitle: "",
......@@ -477,6 +478,84 @@ export default {
this.getCategoryList();
},
methods: {
mouseenterAddress() {
this.menuFocusAll = 0
this.menuFocus = 0
this.addressFocus = 1
this.$refs.address.show()
},
mouseeleaveAddress() {
setTimeout(() => {
if(!this.addressFocus) {
this.$refs.address.hide()
}
}, 50)
},
addressMenuEnter() {
this.addressFocus = 2
},
addressMenuLeave() {
this.addressFocus = 0
setTimeout(() => {
if(!this.addressFocus) {
this.$refs.address.hide()
}
}, 50)
},
typeHoverAll(bool) {
if(bool) {
this.addressFocus = 0
this.menuFocus = 0
this.menuFocusAll = 1
if(this.currentMenu !== undefined) {
this.$refs.menu[this.currentMenu].hide()
}
this.$refs.menu0.show()
} else {
this.menuFocusAll = 0
setTimeout(() => {
if(!this.menuFocusAll) {
this.$refs.menu0.hide()
}
}, 50)
}
this.currentMenu = undefined
},
typeHover(index, bool) {
if(bool) {
this.addressFocus = 0
this.menuFocusAll = 0
this.menuFocus = 1
if(this.currentMenu !== undefined && index !== this.currentMenu) {
this.$refs.menu[this.currentMenu].hide()
}
this.$refs.menu[index].show()
} else {
this.menuFocus = 0
setTimeout(() => {
if(!this.menuFocus) {
this.$refs.menu[index].hide()
}
}, 50)
}
this.currentMenu = index
},
menuLeaveAll() {
this.menuFocus = 0
setTimeout(() => {
if(!this.menuFocus) {
this.$refs.menu0.hide()
}
}, 50)
},
menuLeave(i) {
this.menuFocus = 0
setTimeout(() => {
if(!this.menuFocus) {
this.$refs.menu[i].hide()
}
}, 50)
},
changeAreas(item) {
this.selectedArea = item.SubList;
this.selectedAreaId = item.Id;
......@@ -514,7 +593,6 @@ export default {
Id: ''
});
this.$EventBus.$emit('hotList', hotArr)
console.log('emit', this.$EventBus.$emit, hotArr)
this.selectedArea = hotArr
this.areas = this.areas.concat(this.baseData.AreaList);
},
......
src/components/searchdata/kkday.vue
View file @ 5582ce4c
......@@ -13,19 +13,18 @@
/>
<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"
>
<div class="addr-list q-px-md q-py-sm cursor-pointer row items-center" v-if="x.isShow">
<q-checkbox
indeterminate-value="half"
@input="changeCheckHandler(x)"
v-model="x.checked"
size="xs"
/>
<span class="col" @click="changeExplesdHandler(x)">{{
<span class="col" @click="changeExplesdHandler(x)">
{{
x.Name
}}</span>
}}
</span>
<q-icon
@click="changeExplesdHandler(x)"
v-if="
......@@ -44,16 +43,8 @@
"
>
<template v-for="(y, yi) in x.SubList">
<div
class="addr-list q-px-md q-py-sm row items-center"
:key="yi"
v-if="y.isShow"
>
<q-checkbox
@input="changeCheckHandler(y, x)"
v-model="y.checked"
size="xs"
/>
<div class="addr-list q-px-md q-py-sm row items-center" :key="yi" v-if="y.isShow">
<q-checkbox @input="changeCheckHandler(y, x)" v-model="y.checked" size="xs" />
<span class="col">{{ y.Name }}</span>
</div>
</template>
......@@ -63,13 +54,24 @@
</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>
<div class="add q-mt-md" v-for="(x, i) in goodsType" :key="i">
<div
class="addr-list q-px-md q-py-sm cursor-pointer row items-center"
>
<span class="col" @click="changeExplesdHandler(x)">{{
x.Name
}}</span>
<q-tree
:nodes="goodsType"
no-connectors
node-key="Id"
label-key="CategoryName"
tick-strategy="leaf"
@update:ticked="handleTicked"
@update:selected="handleSelected"
:selected.sync="selected"
:ticked.sync="ticked"
/>
<!-- <div class="add q-mt-md" v-for="(x, i) in goodsType" :key="i">
<div class="addr-list q-px-md q-py-sm cursor-pointer row items-center">
<span class="col" @click="changeExplesdHandler(x)">
{{
x.CategoryName
}}
</span>
<q-icon
@click="changeExplesdHandler(x)"
:name="!x.explsed ? 'keyboard_arrow_down' : 'keyboard_arrow_up'"
......@@ -78,19 +80,27 @@
</div>
<div class="q-mx-md" v-if="x.explsed">
<div
class="addr-list q-px-md q-py-sm row items-center"
v-for="(y, yi) in x.SubList"
:key="yi"
>
<q-checkbox
v-model="y.checked"
size="xs"
@input="changeGoodTypeHandler(y)"
/>
<span class="col">{{ y.Name }}</span>
<div class="addr-list q-px-md q-py-sm row items-center">
<q-checkbox v-model="y.checked" size="xs" @input="changeGoodTypeHandler(y)" />
<span class="col">{{ y.CategoryName }}</span>
</div>
<div class="q-mx-md" v-if="y.explsed">
<div
class="addr-list q-px-md q-py-sm row items-center"
v-for="(z, zi) in y.SubList"
:key="zi"
>
<q-checkbox v-model="z.checked" size="xs" @input="changeGoodTypeHandler(z)" />
<span class="col">{{ z.CategoryName }}</span>
</div>
</div>
</div>
</div>
</div>
</div> -->
</q-card>
<q-card flat class="rounded-borders q-mt-lg row no-padding">
......@@ -101,11 +111,13 @@
<q-icon name="iconfont iconigw-l-date-trade" size="24px" />
</div>
<div class="row items-center justify-center col">
<span class="text-grey-8">{{
<span class="text-grey-8">
{{
dateRange.from
? `${dateRange.from} - ${dateRange.to}`
: "篩選出發日期"
}}</span>
? `${dateRange.from} - ${dateRange.to}`
: "篩選出發日期"
}}
</span>
<q-popup-proxy :offset="[0, 0]" ref="qDateProxy">
<div>
<q-date
......@@ -122,9 +134,9 @@
<q-card flat class="rounded-borders q-pa-md q-mt-lg">
<div class="text-subtitle1 text-weight-bold">價錢篩選（CNY）</div>
<div class="q-mt-md text-grey-6 text-subtitle1">
{{ msg.priceRange.min }} - {{ msg.priceRange.max }}
</div>
<div
class="q-mt-md text-grey-6 text-subtitle1"
>{{ msg.priceRange.min }} - {{ msg.priceRange.max }}</div>
<q-range
v-model="msg.priceRange"
:min="1"
......@@ -146,14 +158,12 @@
v-for="(y, yi) in dayArray"
:key="yi"
>
<q-checkbox
v-model="y.checked"
size="xs"
@input="changeTripDayHandler"
/>
<span class="col text-grey-8" style="font-weight: 400">{{
<q-checkbox v-model="y.checked" size="xs" @input="changeTripDayHandler" />
<span class="col text-grey-8" style="font-weight: 400">
{{
y.text
}}</span>
}}
</span>
</div>
</q-expansion-item>
</q-card>
......@@ -162,9 +172,11 @@
<div class="rounded-borders bg-white q-col-gutter-sm">
<div class="row q-col-gutter-sm items-center q-pa-md">
<div class="text-subtitle2 q-mr-md">
<span class="text-weight-bold text-primary q-mr-sm">{{
<span class="text-weight-bold text-primary q-mr-sm">
{{
TotalCount
}}</span>
}}
</span>
<span>項體驗行程</span>
</div>
<q-chip
......@@ -177,10 +189,7 @@
:label="x.Name"
/>
</div>
<div
class="q-pa-md row items-center"
style="border-top: 1px solid #eee"
>
<div class="q-pa-md row items-center" style="border-top: 1px solid #eee">
<span class="f12">排序：</span>
<q-chip
square
......@@ -195,8 +204,7 @@
v-for="(x, i) in sortArray"
:key="i"
@click="chosenSortHandler(x)"
>{{ x.label }}</q-chip
>
>{{ x.label }}</q-chip>
</div>
</div>
<div class="q-mt-lg">
......@@ -215,9 +223,7 @@
class="bg-grey-3"
/>
<div class="q-pa-md col column">
<div class="text-subtitle1 text-weight-bold text-grey-9">
{{ x.title }}
</div>
<div class="text-subtitle1 text-weight-bold text-grey-9">{{ x.title }}</div>
<div class="col">
<div class="row items-center q-my-sm">
<q-chip
......@@ -236,21 +242,11 @@
<div
class="text-subtitle2 text-grey-6 text-weight-regular ellipsis-2-lines"
style="line-height: 1.6"
>
{{ x.productRecommend }}
</div>
>{{ x.productRecommend }}</div>
<div class="row items-center f12 text-grey-6 q-mt-md">
<q-icon
size="12px"
name="iconfont icondingweixiao"
class="q-mr-sm"
/>
<q-icon size="12px" name="iconfont icondingweixiao" class="q-mr-sm" />
<span class="q-mr-lg">{{ x.countryName }}</span>
<q-icon
size="12px"
name="iconfont iconigw-l-date-trade"
class="q-mr-sm"
></q-icon>
<q-icon size="12px" name="iconfont iconigw-l-date-trade" class="q-mr-sm"></q-icon>
<span>{{ x.startDate }}</span>
</div>
</div>
......@@ -260,12 +256,9 @@
<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
>
<span class="text-secondary text-weight-bold">{{ x.dayNum }} 天</span>
</div>
<div class="text-h6 product-price">CNY：{{ x.b2CPrice }}</div>
</div>
......@@ -289,8 +282,7 @@
glossy
size="13px"
padding="sm md"
>
</q-pagination>
></q-pagination>
</div>
</div>
</div>
......@@ -302,9 +294,11 @@ export default {
props: ["qMsg"],
data() {
return {
ticked: [],
selected: [],
searchAdd: {
name: "",
value: 0,
value: 0
},
areaList: [],
chosenAddress: [],
......@@ -316,56 +310,56 @@ export default {
id: 1,
min: 1,
max: 1,
text: "1天",
text: "1天"
},
{
id: 2,
min: 2,
max: 2,
text: "2天",
text: "2天"
},
{
id: 3,
min: 3,
max: 3,
text: "3天",
text: "3天"
},
{
id: 4,
min: 4,
max: 4,
text: "4天",
text: "4天"
},
{
id: 5,
min: 5,
max: 5,
text: "5天",
text: "5天"
},
{
id: 6,
min: 6,
max: 6,
text: "6天",
text: "6天"
},
{
id: 7,
min: 7,
max: 8,
text: "7-8天",
text: "7-8天"
},
{
id: 8,
min: 9,
max: 10,
text: "9-10天",
text: "9-10天"
},
{
id: 9,
min: 10,
max: 1000,
text: "10天以上",
},
text: "10天以上"
}
],
dataList: [],
sortNum: 1,
......@@ -373,21 +367,21 @@ export default {
{
label: "強力推薦",
value: 1,
icon: "iconfont icongood",
icon: "iconfont icongood"
},
{
label: "價格：低到高",
value: 2,
icon: "iconfont iconmeiyuan",
icon: "iconfont iconmeiyuan"
},
{
label: "價格：高到低",
value: 3,
icon: "iconfont iconmeiyuan",
},
icon: "iconfont iconmeiyuan"
}
],
TotalCount: 0,
PageCount: 0,
PageCount: 0
};
},
created() {
......@@ -397,26 +391,32 @@ export default {
this.initGoods();
this.msg.priceRange = {
min: 1,
max: 100000,
max: 100000
};
this.msg.minPrice = 0;
this.msg.maxPrice = 100000;
this.dayArray.forEach((x) => {
this.dayArray.forEach(x => {
x.checked = false;
});
this.dateRange = { from: this.msg.startDate, to: this.msg.endDate };
this.goSearchHandler();
},
methods: {
handleSelected(target) {
console.log("handleSelected", target);
},
handleTicked(target) {
console.log("handleTicked", target);
},
initAreaList() {
let jObj = JSON.parse(window.localStorage.getItem("baseifo"));
jObj.AreaList.forEach((x) => {
x.SubList.forEach((y) => {
jObj.AreaList.forEach(x => {
x.SubList.forEach(y => {
y.checked = false;
y.explsed = false;
y.isShow = true;
if (y.SubList) {
y.SubList.forEach((z) => {
y.SubList.forEach(z => {
z.checked = false;
z.explsed = false;
z.isShow = true;
......@@ -435,7 +435,7 @@ export default {
if (x.checked && this.msg.teamType.indexOf(x.Id) == -1) {
this.msg.teamType.push(x.Id);
} else if (!x.checked && this.msg.teamType.indexOf(x.Id) != -1) {
let i = this.msg.teamType.findIndex((item) => item == x.Id);
let i = this.msg.teamType.findIndex(item => item == x.Id);
this.msg.teamType.splice(i, 1);
}
},
......@@ -447,19 +447,19 @@ export default {
},
changeCheckHandler(x, p = null) {
if (p) {
let t = p.SubList.filter((x) => x.checked);
let t = p.SubList.filter(x => x.checked);
p.checked =
t.length == p.SubList.length ? true : t.length == 0 ? false : "half";
this.changeChosenHandler(x);
} else {
x.SubList.forEach((item) => {
x.SubList.forEach(item => {
item.checked = x.checked;
this.changeChosenHandler(item);
});
}
},
changeChosenHandler(x) {
let i = this.chosenAddress.findIndex((item) => item.Id == x.Id) ?? -1;
let i = this.chosenAddress.findIndex(item => item.Id == x.Id) ?? -1;
if (!x.checked) {
if (i > -1) {
this.chosenAddress.splice(i, 1);
......@@ -469,12 +469,24 @@ export default {
this.chosenAddress.push(x);
}
}
this.msg.placeIds = this.getChoseAddressCity();
this.goSearchHandler();
},
getChoseAddressCity() {
console.log("this.chosenAddress", this.chosenAddress);
let result = [];
this.chosenAddress.forEach(item => {
let arr = item.DestinationList.map(item => item.ID);
result = result.concat(arr);
});
console.log("getChoseAddressCity", result);
return result;
},
changeTripDayHandler() {
this.$forceUpdate();
this.msg.minTripDay = "0";
this.msg.maxTripDay = "0";
this.dayArray.forEach((x) => {
this.dayArray.forEach(x => {
if (x.checked) {
this.msg.minPrice =
this.msg.minPrice > x.min ? x.min : this.msg.minPrice;
......@@ -499,34 +511,40 @@ export default {
this.msg.maxPrice = e.max;
},
dateRangeHandler(e) {
console.log('dateRangeHandler', e)
this.msg.startDate = `${e.from.year}/${e.from.month}/${e.from.day}`;
this.msg.endDate = `${e.to.year}/${e.to.month}/${e.to.day} `;
this.$refs.qDateProxy.hide();
},
initGoods() {
this.goodsType.push({
Id: 1,
Name: "觀光行程",
explsed: false,
SubList: [
{
Id: 2,
Name: "半/一日遊",
checked: false,
},
{
Id: 3,
Name: "多日遊",
checked: false,
},
],
let jObj = JSON.parse(window.localStorage.getItem("baseifo"));
jObj.CategoryList.forEach(x => {
x.checked = false;
x.explsed = false;
x.isShow = true;
x.children = x.SubList
x.children.forEach(y => {
y.checked = false;
y.explsed = false;
y.isShow = true;
if (y.SubList) {
y.children = y.SubList
y.children.forEach(z => {
z.checked = false;
z.explsed = false;
z.isShow = true;
});
}
});
this.goodsType.push(x);
console.log('this.goodsType', this.goodsType)
});
},
changeAddrSearchHandler(v) {
this.areaList.forEach((x) => {
this.areaList.forEach(x => {
x.isShow = x.Name.indexOf(v) != -1;
x.isShowChild = false;
x.SubList.forEach((y) => {
x.SubList.forEach(y => {
y.isShow = y.Name.indexOf(v) != -1;
if (y.isShow) {
x.isShow = true;
......@@ -564,16 +582,16 @@ export default {
}
}
this.apipost(
"b2b_get_GetB2BTravelPageList",
"b2c_get_GetB2CMergeProductPageList",
this.msg,
(res) => {
res => {
this.$q.loading.hide();
if (res.data.resultCode == 1) {
this.PageCount = res.data.data.pageCount;
this.TotalCount = res.data.data.count;
var tempArray = res.data.data.pageData;
if (tempArray && tempArray.length > 0) {
tempArray.forEach((item) => {
tempArray.forEach(item => {
if (item.imgCover && item.imgCover != "") {
try {
var imgArray = JSON.parse(item.imgCover);
......@@ -590,7 +608,7 @@ export default {
}
}
},
(err) => {}
err => {}
);
},
GotoDetails(item) {
......@@ -598,8 +616,8 @@ export default {
"/detail/" + encodeURIComponent(item.id) + "/" + item.tcid,
{}
);
},
},
}
}
};
</script>
......
src/pages/Search-old.vue 0 → 100644
View file @ 5582ce4c
<style>
.SearchMain {
min-height: 800px;
}
.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;
}
}
.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;
}
.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, .16), 0 2px 7px 0 rgba(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, .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;
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: .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 {
text-align: center;
padding: 0 20px;
height: 60px;
line-height: 60px;
font-size: 18px;
color: #333;
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;
}
.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 :label="qMsg.searchKey" />
</q-breadcrumbs>
</div>
<div class="text-h6 text-left" v-if="qMsg.searchKey">
搜尋結果 “<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">
<i class="iconfont iconchazhao"></i>
{{qMsg.searchKey}}
</div>
<div class="search-item" @click="isShowDialog=true,goSearchHandler">
<i class="iconfont iconrili"></i>
{{qMsg.startDate}} ~ {{qMsg.endDate}}
</div>
<div class="search-item" style="margin-left:20px;">
<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 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-section>
<q-item-label>{{ x.Name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-scroll-area>
</div>
<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">
<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>
</div>
<template v-if="x&&x.SubList && x.SubList.length>0">
<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>
</template>
</div>
</template>
<q-separator class="q-mt-md q-mb-md" color="grey-2" inset />
</div>
</template>
</q-scroll-area>
</div>
</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">
</div>
<div class="sortDiv">
<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>
<template v-if="ShowType==0">
<!--豆腐格-->
<searchBlock :DataList="DataList" :qMsg="qMsg"></searchBlock>
</template>
<template v-else-if="ShowType==1">
<div class="wl-section-block search-content">
<div class="search-filter-aside">
<div class="search-header">
篩選項目
<span class="clear-filter" @click="clearAll()">清除所有篩選</span>
</div>
<div class="search-body">
<div class="search-type">
<div class="search-title">
價格
<span class="clear-filter" @click="clearPrice()">清除篩選</span>
</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 />
</div>
<div class="max">
<q-input class="full_price" style="width:80%" placeholder="最高价" v-model="qMsg.maxPrice"
@input="changeData" filled autogrow />
</div>
</div>
</div>
<div class="search-type">
<div class="search-title">
天數
<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" />
</div>
<div class="search-type">
<div class="search-title">
出發機場
<span class="clear-filter">清除篩選</span>
</div>
</div>
<!-- <div class="search-type">
<div class="search-title">
主要航班
<span class="clear-filter">清除篩選</span>
</div>
<q-checkbox right-label v-model="flight" label="長榮" />
</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" />
</div>
</div>
</div>
</div>
<!--列表-->
<searchList :DataList="DataList" :qMsg="qMsg" @getPage="getPage"></searchList>
</div>
</template>
<template v-else>
<kkday :qMsg="qMsg"></kkday>
</template>
<div v-if="DataList.length==0 && ShowType!=2" class="blank-block">
<i class="iconfont iconchazhao"></i>
<p>請嘗試其他關鍵字或篩選條件</p>
</div>
</div>
<q-dialog v-model="fullHeight" full-height>
<q-card class="column full-height" style="width: 500px">
<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 />
</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" />
</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" />
</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" />
</div>
</q-card>
</q-dialog>
<q-dialog v-model="isShowDialog">
<q-card>
<q-card-section>
<div class="text-h6">
搜尋行程
<i class="iconfont iconbaseline-close-px" @click="isShowDialog=false"></i>
</div>
</q-card-section>
<q-separator />
<div style="max-height: 550px;padding:20px 30px 30px 30px" class="scroll">
<div class="chosen-box">
<div class="chosen-tab">
<q-tabs v-model="tab" align="justify" narrow-indicator class="q-mb-md">
<q-tab class="text-purple" name="dest" label="目的地" />
<q-tab class="text-teal" name="kw" label="關鍵字" />
</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="請選擇地區" />
</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="請選擇地區" />
</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="請選擇地區" />
</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="請選擇地區" />
</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')" />
</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">
<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>
</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">
<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>
</q-icon>
</template>
</q-input>
</div>
</div>
<div>
<q-btn color="primary" unelevated style="width:100%;height:50px;margin-top:20px;" filled label="搜尋"
@click="isShowDialog=false,goSearchHandler()" />
</div>
</div>
</div>
</div>
<q-separator />
</q-card>
</q-dialog>
<popup v-model="showPopup" mode="top" :safeAreaInsetBottom="true" border-radius="5">
<div class="chosen-box">
<!-- <div class="title">搜尋行程</div> -->
<div class="chosen-tab">
<q-tabs v-model="tab" align="justify" narrow-indicator class="q-mb-md">
<q-tab class="text-purple" name="dest" label="目的地" />
<q-tab class="text-teal" name="kw" label="關鍵字" />
</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="請選擇地區" />
</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="請選擇地區" />
</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="請選擇地區" />
</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="請選擇地區" />
</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')" />
</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">
<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>
</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">
<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>
</q-icon>
</template>
</q-input>
</div>
</div>
<div>
<q-btn color="primary" unelevated style="width:100%" filled label="搜尋" @click="showPopup=false,goSearchHandler()" />
</div>
</div>
</div>
</popup>
</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
},
//地区样式
barStyle: {
right: "2px",
borderRadius: "9px",
backgroundColor: "#027be3",
width: "9px",
opacity: 0.2
},
//地区数据
areas: [],
crtAreaIndex: 0,
sortArray: [{
label: '依推薦程度',
value: 1
}, {
label: '低價優先',
value: 2
}, {
label: '高價優先',
value: 3
}, {
label: '最快出發日',
value: 4
}, {
label: '最晚出發日',
value: 5
}, {
label: '天數少到多',
value: 6
}, {
label: '天數多到少',
value: 7
}],
weekList: [{
label: '星期日',
value: 0
}, {
label: '星期一',
value: 1
}, {
label: '星期二',
value: 2
}, {
label: '星期三',
value: 3
}, {
label: '星期四',
value: 4
}, {
label: '星期五',
value: 5
}, {
label: '星期六',
value: 6
}],
showPopup: false,
tab: "dest",
chosenResult: {
fl: "",
sl: "",
tl: "",
ful: ""
},
//查询参数
qMsg: {
cityId: 0,
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,
},
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);
if (qsearchKey) {
this.qMsg.searchKey = qsearchKey;
}
if (qsearchDate) {
this.qMsg.startDate = qsearchDate;
}
if (qsearchEndDate) {
this.qMsg.endDate = qsearchEndDate;
}
if ((qsearchKey || qsearchDate || qsearchEndDate) && this.ShowType!=2) {
this.goSearchHandler();
}
},
methods: {
//清除所有条件
clearAll(){
let msg={
cityId: 0,
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,
}
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;
}
}
},
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,
cityId: this.qMsg.cityId,
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(
"b2b_get_GetB2BTravelPageList", 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 => {}
);
}
}
};
</script>
src/pages/Search.vue
View file @ 5582ce4c
......@@ -839,7 +839,7 @@
</div>
</template>
<template v-else>
<kkday :qMsg="qMsg"></kkday>
<kkday :qMsg="qMsg" @change="handlerSearchChange"></kkday>
</template>
<div v-if="DataList.length==0 && ShowType!=2" class="blank-block">
<i class="iconfont iconchazhao"></i>
......@@ -1229,6 +1229,11 @@
}
},
methods: {
handlerSearchChange(value) {
console.log('handlerSearchChange', value)
this.qMsg = value
this.goSearchHandler();
},
//清除所有条件
clearAll(){
let msg={
......@@ -1382,7 +1387,7 @@
}
}
this.apipost(
"b2b_get_GetB2BTravelPageList", msg,
"b2c_get_GetB2CMergeProductPageList", msg,
res => {
this.$q.loading.hide()
if (res.data.resultCode == 1) {
......
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