Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
A
Athena
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
华国豪
Athena
Commits
cdafa292
Commit
cdafa292
authored
Aug 23, 2019
by
华国豪
🙄
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
绑定列表数据
parent
796f7823
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
921 additions
and
268 deletions
+921
-268
common.css
src/assets/css/common.css
+18
-0
FreeHome.vue
src/components/FreeTravel/FreeHome.vue
+41
-12
FreeList.vue
src/components/FreeTravel/FreeList.vue
+321
-58
FreeList2.vue
src/components/FreeTravel/FreeList2.vue
+541
-198
No files found.
src/assets/css/common.css
View file @
cdafa292
...
...
@@ -121,4 +121,22 @@
}
.mg-r-10
{
margin-right
:
10px
;
}
.inputActive
.el-row
.el-col.el-col-6
::-webkit-scrollbar
,
.inputActive2
.el-row
.el-col.el-col-6
::-webkit-scrollbar
{
/*滚动条整体样式*/
width
:
4px
;
/*高宽分别对应横竖滚动条的尺寸*/
height
:
8px
;
}
.inputActive
.el-row
.el-col.el-col-6
::-webkit-scrollbar-thumb
,
.inputActive2
.el-row
.el-col.el-col-6
::-webkit-scrollbar-thumb
{
/*滚动条里面小方块*/
border-radius
:
4px
;
-webkit-box-shadow
:
inset
0
0
2px
rgba
(
0
,
0
,
0
,
0.2
);
background
:
#c9c9c9
;
}
.inputActive
.el-row
.el-col.el-col-6
::-webkit-scrollbar-track
,
.inputActive2
.el-row
.el-col.el-col-6
::-webkit-scrollbar-track
{
/*滚动条里面轨道*/
-webkit-box-shadow
:
inset
0
0
2px
rgba
(
0
,
0
,
0
,
0.2
);
border-radius
:
4px
;
background
:
#EDEDED
;
}
\ No newline at end of file
src/components/FreeTravel/FreeHome.vue
View file @
cdafa292
...
...
@@ -57,6 +57,10 @@
z-index
:
3
;
background-color
:
white
;
}
.inputActive
.el-row
.el-col.el-col-6
{
height
:
400px
;
overflow
:
auto
;
}
.fh-search-box
.fh-search-box-input
div
:nth-child
(
2
)
{
width
:
77px
;
justify-content
:
center
;
...
...
@@ -82,7 +86,7 @@
.city-tag
{
padding
:
13px
20px
;
color
:
#333
;
width
:
100
%
;
width
:
99
%
;
box-sizing
:
border-box
;
position
:
relative
;
}
...
...
@@ -121,11 +125,13 @@
font-size
:
14px
;
color
:
#333
;
font-weight
:
bold
;
flex
:
1
;
}
.city-list
>
p
{
color
:
#888888
;
cursor
:
pointer
;
font-size
:
12px
;
flex
:
6
;
}
.city-list
>
p
span
{
display
:
inline-block
;
...
...
@@ -641,19 +647,19 @@
<div
v-show=
"inputActive"
class=
"inputActive"
@
click
.
stop
>
<el-row
v-if=
"CCList.length>0 "
>
<el-col
:span=
"6"
>
<div
class=
"city-tag __cp"
v-for=
"(item, index) in CCList"
@
click=
"CCListActive = index"
:class=
"
{'active': CCListActive == index}" :key="index">
<p
@
click=
"goListPage(1, item.short, item.name, index)"
>
{{
item
.
n
ame
}}
</p>
<div
class=
"city-tag __cp"
v-for=
"(item, index) in CCList"
@
click=
"CCListActive = index"
:class=
"
{'active': CCListActive == index}" :key="index"
>
<p
>
{{
item
.
Country_N
ame
}}
</p>
<div
class=
"f12 text2"
>
<span
@
click=
"goListPage(2, s.number, s.name, sIndex)"
v-for=
"(s, sIndex) in item.cities"
:key=
"sIndex"
>
{{
s
.
n
ame
}}
</span>
<span
v-for=
"(s, sIndex) in item.Cities"
:key=
"sIndex"
>
{{
s
.
City_N
ame
}}
</span>
</div>
<div
class=
"triangle-up"
></div>
</div>
</el-col>
<el-col
:span=
"18"
>
<div
class=
"city-list"
>
<span
class=
"PingFangR __cp"
@
click=
"goListPage(1, CCList[CCListActive].
short, CCList[CCListActive].name)"
>
{{
CCList
[
CCListActive
].
n
ame
}}
</span>
<span
class=
"PingFangR __cp"
@
click=
"goListPage(1, CCList[CCListActive].
Country_Code, CCList[CCListActive].Country_Name)"
>
{{
CCList
[
CCListActive
].
Country_N
ame
}}
</span>
<p>
<span
@
click=
"goListPage(2,
CCList[CCListActive].number, item.name, index)"
class=
"f14 __cp"
v-for=
"(item, index) in CCList[CCListActive].cities"
:key=
"index"
>
{{
item
.
n
ame
}}
</span>
<span
@
click=
"goListPage(2,
item.City_Code, item.City_Name, index)"
class=
"f14 __cp"
v-for=
"(item, index) in CCList[CCListActive].Cities"
:key=
"index"
>
{{
item
.
City_N
ame
}}
</span>
</p>
</div>
</el-col>
...
...
@@ -665,10 +671,10 @@
<div
:style=
"`background-image: url($
{item.src})`">
<span>
{{
item
.
name
}}
</span>
<div
class=
"city-m-b"
>
<span>
门票
</span>
<span>
餐食
</span>
<span>
一日游
</span>
<img
src=
"../../assets/img/freeHome/more_s.png"
alt=
""
>
<span
@
click
.
stop=
"goList2(item, 'menpiao')"
>
门票
</span>
<span
@
click
.
stop=
"goList2(item, 'canshi')"
>
餐食
</span>
<span
@
click
.
stop=
"goList2(item, 'yiri')"
>
一日游
</span>
<img
@
click
.
stop=
"goList2(item)"
src=
"../../assets/img/freeHome/more_s.png"
alt=
""
>
</div>
</div>
</div>
...
...
@@ -934,22 +940,28 @@ export default {
name
:
'东京'
,
src
:
"http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335633.jpg"
,
id
:
1
,
number
:
"A01-003-00001"
},{
name
:
'京都'
,
src
:
"http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335636.jpg"
,
id
:
2
,
number
:
"A01-003-00003"
,
},{
name
:
'大阪'
,
src
:
"http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335628.jpg"
,
id
:
3
,
number
:
"A01-003-00002"
},{
name
:
'首尔'
,
src
:
"http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335683.jpg"
,
id
:
0
,
number
:
'A01-004-00001'
},{
name
:
'曼谷'
,
src
:
"http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335631.jpg"
,
id
:
4
,
number
:
"A01-010-00001"
}],
KkdayDomain
:
""
,
CCList
:
[],
...
...
@@ -963,6 +975,17 @@ export default {
this
.
getCCList
()
},
methods
:
{
goList2
(
obj
,
type
){
this
.
$router
.
push
({
name
:
"FreeList2"
,
query
:
{
id
:
obj
.
number
,
type
:
2
,
name
:
obj
.
name
,
CCListActive
:
0
,
}
});
},
goListPage
(
type
,
id
,
name
,
index
){
this
.
inputActive
=
false
;
let
url
=
type
==
1
?
"FreeList"
:
"FreeList2"
...
...
@@ -990,8 +1013,14 @@ export default {
{},
res
=>
{
if
(
res
.
data
.
resultCode
===
1
)
{
let
data
=
res
.
data
.
data
.
countries
this
.
CCList
=
data
let
data
=
res
.
data
.
data
.
Countries
let
deleteIdiot
=
[]
data
.
map
(
x
=>
{
if
(
x
.
Country_Name
!==
"台湾"
&&
x
.
Country_Name
!==
"香港"
&&
x
.
Country_Name
!==
"澳门"
)
{
deleteIdiot
.
push
(
x
)
}
})
this
.
CCList
=
deleteIdiot
}
else
{
this
.
Error
(
res
.
data
.
message
);
}
...
...
src/components/FreeTravel/FreeList.vue
View file @
cdafa292
...
...
@@ -78,7 +78,7 @@
.city-tag
{
padding
:
13px
20px
;
color
:
#333
;
width
:
100
%
;
width
:
99
%
;
box-sizing
:
border-box
;
position
:
relative
;
}
...
...
@@ -117,11 +117,13 @@
font-size
:
14px
;
color
:
#333
;
font-weight
:
bold
;
flex
:
1
;
}
.city-list
>
p
{
color
:
#888888
;
cursor
:
pointer
;
font-size
:
12px
;
flex
:
6
;
}
.city-list
>
p
span
{
display
:
inline-block
;
...
...
@@ -298,6 +300,10 @@
.shaixuan-top
>
div
:nth-child
(
2
)
{
flex
:
1
;
}
.shaixuan-top2.shaixuan-top
.el-checkbox
{
width
:
auto
;
padding
:
0
5px
;
}
.left-name
{
width
:
130px
;
}
...
...
@@ -315,7 +321,8 @@
}
.shaixuan-top
.el-tabs__content
{
background
:
rgba
(
238
,
68
,
84
,
.1
);
padding
:
10px
padding
:
10px
;
padding-top
:
20px
;
}
.shaixuan-top
.el-tabs__header
{
margin-bottom
:
0
;
...
...
@@ -390,6 +397,13 @@
margin-top
:
25px
;
text-align
:
center
;
}
.inputActive2
.el-row
.el-col.el-col-6
{
height
:
400px
;
overflow
:
auto
;
}
.el-tabs--card
>
.el-tabs__header
.el-tabs__nav
{
z-index
:
1
}
</
style
>
<
template
>
<div
class=
"freeList commonF"
>
...
...
@@ -401,26 +415,26 @@
<span
class=
"f14 __cp change-ad"
v-if=
"!addShow"
@
click=
"addShow = !addShow"
>
切换地点
<span
class=
"el-icon-caret-bottom"
></span>
</span>
<div
v-else
class=
"fl-ad-box"
>
<p><span
class=
"f14 __cp"
@
click=
"addShow = !addShow"
>
切换地点
<span
class=
"el-icon-caret-bottom"
></span>
</span></p>
<div
class=
"fl-ad-cont"
>
<div
class=
"fl-ad-cont
inputActive2
"
>
<div
class=
"search"
>
<span
class=
"el-icon-close __cp"
@
click=
"addShow = !addShow"
></span>
<el-input
size=
"mini"
></el-input>
</div>
<el-row>
<el-row
v-if=
"CCList.length>0"
>
<el-col
:span=
"6"
>
<div
class=
"city-tag __cp"
v-for=
"(item, index) in CCList"
@
click=
"
"
:class=
"
{'active': CCListActive == index}" :key="index"
>
<p
@
click=
"CCListActive = index,goListPage(1, CCList[index].short, item.name, index)"
>
{{
item
.
n
ame
}}
</p>
<div
class=
"city-tag __cp"
v-for=
"(item, index) in CCList"
@
click=
"
CCListActive = index"
:class=
"
{'active': CCListActive == index}" :key="index"
>
<p
>
{{
item
.
Country_N
ame
}}
</p>
<div
class=
"f12 text2"
>
<span
@
click=
"goListPage(2, CCList[sIndex].number, s.name, sIndex)"
v-for=
"(s, sIndex) in item.cities"
:key=
"sIndex"
>
{{
s
.
n
ame
}}
</span>
<span
v-for=
"(s, sIndex) in item.Cities"
:key=
"sIndex"
>
{{
s
.
City_N
ame
}}
</span>
</div>
<div
class=
"triangle-up"
></div>
</div>
</el-col>
<el-col
:span=
"18"
>
<div
class=
"city-list"
>
<span
class=
"PingFangR __cp"
@
click=
"goListPage(1, CCList[CCListActive].
short, CCList[CCListActive].name)"
>
{{
CCList
[
CCListActive
].
n
ame
}}
</span>
<span
class=
"PingFangR __cp"
@
click=
"goListPage(1, CCList[CCListActive].
Country_Code, CCList[CCListActive].Country_Name, CCListActive)"
>
{{
CCList
[
CCListActive
].
Country_N
ame
}}
</span>
<p>
<span
@
click=
"goListPage(2,
CCList[CCListActive].number, item.name, index)"
class=
"f14 __cp"
v-for=
"(item, index) in CCList[CCListActive].cities"
:key=
"index"
>
{{
item
.
n
ame
}}
</span>
<span
@
click=
"goListPage(2,
item.City_Code, item.City_Name, index)"
class=
"f14 __cp"
v-for=
"(item, index) in CCList[CCListActive].Cities"
:key=
"index"
>
{{
item
.
City_N
ame
}}
</span>
</p>
</div>
</el-col>
...
...
@@ -429,31 +443,43 @@
</div>
</div>
<div
class=
"city-right-tag"
>
<p
class=
"f14 cff"
>
共
{{
newCityList
.
c
ities
.
length
}}
个旅游点
</p>
<p
class=
"f14 cff"
>
共
{{
newCityList
.
C
ities
.
length
}}
个旅游点
</p>
<el-tabs
type=
"card"
@
tab-click=
"handleClick"
>
<el-tab-pane
v-for=
"(item, index) in newCityList.
cities"
:label=
"item.name"
:key=
"index"
:name=
"item.n
ame"
></el-tab-pane>
<el-tab-pane
v-for=
"(item, index) in newCityList.
Cities"
:label=
"item.City_Name"
:key=
"index"
:name=
"item.City_N
ame"
></el-tab-pane>
</el-tabs>
</div>
<div
class=
"contet-nav"
>
<div>
<div
@
click=
"goHome"
>
<div
class=
"contet-nav-item"
>
<img
src=
"../../assets/img/freeHome/lanse-icon4.png"
alt=
""
>
</div>
<p>
首页
</p>
</div>
<div>
<div
@
click=
"goScroll('list')"
>
<div
class=
"contet-nav-item"
>
<img
src=
"../../assets/img/freeHome/lanse-icon5.png"
alt=
""
>
</div>
<p>
活动
</p>
</div>
<div
@
click=
"goScroll('list')"
>
<div
class=
"contet-nav-item"
>
<img
src=
"../../assets/img/freeHome/lanse-icon6.png"
alt=
""
>
</div>
<p>
体验
</p>
</div>
<div
@
click=
"goScroll('list')"
>
<div
class=
"contet-nav-item"
>
<img
src=
"../../assets/img/freeHome/lanse-icon1.png"
alt=
""
>
</div>
<p>
特色餐食
</p>
</div>
<div>
<div
@
click=
"goScroll('list')"
>
<div
class=
"contet-nav-item"
>
<img
src=
"../../assets/img/freeHome/lanse-icon.png"
alt=
""
>
</div>
<p>
一日游
</p>
</div>
<div>
<div
@
click=
"goScroll('list')"
>
<div
class=
"contet-nav-item"
>
<img
src=
"../../assets/img/freeHome/lanse-icon2.png"
alt=
""
>
</div>
...
...
@@ -472,14 +498,14 @@
<div
class=
"hot-p"
v-if=
"dataHotList.length > 0"
>
<div
class=
"hot-p-item"
>
<p
class=
"f24 hot-p-item-tit"
><strong>
TOP
{{
dataHotList
.
length
}}
</strong>
目的地热销产品
</p>
<div
v-for=
"(item, index) in dataHotList"
@
click=
"goDetails(item)"
class=
"__cp"
>
<div
v-for=
"(item, index) in dataHotList"
v-if=
"index
<
3
"
@
click=
"goDetails(item)"
class=
"__cp"
>
<p
class=
"f20 hot-p-item-tit-s"
>
<span
class=
"hot-p-item-tit-s-line"
></span>
<strong>
{{
item
.
name
}}
</strong>
<!--
<span
class=
"f14 c88 __cp see-more"
>
查看更多
</span>
-->
</p>
<el-row
:gutter=
"20"
>
<el-col
:span=
"6"
v-for=
"(sItem, sIndex) in item.data"
:key=
"sIndex"
>
<el-col
:span=
"6"
v-for=
"(sItem, sIndex) in item.data"
v-if=
"sIndex
<
4
"
:key=
"sIndex"
>
<div
class=
"pro-item"
>
<span
class=
"pro-item-tag bgc-b cff"
:class=
"`bgc-b$
{sItem.prod_type == 'M01' ? 0 : sItem.prod_type == 'M04' ? 1 : sItem.prod_type == 'M05' ? 2 : 3}`">
{{
sItem
.
prod_type
==
'M01'
?
'一日游'
:
sItem
.
prod_type
==
'M04'
?
'交通'
:
sItem
.
prod_type
==
'M05'
?
'门票'
:
'其他'
}}
</span>
<div
class=
"pro-item-top"
>
...
...
@@ -503,49 +529,31 @@
</div>
</div>
</div>
<div
class=
"shaixuan"
>
<div
class=
"shaixuan"
id=
"list"
>
<p
class=
"f24 bold"
>
{{
ccName
}}
游玩列表
</p>
<div
class=
"shaixuan-box"
>
<div
class=
"shaixuan-top shaixuan-top1"
v-if=
"newCityList.
cities && newCityList.c
ities.length > 1"
>
<div
class=
"shaixuan-top shaixuan-top1"
v-if=
"newCityList.
Cities && newCityList.C
ities.length > 1"
>
<div
class=
"left-name"
>
目的地
</div>
<div>
<el-checkbox-group
v-model=
"newCityCheck"
>
<el-checkbox
v-for=
"city in newCityList.
cities"
:label=
"city.number"
:key=
"city.number"
@
change=
"changeCity"
>
{{
city
.
n
ame
}}
</el-checkbox>
<el-checkbox
v-for=
"city in newCityList.
Cities"
:label=
"city.City_Code"
:key=
"city.City_Code"
@
change=
"changeCity"
>
{{
city
.
City_N
ame
}}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div
class=
"shaixuan-top"
>
<div
class=
"shaixuan-top
shaixuan-top2
"
>
<div
class=
"left-name"
>
游玩类型
</div>
<div
class=
""
>
<div>
<el-tabs
type=
"card"
v-model=
"activeName"
>
<el-tab-pane
label=
"大阪"
name=
"大阪"
>
<el-checkbox
slot=
"label"
>
大阪
</el-checkbox>
<el-checkbox-group
v-model=
"checkedCities"
>
<el-checkbox
v-for=
"city in cities"
:label=
"city"
:key=
"city"
>
{{
city
}}
</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane
label=
"冲绳"
name=
"冲绳"
>
<el-checkbox
slot=
"label"
>
冲绳
</el-checkbox>
<el-checkbox-group
v-model=
"checkedCities"
>
<el-checkbox
v-for=
"city in cities"
:label=
"city"
:key=
"city"
>
{{
city
}}
</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane
label=
"东京"
name=
"东京"
>
<el-checkbox
slot=
"label"
>
东京
</el-checkbox>
<el-checkbox-group
v-model=
"checkedCities"
>
<el-checkbox
v-for=
"city in cities"
:label=
"city"
:key=
"city"
>
{{
city
}}
</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane
label=
"三和"
name=
"三和"
>
<el-checkbox
slot=
"label"
>
三和
</el-checkbox>
<el-checkbox-group
v-model=
"checkedCities"
>
<el-checkbox
v-for=
"city in cities"
:label=
"city"
:key=
"city"
>
{{
city
}}
</el-checkbox>
<el-tab-pane
v-for=
"(item, index) in typeTag"
:label=
"item.id"
:name=
"item.name"
:key=
"index"
>
<el-checkbox
slot=
"label"
@
change=
"setChange(item, index)"
v-model=
"item.checkd"
>
{{
item
.
name
}}
</el-checkbox>
<el-checkbox-group
v-model=
"item.checkedCities"
>
<el-checkbox
v-for=
"(s, sIndex) in item.list"
:label=
"s.id"
:key=
"sIndex"
v-model=
"s.checkd"
@
change=
"setChangeTag(item)"
>
{{
s
.
name
}}
</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
</el-tab-pane>
</el-tabs>
</div>
</div>
...
...
@@ -589,13 +597,18 @@
</div>
</el-col>
</el-row>
<div
class=
"empty-data"
v-if=
"dataList.length
<1
"
>
<i
class=
"iconfont icon-kong"
></i>
很抱歉,你想要的信息我们真的找不到了
</div>
<div
class=
"page-con"
>
<el-pagination
:current-page
.
sync=
"currentPage"
:page-size=
"16"
layout=
"total, prev, pager, next"
:total=
"totalCount"
@
current-change=
"handleCurrentChange"
@
prev-click=
"handleCurrentChange(1)"
@
next-click=
"handleCurrentChange(2)"
></el-pagination>
</div>
</div>
...
...
@@ -611,7 +624,7 @@ export default {
addShow
:
false
,
cities
:
[
'上海'
,
'北京'
,
'广州'
,
'深圳'
,
'上海4'
,
'北京2'
,
'广州2'
,
'深圳2'
,
'上海2'
,
'北京3'
,
'广州3'
,
'深圳3'
,
'上海3'
,
'北京4'
,
'广州5'
,
'深圳5'
],
checkedCities
:
[
'上海'
,
'北京'
],
activeName
:
'
大阪
'
,
activeName
:
'
景点和门票
'
,
value
:
''
,
pickerOptions0
:
{
disabledDate
(
time
)
{
...
...
@@ -631,8 +644,8 @@ export default {
"locale"
:
"zh-cn"
,
"state"
:
"CN"
,
"sort"
:
"PASC"
,
"cat_
sub
_keys"
:
[
"TAG_
1_3
"
"cat_
main
_keys"
:
[
"TAG_
4
"
],
"page_size"
:
16
,
"start"
:
0
,
...
...
@@ -640,7 +653,187 @@ export default {
priceSort
:
"PASC"
,
// PDESC 高到低
KkdayDomain
:
''
,
laoding
:
false
,
newCityList
:
{
cities
:
[]},
newCityList
:
{
Cities
:
[]},
scrollobj
:
null
,
typeTag
:
[
{
name
:
"景点和门票"
,
checkd
:
false
,
id
:
"TAG_2"
,
checkedCities
:
[],
list
:
[
{
name
:
"观光票及通行证"
,
id
:
"TAG_2_1"
,
checkd
:
false
,
},
{
name
:
"博物馆和美术馆"
,
id
:
"TAG_2_2"
,
checkd
:
false
,
},
{
name
:
"主题公园"
,
id
:
"TAG_2_3"
,
checkd
:
false
,
},
{
name
:
"体育节目"
,
id
:
"TAG_2_4"
,
checkd
:
false
,
},
]
},{
name
:
"一日游"
,
checkd
:
false
,
id
:
"TAG_4"
,
checkedCities
:
[],
list
:
[
{
name
:
"城市观光"
,
id
:
"TAG_4_1"
,
checkd
:
false
,
},
{
name
:
"艺术,文化和历史"
,
id
:
"TAG_4_2"
,
checkd
:
false
,
},
{
name
:
"日间旅行和短途旅行"
,
id
:
"TAG_4_3"
,
checkd
:
false
,
},
{
name
:
"天之旅"
,
id
:
"TAG_4_4"
,
checkd
:
false
,
},
{
name
:
"私人旅游及租船"
,
id
:
"TAG_4_5"
,
checkd
:
false
,
},
{
name
:
"自然和野生动物"
,
id
:
"TAG_4_6"
,
checkd
:
false
,
},
{
name
:
"游艇"
,
id
:
"TAG_4_7"
,
checkd
:
false
,
},
]
},{
name
:
"交通生活"
,
checkd
:
false
,
id
:
"TAG_5"
,
checkedCities
:
[],
list
:
[
{
name
:
"机票"
,
id
:
"TAG_5_1"
,
checkd
:
false
,
},
{
name
:
"地面运输"
,
id
:
"TAG_5_2"
,
checkd
:
false
,
},
{
name
:
"车辆租赁"
,
id
:
"TAG_5_3"
,
checkd
:
false
,
},
{
name
:
"渡轮"
,
id
:
"TAG_5_4"
,
checkd
:
false
,
},
{
name
:
"WiFi & SIM卡"
,
id
:
"TAG_5_5"
,
checkd
:
false
,
},
{
name
:
"住宿"
,
id
:
"TAG_5_6"
,
checkd
:
false
,
},
]
},{
name
:
"餐饮美食"
,
checkd
:
false
,
id
:
"TAG_0"
,
checkedCities
:
[],
list
:
[
{
name
:
"餐饮与美食"
,
id
:
"TAG_2_5"
,
checkd
:
false
,
},
{
name
:
"食物,饮料和夜生活"
,
id
:
"TAG_3_2"
,
checkd
:
false
,
},
]
},{
name
:
"活动"
,
checkd
:
false
,
id
:
"TAG_1"
,
checkedCities
:
[],
list
:
[
{
name
:
"冒险活动"
,
id
:
"TAG_1_1"
,
checkd
:
false
,
},
{
name
:
"水上活动"
,
id
:
"TAG_1_2"
,
checkd
:
false
,
},
{
name
:
"其他活动"
,
id
:
"TAG_1_3"
,
checkd
:
false
,
},
]
},{
name
:
"体验"
,
checkd
:
false
,
id
:
"TAG_3"
,
checkedCities
:
[],
list
:
[
{
name
:
"独特的经历"
,
id
:
"TAG_1_1"
,
checkd
:
false
,
},
{
name
:
"健康"
,
id
:
"TAG_3_3"
,
checkd
:
false
,
},
{
name
:
"研习会"
,
id
:
"TAG_3_4"
,
checkd
:
false
,
},
{
name
:
"市场和购物"
,
id
:
"TAG_3_5"
,
checkd
:
false
,
},
{
name
:
"节日和事件"
,
id
:
"TAG_3_6"
,
checkd
:
false
,
},
]
}]
}
},
mounted
()
{
...
...
@@ -650,17 +843,70 @@ export default {
this
.
getList
()
this
.
getHotList
()
this
.
getCCList
(
1
)
this
.
scrollobj
=
document
.
getElementsByClassName
(
'el-scrollbar__wrap'
)[
0
];
this
.
scrollobj
.
addEventListener
(
'scroll'
,
this
.
handleScroll
);
},
methods
:
{
// 选中小标签 加载数据
setChangeTag
(
item
){
delete
this
.
msg
.
cat_main_keys
;
this
.
msg
.
cat_sub_keys
=
item
.
checkedCities
this
.
getList
()
},
// 游玩类型切换 取消其他选中
setChange
(
item
,
index
){
if
(
item
.
checkd
)
{
this
.
typeTag
.
map
((
x
,
i
)
=>
{
if
(
i
!==
index
)
{
x
.
checkd
=
false
;
x
.
checkedCities
=
[];
}
})
if
(
item
.
id
==
"TAG_0"
)
{
delete
this
.
msg
.
cat_main_keys
this
.
msg
.
cat_sub_keys
=
[
item
.
list
[
0
].
id
]
}
else
{
this
.
msg
.
cat_main_keys
=
[
item
.
id
]
delete
this
.
msg
.
cat_sub_keys
}
this
.
getList
()
}
else
{
this
.
msg
.
cat_main_keys
=
[
"TAG_4"
]
delete
this
.
msg
.
cat_sub_keys
this
.
getList
()
}
},
handleScroll
(){
try
{
let
current
=
''
this
.
navs
.
forEach
(
x
=>
{
let
t
=
document
.
getElementById
(
x
).
offsetTop
if
(
t
<=
this
.
scrollobj
.
scrollTop
-
200
){
current
=
x
}
})
this
.
crtnav
=
current
}
catch
(
error
)
{}
},
goScroll
(
id
){
this
.
activeId
=
id
;
this
.
scrollobj
.
scrollTop
=
document
.
getElementById
(
id
).
offsetTop
;
},
handleClick
(
tab
,
event
){
console
.
log
(
tab
,
event
);
this
.
newCityList
.
c
ities
.
map
((
x
,
index
)
=>
{
if
(
x
.
n
ame
==
tab
.
name
)
{
this
.
goListPage
(
2
,
this
.
CCList
[
this
.
CCListActive
].
number
,
tab
.
name
,
index
)
this
.
newCityList
.
C
ities
.
map
((
x
,
index
)
=>
{
if
(
x
.
City_N
ame
==
tab
.
name
)
{
this
.
goListPage
(
2
,
x
.
City_Code
,
tab
.
name
,
this
.
CCListActive
)
}
})
// this.goListPage(2, CCList[CCListActive].number, item.name, index)
},
goHome
(){
this
.
$router
.
push
({
name
:
"FreeHome"
,
});
},
goDetails
(
obj
){
this
.
$router
.
push
({
name
:
"FreeDetail"
,
...
...
@@ -675,7 +921,7 @@ export default {
this
.
getList
()
}
else
{
delete
this
.
msg
.
city_keys
this
.
msg
=
this
.
msg
.
city_keys
this
.
msg
=
this
.
msg
this
.
getList
()
}
},
...
...
@@ -690,6 +936,7 @@ export default {
},
goListPage
(
type
,
id
,
name
,
index
){
if
(
id
===
this
.
ccId
)
return
this
.
msg
.
start
=
0
this
.
addShow
=
false
;
this
.
changeCon
(
index
)
if
(
type
==
1
)
{
...
...
@@ -697,6 +944,7 @@ export default {
this
.
getHotList
(
2
,
id
)
this
.
ccId
=
id
;
this
.
ccName
=
name
;
return
}
let
url
=
type
==
1
?
"FreeList"
:
"FreeList2"
this
.
$router
.
push
({
...
...
@@ -717,9 +965,15 @@ export default {
{},
res
=>
{
if
(
res
.
data
.
resultCode
===
1
)
{
let
data
=
res
.
data
.
data
.
countries
this
.
CCList
=
data
this
.
changeCon
(
this
.
$route
.
query
.
CCListActive
)
let
data
=
res
.
data
.
data
.
Countries
let
deleteIdiot
=
[]
data
.
map
(
x
=>
{
if
(
x
.
Country_Name
!==
"台湾"
&&
x
.
Country_Name
!==
"香港"
&&
x
.
Country_Name
!==
"澳门"
)
{
deleteIdiot
.
push
(
x
)
}
})
this
.
CCList
=
deleteIdiot
this
.
changeCon
(
this
.
CCListActive
)
}
else
{
this
.
Error
(
res
.
data
.
message
);
}
...
...
@@ -728,8 +982,14 @@ export default {
);
},
handleCurrentChange
(
val
)
{
let
start
=
this
.
msg
.
start
if
(
val
==
1
)
{
start
=
start
==
0
?
0
:
start
-
15
}
else
{
start
=
start
+
15
}
// 翻页
this
.
msg
.
start
=
this
.
msg
.
start
+
15
;
this
.
msg
.
start
=
start
;
this
.
getList
();
},
// 获取热门列表
...
...
@@ -796,6 +1056,9 @@ export default {
}
this
.
msg
.
sort
=
this
.
priceSort
this
.
laoding
=
true
;
if
(
this
.
msg
.
cat_sub_keys
&&
this
.
msg
.
cat_sub_keys
.
length
<
1
)
{
delete
this
.
msg
.
cat_sub_keys
}
//http://efficient.oytour.com/api/kkday/commodityList
this
.
apiJavaPost
(
"/api/kkday/commodityList"
,
...
...
src/components/FreeTravel/FreeList2.vue
View file @
cdafa292
...
...
@@ -78,7 +78,7 @@
.city-tag
{
padding
:
13px
20px
;
color
:
#333
;
width
:
100
%
;
width
:
99
%
;
box-sizing
:
border-box
;
position
:
relative
;
}
...
...
@@ -117,20 +117,22 @@
font-size
:
14px
;
color
:
#333
;
font-weight
:
bold
;
flex
:
1
;
}
.city-list
>
p
{
color
:
#888888
;
cursor
:
pointer
;
font-size
:
12px
;
flex
:
6
;
}
.city-list
>
p
span
{
display
:
inline-block
;
padding-right
:
20px
;
}
.freeList
.city-right-tag
.el-tabs--card
>
.el-tabs__header
,
.freeList
.shaixuan-top
.el-tabs--card
>
.el-tabs__header
,
.freeList
.el-tabs--card
>
.el-tabs__header
.el-tabs__nav
,
.freeList
.el-tabs--card
>
.el-tabs__header
.el-tabs__item
{
.freeList
2
.city-right-tag
.el-tabs--card
>
.el-tabs__header
,
.freeList2
.shaixuan-top
.el-tabs--card
>
.el-tabs__header
,
.freeList2
.el-tabs--card
>
.el-tabs__header
.el-tabs__nav
,
.freeList2
.el-tabs--card
>
.el-tabs__header
.el-tabs__item
{
border
:
none
;
}
.freeList
.city-right-tag
.el-tabs--card
>
.el-tabs__header
.el-tabs__item
{
.freeList
2
.city-right-tag
.el-tabs--card
>
.el-tabs__header
.el-tabs__item
{
background
:
rgba
(
255
,
255
,
255
,
.1
);
border-radius
:
4px
;
font-size
:
18px
;
...
...
@@ -139,36 +141,35 @@
font-weight
:
bold
;
transition
:
all
linear
.5s
}
.freeList
.city-right-tag
.el-tabs--card
>
.el-tabs__header
.el-tabs__item
:hover
{
.freeList
2
.city-right-tag
.el-tabs--card
>
.el-tabs__header
.el-tabs__item
:hover
{
background
:
rgba
(
255
,
255
,
255
,
1
);
color
:
#EE4454
;
}
.freeList
.city-right-tag
{
.freeList
2
.city-right-tag
{
width
:
618px
;
}
.freeList
.el-icon-arrow-right
,
.freeList
.el-icon-arrow-left
{
.freeList
2
.el-icon-arrow-right
,
.freeList2
.el-icon-arrow-left
{
background
:
rgba
(
255
,
255
,
255
,
.1
);
border-radius
:
50%
;
transition
:
all
linear
.5s
}
.freeList
.city-right-tag
.el-icon-arrow-right
:hover
,
.city-right-tag
.freeList
.el-icon-arrow-left
:hover
{
.freeList
2
.city-right-tag
.el-icon-arrow-right
:hover
,
.city-right-tag
.freeList2
.el-icon-arrow-left
:hover
{
background
:
rgba
(
255
,
255
,
255
,
1
);
}
.freeList
.city-right-tag
>
p
{
.freeList
2
.city-right-tag
>
p
{
padding-bottom
:
10px
;
}
.freeList
.content
{
.freeList
2
.content
{
margin
:
0
auto
;
width
:
1200px
;
padding-top
:
80px
;
position
:
relative
;
}
.freeList
.contet-nav
{
.freeList
2
.contet-nav
{
padding
:
0
60px
;
height
:
87px
;
width
:
1200px
;
background
:
rgba
(
255
,
255
,
255
,
1
);
box-shadow
:
0px
4px
35px
0px
rgba
(
0
,
0
,
0
,
0.24
);
background
:
rgba
(
255
,
255
,
255
,
1
);
;
border-radius
:
6px
;
position
:
absolute
;
bottom
:
-50px
;
...
...
@@ -178,16 +179,33 @@
justify-content
:
space-between
;
box-sizing
:
border-box
;
align-items
:
center
;
padding-top
:
10px
;
}
.freeList
.contet-nav
>
div
{
.freeList
2
.contet-nav
>
div
{
width
:
150px
;
text-align
:
center
;
cursor
:
pointer
;
}
.freeList
.contet-nav
>
div
:hover
.contet-nav-item
img
{
.freeList
2
.contet-nav
>
div
:hover
.contet-nav-item
img
{
transform
:
scale
(
1.5
);
}
.freeList
.contet-nav-item
{
.freeList2
.contet-nav
>
div
.line
{
text-align
:
center
;
}
.freeList2
.contet-nav
>
div
.line
span
{
height
:
3px
;
width
:
0px
;
display
:
inline-block
;
background-color
:
transparent
;
position
:
relative
;
top
:
2px
;
transition
:
all
linear
.5s
;
}
.freeList2
.contet-nav
>
div
.active
.line
span
{
background-color
:
#EE4454
;
width
:
60px
;
}
.freeList2
.contet-nav-item
{
width
:
40px
;
height
:
40px
;
display
:
flex
;
...
...
@@ -195,30 +213,30 @@
justify-content
:
center
;
margin
:
0
auto
;
}
.freeList
.contet-nav-item
img
{
.freeList
2
.contet-nav-item
img
{
width
:
22px
;
height
:
22px
;
transition
:
all
linear
.5s
;
}
.freeList
.hot-p-item
{
.freeList
2
.hot-p-item
{
margin-bottom
:
20px
;
}
.freeList
.hot-p-item
.hot-p-item-tit
{
.freeList
2
.hot-p-item
.hot-p-item-tit
{
margin-bottom
:
10px
;
}
.freeList
.hot-p-item
.hot-p-item-tit-s
{
.freeList
2
.hot-p-item
.hot-p-item-tit-s
{
position
:
relative
;
height
:
40px
;
width
:
100%
;
}
.freeList
.hot-p-item
.hot-p-item-tit-s-line
{
.freeList
2
.hot-p-item
.hot-p-item-tit-s-line
{
display
:
inline-block
;
position
:
absolute
;
height
:
5px
;
width
:
40px
;
background-color
:
#F6A1A9
;
}
.freeList
.hot-p-item
.hot-p-item-tit-s
strong
{
.freeList
2
.hot-p-item
.hot-p-item-tit-s
strong
{
position
:
absolute
;
top
:
-4px
}
...
...
@@ -276,31 +294,32 @@
background-color
:
#FEF12C
;
border-radius
:
4px
;
}
.shaixuan
{
.
freeList2
.
shaixuan
{
width
:
1200px
;
margin
:
0
auto
;
margin-top
:
50px
;
}
.shaixuan-box
{
.
freeList2
.
shaixuan-box
{
border
:
1px
solid
rgba
(
220
,
220
,
220
,
1
);
margin-bottom
:
20px
;
}
.shaixuan
>
p
{
.
freeList2
.
shaixuan
>
p
{
margin-bottom
:
10px
;
}
.shaixuan-top
{
.
freeList2
.
shaixuan-top
{
padding
:
26px
24px
16px
24px
;
display
:
flex
;
}
.shaixuan-top
{
.
freeList2
.
shaixuan-top
{
border
:
1px
dashed
rgba
(
220
,
220
,
220
,
1
);
}
.shaixuan-top
>
div
:nth-child
(
2
)
{
.
freeList2
.
shaixuan-top
>
div
:nth-child
(
2
)
{
flex
:
1
;
}
.left-name
{
.
freeList2
.
left-name
{
width
:
130px
;
}
.shaixuan-top
.el-checkbox
{
.
freeList2
.
shaixuan-top
.el-checkbox
{
width
:
100px
;
margin
:
0
0
10px
0
;
}
...
...
@@ -319,11 +338,11 @@
.shaixuan-top
.el-tabs__header
{
margin-bottom
:
0
;
}
.freeList
.el-checkbox__input.is-checked
.el-checkbox__inner
{
.freeList
2
.el-checkbox__input.is-checked
.el-checkbox__inner
{
background-color
:
#EE4454
;
border-color
:
#EE4454
;
}
.freeList
.el-checkbox__input.is-checked
+
.el-checkbox__label
{
.freeList
2
.el-checkbox__input.is-checked
+
.el-checkbox__label
{
color
:
#EE4454
}
.shangpinliebiao
{
...
...
@@ -388,118 +407,57 @@
.page-con
{
margin-top
:
25px
;
}
.inputActive2
.el-row
.el-col.el-col-6
{
height
:
400px
;
overflow
:
auto
;
}
.el-tabs--card
>
.el-tabs__header
.el-tabs__nav
{
z-index
:
1
}
.freeList2
.nav-tag
{
border-top
:
1px
dashed
rgba
(
220
,
220
,
220
,
1
);
padding
:
29px
87px
;
z-index
:
0
;
width
:
1200px
;
box-sizing
:
border-box
;
margin
:
0
auto
;
background-color
:
white
;
position
:
relative
;
z-index
:
1
;
box-shadow
:
0px
4px
10px
0px
rgba
(
0
,
0
,
0
,
0.24
);
margin-bottom
:
25px
;
}
</
style
>
<
template
>
<div
class=
"freeList commonF"
>
<div
class=
"freeList
2
commonF"
>
<div
class=
"fl-top-box"
>
<div
class=
"fl-zhezhao"
></div>
<div
class=
"fl-top"
>
<div
class=
"fl-ad"
>
<span
class=
"fl-adname"
>
日本
</span>
<span
class=
"fl-adname"
>
{{
ccName
}}
</span>
<span
class=
"f14 __cp change-ad"
v-if=
"!addShow"
@
click=
"addShow = !addShow"
>
切换地点
<span
class=
"el-icon-caret-bottom"
></span>
</span>
<div
v-else
class=
"fl-ad-box"
>
<div
v-else
class=
"fl-ad-box
inputActive2
"
>
<p><span
class=
"f14 __cp"
@
click=
"addShow = !addShow"
>
切换地点
<span
class=
"el-icon-caret-bottom"
></span>
</span></p>
<div
class=
"fl-ad-cont"
>
<div
class=
"search"
>
<span
class=
"el-icon-close __cp"
@
click=
"addShow = !addShow"
></span>
<el-input
size=
"mini"
></el-input>
</div>
<el-row>
<el-col
:span=
"
5
"
>
<div
class=
"city-tag
active __cp"
>
<p
>
东亚
</p>
<el-row
v-if=
"CCList.length>0 "
>
<el-col
:span=
"
6
"
>
<div
class=
"city-tag
__cp"
v-for=
"(item, index) in CCList"
@
click=
"CCListActive = index"
:class=
"
{'active': CCListActive == index}" :key="index"
>
<p
>
{{
item
.
Country_Name
}}
</p>
<div
class=
"f12 text2"
>
<span>
成都
</span>
<span>
成都
</span>
<span>
成都
</span>
<span>
成都
</span>
<span>
成都
</span>
</div>
<div
class=
"triangle-up"
></div>
</div>
<div
class=
"city-tag __cp"
>
<p>
北美
</p>
<div
class=
"f12 text2"
>
<span>
成都
</span>
<span>
四川阿坝
</span>
<span>
好好还会
</span>
<span>
上课抵抗力
</span>
</div>
<div
class=
"triangle-up"
></div>
</div>
<div
class=
"city-tag active __cp"
>
<p>
中东非
</p>
<div
class=
"f12 text2"
>
<span>
菲律宾啊
</span>
<span>
日本掉啊
</span>
<span>
嗷嗷待食多
</span>
<span>
阿斯达是的
</span>
<span>
市发改委
</span>
</div>
<div
class=
"triangle-up"
></div>
</div>
<div
class=
"city-tag __cp"
>
<p>
西伯利亚
</p>
<div
class=
"f12 text2"
>
<span>
小从v四碗饭
</span>
<span>
阿萨德群二
</span>
<span>
哒哒
</span>
<span>
阿斯达是的
</span>
<span>
阿萨德
</span>
<span
v-for=
"(s, sIndex) in item.Cities"
:key=
"sIndex"
>
{{
s
.
City_Name
}}
</span>
</div>
<div
class=
"triangle-up"
></div>
</div>
</el-col>
<el-col
:span=
"1
9
"
>
<el-col
:span=
"1
8
"
>
<div
class=
"city-list"
>
<span
>
成都
&
成都
</span>
<span
class=
"PingFangR __cp"
@
click=
"goListPage(1, CCList[CCListActive].Country_Code, CCList[CCListActive].Country_Name)"
>
{{
CCList
[
CCListActive
].
Country_Name
}}
</span>
<p>
<span>
成都
</span>
<span>
成都
</span>
<span>
成都
</span>
<span>
成都
</span>
<span>
成都
</span>
<span>
成都
</span>
<span>
成都
</span>
<span>
成都
</span>
<span>
成都
</span>
<span>
成都
</span>
<span>
成都
</span>
<span>
成都
</span>
</p>
</div>
<div
class=
"city-list"
>
<span>
河南
</span>
<p>
<span>
郑州
</span>
<span>
郑州
</span>
<span>
郑州
</span>
<span>
郑州
</span>
<span>
郑州
</span>
<span>
郑州
</span>
<span>
郑州
</span>
<span>
郑州
</span>
<span>
郑州
</span>
<span>
郑州
</span>
<span>
郑州
</span>
<span>
郑州
</span>
</p>
</div>
<div
class=
"city-list"
>
<span>
重庆
</span>
<p>
<span>
合川
</span>
<span>
合川
</span>
<span>
合川
</span>
<span>
合川
</span>
<span>
合川
</span>
<span>
合川
</span>
<span>
合川
</span>
<span>
合川
</span>
<span>
合川
</span>
<span>
合川
</span>
<span>
合川
</span>
<span>
合川
</span>
<span
@
click=
"goListPage(2, item.City_Code, item.City_Name, index)"
class=
"f14 __cp"
v-for=
"(item, index) in CCList[CCListActive].Cities"
:key=
"index"
>
{{
item
.
City_Name
}}
</span>
</p>
</div>
</el-col>
...
...
@@ -508,78 +466,69 @@
</div>
</div>
<!-- 天气 -->
<div
class=
"contet-nav"
>
<div>
<div
class=
"contet-nav-item"
>
<img
src=
"../../assets/img/freeHome/lanse-icon4.png"
alt=
""
>
</div>
<p>
首页
</p>
天气预报
</div>
<div>
<div
class=
"contet-nav-item"
>
<img
src=
"../../assets/img/freeHome/lanse-icon1.png"
alt=
""
>
<div
class=
"contet-nav"
>
<div
@
click=
"goHome"
>
<div
class=
"contet-nav-item"
>
<img
src=
"../../assets/img/freeHome/lanse-icon4.png"
alt=
""
>
</div>
<p>
首页
</p>
<p
class=
"line"
><span></span></p>
</div>
<p>
特色餐食
</p>
</div>
<div>
<div
class=
"contet-nav-item"
>
<img
src=
"../../assets/img/freeHome/lanse-icon.png"
alt=
""
>
<div
@
click=
"changeNav('TAG_1', 4)"
:class=
"
{'active': typeTagIndex == 4}">
<div
class=
"contet-nav-item"
>
<img
src=
"../../assets/img/freeHome/lanse-icon5.png"
alt=
""
>
</div>
<p>
活动
</p>
<p
class=
"line"
><span></span></p>
</div>
<p>
一日游
</p>
</div>
<div>
<div
class=
"contet-nav-item"
>
<img
src=
"../../assets/img/freeHome/lanse-icon2.png"
alt=
""
>
<div
@
click=
"changeNav('TAG_3', 5)"
:class=
"
{'active': typeTagIndex == 5}">
<div
class=
"contet-nav-item"
>
<img
src=
"../../assets/img/freeHome/lanse-icon6.png"
alt=
""
>
</div>
<p>
体验
</p>
<p
class=
"line"
><span></span></p>
</div>
<p>
景点门票
</p>
</div>
<div>
<div
class=
"contet-nav-item"
>
<img
src=
"../../assets/img/freeHome/lanse-icon3.png"
alt=
""
>
<div
@
click=
"changeNav('TAG_0', 3)"
:class=
"
{'active': typeTagIndex == 3}">
<div
class=
"contet-nav-item"
>
<img
src=
"../../assets/img/freeHome/lanse-icon1.png"
alt=
""
>
</div>
<p>
特色餐食
</p>
<p
class=
"line"
><span></span></p>
</div>
<div
@
click=
"changeNav('TAG_4', 1)"
:class=
"
{'active': typeTagIndex == 1}">
<div
class=
"contet-nav-item"
>
<img
src=
"../../assets/img/freeHome/lanse-icon.png"
alt=
""
>
</div>
<p>
一日游
</p>
<p
class=
"line"
><span></span></p>
</div>
<div
@
click=
"changeNav('TAG_2', 0)"
:class=
"
{'active': typeTagIndex == 0}">
<div
class=
"contet-nav-item"
>
<img
src=
"../../assets/img/freeHome/lanse-icon2.png"
alt=
""
>
</div>
<p>
景点门票
</p>
<p
class=
"line"
><span></span></p>
</div>
<div
@
click=
"changeNav('TAG_5', 2)"
:class=
"
{'active': typeTagIndex == 2}">
<div
class=
"contet-nav-item"
>
<img
src=
"../../assets/img/freeHome/lanse-icon3.png"
alt=
""
>
</div>
<p>
当地交通
</p>
<p
class=
"line"
><span></span></p>
</div>
<p>
当地交通
</p>
</div>
</div>
</div>
</div>
<div
class=
"shaixuan"
>
<p
class=
"f24 bold"
>
日本游玩列表
</p>
<div
class=
"shaixuan-box"
>
<div
class=
"shaixuan-top"
>
<div
class=
"left-name"
>
游玩类型
</div>
<div
class=
""
>
<el-tabs
type=
"card"
v-model=
"activeName"
>
<el-tab-pane
label=
"大阪"
name=
"大阪"
>
<el-checkbox
slot=
"label"
>
大阪
</el-checkbox>
<el-checkbox-group
v-model=
"checkedCities"
>
<el-checkbox
v-for=
"city in cities"
:label=
"city"
:key=
"city"
>
{{
city
}}
</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane
label=
"冲绳"
name=
"冲绳"
>
<el-checkbox
slot=
"label"
>
冲绳
</el-checkbox>
<el-checkbox-group
v-model=
"checkedCities"
>
<el-checkbox
v-for=
"city in cities"
:label=
"city"
:key=
"city"
>
{{
city
}}
</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane
label=
"东京"
name=
"东京"
>
<el-checkbox
slot=
"label"
>
东京
</el-checkbox>
<el-checkbox-group
v-model=
"checkedCities"
>
<el-checkbox
v-for=
"city in cities"
:label=
"city"
:key=
"city"
>
{{
city
}}
</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane
label=
"三和"
name=
"三和"
>
<el-checkbox
slot=
"label"
>
三和
</el-checkbox>
<el-checkbox-group
v-model=
"checkedCities"
>
<el-checkbox
v-for=
"city in cities"
:label=
"city"
:key=
"city"
>
{{
city
}}
</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
</el-tabs>
</div>
</div>
<div
class=
"nav-tag"
>
<el-checkbox-group
v-model=
"typeTag[typeTagIndex].checkedCities"
>
<el-checkbox
v-for=
"tag in typeTag[typeTagIndex].list"
:label=
"tag.id"
:key=
"tag.id"
@
change=
"changeMainTag(typeTag[typeTagIndex].checkedCities)"
>
{{
tag
.
name
}}
</el-checkbox>
</el-checkbox-group>
</div>
<p
class=
"f24 bold"
>
{{
ccName
}}
游玩列表
</p>
<div
class=
"shangpinliebiao"
>
<div
class=
"get-nav"
>
<div
class=
"block"
>
...
...
@@ -592,32 +541,49 @@
placeholder=
"选择日期"
>
</el-date-picker>
</div>
<div
class=
"f14 __cp"
@
click=
"paixu1 = !paixu1
"
>
<div
class=
"f14 __cp"
@
click=
"pSort()
"
>
<span>
价格排序
</span><i
class=
"iconfont icon-xia c88"
:class=
"
{'paixu': paixu1}">
</i>
</div>
</div>
<el-row
:gutter=
"26"
>
<el-col
:span=
"6"
v-for=
"
item in 16"
:key=
"item
"
>
<div
class=
"shangpinliebiao-item"
>
<el-row
:gutter=
"26"
v-loading=
"laoding"
>
<el-col
:span=
"6"
v-for=
"
(item, index) in dataList"
:key=
"index
"
>
<div
class=
"shangpinliebiao-item"
@
click=
"goDetails(item)"
>
<div
class=
"top-img"
>
<img
src=
"../../assets/img/activy.jpg
"
alt=
""
>
<img
:src=
"KkdayDomain + item.prod_img_url
"
alt=
""
>
</div>
<div
class=
"tag"
>
<span><i
class=
"iconfont icon-mudedi"
></i>
<span
class=
"PingFangR"
>
中国-香港
</span>
</span>
<span><i
class=
"iconfont icon-mudedi"
></i>
<span
class=
"PingFangR"
>
{{
item
.
countries
[
0
].
name
+
'-'
+
item
.
countries
[
0
].
cities
[
0
].
name
}}
</span>
</span>
</div>
<p
class=
"text2 f14 c33
"
>
【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐
</p>
<p
class=
"text2 f14 c33
PingFangR"
>
{{
item
.
prod_name
}}
</p>
<div
class=
"pro-item-btm"
>
<div>
<p><span
class=
"price-box"
>
¥
<strong>
298
</strong>
/人
<span
class=
"f12 c88 del-text"
>
¥
<strong>
298
</strong>
/人
</span></span></p>
<p
class=
"c88 f12"
>
最早可订日期:2019年8月20日
</p>
<p><span
class=
"price-box"
>
¥
<strong
class=
"PingFangR"
>
{{
item
.
b2c_price
}}
</strong>
/人
</span></p>
<!--
<p><span
class=
"price-box"
>
¥
<strong>
{{
item
.
b2c_price
}}
</strong>
/人
<span
class=
"f12 c88 del-text"
>
¥
<strong>
298
</strong>
/人
</span></span></p>
-->
<!--
<p
class=
"c88 f12"
>
最早可订日期:2019年8月20日
</p>
-->
</div>
<div
class=
"c88 f12"
>
128
人已购买
{{
item
.
order_count
+
Math
.
round
(
Math
.
random
()
*
99
)
}}
人已购买
</div>
</div>
</div>
</el-col>
</el-row>
<div
class=
"empty-data"
v-if=
"dataList.length
<1
"
>
<i
class=
"iconfont icon-kong"
></i>
很抱歉,你想要的信息我们真的找不到了
</div>
<div
class=
"page-con"
>
<el-pagination
:current-page
.
sync=
"currentPage"
:page-size=
"16"
layout=
"total, prev, pager, next"
:total=
"totalCount"
@
prev-click=
"handleCurrentChange(1)"
@
next-click=
"handleCurrentChange(2)"
></el-pagination>
<!-- @current-change="handleCurrentChange" -->
</div>
</div>
</div>
</div>
...
...
@@ -626,17 +592,394 @@
export
default
{
data
()
{
return
{
ccIdNew
:
null
,
newCityCheck
:
[],
paixu1
:
false
,
addShow
:
false
,
c
ities
:
[
'上海'
,
'北京'
,
'广州'
,
'深圳'
,
'上海4'
,
'北京2'
,
'广州2'
,
'深圳2'
,
'上海2'
,
'北京3'
,
'广州3'
,
'深圳3'
,
'上海3'
,
'北京4'
,
'广州5'
,
'深圳5'
],
C
ities
:
[
'上海'
,
'北京'
,
'广州'
,
'深圳'
,
'上海4'
,
'北京2'
,
'广州2'
,
'深圳2'
,
'上海2'
,
'北京3'
,
'广州3'
,
'深圳3'
,
'上海3'
,
'北京4'
,
'广州5'
,
'深圳5'
],
checkedCities
:
[
'上海'
,
'北京'
],
activeName
:
'大阪'
activeName
:
'景点和门票'
,
value
:
''
,
pickerOptions0
:
{
disabledDate
(
time
)
{
return
time
.
getTime
()
<
Date
.
now
()
-
8.64e7
;
}
},
dataHotList
:
[],
dataList
:
[],
CCList
:
[],
ccId
:
""
,
ccName
:
""
,
CCListActive
:
0
,
pageIndex
:
0
,
totalCount
:
0
,
currentPage
:
1
,
msg
:
{
"locale"
:
"zh-cn"
,
"state"
:
"CN"
,
"sort"
:
"PASC"
,
"cat_main_keys"
:
[
"TAG_4"
],
"page_size"
:
16
,
"start"
:
0
,
},
priceSort
:
"PASC"
,
// PDESC 高到低
KkdayDomain
:
''
,
laoding
:
false
,
typeTagIndex
:
1
,
typeTag
:
[
{
name
:
"景点和门票"
,
checkd
:
false
,
id
:
"TAG_2"
,
checkedCities
:
[],
list
:
[
{
name
:
"观光票及通行证"
,
id
:
"TAG_2_1"
,
checkd
:
false
,
},
{
name
:
"博物馆和美术馆"
,
id
:
"TAG_2_2"
,
checkd
:
false
,
},
{
name
:
"主题公园"
,
id
:
"TAG_2_3"
,
checkd
:
false
,
},
{
name
:
"体育节目"
,
id
:
"TAG_2_4"
,
checkd
:
false
,
},
]
},{
name
:
"一日游"
,
checkd
:
false
,
id
:
"TAG_4"
,
checkedCities
:
[],
list
:
[
{
name
:
"城市观光"
,
id
:
"TAG_4_1"
,
checkd
:
false
,
},
{
name
:
"艺术,文化和历史"
,
id
:
"TAG_4_2"
,
checkd
:
false
,
},
{
name
:
"日间旅行和短途旅行"
,
id
:
"TAG_4_3"
,
checkd
:
false
,
},
{
name
:
"天之旅"
,
id
:
"TAG_4_4"
,
checkd
:
false
,
},
{
name
:
"私人旅游及租船"
,
id
:
"TAG_4_5"
,
checkd
:
false
,
},
{
name
:
"自然和野生动物"
,
id
:
"TAG_4_6"
,
checkd
:
false
,
},
{
name
:
"游艇"
,
id
:
"TAG_4_7"
,
checkd
:
false
,
},
]
},{
name
:
"交通生活"
,
checkd
:
false
,
id
:
"TAG_5"
,
checkedCities
:
[],
list
:
[
{
name
:
"机票"
,
id
:
"TAG_5_1"
,
checkd
:
false
,
},
{
name
:
"地面运输"
,
id
:
"TAG_5_2"
,
checkd
:
false
,
},
{
name
:
"车辆租赁"
,
id
:
"TAG_5_3"
,
checkd
:
false
,
},
{
name
:
"渡轮"
,
id
:
"TAG_5_4"
,
checkd
:
false
,
},
{
name
:
"WiFi & SIM卡"
,
id
:
"TAG_5_5"
,
checkd
:
false
,
},
{
name
:
"住宿"
,
id
:
"TAG_5_6"
,
checkd
:
false
,
},
]
},{
name
:
"餐饮美食"
,
checkd
:
false
,
id
:
"TAG_0"
,
checkedCities
:
[],
list
:
[
{
name
:
"餐饮与美食"
,
id
:
"TAG_2_5"
,
checkd
:
false
,
},
{
name
:
"食物,饮料和夜生活"
,
id
:
"TAG_3_2"
,
checkd
:
false
,
},
]
},{
name
:
"活动"
,
checkd
:
false
,
id
:
"TAG_1"
,
checkedCities
:
[],
list
:
[
{
name
:
"冒险活动"
,
id
:
"TAG_1_1"
,
checkd
:
false
,
},
{
name
:
"水上活动"
,
id
:
"TAG_1_2"
,
checkd
:
false
,
},
{
name
:
"其他活动"
,
id
:
"TAG_1_3"
,
checkd
:
false
,
},
]
},{
name
:
"体验"
,
checkd
:
false
,
id
:
"TAG_3"
,
checkedCities
:
[],
list
:
[
{
name
:
"独特的经历"
,
id
:
"TAG_1_1"
,
checkd
:
false
,
},
{
name
:
"健康"
,
id
:
"TAG_3_3"
,
checkd
:
false
,
},
{
name
:
"研习会"
,
id
:
"TAG_3_4"
,
checkd
:
false
,
},
{
name
:
"市场和购物"
,
id
:
"TAG_3_5"
,
checkd
:
false
,
},
{
name
:
"节日和事件"
,
id
:
"TAG_3_6"
,
checkd
:
false
,
},
]
}]
}
},
mounted
()
{
this
.
ccId
=
this
.
$route
.
query
.
id
;
this
.
ccName
=
this
.
$route
.
query
.
name
;
this
.
CCListActive
=
this
.
$route
.
query
.
CCListActive
;
this
.
getList
()
this
.
getCCList
(
1
)
},
methods
:
{
changeMainTag
(
e
){
console
.
log
(
e
)
if
(
e
.
length
>
0
)
{
this
.
msg
.
cat_sub_keys
=
e
}
else
{
delete
this
.
msg
.
cat_sub_keys
}
delete
this
.
msg
.
cat_main_keys
this
.
getList
()
},
changeNav
(
id
,
num
){
this
.
typeTag
.
map
(
x
=>
{
x
.
checkedCities
=
[];
})
this
.
typeTagIndex
=
num
if
(
id
!==
'TAG_0'
)
{
this
.
msg
.
cat_main_keys
=
[
id
]
delete
this
.
msg
.
cat_sub_keys
}
else
{
delete
this
.
msg
.
cat_main_keys
this
.
msg
.
cat_sub_keys
=
[
"TAG_2_5"
]
}
this
.
getList
()
},
goHome
(){
this
.
$router
.
push
({
name
:
"FreeHome"
,
});
},
// 选中小标签 加载数据
setChangeTag
(
item
){
delete
this
.
msg
.
cat_main_keys
;
this
.
msg
.
cat_sub_keys
=
item
.
checkedCities
this
.
getList
()
},
// 游玩类型切换 取消其他选中
setChange
(
item
,
index
){
if
(
item
.
checkd
)
{
this
.
typeTag
.
map
((
x
,
i
)
=>
{
if
(
i
!==
index
)
{
x
.
checkd
=
false
;
x
.
checkedCities
=
[];
}
})
if
(
item
.
id
==
"TAG_0"
)
{
delete
this
.
msg
.
cat_main_keys
this
.
msg
.
cat_sub_keys
=
[
item
.
list
[
0
].
id
]
}
else
{
this
.
msg
.
cat_main_keys
=
[
item
.
id
]
delete
this
.
msg
.
cat_sub_keys
}
this
.
getList
()
}
else
{
this
.
msg
.
cat_main_keys
=
[
"TAG_4"
]
delete
this
.
msg
.
cat_sub_keys
this
.
getList
()
}
},
goDetails
(
obj
){
this
.
$router
.
push
({
name
:
"FreeDetail"
,
query
:
{
id
:
obj
.
prod_url_no
,
}
});
},
pSort
(){
this
.
paixu1
=
!
this
.
paixu1
;
this
.
priceSort
=
this
.
paixu1
?
"PASC"
:
"PDESC"
this
.
getList
()
},
goListPage
(
type
,
id
,
name
,
index
){
this
.
ccIdNew
=
id
this
.
addShow
=
false
;
if
(
type
==
1
)
{
this
.
ccId
=
id
;
this
.
ccName
=
name
;
let
url
=
type
==
1
?
"FreeList"
:
"FreeList2"
this
.
$router
.
push
({
name
:
url
,
query
:
{
id
:
id
,
type
:
type
,
name
:
name
,
CCListActive
:
index
?
index
:
this
.
CCListActive
,
}
});
}
else
{
this
.
ccName
=
name
;
this
.
getList
(
2
,
id
)
}
},
// 获取列表
getList
(
type
,
id
){
let
query
=
this
.
$route
.
query
;
if
(
query
.
type
==
1
)
{
this
.
msg
.
country_keys
=
[
query
.
id
]
}
else
{
this
.
msg
.
city_keys
=
[
query
.
id
]
}
if
(
type
)
{
this
.
msg
.
city_keys
=
[
id
]
}
this
.
msg
.
sort
=
this
.
priceSort
this
.
laoding
=
true
;
if
(
this
.
ccIdNew
!==
""
)
{
this
.
msg
.
city_keys
=
[
this
.
ccIdNew
]
}
//http://efficient.oytour.com/api/kkday/commodityList
this
.
apiJavaPost
(
"/api/kkday/commodityList"
,
this
.
msg
,
res
=>
{
if
(
res
.
data
.
resultCode
===
1
)
{
let
data
=
res
.
data
.
data
console
.
log
(
data
)
this
.
KkdayDomain
=
data
.
KkdayDomain
this
.
totalCount
=
data
.
metadata
.
total_count
this
.
dataList
=
data
.
prods
}
else
{
this
.
Error
(
res
.
data
.
message
);
}
this
.
laoding
=
false
;
},
null
);
},
//获取国家 城市
getCCList
(
t
){
//http://efficient.oytour.com/api/kkday/searchCity
this
.
apiJavaPost
(
"/api/kkday/searchCity"
,
{},
res
=>
{
if
(
res
.
data
.
resultCode
===
1
)
{
let
data
=
res
.
data
.
data
.
Countries
let
deleteIdiot
=
[]
data
.
map
(
x
=>
{
if
(
x
.
Country_Name
!==
"台湾"
&&
x
.
Country_Name
!==
"香港"
&&
x
.
Country_Name
!==
"澳门"
)
{
deleteIdiot
.
push
(
x
)
}
})
this
.
CCList
=
deleteIdiot
}
else
{
this
.
Error
(
res
.
data
.
message
);
}
},
null
);
},
handleCurrentChange
(
val
)
{
let
start
=
this
.
msg
.
start
if
(
val
==
1
)
{
start
=
start
==
0
?
0
:
start
-
15
}
else
{
start
=
start
+
15
}
// 翻页
this
.
msg
.
start
=
start
;
this
.
getList
();
},
}
}
</
script
>
\ No newline at end of file
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