店铺地图、美图店铺ID

public/index.html

@@ -8,7 +8,10 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
-	  <style>
+  <!--    这三个文件是新引入的腾讯地图的api 注意：key值是必须要填的 是一串字符串-->
+    <script type="text/javascript" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=E7QBZ-GUMLJ-5AMFK-X32CS-BOFHJ-46FJX"></script>
+
+    <style>
     html,
     body,
     #app {

src/api/system/store.js

@@ -94,4 +94,12 @@ export function authUserSelectAll(data) {
   })
 }
 
+// 查询美团点评列表
+export function scope(query) {
+  return request({
+    url: '/system/store/scope',
+    method: 'get',
+    params: query
+  })
+}
 

src/views/system/store/index.vue

@@ -159,11 +159,17 @@
     />
 
     <!-- 添加或修改门店对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="55%" append-to-body destroy-on-close @close="onClose">
+    <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body destroy-on-close >
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <el-row>
+          <el-col :span="12">
         <el-form-item label="门店名称" prop="name" required>
           <el-input v-model="form.name" placeholder="请输入门店名称"/>
         </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
         <el-form-item label="门店类型" prop="storeType">
           <el-radio-group v-model="form.storeType">
             <el-radio
@@ -174,42 +180,77 @@
             </el-radio>
           </el-radio-group>
         </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="美团点评店铺id" prop="group">
+              <el-input @focus="openShopUuid()" v-model="form.openShopUuid" placeholder="请输入美团点评店铺id"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
         <el-form-item label="宣传图" prop="images" >
           <image-upload v-model="form.images"/>
         </el-form-item>
+        <el-row>
+          <el-col :span="12">
         <el-form-item label="门店地址" prop="address">
           <el-input v-model="form.address" placeholder="请输入门店地址"/>
         </el-form-item>
+          </el-col>
+          <el-col :span="12">
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="onSearchMapAddress">搜索地图位置</el-button>
+        </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="12">
         <el-form-item label="经度" prop="longitude" required>
           <el-input v-model="form.longitude" placeholder="请输入经度"/>
         </el-form-item>
+          </el-col>
+          <el-col :span="12">
         <el-form-item label="纬度" prop="latitude" required>
           <el-input v-model="form.latitude" placeholder="请输入纬度"/>
         </el-form-item>
+          </el-col>
+        </el-row>
+        <div id="container" style="height: 350px; margin-left: 30px; margin-bottom: 10px;">
+
+        </div>
+
+        <el-row>
+          <el-col :span="12">
         <el-form-item label="联系人" prop="manager">
           <el-input v-model="form.manager" placeholder="请输入联系人"/>
         </el-form-item>
+          </el-col>
+          <el-col :span="12">
         <el-form-item label="联系人电话" prop="phone">
           <el-input v-model="form.phone" placeholder="请输入联系人电话"/>
         </el-form-item>
+          </el-col>
+        </el-row>
+
         <el-form-item label="营业时间" prop="">
           <el-time-select
             v-model="form.openStartTime"
             :picker-options="{
-    start: '00:00',
-    step: '00:30',
-    end: '24:00'
-  }"
+              start: '00:00',
+              step: '00:30',
+              end: '24:00'
+            }"
             placeholder="请选择开始时间"
           >
           </el-time-select> -
           <el-time-select
             v-model="form.openEndTime"
             :picker-options="{
-    start: '00:00',
-    step: '00:30',
-    end: '24:00'
-  }"
+              start: '00:00',
+              step: '00:30',
+              end: '24:00'
+            }"
             placeholder="请选择结束时间"
           >
           </el-time-select>
@@ -236,15 +277,18 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <selectOpenShopUuid ref="select"  @select="selectOpenShopUuids"/>
   </div>
 </template>
 
 <script>
 import { listStore, getStore, delStore, addStore, updateStore } from '@/api/system/store'
+import selectOpenShopUuid from "./selectOpenShopUuid";
 
 export default {
   name: 'Store',
   dicts: ['store_status','store_type'],
+  components: {selectOpenShopUuid},
   data() {
     return {
       // 遮罩层
@@ -265,6 +309,7 @@ export default {
       title: '',
       // 是否显示弹出层
       open: false,
+      myMap: {},
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -282,6 +327,9 @@ export default {
         name: [
           { required: true, message: "名称不能为空", trigger: "blur" }
         ],
+        openShopUuid: [
+          { required: true, message: "美团点评店铺id不能为空", trigger: "blur" }
+        ],
         address: [
           { required: true, message: "门店地址不能为空", trigger: "blur" }
         ],
@@ -297,7 +345,97 @@ export default {
   created() {
     this.getList()
   },
+  mounted() {
+
+  },
   methods: {
+    initMap(lat=30.59231, lng=114.27311) {
+      let that = this;
+      //定义地图中心点坐标
+      var center = new TMap.LatLng(lat, lng)
+      //定义map变量，调用 TMap.Map() 构造函数创建地图
+      this.myMap = new TMap.Map(document.getElementById('container'), {
+        center: center,//设置地图中心点坐标
+        zoom: 15,   //设置地图缩放级别
+      });
+      this.geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
+      let geometries = {
+        "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
+        "styleId": 'myStyle',  //指定样式id
+        "position": center,  //点标记坐标位置
+        "properties": {//自定义属性
+          "title": "marker"
+        }
+      }
+      this.markerLayerFun(geometries);
+      //定义事件处理方法
+      var clickHandler = function(evt){
+        var latc = evt.latLng.getLat().toFixed(6);
+        var lngc = evt.latLng.getLng().toFixed(6);
+        // console.log("您点击的的坐标是："+ latc + "," + lngc);
+        // console.log(evt)
+        let position = new TMap.LatLng(latc, lngc)
+        let geometries = {
+          "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
+          "styleId": 'myStyle',  //指定样式id
+          "position": position  //点标记坐标位置
+        }
+        that.updateGeometries(geometries);
+        that.form.longitude = lngc
+        that.form.latitude = latc
+        that.geocoder
+          .getAddress({ location: position }) // 将给定的坐标位置转换为地址
+          .then((result) => {
+            that.form.address = result.result.address;
+            // 显示搜索到的地址
+          });
+      }
+      //Map实例创建后，通过on方法绑定点击事件
+      this.myMap.on("click",clickHandler)
+    },
+    /* 点击搜索  */
+    onSearchMapAddress() {
+    // 将给定的地址转换为坐标位置
+      let that = this;
+      if (!that.form.address) {
+        return
+      }
+      this.geocoder.getLocation({ address: that.form.address })
+        .then((result) => {
+          that.form.longitude = result.result.location.lng
+          that.form.latitude = result.result.location.lat
+          that.updateGeometries(
+            {
+              id: '1',
+              "styleId": 'myStyle',  //指定样式id
+              position: result.result.location, // 将得到的坐标位置用点标记标注在地图上
+            });
+          this.myMap.setCenter(result.result.location);
+        });
+    },
+    markerLayerFun(data) {
+      let map = this.myMap;
+      //创建并初始化MultiMarker
+      this.markerLayers = new TMap.MultiMarker({
+        map: map,  //指定地图容器
+        //样式定义
+        styles: {
+          //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
+          "myStyle": new TMap.MarkerStyle({
+            "width": 25,  // 点标记样式宽度（像素）
+            "height": 35, // 点标记样式高度（像素）
+            // "src": '../img/marker.png',  //图片路径
+            //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
+            "anchor": { x: 16, y: 32 }
+          })
+        },
+        //点标记数据数组
+        geometries: [data]
+      });
+    },
+    updateGeometries(data) {
+      this.markerLayers.updateGeometries([data]);
+    },
     /** 查询门店列表 */
     getList() {
       this.loading = true
@@ -337,7 +475,8 @@ export default {
         remark: null,
         openStartTime: '',
         storeType: "1",
-        openEndTime: ''
+        openEndTime: '',
+        openShopUuid: ''
       }
       this.resetForm('form')
     },
@@ -362,6 +501,9 @@ export default {
       this.reset()
       this.open = true
       this.title = '添加门店'
+      setTimeout(() => {
+        this.initMap();// 渲染地图
+      }, 1000);
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -374,6 +516,9 @@ export default {
         }
         this.open = true
         this.title = '修改门店'
+        setTimeout(() => {
+          this.initMap(this.form.latitude, this.form.longitude)
+        }, 1000);
       })
     },
     /** 分配用户操作 */
@@ -420,6 +565,14 @@ export default {
       this.download('system/store/export', {
         ...this.queryParams
       }, `store_${new Date().getTime()}.xlsx`)
+    },
+    openShopUuid() {
+      this.$refs.select.show();
+    },
+    selectOpenShopUuids(openShopUuid, cityname, shopaddress) {
+      this.form.openShopUuid = openShopUuid;
+      this.form.address = cityname + shopaddress;
+      this.onSearchMapAddress();
     }
   }
 }

src/views/system/store/selectOpenShopUuid.vue

+<template>
+  <!-- 授权用户 -->
+  <el-dialog title="选择美团点评店铺" :visible.sync="visible" width="80%" top="5vh" append-to-body>
+
+    <el-row>
+      <el-table @row-click="clickRow" ref="table" :data="dataList"  height="450px">
+        <el-table-column label="美团点评店铺id" align="center" prop="open_shop_uuid" width="300px"/>
+        <el-table-column label="店铺名称" align="center" prop="shopname" width="120px"/>
+        <el-table-column label="分店名称" align="center" prop="branchname" width="120px"/>
+        <el-table-column label="店铺地址" align="center" prop="shopaddress" />
+      </el-table>
+    </el-row>
+
+  </el-dialog>
+</template>
+
+<script>
+import { scope } from "@/api/system/store";
+export default {
+  data() {
+    return {
+      // 遮罩层
+      visible: false,
+      // 总条数
+      total: 0,
+      // 未授权用户数据
+      dataList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        phone: undefined
+      }
+    };
+  },
+  methods: {
+    // 显示弹框
+    show() {
+      this.queryParams.storeId = this.storeId;
+      this.getList();
+      this.visible = true;
+    },
+    clickRow(row) {
+      this.$emit('select',row.open_shop_uuid, row.cityname, row.shopaddress);
+      this.visible = false;
+    },
+    // 查询表数据
+    getList() {
+      scope(this.queryParams).then(res => {
+        this.dataList = res.data;
+        this.total = res.total;
+      });
+    },
+  }
+};
+</script>