From 18f67a98505d6775905026689de4f5086b48527b Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Sat, 23 Jul 2022 14:09:10 +0800
Subject: [PATCH] ditu

---
 package.json                  |   2 +
 public/index.html             |  11 +++-
 src/main.js                   |   7 +++
 src/views/active/activity.vue | 106 ++++++++--------------------------
 vue.config.js                 |   2 +-
 5 files changed, 44 insertions(+), 84 deletions(-)
diff --git a/package.json b/package.json
index cf8b0c6..72c02a1 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,8 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
+    "@smallwei/avue": "^2.9.12",
+    "avue-plugin-map": "^1.0.1",
     "axios": "0.18.1",
     "core-js": "3.6.5",
     "echarts": "^4.2.1",
diff --git a/public/index.html b/public/index.html
index 61d5f33..7afed81 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,9 +6,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
-    <script charset="utf-8" src="https://map.qq.com/api/gljs?v=2.exp&key=4VBBZ-HAA3X-QKI46-7GAL2-LQEOT-BEBKN"></script>
+    <!-- <script charset="utf-8" src="https://map.qq.com/api/gljs?v=2.exp&key=4VBBZ-HAA3X-QKI46-7GAL2-LQEOT-BEBKN"></script>
   <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=4VBBZ-HAA3X-QKI46-7GAL2-LQEOT-BEBKN"></script>
-    <script src="http://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
+    <script src="http://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script> -->
+    <script>
+      window._AMapSecurityConfig = {
+        securityJsCode: 'dbc95be996393c8c69e3958bb945ea08',
+      }
+    </script>
+    <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.11&key=53919608dd142b8d4498b43bfdef0792&plugin=AMap.PlaceSearch'></script>
+    <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
   </head>
   <body>
     <noscript>
diff --git a/src/main.js b/src/main.js
index 3d59f8c..bdbfe38 100644
--- a/src/main.js
+++ b/src/main.js
@@ -23,6 +23,13 @@ Vue.prototype.base = base;
 import '@/icons' // icon
 import '@/permission' // permission control
 
+import Avue from '@smallwei/avue';
+import '@smallwei/avue/lib/index.css';
+Vue.use(Avue);
+
+// import AvueMap from 'avue-plugin-map'
+// Vue.use(AvueMap);
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api
diff --git a/src/views/active/activity.vue b/src/views/active/activity.vue
index 99a8987..1e73f3f 100644
--- a/src/views/active/activity.vue
+++ b/src/views/active/activity.vue
@@ -92,8 +92,9 @@
             </el-form-item>
           </el-col>
           <el-col :span="10">
-            <el-form-item label="地址" prop="address">
-              <el-input v-model="form.address" placeholder="请填写活动地址" autocomplete="off"></el-input>
+            <el-form-item label="地址" prop="address">
+              <avue-input-map :params="mapparams" placeholder="请选择地图" v-model="mapform" ></avue-input-map>
+
             </el-form-item>
           </el-col>
           <el-col :span="10" :offset="4">
@@ -103,39 +104,15 @@
           </el-col>
           <el-col :span="10">
             <el-form-item label="地址经度" prop="longitude">
-              <el-input v-model="form.longitude" placeholder="请填写地址经度" autocomplete="off"></el-input>
+              <el-input disabled="" v-model="form.longitude" placeholder="请填写地址经度" autocomplete="off"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="10" :offset="4">
             <el-form-item label="地址纬度" prop="latitude">
-              <el-input v-model="form.latitude" placeholder="请填写地址纬度" autocomplete="off"></el-input>
+              <el-input disabled="" v-model="form.latitude" placeholder="请填写地址纬度" autocomplete="off"></el-input>
             </el-form-item>
           </el-col>
-          <el-col :span="20" :offset="2">
-
-            <div id="containers" style="width:100%;height:300px;margin-bottom:20px"></div>
-          </el-col>
-
 
-         <!-- <el-col :span="8">
-            <el-form-item label="开始时间" prop="start_time">
-              <el-date-picker style="width:100%" v-model="form.start_time" type="datetime"
-                value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择活动开始时间" @change="isShowTime">
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="结束时间" prop="end_time">
-              <el-time-select style="width:100%" placeholder="结束时间" value-format="HH:mm:ss" v-model="form.end_time"
-                :picker-options="{
-                    start: '00:00',
-                    step: '00:15',
-                    end: '24:00',
-                    minTime: showTime
-                  }">
-              </el-time-select>
-            </el-form-item>
-          </el-col> -->
           <el-col :span="8">
             <el-form-item label="总人数" prop="total">
               <el-input v-model="form.total" placeholder="请填写总人数(0为不限制)" autocomplete="off"></el-input>
@@ -233,7 +210,8 @@
 </template>
 <script>
   import LxHeader from "@/components/LxHeader/index.vue";
-  import Tinymce from '@/components/Tinymce'
+  import Tinymce from '@/components/Tinymce'
+  import AvueMap from 'avue-plugin-map'
   import {
     getToken
   } from '@/utils/auth'
@@ -248,7 +226,8 @@
   export default {
     components: {
       LxHeader,
-      Tinymce,
+      Tinymce,
+      AvueMap
     },
     data() {
       return {
@@ -314,7 +293,10 @@
             value: "不限"
           }]
         },
-
+        mapparams:{
+            zoom: 11,
+        },
+        mapform:[] ,
         form: {
           name: "",
           area: "",
@@ -430,58 +412,15 @@
 
     },
     watch: {
-      dialogFormVisible(newVal, oldVal) {
-        if (newVal == true) {
-          let that = this;
-          that.markerLayer = new TMap.MultiMarker({});
-          that.initMap();
-        }
+
+      mapform(newVal, oldVal) {
+        this.form.longitude = newVal[0];
+        this.form.latitude = newVal[1];
+        this.form.address = newVal[2];
       }
     },
     methods: {
-      initMap() {
-        //如果地图存在，就销毁，下面会重新创建一个
-          if (this.map!=null) {
-            this.map.destroy()
-          }
-        this.$nextTick(() => {
-          let that = this;
-          console.log(window); // 通过window获取
-          var center = new window.TMap.LatLng(31.302377, 120.625826)
-          //初始化地图
-          var map = new window.TMap.Map("containers", {
-            zoom: 18, //设置地图缩放级别
-            center: center, //设置地图中心点坐标
-          });
-          this.map = map;
-          map.on("click", (e) => {
-            this.markerLayer.setGeometries([]);
-            const position = e.latLng;
-            that.form.longitude = position.lng,
-              that.form.latitude = position.lat,
-              this.addImgMarker(position);
-          });
-        })
-      },
-      addImgMarker(data) {
-        this.markerLayer = new TMap.MultiMarker({
-          map: this.map,
-          //样式定义
-          styles: {
-            //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
-            myStyle: new TMap.MarkerStyle({
-              width: 25, // 点标记样式宽度（像素）
-              height: 35, // 点标记样式高度（像素）
-              src: this.imgsrc, //图片路径
-              //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
-              anchor: {
-                x: 16,
-                y: 32
-              },
-            }),
-          },
-        });
-      },
+
       initLoad() {
         var that = this;
         var clientHeight = document.documentElement.clientHeight
@@ -512,6 +451,7 @@
           let result = Object.assign(that.form, res);
           that.form = result;
           that.dateRange = [result.start_time, result.end_time];
+          that.mapform = [result.longitude,result.latitude,result.address]
           console.log(that.dateRange);
           // that.showTime = result.start_time.substring(11, result.start_time.length);
           // that.form.end_time = result.end_time.substring(11, result.end_time.length);
@@ -540,12 +480,12 @@
           that.info(obj);
         } else {
           this.dateRange=[];
+            this.mapform = ['','',''];
         }
         this.dialogFormVisible = true;
 
       },
       compareDate (d1, d2) {
-
         let reg = new RegExp('-', 'g')
 
         return ((new Date(d1.replace(reg, '/'))) > (new Date(d2.replace(reg, '/'))))
@@ -555,6 +495,10 @@
         var that = this;
         that.form.start_time = this.dateRange[0];
         that.form.end_time = this.dateRange[1];
+        if(!that.form.start_time||!that.form.end_time){
+          that.$message.error('请选择活动时间');
+          return false;
+        }
         //比较预约截止不能大于活动开始时间
         let checktime = that.compareDate(that.form.start_time,that.form.end_plan);
         if(!checktime){
diff --git a/vue.config.js b/vue.config.js
index bec0f7c..d0296aa 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -47,7 +47,7 @@ module.exports = {
     proxy: {
       [process.env.VUE_APP_BASE_API]: {
         target: 'https://dangxingjiaoyujidi.langye.net/',
-        //target: 'http://leyitest.ali251.langye.net/',
+        // target: 'http://leyitest.ali251.langye.net/',
         changeOrigin: true, //配置跨域
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''
