Merge branch 'feature-gaode' into develop

.eslintrc.js

@@ -1,33 +1,33 @@
-/*
- * @Date: 2022-01-19 10:08:26
- * @LastEditors: JinxChen
- * @LastEditTime: 2022-01-19 10:29:11
- * @FilePath: \alipay-scan-code-front-end\.eslintrc.js
- * @description:
- */
 module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
-  parserOptions: {
-    parser: "babel-eslint",
-  },
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "off" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "off" : "off",
-    "prettier/prettier": "off", //关闭 prettier 验证
-  },
-  overrides: [
-    {
-      files: [
-        "**/__tests__/*.{j,t}s?(x)",
-        "**/tests/unit/**/*.spec.{j,t}s?(x)",
-      ],
-      env: {
-        jest: true,
-      },
+    root: true,
+    env: {
+      node: true,
+    },
+    extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
+    parserOptions: {
+      parser: "babel-eslint",
+    },
+    rules: {
+      "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+      "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+      //关闭prettier
+      "prettier/prettier": "off",
+      // 关闭eslint语法检测
+      "no-unused-vars":0,
     },
-  ],
-};
+    globals: {
+      "AMap": "true",
+      "AMapUI": "true",
+    },
+    overrides: [
+      {
+        files: [
+          "**/__tests__/*.{j,t}s?(x)",
+          "**/tests/unit/**/*.spec.{j,t}s?(x)",
+        ],
+        env: {
+          jest: true,
+        },
+      },
+    ],
+  };

README.md

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-01-19 10:08:58
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-05-09 11:30:39
+ * @LastEditTime: 2022-05-10 11:09:08
  * @FilePath: \AntpayFrontEnd\README.md
  * @description: 项目说明文档
 -->
@@ -91,4 +91,10 @@ feature
 ### v1.0.3
 `2022.05.09`
 feature
-- 增加 支付宝花呗支付页面
+- 增加 支付宝花呗支付页面
+
+### v1.0.4
+`2022.05.10`
+feature
+- 增加 一个高德demo 判断一个点是否在一个多边形围栏内
+- 增加 引入高德地图api

src/config/map/index.js

@@ -0,0 +1,49 @@
+/*
+ * @Date: 2022-01-14 09:15:21
+ * @LastEditors: JinxChen
+ * @LastEditTime: 2022-05-10 10:24:06
+ * @FilePath: \AntpayFrontEnd\src\config\map\index.js
+ * @description:
+ */
+import { AMapKey, AMapJsCode } from './models';
+
+/**
+ * @param isSync 异步加载
+ * @param plugins 字符串数组格式 [ 'AMap.Geocoder', ... ]
+ * @returns {Promise}
+ * @constructor
+ */
+export default function MapLoader(isSync = false, plugins = []) {
+    return new Promise((resolve, reject) => {
+        try {
+            if (window.AMap && (plugins === null || plugins === undefined || plugins.length === 0)) {
+                resolve(window.AMap)
+            } else {
+                let script = document.createElement('script');
+                script.type = 'text/javascript';
+                script.async = !isSync;
+                script.src = `https://webapi.amap.com/maps?v=1.4.15&callback=initAMap&key=${AMapKey}&plugin=AMap.BezierCurveEditor${plugins ? ',' + plugins.join(',') : ''}`;
+                script.onerror = reject;
+                document.head.appendChild(script);
+
+                let script1 = document.createElement('script');
+                script1.type = 'text/javascript';
+                script1.async = false;
+                script1.src = 'https://webapi.amap.com/ui/1.0/main.js?v=1.0.11';
+                script1.onerror = reject;
+                if (isSync) {
+                    document.head.appendChild(script1);
+                }
+            }
+            window.initAMap = () => resolve(window.AMap);
+
+            // JSAPI key搭配静态安全密钥以明文设置, 详情见: https://lbs.amap.com/api/jsapi-v2/guide/abc/load
+            window._AMapSecurityConfig = {
+                securityJsCode: `${AMapJsCode}`,
+            }
+        } catch (e) {
+            console.log(e);
+        }
+
+    })
+}

src/config/map/models.js

@@ -0,0 +1,13 @@
+/*
+ * @Date: 2021-04-12 16:29:30
+ * @LastEditors: JinxChen
+ * @LastEditTime: 2022-05-09 14:16:46
+ * @FilePath: \AntpayFrontEnd\src\config\map\models.js
+ * @description:
+ */
+// 高德key
+export const AMapKey = /* 'f7bc7e76645d2e84aa6bc62fdc5498a0' */ '6e4a6c39ea6d18b8dd3151baa3a7c0d5';
+
+
+//高德jscode
+export const AMapJsCode = '6a421e1233cd12dd4899e373e11bb641';

src/config/models.js

@@ -1,11 +1,11 @@
 /*
  * @Date: 2021-11-20 10:26:39
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-05-09 11:30:58
+ * @LastEditTime: 2022-05-10 11:07:57
  * @FilePath: \AntpayFrontEnd\src\config\models.js
  * @description:
  */
-export const VERSION_MODEL = '1.0.3'; //版本号
+export const VERSION_MODEL = '1.0.4'; //版本号
 export const IMAGE_URL = {
     production: 'http://zfb.ssjlai.com/web/',
     test: 'http://zfb.ssjlai.com/web/',

src/router/index.js

@@ -1,7 +1,7 @@
 /*
  * @Date: 2022-01-19 10:08:26
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-04-13 11:15:53
+ * @LastEditTime: 2022-05-09 14:24:03
  * @FilePath: \AntpayFrontEnd\src\router\index.js
  * @description:
  */
@@ -33,6 +33,9 @@ const routes = [
     // 分销商模式- 信息录入
     { path: '/form-dealers', name: 'form-dealers', component: resolve => require(['@/views/alipay-dealers/AlipayFormDealers'], resolve) },
 
+    // 高德地图测试demo
+    { path: '/gaode-point-in-ring', name: 'gaode-point-in-ring', component: resolve => require(['@/views/gaode-demo/PointInRing'], resolve) },
+
 
 
 ];

src/views/gaode-demo/PointInRing.vue

@@ -0,0 +1,134 @@
+<template>
+    <div id="map">
+        <div class="tips">
+            <p>{{this.tips}}</p>
+        </div>
+    </div>
+</template>
+
+<script>
+import MapLoader from '@/config/map';
+export default {
+  name:'point-in-ring',
+  data(){
+   return {
+       map: {
+           instance: null,
+           zoom: 13,
+           center: [113.121586,23.021351], //
+           marker: null,
+           polygon: null,
+       }, //创建地图参数
+       polyLnglAtList: [
+           [113.102037, 23.041415],
+           [113.137954, 23.045997],
+           [113.142029, 23.016554],
+           [113.105961, 23.014332]
+       ], //绘制多边形围栏数据数组
+
+       isPointInRing: null, //是否在围栏内
+   }
+  },
+  computed: {
+      tips() {
+          return this.isPointInRing ? '该点在围栏内' : '该点在围栏外';
+      }
+  },
+  created() {
+    this.getMap();
+  },
+  mounted() {
+      setTimeout(() => {
+        this.createPolygon();
+        this.createMarker();
+        this.computeMarker();
+      }, 2000)
+  },
+  methods: {
+    //   getMap 创建地图
+    getMap() {
+        console.log("地图加载重");
+        const plugins = [
+                    'AMap.Geocoder',
+                    'AMap.GraspRoad',
+                    'AMap.GeometryUtil',
+                    'AMap.CitySearch',
+                    'AMap.ToolBar',
+        ];
+        MapLoader(false, plugins).then(
+            AMap => {
+                // 地图实例
+                let that = this;
+                that.map.instance = new AMap.Map('map', {
+                    center: that.map.center,
+                    resizeEnable: true,
+                    zoom: that.map.zoom,
+                });
+                const toolBar = new AMap.ToolBar({ offset: new AMap.Pixel(10, 310), position: 'LT' });
+                this.map.instance.addControl(toolBar);
+            },
+            e => {
+                console.log("加载地图失败，下面是报错数据");
+                console.log(e);
+            }
+        )
+
+    },
+    // 创建围栏
+    createPolygon() {
+        this.map.polygon = new AMap.Polygon({
+            map: this.map.instance,
+            fillOpacity: 0.1,
+            path: this.polyLnglAtList
+        });
+    },
+    // 创建marker
+    createMarker() {
+        let content = `
+            <div class="marker_avatar">
+                <div class="avatar">
+                    <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png" />
+
+                </div>
+            </div>`;
+        let center = this.map.center;
+        this.map.marker = new AMap.Marker({
+            position: center,
+            draggable:true,
+
+        });
+        // 注册拖拽事件
+        this.map.marker.on('dragging', this.computeMarker);
+        this.map.instance.add(this.map.marker);
+        this.map.instance.setCenter(center);
+    },
+    // 拖拽marker
+    computeMarker() {
+        let point = this.map.marker.getPosition();
+        this.isPointInRing = AMap.GeometryUtil.isPointInRing(point, this.polyLnglAtList);
+        console.log("是否在围栏内部::", this.isPointInRing );
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+    #map {
+        height:100%;
+        width: 100%;
+        z-index: 99;
+        .tips {
+            height: 80px;
+            width: 150px;
+            line-height: 80px;
+            color: red;
+            background: wheat;
+            position: absolute;
+            top: 20px;
+            left: 20%;
+            text-align: center;
+            font-size: 16px;
+            z-index: 9999;
+        }
+    }
+</style>

vue.config.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2020-04-15 10:00:32
- * @LastEditTime: 2022-04-08 15:01:09
+ * @LastEditTime: 2022-05-10 09:59:17
  * @LastEditors: JinxChen
  * @Description: In User Settings Edit
  * @FilePath: \AntpayFrontEnd\vue.config.js
@@ -41,6 +41,11 @@ module.exports = {
         // Enable CSS modules for all css / pre-processor files. // This option does not affect *.vue files.
         requireModuleExtension: true
     },
+    configureWebpack: {
+        externals: {
+          'AMap': 'AMap'
+        }
+    },
     chainWebpack: config => {
         // 该配置用来配置打包生成的文件是否带hash值后缀，该值默认为true，
         // 在模式为production的时候，打包出的js和css文件会自动添加hash值后缀。