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>
.markers_labels{
.markers_labels {
margin-left: -24px !important;
margin-top: -43px !important;
}
.gm-svpc,.gm-style-mtc,.gm-style-cc{
.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>
<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() {
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() {
},
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;
},
destroyed: function () {
} else {
alert("Unable to find the distance via road.");
}
})
},
// 地图实例
mapBuild(){
let lat = parseFloat(this.dataList[0].lat)
let lng = parseFloat(this.dataList[0].lng)
},
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;
// let lat = parseFloat(this.dataList[0].lat)
// let lng = parseFloat(this.dataList[0].lng)
let center = {lng: lng, lat: lat}
//创建地图实例，zoom是缩放比例
} else {
alert("Unable to find the distance via road.");
}
})
},
// 地图实例
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'), {
zoom: 7,
center: center,
......@@ -85,7 +92,7 @@
// }
// let poly = new google.maps.Polyline(polyOptions);
// poly.setMap(map); // 装载
// 遍历循环创建标记
// 遍历循环创建标记
// this.dataList.map(item=>{
// // let lat = parseFloat(item.lat)
// // let lng = parseFloat(item.lng)
......@@ -111,45 +118,46 @@
// })
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)
}
},
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
}
});
}
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);
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>
},
}
</script>
\ No newline at end of file
src/components/mall/newTrip.vue
View file @ 7615a005
......@@ -644,6 +644,7 @@
background: url('../../assets/img/newtrip/agendaBorder.png');
background-size:2px auto;
} */
.tripViewAgendaList .agendaBox .numberList {
background: #00A4A8;
color: #fff;
......@@ -829,15 +830,14 @@
<div class="border"></div>
</div>
<ul>
<li v-for="(item,index) in dataList.dayList" :class="crtnav=='dayList'+(index+1)?'active':''"
@click="goScroll('dayList'+(index+1),index)">
<li v-for="(item,index) in dataList.dayList" :key="index" :class="crtnav=='dayList'+(index+1)?'active':''" @click="goScroll('dayList'+(index+1),index)">
<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" :key="index">{{childItem.startCityName}}</span>
<i :key="index">-</i>
<span class="city" :key="index">{{childItem.arrivalCityName}}</span>
<template v-for="(suItem,subIndex) in item.dayArray">
<template v-if="suItem.type==1" v-for="(childItem,childIndex) in suItem.childItem.subTraffic">
<template v-if="childIndex==0">
<span class="city">{{childItem.startCityName}}</span>
<i>-</i>
<span class="city">{{childItem.arrivalCityName}}</span>
<i>-</i>
</template>
<template v-else>
......@@ -858,15 +858,14 @@
<div class="slideHeader">行程路线</div>
<div>
<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="dayIndex">D{{index+1}}</div>
</div>
<div class="cities">
<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">
<template v-if="suItem.type==1" v-for="(childItem,childIndex) in suItem.childItem.subTraffic">
<template v-if="childIndex==0">
<span class="city">{{childItem.startCityName}}</span>
<i class="iconfont icon-daoda icon"></i>
<span class="city">{{childItem.arrivalCityName}}</span>
......@@ -908,11 +907,12 @@
<span class="subTitle">交通方案</span>
</div>
</div>
<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="col-md-12 col-sm-12" v-if="dataList.currentPriceInfo.priceFlight&&dataList.currentPriceInfo.priceFlight!=null"
v-for="(item,index) in dataList.currentPriceInfo.priceFlight" :key="index">
<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="name transit">{{item.flightNumber}}</div>
<div class="fromTo">
......@@ -942,21 +942,21 @@
<span class="subTitle">酒店安排</span>
</div>
<template v-for="(item,index) in dataList.dayList">
<template v-for="(subItem,subIndex) in item.dayArray"
v-if="subItem.type==3">
<template v-for="(subItem,subIndex) in item.dayArray" v-if="subItem.type==3">
<div class="col-md-12 col-sm-12">
<div class="arrangementSubContainer">
<div class="header hotel">
<span class="dayIndex">D{{item.dayNum}}</span>
<div class="city">
<span>{{subItem.childItem.cityName}}</span></div>
<span>{{subItem.childItem.cityName}}</span>
</div>
</div>
<div class="content">
<div class="name hotel">
<span class="left"><i
class="iconfont icon-bed"></i></span>
<span
class="right">{{subItem.childItem.newHotelName}}</span>
<span class="left">
<i class="iconfont icon-bed"></i>
</span>
<span class="right">{{subItem.childItem.newHotelName}}</span>
</div>
</div>
</div>
......@@ -968,7 +968,7 @@
</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="slideHeader" style="position:relative;">
<div class="dayNum">D{{index+1}}</div>
......@@ -976,9 +976,8 @@
<div class="dateEleSpace"></div>
<div class="cities">
<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">
<template v-if="suItem.type==1" v-for="(childItem,childIndex) in suItem.childItem.subTraffic">
<template v-if="childIndex==0">
<span class="city">{{childItem.startCityName}}</span>
<i class="iconfont icon-daoda icon"></i>
<span class="city">{{childItem.arrivalCityName}}</span>
......@@ -1008,86 +1007,84 @@
<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 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 style="border-top:0;margin:20px 0;" v-html='subItem.childItem.descriptionText'></div>
</div>
<div class="Divtriangle">
<span></span>
</div>
<div class="detailSection" style="margin-top:0;"
v-if="subItem.childItem.playTimeHour||subItem.childItem.playTimeMinutes">
<div class="detailSection" style="margin-top:0;" v-if="subItem.childItem.playTimeHour||subItem.childItem.playTimeMinutes">
<div class="item">
<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>
</div>
</div>
</div>
<span class="text">约
<template v-if="subItem.childItem.playTimeHour">{{subItem.childItem.playTimeHour}}小时</template>
<template
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>
</template>
<template v-if="subItem.type==3">
<div class="agendaBox">
<div class="indexNum tos-icon hotelPre ">
<i class="iconfont icon-moono"></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 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.newHotelName}}</span>
</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.newHotelName}}</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 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="subSection" v-if="subItem.childItem.hotelNewDescriptionText">{{subItem.childItem.hotelNewDescriptionText}}</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">{{getService(subItem.childItem.facilityServices)}}</span>
</div>
</div>
<div class="Divtriangle">
<span></span>
<div class="subSection" v-if="subItem.childItem.hotelNewDescriptionText">{{subItem.childItem.hotelNewDescriptionText}}</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>
</div>
<div class="Divtriangle">
<span></span>
</div>
</div>
</template>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="viewTripMap">
<tripMap :dataList="travelLngLat" :type="1" ref="tripMap"></tripMap>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="viewTripMap">
<tripMap :dataList="travelLngLat" :type="1" ref="tripMap"></tripMap>
</div>
</div>
</div>
</template>
<script>
import tripMap from '../global/tripMap'
......@@ -1176,28 +1173,30 @@
//加载所有坐标点
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);
})
}
if (this.dataList && this.dataList.length > 0) {
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;
},
......
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