Skip to content

A
Athena
Commit 7f727df7 authored by zhengke's avatar zhengke
Browse files
Options

修改

parent 3c469f01
Hide whitespace changes
Inline Side-by-side
Showing with 511 additions and 120 deletions
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">D1</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>&nbsp;&nbsp;亲爱的旅行家，你好呀，我是你路途中最忠实的朋友。在清闲午后，在落日黄昏，一杯清茶，你翻开手中书卷，悄无声息中和我踏上美妙的旅途，我们时常作伴，把酒言欢，在异域街头，我为你收集温暖❤&nbsp;</p>
<p>&nbsp;&nbsp;所以，就让这一切变成一条路，你去走走看看.</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">D1</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">D2</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">D3 日程安排</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"></HTMap>
<tripMap :dataList="travelLngLat" :type="1" ref="tripMap"></tripMap>
</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: {
HTMap
tripMap
},
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) {
}
},
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment