- 增加多页面配置

2 anos atrás · 6f2c9299e0
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 <!--
 * @Date: 2022-01-19 10:08:58
 * @LastEditors: JinxChen
 * @LastEditTime: 2022-05-10 16:51:55
 * @LastEditTime: 2022-05-11 14:26:32
 * @FilePath: \AntpayFrontEnd\README.md
 * @description: 项目说明文档
 -->
@@ -99,4 +99,10 @@ feature
 - 增加 一个高德demo 判断一个点是否在一个多边形围栏内
 - 增加 引入高德地图api
 - 增加 圆形围栏判断 一个点是否在圆形围栏内
 - 增加 坐标点显示
 - 增加 坐标点显示


 ### v1.0.5
 `2022.05.11`
 feature
 - 增加 多页面配置
--- a/public/gaode.html
+++ b/public/gaode.html
@@ -0,0 +1,152 @@
 <!doctype html>
 <html lang="">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>高德地图demo</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=6e4a6c39ea6d18b8dd3151baa3a7c0d5"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
      html,body,#container{
        height: 100%
      }
      .info {
          height: 100px;
          width: 250px;
          z-index: 9999;
          position: absolute;
          top: 20px;
          left: 20%;
          background-color: wheat;
          text-align: center;
      }
    </style>
 </head>
 <body>
 <div id="container"></div>
 <div class='info'>
    <p>拖动marker可调整位置</p>
    <input type="text" id="text"/>
 </div>
 <script script type="text/javascript">

    /* var textBox = new AMap.Text({
        map: map,
        position: new AMap.LngLat(116.40109,39.919728),
        offset: new AMap.Pixel(-20, -40),
        style:{
            'background-color':'yellow',
            'border':'solid 1px #0088ff',
            'padding':'10px 20px'
        }
    }) */
    // 获取url的参数
    function getQueryString() {
        var url = window.location.hash;
        console.log(url); //获取url中"?"符后的字串
        let theRequest = new Object();
        if (url.indexOf("?") != -1) {
            let str = url.substr(8);
            console.log("str", str);
            strs = str.split("&");
            for(let i = 0; i < strs.length; i ++) {
                theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }
    var params = getQueryString();
    console.log(params.polygon);
    var polyLnglAtList = params.polygon.split(';').map(item => {
        return item.split(',');
    });
    var radius = Number(params.radius);
    console.log("radius", radius);
    var center = params.center.split(',');
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 13,
        center: center
    });
    console.log("polyLnglAtList", polyLnglAtList);
    var marker = new AMap.Marker({
        map: map,
        draggable:true,
        position: center
    });
    function createPoly() {
        // 创建地图
        // 判断是多边形还是圆形 数组length为1 是圆形
        if (polyLnglAtList.length === 1) {
            // 创建点
            var polygon = new AMap.Circle({
                center: center,
                radius: radius, //半径
                borderWeight: 3,
                strokeColor: "red",
                strokeWeight: 6,
                strokeOpacity: 0.5,
                fillOpacity: 0.4,
                strokeStyle: 'dashed',
                strokeDasharray: [10, 10],
                // 线样式还支持 'dashed'
                fillColor: 'green',
                zIndex: 50,
            });
            map.add(polygon)
            return polygon
        } else {
            // 否则是多边形
            var polygon = new AMap.Polygon({
                map: map,
                fillOpacity: 0.4,
                path: polyLnglAtList
            });
            return polygon
        }
    };
    // 绑定拖拽事件
    function compute() {
        var point = marker.getPosition();
        console.log("当前坐标点::", point);
        /* var isPointInRing = AMap.GeometryUtil.isPointInRing(point,polyLnglAtList); */
        var newPolygon = createPoly();
        console.log("newPolygon", newPolygon);
        var isPointInRing = newPolygon.contains(point);
        marker.setLabel({
            content: isPointInRing ? '在内部'+ point : '在外部' + point,
            offset:new AMap.Pixel(20,0)
        });
        // 双向绑定
        var input = document.querySelector("#text");
        var data = {};
        Object.defineProperty(data, "name", {
        configurable: true,
        get: function(){
            return input.value
        },
        set: function(newValue){
            //this.value = newValue;
            input.value = newValue;
        }
        })
        data.name = point.toString();
        input.onchange = function(){
        data.name = data.name;
        };
        let divBox = document.createElement('span');
        divBox.innerHTML = isPointInRing;
        divBox.className = 'fence';
        document.body.appendChild(divBox);
        console.log("该点是否在围栏内::", isPointInRing);
    }
    createPoly();
    compute();
    marker.on('dragging',compute)
    map.setFitView();
 </script>
 <div id="gaode"></div>
 </body>
 </html>
--- a/public/index.html
+++ b/public/index.html
@@ -1,8 +1,8 @@
 <!--
 * @Date: 2022-01-19 10:08:26
 * @LastEditors: JinxChen
 * @LastEditTime: 2022-02-16 10:52:18
 * @FilePath: \alipay-scan-code-front-end\public\index.html
 * @LastEditTime: 2022-05-11 10:41:39
 * @FilePath: \AntpayFrontEnd\public\index.html
 * @description:
 -->
 <!DOCTYPE html>
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <!--
 * @Date: 2022-01-19 10:08:26
 * @LastEditors: JinxChen
 * @LastEditTime: 2022-04-14 09:50:16
 * @LastEditTime: 2022-05-10 18:25:55
 * @FilePath: \AntpayFrontEnd\src\App.vue
 * @description:
 -->
@@ -25,7 +25,8 @@ export default {
            }
        },
        mounted() {
            console.log("当前版本号::", VERSION_MODEL, "当前环境::", process.env.NODE_ENV);
            console.log("当前版本号::", VERSION_MODEL, "当前环境::", process.env.NODE_ENV, this.$title);

        },
        methods: {
            reload() {
@@ -33,7 +34,7 @@ export default {
                this.$nextTick(() => {
                    this.isRouterAlive = true;
                });
            }
            },
        }
 }
 </script>
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,7 @@
 /*
 * @Date: 2022-01-19 10:08:26
 * @LastEditors: JinxChen
 * @LastEditTime: 2022-04-12 15:07:40
 * @LastEditTime: 2022-05-11 14:24:55
 * @FilePath: \AntpayFrontEnd\src\main.js
 * @description:
 */
--- a/src/pages/gaode.js
+++ b/src/pages/gaode.js
@@ -0,0 +1,10 @@
 import Vue from 'vue';
 import gaode from './gaode.vue';
 import router from '../router';
 import store from '../store';
 Vue.config.productionTip = false;
 new Vue({
    router,
    store,
    render: (h) => h(gaode),
  }).$mount("#gaode");
--- a/src/pages/gaode.vue
+++ b/src/pages/gaode.vue
@@ -0,0 +1,19 @@
 <template>
    <div id="gaode">
    </div>
 </template>

 <script>
 export default {
  name:'gaode',
  data(){
   return {

   }
  }
 }
 </script>

 <style scoped>

 </style>
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,7 +1,7 @@
 /*
 * @Date: 2022-01-19 10:08:26
 * @LastEditors: JinxChen
 * @LastEditTime: 2022-05-09 14:24:03
 * @LastEditTime: 2022-05-11 14:24:34
 * @FilePath: \AntpayFrontEnd\src\router\index.js
 * @description:
 */
@@ -11,7 +11,6 @@ import Nprogress from "nprogress";
 import "nprogress/nprogress.css";

 Vue.use(VueRouter);

 const routes = [
    { path: '/', redirect: 'index' },
    { path: '/index', name: 'index', component: resolve => require(['@/views/AliPayIndex'], resolve) },
@@ -34,7 +33,7 @@ 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) },
    { path: '/gaode-point-in-ring', name: 'gaode-point-in-ring', component: resolve => require(['@/views/gaode-demo/PointInRing'], resolve),},



--- a/src/views/gaode-demo/PointInRing.vue
+++ b/src/views/gaode-demo/PointInRing.vue
@@ -1,6 +1,6 @@
 <template>
    <div id="map" ref="mapContainer">
        <div class="tips" v-if="isShowTips">
        <div class="tips" v-if="isShowTips" >
            <p>{{this.tips}}</p>
            <p>当前点坐标:</p>
            <van-field v-model="map.center"></van-field>
@@ -160,7 +160,7 @@ export default {
        divBox.className = 'fence';
        document.body.appendChild(divBox);
        console.log("map-container", this.$refs.mapContainer);
    }
        }
  }
 }
 </script>
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,7 +1,7 @@
 /*
 * @Author: your name
 * @Date: 2020-04-15 10:00:32
 * @LastEditTime: 2022-05-10 09:59:17
 * @LastEditTime: 2022-05-11 14:26:01
 * @LastEditors: JinxChen
 * @Description: In User Settings Edit
 * @FilePath: \AntpayFrontEnd\vue.config.js
@@ -9,11 +9,27 @@
 const port = process.env.port || process.env.npm_config_port || 8080;/* 7788 */ // dev port

 module.exports = {
    publicPath: './',
    // 注意： 多页面配置 不再使用全路径，单页面时可以开启
   /*  publicPath: './', */
    outputDir: 'dist',
    // assetsDir: 'static',
    // lintOnSave: process.env.NODE_ENV === 'development',
    productionSourceMap: false,
    // 多页面配置
    pages: {
        // 先配置主页
        index: {
            entry: './src/main.js',
            template: './public/index.html',
            /* title: '用户登录' */
        },
        // 再配置各个子页面：登录后课表查询页
        gaode: {
            entry: './src/pages/gaode.js',
            template: './public/gaode.html',
            title: '高德地图demo'
        }
    },
    devServer: {
        port: port,
        open: true,