Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
M
million
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
viitto
million
Commits
1829d518
Commit
1829d518
authored
Nov 20, 2024
by
吴春
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
1
parent
e057e343
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
2758 additions
and
1 deletion
+2758
-1
block.vue
src/components/searchProductdata/block.vue
+44
-0
kkday.vue
src/components/searchProductdata/kkday.vue
+978
-0
list.vue
src/components/searchProductdata/list.vue
+81
-0
kkday.vue
src/components/searchdata/kkday.vue
+1
-1
SearchProduct.vue
src/pages/SearchProduct.vue
+1649
-0
routes.js
src/router/routes.js
+5
-0
No files found.
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-chi
p
>
<
/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
}}
天
<
/spa
n
>
<
/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="
13
px
"
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'
,
//用户信息
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment