|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <el-dialog width="80%" destroy-on-close :visible.sync="dialogTableVisible">
|
|
|
+ <el-dialog v-loading='loading' element-loading-text="拼命加载中" width="80%" destroy-on-close :visible.sync="dialogTableVisible">
|
|
|
<el-form v-if="showSearch" ref="ruleForm" class="demo-form-inline" :inline="true">
|
|
|
<el-form-item class="search-box">
|
|
|
<el-input @keydown.enter.native="seachEnterFun" v-model="searchKey" type="search" id="search" style="width: 219px" placeholder="请输入关键字进行搜索" />
|
|
@@ -26,6 +26,7 @@
|
|
|
</el-form>
|
|
|
<el-amap vid="container" :zoom="zoom" :center="center" style="height: 600px;" class="amap-demo">
|
|
|
<el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker.position" :icon="marker.icon"></el-amap-marker>
|
|
|
+ <el-amap-text v-for="text in texts" :key="text.id" :text="text.text" :offset="text.offset" :position="text.position" :events="text.events"></el-amap-text>
|
|
|
<!-- <el-amap-polyline :path="polyline.path"></el-amap-polyline> -->
|
|
|
<!-- <el-amap-info-window v-if="window" :position="window.position" :visible="window.visible"
|
|
|
:content="window.content"></el-amap-info-window> -->
|
|
@@ -34,7 +35,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getInputPrompt, getGeoCode } from "../../api/order.js";
|
|
|
+import { getInputPrompt, getGeoCode, getMapData } from "../../api/order.js";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
@@ -42,6 +43,7 @@ export default {
|
|
|
dialogTableVisible: false,
|
|
|
order: {},
|
|
|
markers: [],
|
|
|
+ texts: [],
|
|
|
defaultCity: "北京",
|
|
|
zoom: 18,
|
|
|
center: [116.39747132275389, 39.908857325556404],
|
|
@@ -52,6 +54,7 @@ export default {
|
|
|
lat: "",
|
|
|
showAddressList: false,
|
|
|
showSearch: false,
|
|
|
+ loading: false,
|
|
|
};
|
|
|
},
|
|
|
created() {},
|
|
@@ -111,7 +114,8 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- setDialogStatus(data, mapData) {
|
|
|
+ init(data, mapData) {
|
|
|
+ console.log("地图数据:", data, mapData);
|
|
|
let sendM = {
|
|
|
id: 1,
|
|
|
position: [data.sendLng, data.sendLat],
|
|
@@ -122,6 +126,11 @@ export default {
|
|
|
position: [data.receiptLng, data.receiptLat],
|
|
|
icon: "/static/image/map-shou.png",
|
|
|
};
|
|
|
+ let riderM = {
|
|
|
+ id: 3,
|
|
|
+ position: [mapData.shipperLng, mapData.shipperLat],
|
|
|
+ icon: "/static/image/map-rider.png",
|
|
|
+ };
|
|
|
// 中心点
|
|
|
this.center = [
|
|
|
((data.receiptLng * 1 + data.sendLng * 1) / 2).toFixed(6),
|
|
@@ -129,13 +138,62 @@ export default {
|
|
|
];
|
|
|
// marker标记
|
|
|
this.markers = [sendM, receiptM];
|
|
|
+ if (mapData.shipperLng && mapData.shipperLat) {
|
|
|
+ this.markers.push(riderM);
|
|
|
+ }
|
|
|
+
|
|
|
+ let orderDistance =
|
|
|
+ mapData.orderDistance > 1000
|
|
|
+ ? mapData.orderDistance / 1000 + "公里"
|
|
|
+ : mapData.orderDistance + "米";
|
|
|
+ this.texts = [
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ position: [data.sendLng, data.sendLat],
|
|
|
+ text: `商家距离目的地${orderDistance}`,
|
|
|
+ offset: [10, -50],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ if (mapData.shipperLng && mapData.shipperLat && mapData.shipperDistance) {
|
|
|
+ let distance =
|
|
|
+ mapData.shipperDistance > 1000
|
|
|
+ ? mapData.shipperDistance / 1000 + "公里"
|
|
|
+ : mapData.shipperDistance + "米";
|
|
|
+ this.texts.push({
|
|
|
+ id: 5,
|
|
|
+ position: [mapData.shipperLng, mapData.shipperLat],
|
|
|
+ text:
|
|
|
+ data.buttonStatus === 2
|
|
|
+ ? `骑手距离商家${distance} | 预计${mapData.riderArriveMinute}分钟后到店`
|
|
|
+ : data.buttonStatus === 3
|
|
|
+ ? `骑手距离目的地${distance} | 预计${mapData.estimateArriveTime}送达`
|
|
|
+ : "",
|
|
|
+ offset: [15, -50],
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
// 绘制折线
|
|
|
// this.polyline.path = [
|
|
|
// new AMap.LngLat(mapData.receiptLng, mapData.receiptLat),
|
|
|
// new AMap.LngLat(mapData.sendLng, mapData.sendLat),
|
|
|
// new AMap.LngLat(mapData.shipperLng, mapData.shipperLat),
|
|
|
// ];
|
|
|
+ },
|
|
|
+ setDialogStatus(data) {
|
|
|
this.dialogTableVisible = true;
|
|
|
+ this.loading = true;
|
|
|
+ getMapData({ orderId: data.id }).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ console.log(11111, res.data);
|
|
|
+ this.loading = false;
|
|
|
+ this.init(data, res.data);
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: res.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
chooseLocation() {
|
|
|
this.dialogTableVisible = true;
|
|
@@ -153,6 +211,25 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+/deep/ .amap-overlay-text-container {
|
|
|
+ font-size: 12px;
|
|
|
+ background: #fc7200;
|
|
|
+ color: #fff;
|
|
|
+ padding: 4px 8px;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+/deep/ .amap-overlay-text-container:before{
|
|
|
+ content: '';
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-left: 10px solid transparent;
|
|
|
+ border-right: 10px solid transparent;
|
|
|
+ border-top: 10px solid #fc7200;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -10px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
.map-btn {
|
|
|
background: #fc7200;
|
|
|
border: none;
|