2022-8-3 ad，map

3 years ago · 4777fcdea8
parent 08a06560ee
commit 4777fcdea8
7 changed files with 110 additions and 43 deletions
--- a/package.json
+++ b/package.json
@ -14,6 +14,7 @@
    "test:ci": "npm run lint && npm run test:unit"
  },
  "dependencies": {
+    "avue-plugin-map": "^1.0.1",
    "axios": "0.18.1",
    "core-js": "3.6.5",
    "echarts": "^4.2.1",
--- a/public/index.html
+++ b/public/index.html
@ -6,6 +6,15 @@
    <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>
+      window._AMapSecurityConfig = {
+        securityJsCode: '68787c7a64e7240670e6a538b326d64b',
+      }
+    </script>
+    <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.11&key=1a9ee0079fcb3c6c64c96dc903989994&plugin=AMap.PlaceSearch'></script>
+    <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
+
  </head>
  <body>
    <noscript>
--- a/src/main.js
+++ b/src/main.js
@ -44,6 +44,9 @@ Vue.use(VueParticles)

 Vue.config.productionTip = false

+import AvueMap from 'avue-plugin-map'
+Vue.use(AvueMap)
+
 import LxHeader from "@/components/LxHeader/index"
 Vue.component('lx-header',LxHeader)
 import XyTable from "@/components/XyTable"
--- a/src/utils/index.js
+++ b/src/utils/index.js
@ -115,3 +115,14 @@ export function param2Obj(url) {
  })
  return obj
 }
+
+//防抖
+export function debounce(fn,delay=500){
+  let timer = null
+  return function _debounce() {
+    if (timer) clearTimeout(timer)
+    timer = setTimeout(() => {
+      fn()
+    }, delay)
+  }
+}
--- a/src/views/business/component/addStore.vue
+++ b/src/views/business/component/addStore.vue
@ -68,20 +68,23 @@
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>经度：
          </div>
          <div class="xy-table-item-content">
-            <el-input clearable placeholder="请填写经度" v-model="form.lng" style="width: 120px;"/>
+            <el-input disabled clearable placeholder="请填写经度" v-model="form.lng" style="width: 120px;"/>
          </div>
        </div>
      </template>
-      <template v-slot:eng>
+      <template v-slot:lat>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>纬度：
          </div>
          <div class="xy-table-item-content">
-            <el-input clearable placeholder="请填写纬度" v-model="form.eng" style="width: 120px;"/>
+            <el-input disabled  clearable placeholder="请填写纬度" v-model="form.lat" style="width: 120px;"/>
          </div>
        </div>
      </template>
+      <template v-slot:extraFormBottom>
+        <avue-map size="small" :option="option" v-model="map" @mapClick="test"></avue-map>
+      </template>
    </xy-dialog>
  </div>
 </template>
@ -99,12 +102,46 @@ export default {
        address:'',
        contact:'',
        contactNumber:'',
-        lng:'',
-        eng:''
+        lng:'',//经度
+        lat:'',//纬度
+      },
+      map:{
+
+      },
+
+      option: {
+        column: [
+          {
+            label: '坐标',
+            prop: 'map',
+            type: 'map',
+            //高德初始化参数
+            params:{
+              zoom: 10,
+              // zoomEnable: false,
+              // dragEnable: false,
+            }
+          }]
      }
    }
  },
-  methods: {}
+  methods: {
+    test(r,p){
+      this.$nextTick(()=>{
+        this.form.lat = p
+        this.form.lng = r
+      })
+    }
+  },
+  watch:{
+    map(newVal){
+      this.form.lat = newVal?.location?.lat
+      this.form.lng = newVal?.location?.lng
+    }
+  },
+  mounted() {
+
+  }

 }
 </script>
--- a/src/views/marketing/ad.vue
+++ b/src/views/marketing/ad.vue
@ -1,6 +1,9 @@
 <template>
-  <div>
-
+  <div style="padding: 0 20px">
+    <div ref="lxHeader">
+      <lx-header icon="md-apps" text="广告管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+        <div slot="content"></div>
+        <slot>
          <div class="selects">
            <div class="selects-item">
              <div class="selects-item-label">活动名称：</div>
@ -35,6 +38,9 @@
              <Button style="margin: 0 6px;" type="info" @click="$refs['addAd'].isShow = true">新增</Button>
            </div>
          </div>
+        </slot>
+      </lx-header>
+    </div>

    <xy-table :list="list" :table-item="table"></xy-table>

@ -145,7 +151,7 @@ export default {
    align-items: center;
    justify-content: center;

-    margin-bottom: 6px;
+    margin-top: 6px;
    &-label{
      white-space: nowrap;

--- a/src/views/productService/policyManage.vue
+++ b/src/views/productService/policyManage.vue
@ -1,7 +1,7 @@
 <template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
-      <lx-header icon="md-apps" text="产品与服务管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+      <lx-header icon="md-apps" text="政策管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <div slot="content"></div>
        <slot>
          <div>