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
7f727df7
Commit
7f727df7
authored
Dec 31, 2019
by
zhengke
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
修改
parent
3c469f01
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
511 additions
and
120 deletions
+511
-120
App.vue
src/App.vue
+1
-1
tripMap.vue
src/components/global/tripMap.vue
+155
-0
newTrip.vue
src/components/mall/newTrip.vue
+355
-119
No files found.
src/App.vue
View file @
7f727df7
...
...
@@ -101,7 +101,7 @@ export default {
<
style
>
@import
'./assets/global/font.css'
;
@import
'//at.alicdn.com/t/font_863923_
dtn4njci8up
.css'
;
@import
'//at.alicdn.com/t/font_863923_
gnvvvot7jvv
.css'
;
@import
'./assets/global/global.css'
;
@import
'./assets/css/common.css'
;
body
,
html
{
...
...
src/components/global/tripMap.vue
0 → 100644
View file @
7f727df7
<
style
>
.markers_labels
{
margin-left
:
-24px
!important
;
margin-top
:
-43px
!important
;
}
.gm-svpc
,
.gm-style-mtc
,
.gm-style-cc
{
display
:
none
;
}
</
style
>
<
template
>
<div
style=
"height:100%;"
>
<div
id=
"map_canvas"
style=
"height: 100%; width: 100%"
></div>
</div>
</
template
>
<
script
>
export
default
{
props
:[
"dataList"
],
name
:
'tripMap'
,
data
(){
return
{
show
:
false
,
directionsService
:
new
google
.
maps
.
DirectionsService
(),
directionsDisplay
:
new
google
.
maps
.
DirectionsRenderer
(),
map
:{},
}
},
watch
:{
dataList
(
newValue
,
old
){
this
.
mapBuild
()
}
},
created
(){
},
destroyed
:
function
()
{
},
mounted
(){
console
.
log
(
this
.
dataList
,
'datalist组件'
);
this
.
mapBuild
()
//初始化实例之后调用
},
methods
:{
getDetailsRoutes
(
source
,
destination
,
map
){
service
=
new
google
.
maps
.
DistanceMatrixService
();
service
.
getDistanceMatrix
({
origins
:
[
source
],
destinations
:
[
destination
],
travelMode
:
google
.
maps
.
TravelMode
.
DRIVING
,
unitSystem
:
google
.
maps
.
UnitSystem
.
METRIC
,
avoidHighways
:
false
,
avoidTolls
:
false
},
function
(
response
,
status
)
{
if
(
status
==
google
.
maps
.
DistanceMatrixStatus
.
OK
&&
response
.
rows
[
0
].
elements
[
0
].
status
!=
"ZERO_RESULTS"
)
{
var
distance
=
response
.
rows
[
0
].
elements
[
0
].
distance
.
text
;
var
duration
=
response
.
rows
[
0
].
elements
[
0
].
duration
.
text
;
var
dvDistance
=
document
.
getElementById
(
"siteinfo_modal_label"
);
dvDistance
.
innerHTML
=
""
;
dvDistance
.
innerHTML
+=
"Distance: "
+
distance
+
"<br />"
;
dvDistance
.
innerHTML
+=
"Duration:"
+
duration
;
}
else
{
alert
(
"Unable to find the distance via road."
);
}
})
},
// 地图实例
mapBuild
(){
let
lat
=
parseFloat
(
this
.
dataList
[
0
].
lat
)
let
lng
=
parseFloat
(
this
.
dataList
[
0
].
lng
)
// let lat = parseFloat(this.dataList[0].lat)
// let lng = parseFloat(this.dataList[0].lng)
let
center
=
{
lng
:
lng
,
lat
:
lat
}
//创建地图实例,zoom是缩放比例
this
.
map
=
new
google
.
maps
.
Map
(
document
.
getElementById
(
'map_canvas'
),
{
zoom
:
7
,
center
:
center
,
mapTypeId
:
google
.
maps
.
MapTypeId
.
ROADMAP
});
// var polyOptions = {
// strokeColor: 'red', // 颜色
// strokeOpacity: 1.0, // 透明度
// strokeWeight: 2 // 宽度
// }
// let poly = new google.maps.Polyline(polyOptions);
// poly.setMap(map); // 装载
// 遍历循环创建标记
// this.dataList.map(item=>{
// // let lat = parseFloat(item.lat)
// // let lng = parseFloat(item.lng)
// // var path = poly.getPath(); //获取线条的坐标
// // path.push(new google.maps.LatLng(lat, lng));
// let marker = new MarkerWithLabel({
// position: {lat:lat,lng:lng},
// // icon: '../../../static/img/qishou.png', //标记自定义图标
// draggable: false, //不可拖动
// map: map, //地图实例
// // labelContent: item.name, //label的内容
// labelAnchor: new google.maps.Point(22, 100), //label的位置,可以调
// // labelClass: "markers_labels", // the CSS class for the label
// // labelStyle: { background:'#fff',padding:'5px' }
// });
// //自定义信息窗口
// let iw = new google.maps.InfoWindow({
// content: `
<
div
>
//
<
p
>
景点名称:
$
{
item
.
name
}
<
/p
>
//
<
/div>`}
)
;
// //点击信息窗口显示
// google.maps.event.addListener(marker, "click", function (e) { iw.open(map, marker); });
// })
this
.
directionsDisplay
.
setMap
(
this
.
map
);
this
.
calcRoute
()
},
calcRoute
:
function
()
{
// 创建路径规划
// 分解数据 获得起 止 以及中间数据
console
.
log
(
this
.
dataList
,
'加载后....'
);
let
lat
=
parseFloat
(
this
.
dataList
[
0
].
lat
)
let
lng
=
parseFloat
(
this
.
dataList
[
0
].
lng
)
let
elat
=
parseFloat
(
this
.
dataList
[
this
.
dataList
.
length
-
1
].
lat
)
let
elng
=
parseFloat
(
this
.
dataList
[
this
.
dataList
.
length
-
1
].
lng
)
let
_this
=
this
;
let
start
=
lat
+
','
+
lng
;
let
end
=
elat
+
','
+
elng
;
let
waypoints
=
[];
if
(
this
.
dataList
.
length
>
2
)
{
this
.
dataList
.
forEach
((
x
,
index
)
=>
{
if
(
index
>=
1
&&
index
!==
(
this
.
dataList
.
length
-
1
))
{
let
obj
=
{
location
:
x
.
lat
+
','
+
x
.
lng
}
waypoints
.
push
(
obj
)
}
});
}
let
request
=
{
// 组装连线数据
origin
:
start
,
// 起
destination
:
end
,
// 止
travelMode
:
google
.
maps
.
TravelMode
.
DRIVING
,
// waypoints: [{location:"30.5226477,104.05806469999993"},{location:"30.67416759999999,104.04721970000003"}] // 中间点数据
};
if
(
waypoints
.
length
>
0
)
{
request
.
waypoints
=
waypoints
}
console
.
log
(
waypoints
,
'waypointsss'
)
_this
.
directionsService
.
route
(
request
,
function
(
result
,
status
)
{
if
(
status
==
google
.
maps
.
DirectionsStatus
.
OK
)
{
_this
.
directionsDisplay
.
setDirections
(
result
);
}
});
},
},
}
</
script
>
src/components/mall/newTrip.vue
View file @
7f727df7
...
...
@@ -11,7 +11,7 @@
height
:
100%
;
}
.pageViewTrip
.sideBar
{
position
:
absolute
;
position
:
fixed
;
width
:
250px
;
top
:
0
;
height
:
800px
;
...
...
@@ -65,6 +65,9 @@
-moz-transition
:
all
.3s
ease
;
transition
:
all
.3s
ease
;
}
.pageViewTrip
.sideBar
ul
li
i
:last-child
{
display
:
none
;
}
.pageViewTrip
.sideBar
ul
li
.dayIndex
{
display
:
inline-block
;
width
:
45px
;
...
...
@@ -464,7 +467,7 @@
}
.subSection
{
border-top
:
1px
#eee
solid
;
padding
-top
:
20px
;
padding
:
20px
0
;
}
.tripViewAgendaList
.agendaBox
.table
.item
{
margin
:
8px
0
;
...
...
@@ -558,34 +561,131 @@
left
:
730px
;
right
:
0
;
height
:
100%
;
/* z-index:-1; */
}
.cityDayList
.tripDay
.cities
i
{
color
:
#00A4A8
;
margin
:
0
10px
;
font-size
:
18px
;
}
.cityDayList
.tripDay
.cities
i
:last-child
{
display
:
none
;
}
.tripViewAgendaList
.agendaBox
.txtCont
{
padding
:
10px
20px
;
box-shadow
:
rgba
(
0
,
0
,
0
,
.1
)
0
1px
1px
0
;
border
:
1px
solid
#DCDEDF
;
white-space
:
pre-wrap
;
}
.agendaBox
.longTransitPoi
.left
{
position
:
absolute
;
left
:
7px
;
top
:
50%
;
margin-top
:
-10px
;
font-size
:
20px
;
}
.agendIndex
{
background-color
:
#00A4A8
;
color
:
#fff
;
}
.tripViewAgendaList
.agendaBox
.city
{
color
:
#00A4A8
;
font-size
:
18px
;
}
.agendaBox
.poiName
{
font-weight
:
700
;
color
:
#4B4E52
;
font-size
:
22px
;
}
.agendaBox
.time
{
color
:
#8F9296
;
font-size
:
14px
;
}
.agendaBox
.longTransitPoi
{
padding
:
10px
10px
10px
60px
;
position
:
relative
;
}
.agendaBox
.longTransitMethod
{
padding
:
10px
10px
10px
60px
;
position
:
relative
;
}
.agendaBox
.longTransitMethod
.left
{
position
:
absolute
;
left
:
0
;
top
:
50%
;
margin-top
:
-40px
;
}
.agendaBox
.longTransitMethod
.left
.frame
{
position
:
absolute
;
font-size
:
80px
;
line-height
:
80px
;
height
:
80px
;
z-index
:
0
;
left
:
1px
;
top
:
-60px
;
padding-top
:
7px
;
}
.agendaBox
.longTransitMethod
.left
.method
{
position
:
absolute
;
z-index
:
1
;
left
:
0
;
top
:
0
;
font-size
:
18px
;
width
:
36px
;
height
:
86px
;
line-height
:
86px
;
text-align
:
center
;
}
.agendaBox
.longTransitMethod
.name
{
font-weight
:
700
;
color
:
#4B4E52
;
font-size
:
22px
;
}
.agendaBox
.longTransitMethod
.time
{
color
:
#8F9296
;
font-size
:
14px
;
}
.frame
i
{
font-size
:
30px
;
line-height
:
80px
;
}
.pageViewTrip
.active
{
color
:
#00A4A8
!important
;
}
</
style
>
<
template
>
<div
class=
"pageViewTrip"
>
<div
class=
"pageViewTrip"
v-if=
"isShow"
>
<div
class=
"tripContWrap"
>
<div
class=
"sideBar mobileHide"
>
<div
class=
"sideBarBtns sideTop"
>
<div
class=
"btnPage active
"
>
<div
:class=
"crtnav=='tripLine'?'active':''"
class=
"btnPage"
@
click=
"goScroll('tripLine','')
"
>
<i
class=
"iconfont icon-huozhuduanchaxunxianlu"
></i>
行程线路
</div>
<div
class=
"btnPage
"
>
<div
:class=
"crtnav=='aboutTrip'?'active':''"
class=
"btnPage"
@
click=
"goScroll('aboutTrip','')
"
>
<i
class=
"iconfont icon-message"
></i>
关于这次旅行
</div>
<div
class=
"btnPage
"
>
<div
:class=
"crtnav=='tripArrange'?'active':''"
class=
"btnPage"
@
click=
"goScroll('tripArrange','')
"
>
<i
class=
"iconfont icon-order_icon"
></i>
行程安排
</div>
<div
class=
"border"
></div>
</div>
<ul>
<li>
<span
class=
"dayIndex"
>
D1
</span>
<span
class=
"city"
>
东京
</span>
</li>
<li>
<span
class=
"dayIndex"
>
D2
</span>
<span
class=
"city"
>
东京
</span>
<i>
-
</i>
<span
class=
"city"
>
箱根
</span>
<li
v-for=
"(item,index) in dataList.dayList"
:class=
"crtnav=='dayList'+(index+1)?'active':''"
@
click=
"goScroll('dayList'+(index+1),(index+1))"
>
<span
class=
"dayIndex"
>
D
{{
index
+
1
}}
</span>
<template
v-for=
"suItem in item.dayArray"
>
<template
v-if=
"suItem.type==1"
v-for=
"(childItem,index) in suItem.childItem.subTraffic"
>
<template
v-if=
"index==0"
>
<span
class=
"city"
>
{{
childItem
.
startCityName
}}
</span>
<i>
-
</i>
<span
class=
"city"
>
{{
childItem
.
arrivalCityName
}}
</span>
<i>
-
</i>
</
template
>
<
template
v-else
>
<span
class=
"city"
>
{{
childItem
.
arrivalCityName
}}
</span>
<i
class=
"iconfont icon-daoda icon"
></i>
</
template
>
</template>
</template>
</li>
</ul>
<div
class=
"border"
></div>
...
...
@@ -593,51 +693,51 @@
<div
class=
"tripViewContainer main "
>
<div
class=
"swiper-container"
>
<div
class=
"swiper-wrapper"
>
<div
class=
"swiper-slide"
>
<div
class=
"swiper-slide"
id=
"tripLine"
>
<div
class=
"inner"
>
<div
class=
"slideHeader"
>
行程路线
</div>
<div>
<div
class=
"cityDayList clear"
>
<div
class=
"tripDay"
>
<div
class=
"left"
>
<div
class=
"dayIndex"
>
D1
</div>
</div>
<div
class=
"cities"
>
<span
class=
"city"
>
东京
</span>
</div>
</div>
<div
class=
"tripDay"
>
<div
class=
"tripDay"
v-for=
"(item,index) in dataList.dayList"
>
<div
class=
"left"
>
<div
class=
"dayIndex"
>
D
1
</div>
<div
class=
"dayIndex"
>
D
{{index+1}}
</div>
</div>
<div
class=
"cities"
>
<span
class=
"city"
>
东京
</span>
</div>
</div>
<div
class=
"tripDay"
>
<div
class=
"left"
>
<div
class=
"dayIndex"
>
D1
</div>
</div>
<div
class=
"cities"
>
<span
class=
"city"
>
东京
</span>
<
template
v-for=
"suItem in item.dayArray"
>
<template
v-if=
"suItem.type==1"
v-for=
"(childItem,index) in suItem.childItem.subTraffic"
>
<template
v-if=
"index==0"
>
<span
class=
"city"
>
{{
childItem
.
startCityName
}}
</span>
<i
class=
"iconfont icon-daoda icon"
></i>
<span
class=
"city"
>
{{
childItem
.
arrivalCityName
}}
</span>
<i
class=
"iconfont icon-daoda icon"
></i>
</
template
>
<
template
v-else
>
<span
class=
"city"
>
{{
childItem
.
arrivalCityName
}}
</span>
<i
class=
"iconfont icon-daoda icon"
></i>
</
template
>
</template>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"swiper-slide"
>
<div
class=
"swiper-slide"
id=
"aboutTrip"
>
<div
class=
"inner"
>
<div
class=
"slideHeader"
>
关于这次旅行
</div>
<div
class=
"articleCont articleTxt"
>
<p>
清风捎信,大地为书,寄往不愿沉迷世俗,探求时间奥妙的你,为此,我将带你走进神秘的樱之国度。
</p>
<p>
写在前面的话:
</p>
<p>
亲爱的旅行家,你好呀,我是你路途中最忠实的朋友。在清闲午后,在落日黄昏,一杯清茶,你翻开手中书卷,悄无声息中和我踏上美妙的旅途,我们时常作伴,把酒言欢,在异域街头,我为你收集温暖❤
</p>
<p>
所以,就让这一切变成一条路,你去走走看看.
</p>
<p>
旅游并不一定是舟车劳顿的代名词
</p>
<p>
为了是挣脱都会丛林中污浊的空气
</p>
<p>
还是杂乱的交通
</p>
<p>
或者是拥挤的人群
</p>
<p>
寻求一丝自我的空间
</p>
<p>
您的梦想即将实现
</p>
<p>
就让我们为您实现一次精彩的旅行
</p>
</div>
</div>
</div>
<div
class=
"swiper-slide"
>
<div
class=
"swiper-slide"
id=
"tripArrange"
>
<div
class=
"inner slideQuote"
>
<div
class=
"slideHeader"
>
行程安排
</div>
<div
class=
"arrangements"
>
...
...
@@ -647,15 +747,15 @@
<span
class=
"subTitle"
>
交通方案
</span>
</div>
</div>
<div
class=
"col-md-12 col-sm-12"
>
<div
class=
"col-md-12 col-sm-12"
v-if=
"dataList.currentPriceInfo.priceFlight&&dataList.currentPriceInfo.priceFlight!=null"
v-for=
"(item,index) in dataList.currentPriceInfo.priceFlight"
>
<div
class=
"arrangementSubContainer"
>
<div
class=
"header"
><span
class=
"dayIndex"
>
D
1
</span></div>
<div
class=
"header"
><span
class=
"dayIndex"
>
D
{{index+1}}
</span></div>
<div
class=
"content"
>
<div
class=
"name transit"
>
KE808
</div>
<div
class=
"name transit"
>
{{item.flightNumber}}
</div>
<div
class=
"fromTo"
>
<div
class=
"from"
>
<div
class=
"name"
>
西安咸阳国际机场
</div>
<div
class=
"time"
>
出发时间
12:40
</div>
<div
class=
"name"
>
{{item.departureAirPortName}}
</div>
<div
class=
"time"
>
出发时间
{{item.departureTime}}
</div>
</div>
<div
class=
"middle"
>
<div>
...
...
@@ -663,37 +763,13 @@
</div>
</div>
<div
class=
"to"
>
<div
class=
"name"
>
仁川国际机场
</div>
<div
class=
"time"
>
到达时间
16:50
</div>
<div
class=
"name"
>
{{item.arrivalAirPortName}}
</div>
<div
class=
"time"
>
到达时间
{{item.arrivalTime}}
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"col-md-12 col-sm-12"
>
<div
class=
"arrangementSubContainer"
>
<div
class=
"header"
><span
class=
"dayIndex"
>
D2
</span></div>
<div
class=
"content"
>
<div
class=
"name transit"
>
KE808
</div>
<div
class=
"fromTo"
>
<div
class=
"from"
>
<div
class=
"name"
>
西安咸阳国际机场
</div>
<div
class=
"time"
>
出发时间 12:40
</div>
</div>
<div
class=
"middle"
>
<div>
<i
class=
"iconfont icon-daoda icon"
></i>
</div>
</div>
<div
class=
"to"
>
<div
class=
"name"
>
仁川国际机场
</div>
<div
class=
"time"
>
到达时间 16:50
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"arrangements"
>
...
...
@@ -736,10 +812,10 @@
</div>
</div>
</div>
<div
class=
"swiper-slide"
>
<div
class=
"swiper-slide"
v-for=
"(item,index) in dataList.dayList"
:id=
"'dayList'+(index+1)"
>
<div
class=
"inner"
>
<div
class=
"slideHeader"
style=
"position:relative;"
>
<div
class=
"dayNum"
>
D
2
</div>
<div
class=
"dayNum"
>
D
{{index+1}}
</div>
<div
class=
"dayNumRight"
>
<div
class=
"dateEleSpace"
></div>
<div
class=
"cities"
>
...
...
@@ -755,58 +831,120 @@
</div>
<div
class=
"agendaSection"
>
<div
class=
"slideSubHeader"
>
<span
class=
"subTitle"
>
D
3
日程安排
</span>
<span
class=
"subTitle"
>
D
{{index+1}}
日程安排
</span>
</div>
<div
class=
"tripViewAgendaList"
>
<div
class=
"agendaBox"
>
<div
class=
"indexNum tos-icon hotelPre "
>
<i
class=
"iconfont icon-sun"
></i>
</div>
<!--
<div
class=
"coverWrap"
:style=
"`background: url($
{defaultImg}) no-repeat 100% 100%`">
</div>
-->
<div
class=
"coverWrap"
></div>
<div
class=
"txtCont icon-triangle"
>
<div
class=
"agendaPoi"
>
<i
class=
"iconfont icon-bed bed"
></i>
<span
class=
"title"
>
皇家花园酒店-THE羽田
</span>
</div>
<div
class=
"detailBox"
>
<div
class=
"detailSection"
>
<div
class=
"item"
>
<span
class=
"label"
>
酒店星级
</span>
<span
class=
"text"
>
<i
class=
"iconfont "
></i>
</span>
<
template
v-for=
"subItem in item.dayArray"
>
<template
v-if=
"subItem.type==2"
>
<div
class=
"agendaBox"
>
<div
class=
"indexNum numberList"
>
{{
index
+
1
}}
</div>
<div
class=
"coverWrap"
:style=
"`background: url($
{subItem.childItem.imaArray[0].url}) no-repeat 100% 100%`">
</div>
<div
class=
"txtCont icon-triangle"
>
<div
class=
"detailBox"
>
<div
style=
"border-top:0;margin:20px 0;"
v-html=
'subItem.childItem.descriptionText'
></div>
</div>
<div
class=
"item"
>
<span
class=
"label"
>
设施服务
</span>
<span
class=
"text"
>
<i
class=
"iconfont"
></i>
</span>
<div
class=
"Divtriangle"
>
<span></span>
</div>
<div
class=
"detailSection"
style=
"margin-top:0;"
>
<div
class=
"item"
>
<span
class=
"label"
>
建议游玩时间
</span>
<span
class=
"text"
>
{{
subItem
.
childItem
.
playTimeMinutes
}}
</span>
</div>
</div>
</div>
<div
class=
"subSection"
>
皇家花园酒店-THE羽田是游览东京的完美住宿选择。 酒店内设施齐全,可为住客提供舒适的入住体验。 一切生活必需品,例如免费房内无线网络, 24小时前台, 无障碍设施, 行李存放服务, 无线网络(公共区域)等都已为您准备就绪。客房内饰优雅,便利设施齐全。 酒店内设多种休闲娱乐设施。 不论您出行东京的原因为何,皇家花园酒店-THE羽田都可让您感受到家的温馨与舒适。
</div>
</
template
>
<!-- <div class="agendaBox">
<i class="indexNum iconfont icon-003lubiao agendIndex"></i>
<div class="txtCont icon-triangle">
<div class="longTransitPoi">
<div class="left">
<div class="method">
<i class="iconfont icon-circle"></i>
</div>
</div>
<div class="right">
<div class="city">西安</div>
<div class="poiName">西安咸阳国际机场</div>
<div class="time">出发时间:12:40</div>
</div>
</div>
<div
class=
"detailSection"
style=
"margin-top:0;"
>
<div
class=
"item"
>
<span
class=
"label"
>
英文名称
</span>
<span
class=
"text"
>
Royal Park Hotel The Haneda Tokyo
</span>
<div class="longTransitMethod">
<div class="left">
<div class="frame">
<i class="iconfont icon-longarrowdown"></i>
</div>
<div class="method">
<i class="iconfont icon-feiji1" style="font-size:18px;"></i>
</div>
</div>
<div
class=
"
item
"
>
<
span
class=
"label"
>
地址
</span
>
<
span
class=
"text"
>
大田区羽田空港2-6-5 羽田空港国際線旅客ターミナルビル内,
</span
>
<div class="
right
">
<
div class="name">KE808</div
>
<
div class="time"></div
>
</div>
<div
class=
"item"
>
<span
class=
"label"
>
开放时间
</span>
<span
class=
"text"
>
入住时间:从15:00时退房时间:11:00时之前
</span>
</div>
<div class="longTransitPoi">
<div class="left">
<i class="iconfont icon-dizhi" style="font-size:15px;"></i>
</div>
<div class="right">
<div class="city">首尔</div>
<div class="poiName">仁川国际机场</div>
<div class="time">到达时间:16:50</div>
</div>
</div>
</div>
<div
class=
"Divtriangle"
>
<span></span>
</div> -->
<
template
v-if=
"subItem.type==3"
>
<div
class=
"agendaBox"
>
<div
class=
"indexNum tos-icon hotelPre "
>
<i
class=
"iconfont icon-sun"
></i>
</div>
<div
class=
"coverWrap"
v-if=
"subItem.childItem.imaArray.length>0"
:style=
"`background: url($
{subItem.childItem.imaArray[0].url}) no-repeat 100% 100%`">
</div>
<div
class=
"txtCont icon-triangle"
v-if=
"subItem.childItem.imaArray.length>0"
>
<div
class=
"agendaPoi"
>
<i
class=
"iconfont icon-bed bed"
></i>
<span
class=
"title"
>
{{
subItem
.
childItem
.
hotelName
}}
</span>
</div>
<div
class=
"detailBox"
>
<div
class=
"detailSection"
>
<div
class=
"item"
>
<span
class=
"label"
>
酒店星级
</span>
<span
class=
"text"
>
<el-rate
v-model=
"subItem.childItem.star"
disabled
></el-rate>
</span>
</div>
<div
class=
"item"
>
<span
class=
"label"
>
设施服务
</span>
<span
class=
"text"
>
{{
getService
(
subItem
.
childItem
.
facilityServices
)
}}
</span>
</div>
</div>
<div
class=
"subSection"
>
{{
subItem
.
childItem
.
descriptionText
}}
</div>
<div
class=
"detailSection"
style=
"margin-top:0;"
>
<div
class=
"item"
>
<span
class=
"label"
>
地址
</span>
<span
class=
"text"
>
{{
subItem
.
childItem
.
hotelAddress
}}
</span>
</div>
<div
class=
"item"
>
<span
class=
"label"
>
网址
</span>
<span
class=
"text"
>
{{
subItem
.
childItem
.
url
}}
</span>
</div>
<!--
<div
class=
"item"
>
<span
class=
"label"
>
开放时间
</span>
<span
class=
"text"
>
入住时间:从15:00时退房时间:11:00时之前
</span>
</div>
-->
</div>
</div>
<div
class=
"Divtriangle"
>
<span></span>
</div>
</div>
</div>
</div>
</div>
<div
class=
"agendaBox"
>
</
template
>
</template>
<!-- <div class="agendaBox">
<div class="indexNum numberList">1</div>
<div class="coverWrap"></div>
<div class="txtCont icon-triangle">
...
...
@@ -875,7 +1013,7 @@
<span></span>
</div>
</div>
</div>
</div>
-->
</div>
</div>
</div>
...
...
@@ -884,27 +1022,125 @@
</div>
</div>
<div
class=
"viewTripMap"
>
<
HTMap
:dataList=
"travelLngLat"
:type=
"1"
></HT
Map>
<
tripMap
:dataList=
"travelLngLat"
:type=
"1"
ref=
"tripMap"
></trip
Map>
</div>
</div>
</div>
</template>
<
script
>
import
HTMap
from
'../global/HTMap'
import
tripMap
from
'../global/tripMap'
// import HTMap from '../global/HTMap'
export
default
{
data
(){
return
{
defaultImg
:
'this.src="'
+
require
(
'../../assets/img/newtrip/hotel.jpg'
)
+
'"'
,
travelLngLat
:[]
travelLngLat
:[],
//请求参数
msg
:{
ID
:
0
,
tcid
:
0
},
dataList
:{},
scrollobj
:
null
,
crtnav
:
''
,
isShow
:
false
}
},
mounted
()
{
this
.
msg
.
ID
=
this
.
$route
.
query
.
ID
;
this
.
msg
.
tcid
=
this
.
$route
.
query
.
tcid
;
this
.
crtnav
=
'tripLine'
;
this
.
scrollobj
=
document
.
getElementsByClassName
(
'el-scrollbar__wrap'
)[
0
];
this
.
scrollobj
.
addEventListener
(
'scroll'
,
this
.
handleScroll
);
this
.
getTrip
();
},
components
:
{
HT
Map
trip
Map
},
methods
:
{
//加载数据
getTrip
(){
this
.
apipost
(
'b2b_get_GetB2BTravelInfoV1'
,
this
.
msg
,
res
=>
{
console
.
log
(
res
);
if
(
res
.
data
.
resultCode
==
1
)
{
this
.
dataList
=
res
.
data
.
data
;
this
.
isShow
=
true
;
this
.
getAllPoint
();
// this.$refs.tripMap.mapBuild();
}
else
{
this
.
Error
(
res
.
data
.
message
)
}
},
null
)
},
//遍历设施服务
getService
(
item
){
let
Obj
=
JSON
.
parse
(
item
);
let
str
=
''
Obj
[
0
].
list
.
forEach
(
x
=>
{
str
+=
x
.
Content
+
' '
;
});
return
str
;
},
//滚动定位
goScroll
(
id
,
index
)
{
if
(
id
==
'tripLine'
||
id
==
'aboutTrip'
||
id
==
'tripArrange'
){
this
.
$refs
.
tripMap
.
mapBuild
();
}
this
.
crtnav
=
id
;
this
.
scrollobj
.
scrollTop
=
document
.
getElementById
(
id
).
offsetTop
;
},
//加载所有坐标点
getAllPoint
(){
let
Arr
=
[];
this
.
dataList
.
dayList
.
forEach
(
x
=>
{
x
.
dayArray
.
forEach
(
y
=>
{
if
(
y
.
type
==
1
){
y
.
childItem
.
subTraffic
.
forEach
(
z
=>
{
let
obj1
=
{
lat
:
z
.
startCityPoint
[
1
],
lng
:
z
.
startCityPoint
[
0
],
name
:
z
.
arrivalCityName
,
type
:
1
}
let
obj2
=
{
lat
:
z
.
arrivalCityPoint
[
1
],
lng
:
z
.
arrivalCityPoint
[
0
],
name
:
z
.
startCityName
,
type
:
1
}
Arr
.
push
(
obj1
);
Arr
.
push
(
obj2
);
})
}
})
})
console
.
log
(
Arr
,
'Arrrr'
);
this
.
travelLngLat
=
Arr
;
},
//滚动选中
handleScroll
()
{
try
{
let
navs
=
[
'tripLine'
,
'aboutTrip'
,
'tripArrange'
];
this
.
dataList
.
dayList
.
forEach
((
x
,
index
)
=>
{
navs
.
push
(
'dayList'
+
index
+
1
)
})
let
current
=
''
navs
.
forEach
(
x
=>
{
let
t
=
document
.
getElementById
(
x
).
offsetTop
if
(
t
<=
this
.
scrollobj
.
scrollTop
)
{
current
=
x
}
})
this
.
crtnav
=
current
}
catch
(
error
)
{
}
},
}
}
...
...
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