Skip to content

M
million
Commit 1829d518 authored by 吴春's avatar 吴春
Browse files
Options

1

parent e057e343
Hide whitespace changes
Inline Side-by-side
Showing with 2758 additions and 1 deletion
src/components/searchProductdata/block.vue 0 → 100644
View file @ 1829d518
<template>
<!-- 豆腐块 -->
<div class="Search_center">
<ul class="pd-list">
<li class="pd-box" v-for="(item,index) in DataList" :key="index">
<a class="pd-link">
<div class="pd-img"
:style="{backgroundImage:`url('${item.newCoverImg}')`}">
<div class="pd-price">
<div class="price">
{{item.dayNum}}
<small class="unit">天</small> {{item.b2BPrice}}
<small class="unit">元起</small>
</div>
</div>
</div>
<div class="pd-content">
<h3 class="pd-title">{{item.title}}</h3>
<div class="pd-departure">
出發日期：{{item.startDate}}
<span class="more" @click="GotoDetails(item)" style="cursor:pointer">...更多</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
props: ["DataList", "PageCount"],
data() {
return {
};
},
methods: {
GotoDetails(item) {
this.CommonJump('/details/' + encodeURIComponent(item.id) + "/" + item.tcid, {});
}
}
}
</script>
src/components/searchProductdata/kkday.vue 0 → 100644
View file @ 1829d518
<template>
<div
class="items-start travel-list"
:class="$q.platform.is.desktop ? 'row q-mt-lg' : 'colmuns'"
>
<!-- 移动端 -->
<div v-if="$q.platform.is.mobile">
<div class="flex">
<div @click="showAddress = true" class="nav-item">目的地<i class="iconfont iconarrowdown text-grey-6" style="margin-top: 3px; margin-left:4px"></i></div>
<div @click="showCategory = true" class="nav-item">商品類別<i class="iconfont iconarrowdown text-grey-6" style="margin-top: 3px; margin-left:4px"></i></div>
<div @click="showDate = true" class="nav-item">旅程時間<i class="iconfont iconarrowdown text-grey-6" style="margin-top: 3px; margin-left:4px"></i></div>
<div @click="showPrice = true" class="nav-item">價錢/时间<i class="iconfont iconarrowdown text-grey-6" style="margin-top: 3px; margin-left:4px"></i></div>
</div>
<popup mode="top" v-model="showAddress">
<q-card flat class="rounded-borders q-py-md">
<div class="text-subtitle1 text-weight-bold q-mx-md">篩選目的地</div>
<q-input
v-model="searchAdd.name"
type="text"
standout
placeholder="搜尋目的地"
class="q-ma-md"
@input="changeAddrSearchHandler"
/>
<q-tree
ref="area"
:nodes="areaList"
no-connectors
node-key="Id"
label-key="Name"
tick-strategy="leaf"
@update:ticked="handleAreaTicked"
:ticked="areaTicked"
text-color="#666"
no-nodes-label=" "
no-results-label=" "
/>
</q-card>
</popup>
<popup mode="top" v-model="showCategory">
<q-card flat class="rounded-borders q-py-md q-mt-lg">
<div class="text-subtitle1 text-weight-bold q-mx-md">所有商品類別</div>
<q-tree
ref="category"
:nodes="goodsType"
no-connectors
node-key="Id"
label-key="CategoryName"
tick-strategy="leaf"
@update:ticked="handleTicked"
:ticked="ticked"
/>
</q-card></popup>
<popup mode="top" v-model="showDate">
<q-card flat class="rounded-borders q-mt-lg overflow-hidden">
<div class="q-my-sm q-mx-lg f20 bold">旅程時間</div>
<div
class="addr-list q-px-md q-py-sm row items-center"
v-for="(y, yi) in dayArray"
:key="yi"
>
<q-checkbox
v-model="y.checked"
size="xs"
@input="changeTripDayHandler"
/>
<span
class="col text-grey-8 text-subtitle2 text-regular q-mt-xs"
style="font-weight: 400"
>
{{ y.text }}
</span>
</div>
</q-card>
</popup>
<popup mode="top" v-model="showPrice">
<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-subtitle2 text-regular">
{{ msg.priceRange.min }} - {{ msg.priceRange.max }}
</div>
<q-range
v-model="msg.priceRange"
:min="priceModel.min"
:max="priceModel.max"
:step="1"
@change="testHandler"
color="primary"
class="q-mt-md"
/>
</q-card><q-card flat class="rounded-borders q-mt-lg row no-padding q-mb-lg">
<div
class="q-px-md q-py-sm "
style="border-right: 1px solid #eee; border-radius: 0 !important"
>
<q-icon name="iconfont iconigw-l-date-trade" size="24px" />
</div>
<div class="row items-center justify-center col">
<span class="text-grey-8">
{{
msg.startDate
? `${msg.startDate} - ${msg.endDate}`
: "篩選出發日期"
}}
</span>
<q-popup-proxy :offset="[0, 0]" ref="qDateProxy">
<div>
<q-date
v-model="dateRange"
:options="optionsFn"
range
@range-end="dateRangeHandler"
mask="YYYY-MM-DD"
></q-date>
</div>
</q-popup-proxy>
</div>
</q-card></popup>
</div>
<div v-else class="col-3" :class="$q.platform.is.desktop ? 'q-mr-lg' : 'q-ma-md'">
<q-card flat class="rounded-borders q-py-md">
<div class="text-subtitle1 text-weight-bold q-mx-md">篩選目的地</div>
<q-input
v-model="searchAdd.name"
type="text"
standout
placeholder="搜尋目的地"
class="q-ma-md"
@input="changeAddrSearchHandler"
/>
<q-tree
ref="area"
:nodes="areaList"
no-connectors
node-key="Id"
label-key="Name"
tick-strategy="leaf"
@update:ticked="handleAreaTicked"
:ticked="areaTicked"
text-color="#666"
no-nodes-label=" "
no-results-label=" "
/>
</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>
<q-tree
ref="category"
:nodes="goodsType"
no-connectors
node-key="Id"
label-key="CategoryName"
tick-strategy="leaf"
@update:ticked="handleTicked"
:ticked="ticked"
/>
</q-card>
<q-card flat class="rounded-borders q-mt-lg row no-padding">
<div
class="q-px-md q-py-sm"
style="border-right: 1px solid #eee; border-radius: 0 !important"
>
<q-icon name="iconfont iconigw-l-date-trade" size="24px" />
</div>
<div class="row items-center justify-center col">
<span class="text-grey-8">
{{
msg.startDate
? `${msg.startDate} - ${msg.endDate}`
: "篩選出發日期"
}}
</span>
<q-popup-proxy :offset="[0, 0]" ref="qDateProxy">
<div>
<q-date
v-model="dateRange"
:options="optionsFn"
range
@range-end="dateRangeHandler"
mask="YYYY/MM/DD"
></q-date>
</div>
</q-popup-proxy>
</div>
</q-card>
<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-subtitle2 text-regular">
{{ msg.priceRange.min }} - {{ msg.priceRange.max }}
</div>
<q-range
v-model="msg.priceRange"
:min="priceModel.min"
:max="priceModel.max"
:step="1"
@change="testHandler"
color="primary"
class="q-mt-md"
/>
</q-card>
<q-card flat class="rounded-borders q-mt-lg overflow-hidden">
<q-expansion-item
expand-separator
label="旅程時間"
class="text-subtitle1 text-weight-bold rounded-borders"
>
<div
class="addr-list q-px-md q-py-sm row items-center"
v-for="(y, yi) in dayArray"
:key="yi"
>
<q-checkbox
v-model="y.checked"
size="xs"
@input="changeTripDayHandler"
/>
<span
class="col text-grey-8 text-subtitle2 text-regular q-mt-xs"
style="font-weight: 400"
>
{{ y.text }}
</span>
</div>
</q-expansion-item>
</q-card>
</div>
<div class="col q-mt-sm">
<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">
{{ TotalCount }}
</span>
<span>項體驗行程</span>
</div>
<q-chip
v-for="(x, i) in chosenAddress"
size="13px"
:key="i"
removable
outline
color="grey"
:label="x.Name"
/>
</div>
<div
class="q-pa-md row items-center"
style="border-top: 1px solid #eee"
>
<span class="f12">排序：</span>
<q-chip
square
:icon="x.icon"
class="cursor-pointer"
clickable
:text-color="msg.orderBy != x.value ? 'dark' : 'white'"
:class="{
'bg-grey-3': msg.orderBy != x.value,
'bg-primary': msg.orderBy == x.value,
}"
v-for="(x, i) in sortArray"
:key="i"
@click="chosenSortHandler(x)"
>{{ x.label }}</q-chip
>
</div>
</div>
<div class="q-mt-lg" v-if="!$q.loading.isActive && DataList.length > 0">
<div
class="rounded-borders cursor-pointer overflow-hidden bg-white"
:class="$q.platform.is.desktop ? 'row q-mb-md' : 'colmuns q-ma-md'"
v-for="(x, i) in DataList" :key="i" >
<template v-if="x.imgCover&&x.imgCover.length>0">
<q-img
:src="x.imgCover[0].url"
:ratio="1"
spinner-color="grey"
spinner-size="20px"
:width="$q.platform.is.desktop ? '272px' : ''"
:height="$q.platform.is.desktop ? '' : '200px'"
class="bg-grey-3"
/>
</template>
<template v-else>
<q-img
:ratio="1"
spinner-color="grey"
spinner-size="20px"
:width="$q.platform.is.desktop ? '272px' : ''"
:height="$q.platform.is.desktop ? '' : '200px'"
class="bg-grey-3"
/>
</template>
<div class="q-pa-md col column">
<div class="text-subtitle1 text-weight-bold text-grey-9" @click="GotoDetails(x)">
{{ x.title }}
</div>
<div class="col" >
<div class="row items-center q-my-sm" @click="GotoDetails(x)">
<q-chip
style="background: #26a69a1a"
size="sm"
class="f12 rounded-borders text-secondary"
label="急速確認"
/>
<q-chip
v-if="x.ltName"
style="background: #26a69a1a"
size="sm"
class="f12 rounded-borders text-secondary"
:label="x.ltName"
/>
</div>
<div class="text-subtitle2 text-grey-6 text-weight-regular ellipsis-2-lines" style="line-height: 1.6" @click="GotoDetails(x)" >
{{ 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"
/>
<span class="q-mr-lg" @click="GotoDetails(x)">{{ x.countryName }}</span>
<q-icon
size="12px"
name="iconfont iconigw-l-date-trade"
class="q-mr-sm"
></q-icon>
<template v-if="x.startDateList&&x.startDateList.length>0">
<template v-if="x.startDateList.length>1">
<q-badge outline :color="x.index==index?'secondary':'blue-grey-11'" :label="item" v-for="(item,index) in x.startDateList" :key="index" style="margin-right:5px;" @click="SwitchTCID(x,i,index)"/>
</template>
<template v-else>
<q-badge outline color="secondary" :label="x.startDateList[0]"/>
</template>
</template>
</div>
</div>
<div class="row items-end" @click="GotoDetails(x)">
<div class="col f12">
<!-- <span>剩餘空位：</span>
<span
class="text-primary text-weight-bold q-pr-sm q-mr-sm"
style="border-right: 1px solid #efefef"
>{{ x.surplus }}</span> -->
<span>行程天數：</span>
<span class="text-secondary text-weight-bold"
>{{ x.dayNum }} 天</span
>
</div>
<div class="text-h6 product-price">
CNY：{{ x.b2CPrice }}<span class="price-stuff">元</span>
</div>
</div>
</div>
</div>
</div>
<div
v-else-if="!$q.loading.isActive && DataList.length == 0"
class="text-center q-mt-xl"
>
<div class="text-center inline-block">
<p>
<img src="~assets/sad.svg" style="width: 30vw; max-width: 150px" />
</p>
<p class="text-faded">
我们找不到有关
<span v-if="msg.searchKey">\"{{ msg.searchKey }}\"</span>
的旅游体验，输入其他字眼重试或探索以下人气体验
</p>
</div>
</div>
<div class="row justify-end">
<q-pagination
v-if="PageCount > 1"
v-model="msg.pageIndex"
:max="PageCount"
@input="goSearchHandler"
:direction-links="true"
color="white"
text-color="dark"
active-color="primary"
active-text-color="white"
active-design="unelevated"
unelevated
glossy
ellipses
:max-pages="6"
boundary-numbers
size="13px"
padding="sm md"
></q-pagination>
</div>
</div>
</div>
</template>
<script>
import popup from "../props/index";
import { date } from "quasar";
export default {
props: ["qMsg"],
components: {popup},
data() {
return {
showAddress: false,
showCategory: false,
showDate: false,
showPrice: false,
areaTicked: [],
ticked: [],
selected: [],
searchAdd: {
name: "",
value: 0,
},
areaList: [],
chosenAddress: [],
goodsType: [],
dateRange: null,
msg: null,
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: 1000,
text: "10天以上",
},
],
dataList: [],
sortArray: [
{
label: "默认排序",
value: 0,
icon: "iconfont icongood",
},
{
label: "價格：低到高",
value: 1,
icon: "iconfont iconmeiyuan",
},
{
label: "價格：高到低",
value: 2,
icon: "iconfont iconmeiyuan",
},
],
TotalCount: 0,
PageCount: 0,
priceModel: {
min: 1,
max: 30000,
},
};
},
created() {
this.msg = this.qMsg;
// this.msg.teamType = [];
this.initAreaList();
this.initGoods();
this.msg.priceRange = {
min: 1,
max: 30000,
};
this.msg.minPrice = 0;
this.msg.maxPrice = 30000;
this.dayArray.forEach((x) => {
x.checked = false;
});
this.msg.startDate = date.formatDate(new Date(this.qMsg.startDate), "YYYY/MM/DD")
this.msg.endDate = date.formatDate(new Date(this.qMsg.endDate), "YYYY/MM/DD")
this.dateRange = { from: this.msg.startDate, to: this.msg.endDate };
this.goSearchHandler();
},
mounted() {
console.log('kkday', this.msg)
this.areaTicked = this.msg.areaId ? [this.msg.areaId] : (this.msg.areaIds ? this.msg.areaIds : []);
this.msg.placeIds = this.getChoseAddressCity().join(",");
var CategoryName = this.getUrlKey("CategoryName", window.location.href);
if (CategoryName) {
let list = this.goodsType.find(
(item) => item.CategoryName === CategoryName
);
let arr = [];
list.children.forEach((item) => {
arr.push(item.Id);
if (item.children && item.children.length) {
item.children.forEach((item2) => {
arr.push(item2.Id);
});
}
});
this.ticked = arr;
}
},
methods: {
handleSelected(target) {
console.log("handleSelected", target);
},
handleTicked(target) {
this.msg.pageIndex = 1
this.ticked = target;
this.goSearchHandler();
},
handleAreaTicked(target) {
this.msg.pageIndex = 1
this.areaTicked = target;
console.log("this.areaTicked", target);
this.msg.placeIds = this.getChoseAddressCity().join(",");
console.log('handleAreaTicked', this.areaTicked, this.msg.placeIds)
this.goSearchHandler();
},
initAreaList() {
let jObj = JSON.parse(window.localStorage.getItem("baseifo"));
let arr = [];
jObj.AreaList.forEach((x) => {
x.children = x.SubList;
x.children.forEach((y) => {
y.checked = false;
y.explsed = false;
y.isShow = true;
if (y.Id === this.msg.areaId) {
arr.push(y.Id);
}
if (y.SubList) {
y.children = y.SubList;
y.children.forEach((z) => {
z.checked = false;
z.explsed = false;
z.isShow = true;
if (z.Id === this.msg.areaId) {
arr.push(z.Id);
}
if (y.Id === this.msg.areaId) {
arr.push(z.Id);
}
});
}
});
this.areaList = jObj.AreaList;
this.areaListJSON = JSON.parse(JSON.stringify(this.areaList));
});
if (this.msg.areaId) {
this.$nextTick(() => {
this.$refs.area?.setTicked([...new Set(arr)], true);
});
}
},
changeExplesdHandler(x) {
x.explsed = !x.explsed;
if (x.SubList) {
}
},
// changeGoodTypeHandler(x) {
// 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);
// this.msg.teamType.splice(i, 1);
// }
// },
chosenSortHandler(x) {
this.msg.orderBy = x.value;
this.msg.pageIndex = 1
this.goSearchHandler();
},
getChoseAddressCity() {
let result = [];
function treeToArray(tree) {
return tree.reduce((res, item) => {
const { children, ...i } = item;
return res.concat(
i,
children && children.length ? treeToArray(children) : []
);
}, []);
}
const areaList = treeToArray(this.areaList);
console.log(">>>>>>>>>>>>>>>>>>>>>", areaList);
areaList.forEach((item) => {
if (this.areaTicked.includes(item.Id)) {
let arr = item.DestinationList.map((item) => item.ID);
result = result.concat(arr);
}
});
return result;
},
changeTripDayHandler() {
this.$forceUpdate();
// this.msg.minTripDay = "0";
// this.msg.maxTripDay = "0";
// this.dayArray.forEach(x => {
// if (x.checked) {
// this.msg.minPrice =
// this.msg.minPrice > x.min ? x.min : this.msg.minPrice;
// this.msg.maxPrice =
// this.msg.maxPrice < x.max ? x.max : this.msg.maxPrice;
// }
// });
// this.msg.minTripDay =
// this.msg.minTripDay == "0" ? "" : this.msg.minTripDay;
// this.msg.maxTripDay =
// this.msg.maxTripDay == "0" ? "" : this.msg.maxTripDay;
let arr = [];
this.dayArray.forEach((item) => {
if (item.checked) {
arr.push(item.id);
}
});
this.msg.dayNumList = arr;
this.msg.pageIndex = 1
this.goSearchHandler();
},
optionsFn(cd) {
return (
cd >=
date.formatDate(date.addToDate(new Date(), { days: 1 }), "YYYY/MM/DD")
);
},
testHandler(e) {
this.$forceUpdate();
this.msg.minPrice = e.min;
this.msg.maxPrice = e.max;
this.msg.pageIndex = 1
this.goSearchHandler();
},
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();
this.msg.pageIndex = 1
this.goSearchHandler();
},
initGoods() {
let arr = [];
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.Id === this.msg.categoryId) {
arr.push(y.Id);
}
if (y.SubList && y.SubList.length) {
y.children = y.SubList;
y.children.forEach((z) => {
z.checked = false;
z.explsed = false;
z.isShow = true;
if (z.Id === this.msg.categoryId) {
arr.push(z.Id);
}
if (y.Id === this.msg.categoryId) {
arr.push(z.Id);
}
});
}
});
this.goodsType.push(x);
});
this.goodsTypeJSON = JSON.stringify(this.goodsType);
if (this.msg.categoryId) {
this.$nextTick(() => {
this.$refs.category?.setTicked([...new Set(arr)], true);
});
}
},
dfs(tree, ope, filter) {
const walkAndCopy = (tree, depth = 1) => {
if (filter(tree)) {
const copy = { ...tree };
ope(tree.Name, depth);
if (tree.children) {
copy.children = [];
tree.children.forEach((node) => {
const subTree = walkAndCopy(node, depth + 1);
subTree && copy.children.push(subTree);
});
}
return copy;
} else if (tree && tree.children && tree.children.length) {
const copy = { ...tree };
ope(tree.Name, depth);
copy.Name = tree.Name;
if (tree.children) {
copy.children = [];
tree.children.forEach((node) => {
const subTree = walkAndCopy(node, depth + 1);
subTree && copy.children.push(subTree);
});
}
return copy;
}
};
return walkAndCopy(tree);
},
changeAddrSearchHandler(v) {
this.areaListJSONTMP = JSON.parse(JSON.stringify(this.areaListJSON));
let tree = this.dfs(
{ Name: "", children: this.areaListJSONTMP },
(name, depth) => {},
({ Name }) => {
return Name.indexOf(v) !== -1;
}
);
tree = this.dfs(
tree,
(name, depth) => {},
({ Name }) => {
return Name.indexOf(v) !== -1;
}
);
tree = this.dfs(
tree,
(name, depth) => {},
({ Name }) => {
return Name.indexOf(v) !== -1;
}
);
this.areaList = tree.children;
// this.areaList.forEach(x => {
// x.isShow = x.Name.indexOf(v) != -1;
// x.isShowChild = false;
// x.SubList.forEach(y => {
// y.isShow = y.Name.indexOf(v) != -1;
// if (y.isShow) {
// x.isShow = true;
// x.isShowChild = true;
// }
// });
// });
},
goSearchHandler() {
this.msg.webSiteCategoryIds = this.ticked.join(",");
// this.msg.placeIds = this.areaTicked.join(",");
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] && groupinfo.siteList[0].companyId
? groupinfo.siteList[0].companyId
: -1;
}
if (localStorage.b2bUser) {
var b2bUser = JSON.parse(window.localStorage.getItem("b2bUser"));
if (b2bUser) {
this.msg.priceOrderByField = 2;
}
}
this.PageCount = 0;
this.TotalCount = 0;
this.apipost(
"b2c_get_GetB2C2024TravelProductPage",
this.msg,
(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;
console.log("getSearch data", tempArray);
if (tempArray && tempArray.length > 0) {
this.DataList = tempArray;
this.renderSearchInfo(res.data.data.pageData.condition);
this.$forceUpdate();
}
}
},
(err) => {}
);
},
renderSearchInfo(condition) {
if (!condition.length) {
return;
}
let areaInfo = condition.find((item) => item.type === 1).list;
let dayInfo = condition.find((item) => item.type === 2).list;
let priceInfo = condition.find((item) => item.type === 3);
let categoryInfo = condition.find((item) => item.type === 4).list;
// this.areaTicked = areaInfo;
this.areaListJSONTMP = JSON.parse(JSON.stringify(this.areaListJSON));
let tree = this.dfs(
{ Name: "", children: this.areaListJSONTMP },
(name, depth) => {},
({ Id }) => {
return areaInfo.includes(Id);
}
);
tree = this.dfs(
tree,
(name, depth) => {},
({ Id }) => {
return areaInfo.includes(Id);
}
);
tree = this.dfs(
tree,
(name, depth) => {},
({ Id }) => {
return areaInfo.includes(Id);
}
);
this.areaList = tree.children;
const categoryTmp = JSON.parse(this.goodsTypeJSON);
let category = this.dfs(
{ Name: "", children: categoryTmp },
(name, depth) => {},
(item) => {
return categoryInfo.includes(item.Id);
}
);
category = this.dfs(
category,
(name, depth) => {},
(item) => {
return categoryInfo.includes(item.Id);
}
);
category = this.dfs(
category,
(name, depth) => {},
(item) => {
return categoryInfo.includes(item.Id);
}
);
this.goodsType = category.children;
// this.ticked = categoryInfo;
console.log("this.areaListJSONTMP", this.areaListJSONTMP, this.areaList);
this.priceModel = { min: priceInfo.minPrice, max: priceInfo.maxPrice };
// this.msg.priceRange = {
// min: priceInfo.minPrice,
// max: priceInfo.maxPrice,
// };
let arr = [];
dayInfo.forEach((item) => {
if (item < 6) {
arr.push(item);
} else if (item === 7 || item === 8) {
arr.push(7);
} else if (item === 8 || item === 10) {
arr.push(8);
} else {
arr.push(9);
}
});
console.log("dayInfo", arr, dayInfo, this.dayArray);
// arr = [... new Set(arr)]
// this.dayArray.forEach(item => {
// if(arr.includes(item.id)) {
// item.checked = true
// }
// })
this.dayArray = this.dayArray.filter((item) => arr.includes(item.id));
// this.msg.dayNumList = arr;
},
GotoDetails(item) {
this.CommonJump(item, {}, "blank");
},
SwitchTCID(obj,i,index) {
if(this.DataList&&this.DataList.length>0){
let nowobj= JSON.parse(JSON.stringify(obj));
console.log("nowobj",nowobj.startDateList);
this.DataList[i] = {
...nowobj.priceList[index]
}
this.DataList[i].index=index;
this.DataList[i].startDateList=nowobj.startDateList;
this.DataList[i].priceList=nowobj.priceList;
this.$forceUpdate();
}
},
},
};
</script>
<style>
.addr-list:hover {
background: #E3F2FD;
}
</style>
<style lang="scss" scoped>
::v-deep .q-menu {
width: 100% !important;
}
.price-stuff {
font-size: 12px;
margin-left: 4px;
}
.nav-item {
width: 25%;
height: 40px;
line-height: 40px;
text-align: center;
background: #fff;
font-weight: bold;
}
.nav-item:hover {
background: #f5f5f5;
}
</style>
src/components/searchProductdata/list.vue 0 → 100644
View file @ 1829d518
<template>
<!-- 列表 -->
<div class="group-result-list">
<div class="group-statis-block">
<div class="group-share" style="display:none;"></div>
<div class="group-statis-detail">
<span class="title" v-if="qMsg.searchKey">{{qMsg.searchKey}} :</span>
找到
<span class="num"> {{qMsg.TotalCount}} </span>個行程
<span class="pc">，目前在第<span style="color: #7f7f7f;"> {{qMsg.pageIndex}} </span>頁</span>
</div>
</div>
<div>
<div class="group-box" v-for="(itemf,indexf) in DataList" :key="indexf">
<a class="group-cover" >
<template v-if="itemf.imgCover&&itemf.imgCover.length>0">
<img :src="itemf.imgCover[0].url" />
</template>
</a>
<div class="group-main">
<div class="group-info">
<div class="group-name" style="margin-bottom:5px;cursor:pointer" @click="GotoDetails(itemf)">
{{itemf.title}}
</div>
<div class="group-detail" @click="GotoDetails(itemf)">
<i class="iconfont iconaddress"></i>
<span>{{itemf.countryName}}</span>
</div>
<div class="group-detail" @click="GotoDetails(itemf)">
<i class="iconfont icontime"></i>
<span>{{itemf.dayNum}} 天</span>
</div>
<ul class="group-list">
<li>
<template v-if="itemf.PriceList&&itemf.PriceList.length>0">
<div v-for="(item,index) in itemf.priceList" :key="index">
<a>{{item.StartDate}}</a>
</div>
</template>
</li>
</ul>
</div>
<div class="price-info" @click="GotoDetails(itemf)">
<div class="price-wrap">
<div class="price_Search">
<small class="price_unit">TWD$</small> {{itemf.b2BPrice}}
</div>
<a class="btn_warning" @click="GotoDetails(itemf)" style="cursor:pointer">更多出發日</a>
</div>
</div>
</div>
</div>
<div style="display:flex;justify-content: center;">
<q-pagination v-if="qMsg.PageCount>1" v-model="qMsg.pageIndex" :max="qMsg.PageCount" @input="gerOrderList()"
:direction-links="true">
</q-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["DataList", "qMsg"],
data() {
return {
};
},
methods: {
GotoDetails(item) {
this.CommonJump('/details/' + encodeURIComponent(item.id) + "/" + item.tcid, {});
},
//调用
gerOrderList(){
this.$emit('getPage')
}
}
}
</script>
src/components/searchdata/kkday.vue
View file @ 1829d518
...@@ -836,7 +836,7 @@ export default { ...@@ -836,7 +836,7 @@ export default {
// } // }
// }); // });
this.DataList = tempArray; this.DataList = tempArray;
this.renderSearchInfo(res.data.data.pageData.condition); this.renderSearchInfo(res.data.data.pageData);
this.$forceUpdate(); this.$forceUpdate();
} }
} }
......
src/pages/SearchProduct.vue 0 → 100644
View file @ 1829d518
<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, 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 {
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, 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 {
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>
<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" @change="handlerSearchChange"></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/searchProductdata/block";
import searchList from "../components/searchProductdata/list";
import kkday from "../components/searchProductdata/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: {
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() {
// 支付宝退款 测试使用
// this.apipost("GetAliPayReturn_post",{OrderNo:'D202304121702420001'},r=>{
// if(r.data.message=="退款成功"){
// this.$message.success("退款成功")
// }else{
// this.$message.error("退款失败")
// }
// },e=>{
// })
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 areaIds = this.getUrlKey("areaIds", 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 (areaIds) {
this.qMsg.areaIds = areaIds.split(',').map(item => Number(item));
}
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();
},
//清除价格
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,
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_GetB2C2024TravelProductPage",
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) {
this.DataList = tempArray;
}
}
},
err => {}
);
}
}
};
</script>
src/router/routes.js
View file @ 1829d518
...@@ -73,6 +73,11 @@ const routes = [{ ...@@ -73,6 +73,11 @@ const routes = [{
meta: { title: '出行检索' }, meta: { title: '出行检索' },
component: () => component: () =>
import ('pages/Search.vue') import ('pages/Search.vue')
},{
path: '/searchProduct', //出行产品（团）检索
meta: { title: '出行检索' },
component: () =>
import ('pages/SearchProduct.vue')
}, },
{ {
path: '/account', //用户信息 path: '/account', //用户信息
......
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