美团门店位置

vue-admin-template-master/src/api/shop.js

@@ -7,3 +7,11 @@ export function getList(params) {
     params
   });
 }
+
+export function getshopmt(params) {
+  return request({
+    url: "dashboard/shopmt",
+    method: "get",
+    params
+  });
+}

vue-admin-template-master/src/router/index.js

@@ -215,6 +215,18 @@ export const constantRoutes = [
         name: "Marker",
         component: () => import("@/views/shapmap/marker/index"),
         meta: { title: "门店覆盖区域" }
+      },
+      {
+        path: "mtmap",
+        name: "Mtmap",
+        component: () => import("@/views/shapmap/mtmap/index"),
+        meta: { title: "美团门店位置" }
+      },
+      {
+        path: "mtmarker",
+        name: "Mtmarker",
+        component: () => import("@/views/shapmap/mtmarker/index"),
+        meta: { title: "美团门店覆盖区域" }
       }
     ]
   },

vue-admin-template-master/src/views/orders/list/index.vue

@@ -107,6 +107,13 @@
         ></el-table-column>
         <el-table-column prop="useticket" label="useticket"></el-table-column>
         <el-table-column prop="wxverified" label="wxverified"></el-table-column>
+        <el-table-column fixed="right" label="操作" width="100">
+          <template slot-scope="scope">
+            <el-button @click="handleClick(scope.row)" type="text" size="small"
+              >查看</el-button
+            >
+          </template>
+        </el-table-column>
       </el-table>
       <div class="pd-30">
         <el-pagination
@@ -120,6 +127,138 @@
         ></el-pagination>
       </div>
     </el-card>
+    <!-- 弹窗 -->
+    <el-dialog
+      title="详情"
+      :visible.sync="dialogVisible"
+      :before-close="handleClose"
+    >
+      <el-form :inline="true" :model="formInline" label-width="100px">
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item label="id">
+              <el-input v-model="formInline.id" readonly autosize></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="骑手">
+              <el-input v-model="formInline.courier" readonly></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item label="下单时间">
+              <el-input v-model="formInline.createtime" readonly></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="配送方式">
+              <el-input v-model="formInline.deliverypro" readonly></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item label="订单备注">
+              <el-input
+                type="textarea"
+                v-model="formInline.notes"
+                readonly
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="订单号">
+              <el-input v-model="formInline.outtradeno" readonly></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item label="productfee">
+              <el-input v-model="formInline.productfee" readonly></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="products">
+              <el-input
+                type="textarea"
+                v-model="formInline.products"
+                readonly
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item label="peisong_id">
+              <el-input v-model="formInline.peisong_id" readonly></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="shippingaddr">
+              <el-input
+                type="textarea"
+                v-model="formInline.shippingaddr"
+                readonly
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item label="门店名称">
+              <el-input v-model="formInline.shopname" readonly></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="订单状态">
+              <el-input v-model="formInline.status" readonly></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item label="totalfee">
+              <el-input v-model="formInline.totalfee" readonly></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="订单类型">
+              <el-input v-model="formInline.type" readonly></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item label="useropenid">
+              <el-input v-model="formInline.useropenid" readonly></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="useticket">
+              <el-input v-model="formInline.useticket" readonly></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item label="wxverified">
+              <el-input v-model="formInline.wxverified" readonly></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
@@ -162,14 +301,14 @@ export default {
     },
     filterFee(fee) {
       return fee / 100;
-    },
+    }
   },
   data() {
     return {
       pickerOptions: {
         disabledDate(time) {
           return time.getTime() > Date.now();
-        },
+        }
       },
       exportLoading: false,
       timeValue: "",
@@ -178,15 +317,25 @@ export default {
       searchLoading: false,
       listQuery: {
         page: 1,
-        limit: 100,
+        limit: 100
       },
       tableData: [],
+      dialogVisible: false,
+      formInline: {}
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    handleClose() {
+      this.dialogVisible = false;
+    },
+    handleClick(row) {
+      console.log(row);
+      this.formInline = row;
+      this.dialogVisible = true;
+    },
     exportBtn() {
       if (!this.timeValue.length) {
         return this.$message.error("请选择日期范围");
@@ -194,9 +343,9 @@ export default {
       this.exportLoading = true;
       export_order({
         starttime: this.timeValue[0],
-        endtime: this.timeValue[1],
+        endtime: this.timeValue[1]
       })
-        .then((res) => {
+        .then(res => {
           let blob = new Blob([res], { type: "application/x-xls" });
           let link = document.createElement("a");
           link.href = window.URL.createObjectURL(blob);
@@ -205,7 +354,7 @@ export default {
 
           this.exportLoading = false;
         })
-        .catch((err) => {
+        .catch(err => {
           this.exportLoading = false;
           this.$message.error("导出失败，请稍后重试！");
         });
@@ -213,8 +362,8 @@ export default {
     getList() {
       this.listLoading = true;
       getOrderList({
-        page: this.listQuery.page,
-      }).then((res) => {
+        page: this.listQuery.page
+      }).then(res => {
         this.tableData = res.orders;
         this.total = res.total;
         this.listLoading = false;
@@ -223,8 +372,8 @@ export default {
     handleCurrentChange(val) {
       this.listQuery.page = val;
       this.getList();
-    },
-  },
+    }
+  }
 };
 </script>
 

vue-admin-template-master/src/views/shapmap/mtmap/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="content">
+    <el-row class="search-row">
+      <el-col :span="5">
+        <div class="grid-content bg-purple">
+          <el-input
+            id="keyword"
+            v-model="searchValue"
+            placeholder="请输入地址"
+          ></el-input>
+        </div>
+      </el-col>
+
+      <el-col :span="12">
+        <div class="grid-content bg-purple-light">
+          <el-button type="primary" @click="searchKeyword">搜索</el-button>
+        </div>
+      </el-col>
+    </el-row>
+    <div id="container">门店地图</div>
+  </div>
+</template>
+
+<script>
+import { getshopmt } from "@/api/shop.js";
+
+import shop_icon from "@/assets/img/shop_icon.png";
+var searchService,
+  markers = [],
+  that;
+export default {
+  data() {
+    return {
+      searchValue: ""
+    };
+  },
+  mounted() {
+    this.init();
+    that = this;
+  },
+  methods: {
+    async init() {
+      //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
+      //设置地图中心点
+      var myLatlng = new qq.maps.LatLng(31.169083, 121.432358);
+      //定义工厂模式函数
+      var myOptions = {
+        zoom: 12, //设置地图缩放级别
+        center: myLatlng, //设置中心点样式
+        mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
+      };
+      //获取dom元素添加地图信息
+      var map = new qq.maps.Map(
+        document.getElementById("container"),
+        myOptions
+      );
+      //   new qq.maps.MarkerImage(shop_icon);
+      let res = await getshopmt();
+      console.log(res);
+      res.shops.forEach(v => {
+        let marker = new qq.maps.Marker({
+          position: new qq.maps.LatLng(v.lat - 0, v.lng - 0),
+          map: map
+        });
+        marker.setIcon(
+          new qq.maps.MarkerImage(
+            shop_icon
+            // new qq.maps.Size(28, 34),
+            // new qq.maps.ScaleSize(28, 34)
+          )
+        );
+        //获取标记的点击事件
+        let info = new qq.maps.InfoWindow({
+          map: map
+        });
+        qq.maps.event.addListener(marker, "click", function() {
+          info.open();
+          info.setContent(
+            `<div style="text-align:center;white-space:nowrap;margin:10px;">${v.name}(${v.mtid})</div>`
+          );
+          info.setPosition(new qq.maps.LatLng(v.lat - 0, v.lng - 0));
+        });
+      });
+
+      var latlngBounds = new qq.maps.LatLngBounds();
+      //设置Poi检索服务，用于本地检索、周边检索
+      searchService = new qq.maps.SearchService({
+        //设置搜索范围为北京
+        location: "上海",
+        //设置搜索页码为1
+        pageIndex: 1,
+        //设置每页的结果数为5
+        pageCapacity: 5,
+        //设置展现查询结构到infoDIV上
+        panel: document.getElementById("infoDiv"),
+        //设置动扩大检索区域。默认值true，会自动检索指定城市以外区域。
+        autoExtend: true,
+        //检索成功的回调函数
+        complete: function(results) {
+          //设置回调函数参数
+          var pois = results.detail.pois;
+          for (var i = 0, l = pois.length; i < l; i++) {
+            var poi = pois[i];
+            //扩展边界范围，用来包含搜索到的Poi点
+            latlngBounds.extend(poi.latLng);
+            var marker = new qq.maps.Marker({
+              map: map,
+              position: poi.latLng
+            });
+
+            marker.setTitle(i + 1);
+
+            markers.push(marker);
+          }
+          //调整地图视野
+          map.fitBounds(latlngBounds);
+        },
+        //若服务请求失败，则运行以下函数
+        error: function() {
+          that.$message.error("请输入正确地址！");
+        }
+      });
+    },
+    searchKeyword() {
+      this.clearOverlays(markers);
+      //根据输入的关键字在搜索范围内检索
+      searchService.search(this.searchValue);
+    },
+    clearOverlays(overlays) {
+      var overlay;
+      while ((overlay = overlays.pop())) {
+        overlay.setMap(null);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.content {
+  padding: 20px;
+}
+#container {
+  width: 100%;
+  height: 85vh;
+}
+.search-row {
+  padding-bottom: 20px;
+}
+.search-row button {
+  margin: 0 10px;
+}
+</style>

vue-admin-template-master/src/views/shapmap/mtmarker/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="content">
+    <el-row class="search-row">
+      <el-col :span="5">
+        <div class="grid-content bg-purple">
+          <el-input
+            id="keyword"
+            v-model="searchValue"
+            placeholder="请输入地址"
+          ></el-input>
+        </div>
+      </el-col>
+
+      <el-col :span="12">
+        <div class="grid-content bg-purple-light">
+          <el-button type="primary" @click="searchKeyword">搜索</el-button>
+        </div>
+      </el-col>
+    </el-row>
+
+    <div id="container">门店覆盖区域</div>
+    <!-- <div style="width: 500px; height: 180px" id="infoDiv"></div> -->
+  </div>
+</template>
+
+<script>
+import { getshopmt } from "@/api/shop.js";
+var searchService,
+  markers = [],
+  that;
+export default {
+  data() {
+    return {
+      searchValue: ""
+    };
+  },
+  mounted() {
+    this.init();
+    that = this;
+  },
+  methods: {
+    async init() {
+      //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
+      //设置地图中心点
+      var myLatlng = new qq.maps.LatLng(31.169083, 121.432358);
+      //定义工厂模式函数
+      var myOptions = {
+        zoom: 12, //设置地图缩放级别
+        center: myLatlng, //设置中心点样式
+        mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
+      };
+      //获取dom元素添加地图信息
+      var map = new qq.maps.Map(
+        document.getElementById("container"),
+        myOptions
+      );
+      //   new qq.maps.MarkerImage(shop_icon);
+      let res = await getshopmt();
+      res.shops.forEach(v => {
+        new qq.maps.Circle({
+          //圆形的中心点坐标。
+          center: new qq.maps.LatLng(v.lat - 0, v.lng - 0),
+          //圆形是否可点击。
+          clickable: true,
+
+          //鼠标在圆形内的光标样式。
+          cursor: "pointer",
+
+          //圆形的填充色，可通过Color对象的alpha属性设置透明度。
+          //fillColor: "#00f",
+          fillColor: new qq.maps.Color(0, 15, 255, 0.3),
+
+          //要显示圆形的地图。
+          map: map,
+
+          //圆形的半径。
+          radius: 3000,
+
+          //圆形的边框颜色，可通过Color对象的alpha属性设置透明度。
+          strokeColor: "#fff",
+
+          //圆形的边框样式。实线是solid，虚线是dash。
+          strokeDashStyle: "solid",
+
+          //圆形的边框线宽。
+          strokeWeight: 1,
+
+          //圆形是否可见。
+          visible: true,
+
+          //圆形的zIndex值。
+          zIndex: 1000
+        });
+      });
+
+      var latlngBounds = new qq.maps.LatLngBounds();
+      //设置Poi检索服务，用于本地检索、周边检索
+      searchService = new qq.maps.SearchService({
+        //设置搜索范围为北京
+        location: "上海",
+        //设置搜索页码为1
+        pageIndex: 1,
+        //设置每页的结果数为5
+        pageCapacity: 5,
+        //设置展现查询结构到infoDIV上
+        panel: document.getElementById("infoDiv"),
+        //设置动扩大检索区域。默认值true，会自动检索指定城市以外区域。
+        autoExtend: true,
+        //检索成功的回调函数
+        complete: function(results) {
+          //设置回调函数参数
+          var pois = results.detail.pois;
+          for (var i = 0, l = pois.length; i < l; i++) {
+            var poi = pois[i];
+            //扩展边界范围，用来包含搜索到的Poi点
+            latlngBounds.extend(poi.latLng);
+            var marker = new qq.maps.Marker({
+              map: map,
+              position: poi.latLng
+            });
+
+            marker.setTitle(i + 1);
+
+            markers.push(marker);
+          }
+          //调整地图视野
+          map.fitBounds(latlngBounds);
+        },
+        //若服务请求失败，则运行以下函数
+        error: function() {
+          that.$message.error("请输入正确地址！");
+        }
+      });
+    },
+    getData() {
+      return new Promise(resolve => {
+        fetch("https://talk.cirray.cn/api/shops")
+          .then(function(response) {
+            return response.json();
+          })
+          .then(function(myJson) {
+            resolve(myJson);
+          });
+      });
+    },
+    searchKeyword() {
+      this.clearOverlays(markers);
+      //根据输入的关键字在搜索范围内检索
+      searchService.search(this.searchValue);
+    },
+    clearOverlays(overlays) {
+      var overlay;
+      while ((overlay = overlays.pop())) {
+        overlay.setMap(null);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.content {
+  padding: 20px;
+}
+#container {
+  width: 100%;
+  height: 85vh;
+}
+.search-row {
+  padding-bottom: 20px;
+}
+.search-row button {
+  margin: 0 10px;
+}
+</style>