Merge remote-tracking branch 'origin/master'

src/main/map/src/utils/Marker.js

@@ -6,6 +6,7 @@ var imgSvgMap = new Map([
         {
             width: '19px',
             height: '23px',
+            trueHeight: 23,
             innerHTML: `
 						<path fill-rule="evenodd"  opacity="0.502" fill="rgb(0, 0, 0)"
 						d="M31.000,50.787 C47.016,50.787 60.000,55.715 60.000,61.793 C60.000,67.872 47.016,72.799 31.000,72.799 C14.984,72.799 2.000,67.872 2.000,61.793 C2.000,55.715 14.984,50.787 31.000,50.787 Z"/>
@@ -16,10 +17,11 @@ var imgSvgMap = new Map([
         },
     ],
     [
-        'merchat',
+        'merchant',
         {
             width: '23px',
             height: '26px',
+            trueHeight: 26,
             innerHTML: `
 						<path fill-rule="evenodd"  opacity="0.502" fill="rgb(0, 0, 0)"
 						d="M35.000,55.988 C51.016,55.988 64.000,60.916 64.000,66.994 C64.000,73.072 51.016,78.000 35.000,78.000 C18.984,78.000 6.000,73.072 6.000,66.994 C6.000,60.916 18.984,55.988 35.000,55.988 Z"/>
@@ -34,6 +36,7 @@ var imgSvgMap = new Map([
         {
             width: '40px',
             height: '38px',
+            trueHeight: 38,
             innerHTML: `
 						<path fill-rule="evenodd"  opacity="0.502" fill="rgb(0, 0, 0)"
  d="M62.000,94.921 C78.016,94.921 91.000,99.849 91.000,105.927 C91.000,112.006 78.016,116.933 62.000,116.933 C45.984,116.933 33.000,112.006 33.000,105.927 C33.000,99.849 45.984,94.921 62.000,94.921 Z"/>
@@ -55,6 +58,7 @@ Marker.prototype = new TMap.DOMOverlay();
 Marker.prototype.onInit = function(options) {
     this.position = options.position;
     this.type = options.type;
+    this.nowStatus = options.nowStatus;
 };
 
 // 销毁时需解绑事件监听
@@ -66,24 +70,69 @@ Marker.prototype.onDestroy = function() {
 
 // 创建DOM元素，返回一个DOMElement，使用this.dom可以获取到这个元素
 Marker.prototype.createDOM = function() {
-    let svg = document.createElementNS(SVG_NS, 'svg');
+    if (this.markerType === 'text') {
+        let div = document.createElement('div');
+        div.style.display = 'flex';
+        div.style.flexDirection = 'column';
+        div.style.alignItems = 'center';
+        let innerDiv = document.createElement('div');
+        innerDiv.style.backgroundColor = 'rgb(255,255,255)';
+        innerDiv.style.padding = '5px 10px';
+        innerDiv.style.fontSize = '14px';
+        innerDiv.style.color = '#FFB11E';
+        let svgInfo = imgSvgMap.get(this.type);
+        innerDiv.style.transform =
+            'translateY(-' + (svgInfo.trueHeight + 10) + 'px)';
+        innerDiv.innerHTML = this.title;
+        div.appendChild(innerDiv);
+        div.addEventListener(
+            'touchend',
+            () => {
+                this.emit('click');
+            },
+            false,
+        );
+        return div;
+    } else {
+        let div = document.createElement('div');
+        div.style.display = 'flex';
+        div.style.flexDirection = 'column';
+        div.style.alignItems = 'center';
+        div.style.position = 'absolute';
+        div.style.left = '0px';
+        div.style.top = '0px';
 
-    let svgInfo = imgSvgMap.get(this.type);
-    svg.setAttribute('viewBox', svgInfo.viewBox);
-    svg.setAttribute('width', svgInfo.width);
-    svg.setAttribute('height', svgInfo.height);
-    svg.style.cssText = 'position:absolute;top:0px;left:0px;';
-    svg.innerHTML = svgInfo.innerHTML;
+        let svg = document.createElementNS(SVG_NS, 'svg');
+        let svgInfo = imgSvgMap.get(this.type);
+        svg.setAttribute('viewBox', svgInfo.viewBox);
+        svg.setAttribute('width', svgInfo.width);
+        svg.setAttribute('height', svgInfo.height);
+        svg.innerHTML = svgInfo.innerHTML;
+        div.appendChild(svg);
+        if (this.nowStatus.nowImgType === this.type) {
+            let innerDiv = document.createElement('div');
+            innerDiv.style.backgroundColor = 'rgb(255,255,255)';
+            innerDiv.style.padding = '5px 10px';
+            innerDiv.style.fontSize = '14px';
+            innerDiv.style.color = '#FFB11E';
+            innerDiv.style.position = 'absolute';
+            innerDiv.style.left = '50%';
+            innerDiv.style.top = '-' + (svgInfo.trueHeight + 10) + 'px';
+            innerDiv.style.transform = 'translateX(-50%)';
+            innerDiv.style.whiteSpace = 'nowrap';
+            innerDiv.innerHTML = this.nowStatus.name;
+            div.appendChild(innerDiv);
+        }
 
-    svg.addEventListener(
-        'touchend',
-        () => {
-            this.emit('click');
-        },
-        false,
-    );
-
-    return svg;
+        div.addEventListener(
+            'touchend',
+            () => {
+                this.emit('click');
+            },
+            false,
+        );
+        return div;
+    }
 };
 
 // 更新DOM元素，在地图移动/缩放后执行

src/main/map/src/utils/OrderUtils.js

@@ -0,0 +1,209 @@
+// 权重大的在前面显示 基础是-1在最后
+
+const merchantStatusMap = new Map([
+    [
+        'NOT_RECEIVED',
+        {
+            name: '待商家接单',
+            sort: 0,
+            type: 'merchant',
+            nowImgType: 'merchant',
+        },
+    ],
+    [
+        'RECEIVED',
+        {
+            name: '商家已接单',
+            sort: 0,
+            type: 'merchant',
+            nowImgType: 'merchant',
+        },
+    ],
+    [
+        'REJECTED',
+        {
+            name: '商家已退单',
+            sort: -1,
+            type: 'merchant',
+        },
+    ],
+    [
+        'COMPLETED',
+        {
+            name: '已完成',
+            sort: -1,
+            type: 'merchant',
+        },
+    ],
+]);
+
+const orderStatusMap = new Map([
+    [
+        'UNPAID',
+        {
+            name: '订单未支付',
+            sort: 1,
+            type: 'order',
+        },
+    ],
+    [
+        'PAID',
+        {
+            name: '用户已支付',
+            sort: -1,
+            type: 'order',
+        },
+    ],
+    [
+        'RATED',
+        {
+            name: '待评价',
+            sort: 0,
+            type: 'order',
+        },
+    ],
+    [
+        'CANCELLED',
+        {
+            name: '订单已取消',
+            sort: -1,
+            type: 'order',
+        },
+    ],
+    [
+        'REFUNDED_PENDING',
+        {
+            name: '申请退款中',
+            sort: -1,
+            type: 'order',
+        },
+    ],
+    [
+        'REFUNDING',
+        {
+            name: '退款中',
+            sort: -1,
+            type: 'order',
+        },
+    ],
+    [
+        'REFUNDED',
+        {
+            name: '已退款',
+            sort: -1,
+            type: 'order',
+        },
+    ],
+    [
+        'COMPLETED',
+        {
+            name: '已完成',
+            sort: 2,
+            type: 'order',
+        },
+    ],
+]);
+
+const RiderStatusMap = new Map([
+    [
+        'NOT_RECEIVED',
+        {
+            name: '待骑手接单',
+            sort: -1,
+            type: 'rider',
+        },
+    ],
+    [
+        'RECEIVED',
+        {
+            name: '骑手已接单',
+            sort: 1,
+            type: 'rider',
+            nowImgType: 'rider',
+        },
+    ],
+    [
+        'TAKE_MEAL',
+        {
+            name: '骑手已取餐',
+            sort: 1,
+            type: 'rider',
+            nowImgType: 'rider',
+        },
+    ],
+    [
+        'MEAL_DELIVERY',
+        {
+            name: '订单正在配送中',
+            sort: 1,
+            type: 'rider',
+            nowImgType: 'rider',
+        },
+    ],
+    [
+        'CARRY_OUT',
+        {
+            name: '订单已送达',
+            sort: 1,
+            type: 'rider',
+        },
+    ],
+]);
+
+const payMap = new Map([
+    [
+        'ALI_PAY',
+        {
+            name: '支付宝',
+            icon: 'alipay-square',
+            iconColor: 'blue500',
+        },
+    ],
+    [
+        'CASH_DELIVERY',
+        {
+            name: '货到付款',
+            icon: 'wallet',
+            iconColor: 'green500',
+        },
+    ],
+    [
+        'CREDIT_CARD',
+        {
+            name: '信用卡',
+            icon: 'creditcard',
+            iconColor: 'red500',
+        },
+    ],
+]);
+
+function getStatusInfo(orderInfo) {
+    const statusList = [];
+
+    if (orderInfo.status) {
+        statusList.push(orderStatusMap.get(orderInfo.status));
+    }
+    if (orderInfo.merchantStatus) {
+        statusList.push(merchantStatusMap.get(orderInfo.merchantStatus));
+    }
+    if (orderInfo.riderStatus) {
+        statusList.push(RiderStatusMap.get(orderInfo.riderStatus));
+    }
+
+    if (statusList.length > 0) {
+        return statusList.sort((a, b) => {
+            return b.sort - a.sort;
+        })[0];
+    } else {
+        return {
+            name: '订单详情',
+        };
+    }
+}
+export {
+    merchantStatusMap,
+    orderStatusMap,
+    RiderStatusMap,
+    payMap,
+    getStatusInfo,
+};

src/main/map/src/views/Home.vue

@@ -2,60 +2,119 @@
     <div id="container"></div>
 </template>
 <script>
+window.info = '';
+
+function getInfo(info) {
+    console.log(info);
+}
+window.getInfo = getInfo;
 import { mapState } from 'vuex';
 import Marker from '../utils/Marker';
+import { getStatusInfo } from '../utils/OrderUtils';
 export default {
     name: '',
     data() {
         return {
             map: null,
+            orderInfo: null,
+            userLoaction: null,
+            merchantLoaction: null,
         };
     },
     computed: {
         ...mapState(['userInfo']),
+        center() {
+            if (
+                this.nowStatus.nowImgType === 'merchant' &&
+                this.merchantLoaction
+            ) {
+                return this.merchantLoaction;
+            } else if (
+                this.nowStatus.nowImgType === 'user' &&
+                this.userLoaction
+            ) {
+                return this.userLoaction;
+            } else {
+                return { lat: 40.02906301748584, lng: 116.25499991104516 };
+            }
+        },
+        userMarker() {
+            if (this.map && this.userLoaction) {
+                return new Marker({
+                    map: this.map,
+                    position: new TMap.LatLng(
+                        this.userLoaction.lat,
+                        this.userLoaction.lng,
+                    ),
+                    type: 'user',
+                    nowStatus: this.nowStatus,
+                });
+            }
+            return null;
+        },
+        merchantMarKer() {
+            if (this.map && this.merchantLoaction) {
+                return new Marker({
+                    map: this.map,
+                    position: new TMap.LatLng(
+                        this.merchantLoaction.lat,
+                        this.merchantLoaction.lng,
+                    ),
+                    type: 'merchant',
+                    nowStatus: this.nowStatus,
+                });
+            }
+            return null;
+        },
+        nowStatus() {
+            if (this.$route.query) {
+                return getStatusInfo(this.$route.query);
+            } else {
+                return null;
+            }
+        },
     },
     mounted() {
         if (this.$route.query.location) {
-            let location = this.$route.query.location.split(',');
-            this.initMap(location[0], location[1]);
+            this.userLoaction = {
+                lat: this.$route.query.location.split(',')[1],
+                lng: this.$route.query.location.split(',')[0],
+            };
         }
+        if (this.$route.query.merchantLocation) {
+            this.merchantLoaction = {
+                lat: this.$route.query.merchantLocation.split(',')[1],
+                lng: this.$route.query.merchantLocation.split(',')[0],
+            };
+        }
+
+        this.$nextTick(() => {
+            setTimeout(() => {
+                this.initMap();
+            }, 1000);
+        });
     },
     methods: {
-        initMap(lat, lng) {
+        initMap() {
             // 初始化地图
-            const map = new TMap.Map('container', {
-                zoom: 12, // 设置地图缩放级别
-                center: new TMap.LatLng(lat, lng), // 设置地图中心点坐标
+            this.map = new TMap.Map('container', {
+                zoom: 15, // 设置地图缩放级别
+                center: new TMap.LatLng(this.center.lat, this.center.lng), // 设置地图中心点坐标
                 doubleClickZoom: false,
             });
-
             let donutList = [
+                this.userMarker,
+                this.merchantMarKer,
                 new Marker({
-                    map,
-                    position: new TMap.LatLng(
-                        39.96030543872138,
-                        116.25809083213608,
-                    ),
-                    type: 'user',
-                }),
-                new Marker({
-                    map,
-                    position: new TMap.LatLng(
-                        39.9986945980902,
-                        116.33598362780685,
-                    ),
-                    type: 'merchat',
-                }),
-                new Marker({
-                    map,
+                    map: this.map,
                     position: new TMap.LatLng(
                         40.02906301748584,
                         116.25499991104516,
                     ),
                     type: 'rider',
+                    nowStatus: this.nowStatus,
                 }),
             ];
-
             donutList.forEach((donut, index) => {
                 donut.on('click', () => {
                     console.log(

src/main/map/src/views/MapDetail.vue

@@ -0,0 +1,28 @@
+<template>
+    <iframe
+        id="frame"
+        style="width:100vw;height:100vh"
+        src="http://dingdong.izouma.com/map/home"
+    >
+    </iframe>
+</template>
+<script>
+import { mapState } from 'vuex';
+export default {
+    name: '',
+    data() {
+        return {};
+    },
+    computed: {
+        ...mapState(['userInfo']),
+    },
+    mounted() {
+        setTimeout(() => {
+            console.log(document.getElementById('frame').contentWindow);
+            document.getElementById('frame').contentWindow.getInfo(1233);
+        }, 1000);
+    },
+};
+</script>
+<style lang='less' scoped>
+</style>