-
+
+
+ 我的
行程
+
+
添加
行程
@@ -39,7 +43,7 @@
-
+
@@ -68,7 +72,16 @@
-
+
+
+
+
+
@@ -77,10 +90,12 @@
import moment from 'moment'
import ProductDetail from './compoents/productDetail'
import LineRoute from './compoents/lineRoute'
+ import LineDetail from './compoents/lineDetail'
export default {
components: {
ProductDetail,
- LineRoute
+ LineRoute,
+ LineDetail
},
data() {
return {
@@ -88,11 +103,13 @@
mapMarker: null,
basics: {},
mapType: [],
+ typeShow: true,
typeIndex: -1,
areaList: [],
areaIndex: 0,
areaMore: true,
detailShow: false, // 详情弹框
+ productType: true,
addLineShow: false, // 输入线路名称和日期弹框
lineName: '',
lineDate: '',
@@ -100,12 +117,30 @@
currentDate: new Date(),
lineRouteShow: false, // 添加线路行程弹框
lineAddStatus: false, // 点击添加行程时为true，地图景点图标改变为加号
- lineId: '',
+ addLineInfo: '',
maps: [], //热点
+ lineDetailShow: false, // 线路弹框
+ lineInfo: {},
+ detailInfo: {},
+ audioSrc: '',
+ genreType: '',
+ isMyLine: false, // 是否有我的线路
};
},
mounted() {
+ // if(this.$route.query.token) this.$store.commit('changeUserInfo', {token: 'e80c8c0b-7631-4554-b5be-1f946b42dd8a'})
+ this.$store.commit('changeUserInfo', {token: 'e80c8c0b-7631-4554-b5be-1f946b42dd8a'})
this.getAreaList()
+
+ // 判断是否是线路列表过来的
+ if(sessionStorage.getItem('lineDetail') && JSON.parse(sessionStorage.getItem('lineDetail')).points.length > 0) {
+ setTimeout(() => {
+ this.showLineDetail()
+ },500)
+ }
+ },
+ activated() {
+
},
methods: {
// 获取全部区域
@@ -115,13 +150,18 @@
if (res.data.length > 0) {
this.getAreaDetail()
this.getCategory()
+ this.getMyLine()
}
})
},
// 更改地图区域
changeArea(index) {
this.areaIndex = index
+ // 销毁地图
+ this.mapObj.destroy()
this.getAreaDetail()
+ this.getCategory()
+ this.getMyLine()
},
// 根据code获取当前区域信息
getAreaDetail() {
@@ -142,8 +182,8 @@
this.post({
code: this.areaList[this.areaIndex].code
}, '/api/emap/getByCategory').then(res => {
- this.mapType = Array.from(res.data)
- if(this.mapType.length > 0) this.getSpotsByCategory(0)
+ this.mapType = res.data
+ if (this.mapType.length > 0) this.getSpotsByCategory(0)
})
},
// 根据code、热点分类获取热点
@@ -152,12 +192,25 @@
this.post({
code: this.areaList[this.areaIndex].code,
category_id: this.mapType[this.typeIndex].id
- },'/api/emap/getSpotsByCategory').then(res => {
- console.log(res)
+ }, '/api/emap/getSpotsByCategory').then(res => {
this.maps = res.data
+ this.lineAddStatus = false
// 移除原先点位
this.clearMarkers()
- if(this.maps.length > 0) this.setMarkers()
+ if (this.maps.length > 0) this.setMarkers()
+ })
+ },
+ // 查询是否有我的线路
+ getMyLine() {
+ this.post({
+ type: 1,
+ code: this.areaList[this.areaIndex].code
+ },'/api/emap/getLineByCode').then(res => {
+ if(res.data.length > 0) {
+ this.isMyLine = true
+ }else {
+ this.isMyLine = false
+ }
})
},
initMap() {
@@ -231,16 +284,20 @@
// position: new TMap.LatLng(33.329281, 120.161117)
// }
// ]);
-
let markers = []
let labels = []
this.maps.forEach(item => {
markers.push({
"styleId": 'marker',
- text: item.name,
+ id: item.goods ? (item.goods.genre == 'food' ? item.goods.id : item.goods.scenic_id) : '', // 产品id
+ genre: item.goods ? item.goods.genre : '', // 产品类型
+ name: item.name, // 产品名称
+ address: item.address, // 详情地址
+ audioSrc: item.audio_file, // 音频路径
+ spotId: item.id, // 点位id
position: new TMap.LatLng(item.poi_gcj02[1], item.poi_gcj02[0])
})
-
+
labels.push({
id: 'label', // 点图形数据的标志信息
styleId: 'label', // 样式id
@@ -252,7 +309,7 @@
},
})
})
-
+
// 添加marker点
this.multiMarker = new TMap.MultiMarker({
id: 'marker-layer',
@@ -262,7 +319,9 @@
"width": 24,
"height": 30,
"src": 'https://static.ticket.sz-trip.com/yandu/images/map/scenic.png',
- "src": this.util.showImg(this.mapType.find(i => {return i.id == this.maps[0].category_id}).icon_image)
+ "src": this.util.showImg(this.mapType.find(i => {
+ return i.id == this.maps[0].category_id
+ }).icon_image)
})
},
// 点数组
@@ -307,57 +366,68 @@
this.multiMarker.setMap(null);
this.multiMarker = null;
}
-
- if(this.multiLabel) {
+
+ if (this.multiLabel) {
this.multiLabel.setMap(null);
this.multiLabel = null;
}
},
// 改变地图中心
- changeMapCenter() {
- this.mapObj.panTo(new TMap.LatLng(33.37307, 120.18467));
+ changeMapCenter(item) {
+ this.mapObj.panTo(new TMap.LatLng(item[1], item[0]));
},
// 标记点点击事件
markerClick(evt) {
- console.log(evt, evt.geometry.text)
+ console.log(evt.geometry)
if (this.lineAddStatus) {
//添加行程时
this.$dialog.confirm({
title: '',
- message: '是否将' + evt.geometry.text + '加入行程?'
+ message: '是否将' + evt.geometry.name + '加入行程?'
}).then(() => {
- this.lineId = 1
- this.$refs.lineRouteRef.addLineList()
+ this.addLineInfo = evt.geometry
}).catch(() => {
})
} else {
- this.detailShow = true
+ this.audioSrc = evt.geometry.audioSrc
+ this.genreType = evt.geometry.genre
+ if(['ticket', 'hotel'].includes(evt.geometry.genre)) {
+ // 景点酒店
+ this.get({
+ id: evt.geometry.id
+ },'/api/scenic/getScenicById').then(res => {
+ if(res.data) {
+ this.productType = true
+ this.detailInfo = res.data
+ this.detailShow = true
+ }
+ })
+ }else if(evt.geometry.genre == 'food') {
+ this.get({
+ goods_id: evt.geometry.id
+ },'/api/goods/getGoodDetail').then(res => {
+ if(res.data) {
+ this.productType = true
+ this.detailInfo = res.data
+ this.detailShow = true
+ }
+ })
+ }else {
+ // 停车场 卫生间等
+ this.detailInfo = {
+ title: evt.geometry.name,
+ address: evt.geometry.address,
+ lon: evt.geometry.position.lng,
+ lat: evt.geometry.position.lat
+ }
+ this.productType = false
+ this.detailShow = true
+ }
}
},
// 路线规划
gotoLine() {
- // this.MultiPolyline = new TMap.MultiPolyline({
- // id: 'polyline-layer',
- // map: this.mapObj,
- // styles: {
- // "style_blue": new TMap.PolylineStyle({
- // "width": 4,
- // 'color': '#3777FF', //线填充色
- // 'borderWidth': 2, //边线宽度
- // 'borderColor': '#FFF', //边线颜色
- // 'lineCap': 'butt' //线端头方式
- // })
- // },
- // // 折线数据定义
- // geometries: [{
- // "id": 'style_blue',
- // "styleId": 'style_blue',
- // "paths": [new TMap.LatLng(33.347305, 120.136504), new TMap.LatLng(33.323448,
- // 120.157053), new TMap.LatLng(33.338249, 120.1832)]
- // }]
- // })
-
this.$router.push({
path: '/lineList',
query: {
@@ -371,9 +441,20 @@
},
// 添加线路
addLine() {
- this.lineName = ''
- this.lineDate = ''
- this.addLineShow = true
+ if(this.isMyLine) {
+ // 已有我的行程
+ this.$router.push({
+ path: '/lineList',
+ query: {
+ code: this.areaList[this.areaIndex].code,
+ type: '1'
+ }
+ })
+ }else {
+ this.lineName = ''
+ this.lineDate = ''
+ this.addLineShow = true
+ }
},
// 确认日期
lineDateConfirm() {
@@ -385,6 +466,9 @@
if (this.lineName.trim().length == 0 || this.lineDate.trim().length == 0) {
this.$toast('请输入行程信息')
} else {
+ sessionStorage.setItem('lineName', this.lineName)
+ sessionStorage.setItem('lineDate', this.lineDate)
+ sessionStorage.setItem('lineCode', this.areaList[this.areaIndex].id)
this.addLineShow = false
this.lineRouteShow = true
}
@@ -394,23 +478,140 @@
this.lineRouteShow = false
if (status) {
- // 更换marker样式方法
- this.multiMarker.setStyles({
- "marker": new TMap.MarkerStyle({
- "width": 24,
- "height": 30,
- "src": 'https://static.ticket.sz-trip.com/yandu/images/map/add.png'
- })
+ // 点击添加行程重新绘制热点,只展示景点 酒店 餐饮三类
+ this.post({
+ code: this.areaList[this.areaIndex].code,
+ },'/api/emap/getUserSpotsByCategory').then(res => {
+ if(res.code == 1) {
+ this.maps = res.data
+ // 添加行程时为true
+ this.lineAddStatus = true
+ // 添加行程时隐藏上方分类和右方区域选择
+ this.typeShow = false
+ // 移除原先点位
+ this.clearMarkers()
+ if (this.maps.length > 0) this.setMarkers()
+
+ // 点击添加行程更换marker样式
+ this.multiMarker.setStyles({
+ "marker": new TMap.MarkerStyle({
+ "width": 24,
+ "height": 30,
+ "src": 'https://static.ticket.sz-trip.com/yandu/images/map/add.png'
+ })
+ })
+ }
})
-
- // 添加行程时为true
- this.lineAddStatus = true
} else {
- this.typeIndex = -1
- this.setMarkers(0)
+ // 移除原先点位
+ this.clearMarkers()
+ this.typeShow = true
+ this.lineAddStatus = false
+ this.setMarkers()
}
+ },
+ // 线路详情弹框
+ showLineDetail() {
+ // 移除原先点位
+ this.clearMarkers()
+ // 隐藏上方分类
+ this.typeShow = false
+
+ this.lineDetailShow = true
+
+ let data = JSON.parse(sessionStorage.getItem('lineDetail'))
+ let paths = []
+ let labels = []
+
+ data.points.forEach((item,index) => {
+ paths.push(
+ new TMap.LatLng(item.lonlat[1], item.lonlat[0])
+ )
+
+ labels.push({
+ id: 'label', // 点图形数据的标志信息
+ styleId: 'label', // 样式id
+ position: new TMap.LatLng(item.lonlat[1], item.lonlat[0]), // 标注点位置
+ content: (index == 0 ? '起' : (index+1 == data.points.length ? '终' : index + 1)).toString(), // 标注文本
+ properties: {
+ // 标注点的属性数据
+ title: 'label',
+ },
+ })
+ })
+
+ // 文本标记
+ this.multiLabel = new TMap.MultiLabel({
+ id: 'label-layer',
+ map: this.mapObj,
+ collisionOptions: {
+ sameSource: true,
+ }, //开启图层内部的文本标注碰撞
+ styles: {
+ label: new TMap.LabelStyle({
+ color: '#FF7F00', // 颜色属性
+ size: 16, // 文字大小属性
+ offset: {
+ x: 0,
+ y: 0
+ }, // 文字偏移属性单位为像素
+ angle: 0, // 文字旋转属性
+ alignment: 'center', // 文字水平对齐属性
+ verticalAlignment: 'middle', // 文字垂直对齐属性
+ backgroundColor: '#fff',
+ borderRadius: 50,
+ padding: '8px',
+ width: 23,
+ height: 23
+ }),
+ },
+ geometries: labels,
+ })
+
+ // 线路
+ this.MultiPolyline = new TMap.MultiPolyline({
+ id: 'polyline-layer',
+ map: this.mapObj,
+ styles: {
+ "style_blue": new TMap.PolylineStyle({
+ "width": 4,
+ 'color': '#3777FF', //线填充色
+ 'borderWidth': 2, //边线宽度
+ 'borderColor': '#FFF', //边线颜色
+ 'lineCap': 'butt' //线端头方式
+ })
+ },
+ // 折线数据定义
+ geometries: [{
+ "id": 'style_blue',
+ "styleId": 'style_blue',
+ "paths": paths
+ }]
+ })
+ },
+ // 退出线路
+ closeLine() {
+ this.lineDetailShow = false
+ sessionStorage.setItem('lineDetail', null)
+ // 移除原先点位
+ this.clearMarkers()
+ // 移除路线
+ if (this.MultiPolyline) {
+ this.MultiPolyline.setMap(null);
+ this.MultiPolyline = null;
+ }
+ // 显示上方分类
+ this.typeShow = true
+ // 地图打点
+ this.setMarkers()
}
},
+ beforeRouteLeave(to, from, next) {
+ next(vm => {
+ sessionStorage.setItem('lineDetail', null)
+ vm.closeLine()
+ })
+ }
};
@@ -563,4 +764,22 @@
}
}
}
+
+ .linePopup {
+ overflow: visible;
+
+ .close-LineBtn {
+ width: 147px;
+ line-height: 67px;
+ background: rgba(0, 0, 0, .56);
+ border-radius: 13px;
+ text-align: center;
+ font-weight: 500;
+ font-size: 27px;
+ color: #FFFFFF;
+ position: absolute;
+ right: 20px;
+ top: -100px;
+ }
+ }
\ No newline at end of file
diff --git a/src/views/LineList.vue b/src/views/LineList.vue
index 4205e05..ace185f 100644
--- a/src/views/LineList.vue
+++ b/src/views/LineList.vue
@@ -1,14 +1,25 @@
-
+
+
+
+
![]()
-
+
{{item.name}}
-
{{item.points.length}}个景点
-
+
+
+
@@ -18,7 +29,8 @@
export default {
data() {
return {
- list: []
+ list: [],
+ type: this.$route.query.type, // type为1时是我的行程，否则为推荐线路
}
},
mounted() {
@@ -28,10 +40,20 @@
// 根据code获取推荐线路
getList() {
this.post({
+ type: this.$route.query.type ? 1 : '',
code: this.$route.query.code
},'/api/emap/getLineByCode').then(res => {
this.list = res.data
})
+ },
+ // 详情
+ viewDetail(item) {
+ sessionStorage.setItem('lineDetail', JSON.stringify(item))
+ this.$router.push('/')
+ },
+ // 添加线路
+ addLine() {
+ this.$router.push('/')
}
}
}
@@ -45,6 +67,26 @@
padding-top: 31px;
}
+ .top-box {
+ width: 697px;
+ padding: 30px;
+ margin: 0 auto;
+ font-weight: bold;
+ font-size: 40px;
+ color: #000000;
+
+ .top-btn {
+ width: 137px;
+ line-height: 60px;
+ border-radius: 30px;
+ border: 1px solid #CCCCCC;
+ text-align: center;
+ font-weight: 400;
+ font-size: 27px;
+ color: #000000;
+ }
+ }
+
.item {
width: 697px;
height: 240px;
@@ -54,6 +96,7 @@
margin: 0 auto 33px;
padding: 13px;
display: flex;
+ justify-content: space-between;
img {
object-fit: cover;
@@ -63,7 +106,6 @@
}
.content {
- margin-left: 25px;
padding: 15px 0;
width: 410px;
@@ -79,21 +121,18 @@
font-size: 27px;
color: #666666;
}
+ }
+
+ .contents {
+ width: 340px;
+ }
+
+ .delLine {
+ width: 50px;
- .tags {
- display: flex;
- margin-top: 15px;
-
- .tag {
- font-weight: 500;
- font-size: 23px;
- color: #71B580;
- line-height: 40px;
- border-radius: 5px;
- border: 1px solid #69AF78;
- padding: 0 12px;
- margin-right: 13px;
- }
+ img {
+ width: 30px;
+ height: 34px;
}
}
}
diff --git a/src/views/compoents/lineDetail.vue b/src/views/compoents/lineDetail.vue
new file mode 100644
index 0000000..b5e2c7e
--- /dev/null
+++ b/src/views/compoents/lineDetail.vue
@@ -0,0 +1,315 @@
+
+
+
+
+
![]()
+
+
{{info.title}}
+
营业时间：{{info.open_time}}-{{info.close_time}}
+
地址：{{info.address}}
+
+
+ 导航
+
+
+
+
+
{{detail.name}}
+
{{detail.points.length}}个景点
+
+
+
+
+
+
+ {{index == 0 ? '起' : ((index+1 == detail.points.length) ? '终' : index + 1)}}
+
+
+ {{item.name}}
+
+
+
+
+
+
+
推荐攻略
+
+
![]()
+
+
+
{{strategyInfo.title}}
+
+
+
![]()
+ {{strategyInfo.author}}
+
+
+
+ {{strategyInfo.view}}
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/compoents/lineRoute.vue b/src/views/compoents/lineRoute.vue
index a67e943..1c01775 100644
--- a/src/views/compoents/lineRoute.vue
+++ b/src/views/compoents/lineRoute.vue
@@ -13,7 +13,7 @@
![]()
-
{{item.title}}{{index}}
+
{{item.title}}
营业时间：{{item.open_time}}-{{item.close_time}}
地址：{{item.address}}
@@ -44,28 +44,53 @@