Skip to content

A
Athena
Commit 7615a005 authored by zhengke's avatar zhengke
Browse files
Options

页面修改

parent da117cd2
Hide whitespace changes
Inline Side-by-side
Showing with 217 additions and 210 deletions
src/components/global/tripMap.vue
View file @ 7615a005
<style> <style>
.markers_labels{ .markers_labels {
margin-left: -24px !important; margin-left: -24px !important;
margin-top: -43px !important; margin-top: -43px !important;
} }
.gm-svpc,.gm-style-mtc,.gm-style-cc{
.gm-svpc,
.gm-style-mtc,
.gm-style-cc {
display: none; display: none;
} }
</style> </style>
<template> <template>
<div style="height:100%;"> <div style="height:100%;">
<div id="map_canvas" style="height: 100%; width: 100%"></div> <div id="map_canvas" style="height: 100%; width: 100%"></div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props:["dataList"], props: ["dataList"],
name: 'tripMap', name: 'tripMap',
data(){ data() {
return{ return {
show:false, show: false,
directionsService: new google.maps.DirectionsService(), directionsService: new google.maps.DirectionsService(),
directionsDisplay: new google.maps.DirectionsRenderer(), directionsDisplay: new google.maps.DirectionsRenderer(),
map:{}, map: {},
} }
}, },
watch:{ watch: {
dataList(newValue,old){ dataList(newValue, old) {
this.mapBuild() this.mapBuild()
} }
}, },
created(){ created() {
},
destroyed: function() {
}, },
mounted(){ destroyed: function () {
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."); mounted() {
} console.log(this.dataList, 'datalist组件');
}) this.mapBuild() //初始化实例之后调用
}, },
// 地图实例 methods: {
mapBuild(){ getDetailsRoutes(source, destination, map) {
let lat = parseFloat(this.dataList[0].lat) service = new google.maps.DistanceMatrixService();
let lng = parseFloat(this.dataList[0].lng) 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;
// let lat = parseFloat(this.dataList[0].lat) } else {
// let lng = parseFloat(this.dataList[0].lng) alert("Unable to find the distance via road.");
let center = {lng: lng, lat: lat} }
//创建地图实例，zoom是缩放比例 })
},
// 地图实例
mapBuild() {
if (this.dataList && this.dataList.length > 0) {
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'), { this.map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7, zoom: 7,
center: center, center: center,
...@@ -85,7 +92,7 @@ ...@@ -85,7 +92,7 @@
// } // }
// let poly = new google.maps.Polyline(polyOptions); // let poly = new google.maps.Polyline(polyOptions);
// poly.setMap(map); // 装载 // poly.setMap(map); // 装载
// 遍历循环创建标记 // 遍历循环创建标记
// this.dataList.map(item=>{ // this.dataList.map(item=>{
// // let lat = parseFloat(item.lat) // // let lat = parseFloat(item.lat)
// // let lng = parseFloat(item.lng) // // let lng = parseFloat(item.lng)
...@@ -111,45 +118,46 @@ ...@@ -111,45 +118,46 @@
// }) // })
this.directionsDisplay.setMap(this.map); this.directionsDisplay.setMap(this.map);
this.calcRoute() this.calcRoute()
}, }
calcRoute: function() { // 创建路径规划
// 分解数据 获得起 止 以及中间数据 },
console.log(this.dataList,'加载后....'); calcRoute: function () { // 创建路径规划
let lat = parseFloat(this.dataList[0].lat) // 分解数据 获得起 止 以及中间数据
let lng = parseFloat(this.dataList[0].lng) console.log(this.dataList, '加载后....');
let elat = parseFloat(this.dataList[this.dataList.length-1].lat) let lat = parseFloat(this.dataList[0].lat)
let elng = parseFloat(this.dataList[this.dataList.length-1].lng) let lng = parseFloat(this.dataList[0].lng)
let _this = this; let elat = parseFloat(this.dataList[this.dataList.length - 1].lat)
let start = lat + ',' + lng; let elng = parseFloat(this.dataList[this.dataList.length - 1].lng)
let end = elat + ',' + elng; let _this = this;
let waypoints = []; let start = lat + ',' + lng;
if (this.dataList.length > 2) { let end = elat + ',' + elng;
this.dataList.forEach((x, index) => { let waypoints = [];
if (index >= 1 && index !== (this.dataList.length-1)) { if (this.dataList.length > 2) {
let obj = { this.dataList.forEach((x, index) => {
location: x.lat + ',' + x.lng if (index >= 1 && index !== (this.dataList.length - 1)) {
} let obj = {
waypoints.push(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);
} }
}); });
}, }
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> }
</script>
\ No newline at end of file
src/components/mall/newTrip.vue
View file @ 7615a005
...@@ -644,6 +644,7 @@ ...@@ -644,6 +644,7 @@
background: url('../../assets/img/newtrip/agendaBorder.png'); background: url('../../assets/img/newtrip/agendaBorder.png');
background-size:2px auto; background-size:2px auto;
} */ } */
.tripViewAgendaList .agendaBox .numberList { .tripViewAgendaList .agendaBox .numberList {
background: #00A4A8; background: #00A4A8;
color: #fff; color: #fff;
...@@ -829,15 +830,14 @@ ...@@ -829,15 +830,14 @@
<div class="border"></div> <div class="border"></div>
</div> </div>
<ul> <ul>
<li v-for="(item,index) in dataList.dayList" :class="crtnav=='dayList'+(index+1)?'active':''" <li v-for="(item,index) in dataList.dayList" :key="index" :class="crtnav=='dayList'+(index+1)?'active':''" @click="goScroll('dayList'+(index+1),index)">
@click="goScroll('dayList'+(index+1),index)">
<span class="dayIndex">D{{index+1}}</span> <span class="dayIndex">D{{index+1}}</span>
<template v-for="suItem in item.dayArray"> <template v-for="(suItem,subIndex) in item.dayArray">
<template v-if="suItem.type==1" v-for="(childItem,index) in suItem.childItem.subTraffic"> <template v-if="suItem.type==1" v-for="(childItem,childIndex) in suItem.childItem.subTraffic">
<template v-if="index==0"> <template v-if="childIndex==0">
<span class="city" :key="index">{{childItem.startCityName}}</span> <span class="city">{{childItem.startCityName}}</span>
<i :key="index">-</i> <i>-</i>
<span class="city" :key="index">{{childItem.arrivalCityName}}</span> <span class="city">{{childItem.arrivalCityName}}</span>
<i>-</i> <i>-</i>
</template> </template>
<template v-else> <template v-else>
...@@ -858,15 +858,14 @@ ...@@ -858,15 +858,14 @@
<div class="slideHeader">行程路线</div> <div class="slideHeader">行程路线</div>
<div> <div>
<div class="cityDayList clear"> <div class="cityDayList clear">
<div class="tripDay" v-for="(item,index) in dataList.dayList"> <div class="tripDay" v-for="(item,index) in dataList.dayList" :key="index">
<div class="left"> <div class="left">
<div class="dayIndex">D{{index+1}}</div> <div class="dayIndex">D{{index+1}}</div>
</div> </div>
<div class="cities"> <div class="cities">
<template v-for="suItem in item.dayArray"> <template v-for="suItem in item.dayArray">
<template v-if="suItem.type==1" <template v-if="suItem.type==1" v-for="(childItem,childIndex) in suItem.childItem.subTraffic">
v-for="(childItem,index) in suItem.childItem.subTraffic"> <template v-if="childIndex==0">
<template v-if="index==0">
<span class="city">{{childItem.startCityName}}</span> <span class="city">{{childItem.startCityName}}</span>
<i class="iconfont icon-daoda icon"></i> <i class="iconfont icon-daoda icon"></i>
<span class="city">{{childItem.arrivalCityName}}</span> <span class="city">{{childItem.arrivalCityName}}</span>
...@@ -908,11 +907,12 @@ ...@@ -908,11 +907,12 @@
<span class="subTitle">交通方案</span> <span class="subTitle">交通方案</span>
</div> </div>
</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-if="dataList.currentPriceInfo.priceFlight&&dataList.currentPriceInfo.priceFlight!=null" v-for="(item,index) in dataList.currentPriceInfo.priceFlight" :key="index">
v-for="(item,index) in dataList.currentPriceInfo.priceFlight">
<div class="arrangementSubContainer"> <div class="arrangementSubContainer">
<div class="header"><span class="dayIndex">D{{index+1}}</span></div> <div class="header">
<span class="dayIndex">D{{index+1}}</span>
</div>
<div class="content"> <div class="content">
<div class="name transit">{{item.flightNumber}}</div> <div class="name transit">{{item.flightNumber}}</div>
<div class="fromTo"> <div class="fromTo">
...@@ -942,21 +942,21 @@ ...@@ -942,21 +942,21 @@
<span class="subTitle">酒店安排</span> <span class="subTitle">酒店安排</span>
</div> </div>
<template v-for="(item,index) in dataList.dayList"> <template v-for="(item,index) in dataList.dayList">
<template v-for="(subItem,subIndex) in item.dayArray" <template v-for="(subItem,subIndex) in item.dayArray" v-if="subItem.type==3">
v-if="subItem.type==3">
<div class="col-md-12 col-sm-12"> <div class="col-md-12 col-sm-12">
<div class="arrangementSubContainer"> <div class="arrangementSubContainer">
<div class="header hotel"> <div class="header hotel">
<span class="dayIndex">D{{item.dayNum}}</span> <span class="dayIndex">D{{item.dayNum}}</span>
<div class="city"> <div class="city">
<span>{{subItem.childItem.cityName}}</span></div> <span>{{subItem.childItem.cityName}}</span>
</div>
</div> </div>
<div class="content"> <div class="content">
<div class="name hotel"> <div class="name hotel">
<span class="left"><i <span class="left">
class="iconfont icon-bed"></i></span> <i class="iconfont icon-bed"></i>
<span </span>
class="right">{{subItem.childItem.newHotelName}}</span> <span class="right">{{subItem.childItem.newHotelName}}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -968,7 +968,7 @@ ...@@ -968,7 +968,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="swiper-slide" v-for="(item,index) in dataList.dayList" :id="'dayList'+(index+1)"> <div class="swiper-slide" v-for="(item,index) in dataList.dayList" :id="'dayList'+(index+1)" :key="index">
<div class="inner"> <div class="inner">
<div class="slideHeader" style="position:relative;"> <div class="slideHeader" style="position:relative;">
<div class="dayNum">D{{index+1}}</div> <div class="dayNum">D{{index+1}}</div>
...@@ -976,9 +976,8 @@ ...@@ -976,9 +976,8 @@
<div class="dateEleSpace"></div> <div class="dateEleSpace"></div>
<div class="cities"> <div class="cities">
<template v-for="suItem in item.dayArray"> <template v-for="suItem in item.dayArray">
<template v-if="suItem.type==1" <template v-if="suItem.type==1" v-for="(childItem,childIndex) in suItem.childItem.subTraffic">
v-for="(childItem,index) in suItem.childItem.subTraffic"> <template v-if="childIndex==0">
<template v-if="index==0">
<span class="city">{{childItem.startCityName}}</span> <span class="city">{{childItem.startCityName}}</span>
<i class="iconfont icon-daoda icon"></i> <i class="iconfont icon-daoda icon"></i>
<span class="city">{{childItem.arrivalCityName}}</span> <span class="city">{{childItem.arrivalCityName}}</span>
...@@ -1008,86 +1007,84 @@ ...@@ -1008,86 +1007,84 @@
<template v-if="subItem.type==2"> <template v-if="subItem.type==2">
<div class="agendaBox"> <div class="agendaBox">
<div class="indexNum numberList">{{index+1}}</div> <div class="indexNum numberList">{{index+1}}</div>
<div class="coverWrap" <div class="coverWrap" :style="`background: url(${subItem.childItem.imaArray[0].url}) no-repeat 100% 100%`">
:style="`background: url(${subItem.childItem.imaArray[0].url}) no-repeat 100% 100%`">
</div> </div>
<div class="txtCont icon-triangle"> <div class="txtCont icon-triangle">
<div class="detailBox"> <div class="detailBox">
<div style="border-top:0;margin:20px 0;" <div style="border-top:0;margin:20px 0;" v-html='subItem.childItem.descriptionText'></div>
v-html='subItem.childItem.descriptionText'></div>
</div> </div>
<div class="Divtriangle"> <div class="Divtriangle">
<span></span> <span></span>
</div> </div>
<div class="detailSection" style="margin-top:0;" <div class="detailSection" style="margin-top:0;" v-if="subItem.childItem.playTimeHour||subItem.childItem.playTimeMinutes">
v-if="subItem.childItem.playTimeHour||subItem.childItem.playTimeMinutes">
<div class="item"> <div class="item">
<span class="label">建议游玩时间</span> <span class="label">建议游玩时间</span>
<span class="text">约<template v-if="subItem.childItem.playTimeHour">{{subItem.childItem.playTimeHour}}小时</template><template v-if="subItem.childItem.playTimeMinutes">{{subItem.childItem.playTimeMinutes}}分钟</template></span> <span class="text">约
</div> <template v-if="subItem.childItem.playTimeHour">{{subItem.childItem.playTimeHour}}小时</template>
</div> <template
</div> v-if="subItem.childItem.playTimeMinutes">{{subItem.childItem.playTimeMinutes}}分钟</template>
</span>
</div>
</div>
</div>
</div>
</template>
<template v-if="subItem.type==3">
<div class="agendaBox">
<div class="indexNum tos-icon hotelPre ">
<i class="iconfont icon-moono"></i>
</div> </div>
</template> <div class="coverWrap" v-if="subItem.childItem.imaArray.length>0" :style="`background: url(${subItem.childItem.imaArray[0].url}) no-repeat 100% 100%`">
<template v-if="subItem.type==3"> </div>
<div class="agendaBox"> <div class="txtCont icon-triangle" v-if="subItem.childItem.imaArray.length>0">
<div class="indexNum tos-icon hotelPre "> <div class="agendaPoi">
<i class="iconfont icon-moono"></i> <i class="iconfont icon-bed bed"></i>
</div> <span class="title">{{subItem.childItem.newHotelName}}</span>
<div class="coverWrap" v-if="subItem.childItem.imaArray.length>0"
:style="`background: url(${subItem.childItem.imaArray[0].url}) no-repeat 100% 100%`">
</div> </div>
<div class="txtCont icon-triangle" <div class="detailBox">
v-if="subItem.childItem.imaArray.length>0"> <div class="detailSection">
<div class="agendaPoi"> <div class="item">
<i class="iconfont icon-bed bed"></i> <span class="label">酒店星级</span>
<span class="title">{{subItem.childItem.newHotelName}}</span> <span class="text">
</div> <el-rate v-model="subItem.childItem.star" disabled></el-rate>
<div class="detailBox"> </span>
<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>
<div class="subSection" v-if="subItem.childItem.hotelNewDescriptionText">{{subItem.childItem.hotelNewDescriptionText}}</div> <div class="item">
<div class="detailSection" style="margin-top:0;"> <span class="label">设施服务</span>
<div class="item"> <span class="text">{{getService(subItem.childItem.facilityServices)}}</span>
<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> </div>
</div> </div>
<div class="Divtriangle"> <div class="subSection" v-if="subItem.childItem.hotelNewDescriptionText">{{subItem.childItem.hotelNewDescriptionText}}</div>
<span></span> <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> </div>
</div> </div>
<div class="Divtriangle">
<span></span>
</div>
</div> </div>
</template> </div>
</template> </template>
</div> </template>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="viewTripMap"> </div>
<tripMap :dataList="travelLngLat" :type="1" ref="tripMap"></tripMap> <div class="viewTripMap">
</div> <tripMap :dataList="travelLngLat" :type="1" ref="tripMap"></tripMap>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import tripMap from '../global/tripMap' import tripMap from '../global/tripMap'
...@@ -1176,28 +1173,30 @@ ...@@ -1176,28 +1173,30 @@
//加载所有坐标点 //加载所有坐标点
getAllPoint() { getAllPoint() {
let Arr = []; let Arr = [];
this.dataList.dayList.forEach(x => { if (this.dataList && this.dataList.length > 0) {
x.dayArray.forEach(y => { this.dataList.dayList.forEach(x => {
if (y.type == 1) { x.dayArray.forEach(y => {
y.childItem.subTraffic.forEach(z => { if (y.type == 1) {
let obj1 = { y.childItem.subTraffic.forEach(z => {
lat: z.startCityPoint[1], let obj1 = {
lng: z.startCityPoint[0], lat: z.startCityPoint[1],
name: z.arrivalCityName, lng: z.startCityPoint[0],
type: 1 name: z.arrivalCityName,
} type: 1
let obj2 = { }
lat: z.arrivalCityPoint[1], let obj2 = {
lng: z.arrivalCityPoint[0], lat: z.arrivalCityPoint[1],
name: z.startCityName, lng: z.arrivalCityPoint[0],
type: 1 name: z.startCityName,
} type: 1
Arr.push(obj1); }
Arr.push(obj2); Arr.push(obj1);
}) Arr.push(obj2);
} })
}
})
}) })
}) }
console.log(Arr, 'Arrrr'); console.log(Arr, 'Arrrr');
this.travelLngLat = Arr; this.travelLngLat = Arr;
}, },
......
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