auto

config/index.js

@@ -13,7 +13,15 @@ module.exports = {
     // Paths
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    proxyTable: {},
+    proxyTable: {
+      '/api1': {
+        target: "https://www.fastmock.site/mock/849a36d819c7df17b9a9e57c62a74a63/mock",
+        changeOrigin: true,
+        pathRewrite: {
+          "/api1": ""
+        }
+      },
+    },
 
     // Various Dev Server settings
     host: '0.0.0.0', // can be overwritten by process.env.HOST

src/components/map.vue

@@ -20,11 +20,13 @@
 
 <script>
 import AMapLoader from '@amap/amap-jsapi-loader';
+import {mapMutations, mapGetters} from 'vuex';
 export default {
   name: "",
   components: {},
   data() {
     return {
+      AMap:null,
       map:null,
       lngLat:[106.628201,26.646694],
       zoom:9,
@@ -36,6 +38,49 @@ export default {
       streetList:[],//街道,乡
     };
   },
+  watch: {
+    vuexSelectCity: {
+        handler: function() {
+            // console.log('vuexSelectCity',this.vuexSelectCity);
+            // console.log('vuexCityList',this.vuexCityList);
+            // this.vuexCityList.forEach(element => {
+            //   if(this.vuexSelectCity==element.value){
+            //     this.mapLevel= element.level
+            //   }
+            // });
+            this.mapLevel= 'city';
+            this.adcode = this.vuexSelectCity;
+            this.getMap(this.AMap);
+        },
+        deep: true
+    },
+    vuexSelectDistrict: {
+        handler: function() {
+          console.log('vuexSelectDistrict',this.vuexSelectDistrict);
+          if(this.vuexSelectDistrict){
+            this.mapLevel= 'district';
+            this.adcode = this.vuexSelectDistrict;
+            this.getMap(this.AMap);
+          } 
+        },
+        deep: true
+    },
+    vuexSelectStreet: {
+        handler: function() {
+          console.log('vuexSelectStreet',this.vuexSelectStreet);
+          if(this.vuexSelectStreet){
+            this.mapLevel= 'street';
+            this.adcode = this.vuexSelectStreet;
+            this.getMap(this.AMap);
+          } 
+        },
+        deep: true
+    },
+  },
+  computed: {
+      // 引入getters中的计算属性，需要在 computed 中引入
+      ...mapGetters(['vuexCityList','vuexDistrictList','vuexStreetList','vuexSelectCity','vuexSelectDistrict','vuexSelectStreet'])
+  },
   created() {
     
   },
@@ -46,6 +91,7 @@ export default {
     // }, 1000);
   },
   methods: {
+    ...mapMutations(['changeCityList','changeDistrictList','changeStreetList']),
     initMap() {
       window._AMapSecurityConfig = {
         securityJsCode: '4a6a8d8ea053d9aa8f4677ee1179fe57',  // 密钥
@@ -55,6 +101,7 @@ export default {
             version:"1.4.15",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
             // plugins:['AMap.ToolBar','AMap.DistrictSearch','AMap.Object3DLayer','AMap.Object3D'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
         }).then((AMap)=>{
+          this.AMap= AMap;
             this.map = new AMap.Map("container",{  //设置地图容器id
                 viewMode:"3D",    //是否为3D地图模式
                 zoom:this.zoom,           //初始化地图级别
@@ -94,8 +141,28 @@ export default {
           switch (that.mapLevel) {
             case 'province':
               console.log('province districtList',districtList);
+              let cityList = [];
+              districtList.forEach(element => {
+                cityList.push({label:element.name,value:element.adcode,level:element.level})
+              });
+              that.changeCityList(cityList);
+              break;
+            case 'city':
+              console.log('city districtList',districtList);
+              let districtLists = [];
+              districtList.forEach(element => {
+                districtLists.push({label:element.name,value:element.adcode,level:element.level})
+              });
+              that.changeDistrictList(districtLists);
+              break;
+            case 'street':
+              console.log('street districtList',districtList);
+              let streetLists = [];
+              districtList.forEach(element => {
+                streetLists.push({label:element.name,value:element.adcode,level:element.level})
+              });
+              that.changeStreetList(districtLists);
               break;
-          
             default:
               break;
           }
@@ -109,6 +176,7 @@ export default {
             var bounds = result.districtList[0].boundaries
             var polygons = []
             if (bounds) {
+              that.map.clearMap();
               for (var i = 0, l = bounds.length; i < l; i++) {
               //生成行政区划polygon
               var polygon = new AMap.Polygon({
@@ -151,10 +219,10 @@ export default {
             
           }
         })
-        
       })
-
     },
+    
+    
   },
 };
 </script>

src/components/pickerAddr.vue

@@ -6,9 +6,9 @@
 
     <div class="select-wrap">
         市：
-      <el-select v-model="value" placeholder="请选择">
+      <el-select v-model="selectCity" placeholder="请选择" @change="cityChange">
         <el-option
-          v-for="item in options"
+          v-for="item in vuexCityList"
           :key="item.value"
           :label="item.label"
           :value="item.value"
@@ -18,9 +18,9 @@
     </div>
     <div class="select-wrap">
         县：
-      <el-select v-model="value" placeholder="请选择">
+      <el-select v-model="selectDistrict" placeholder="请选择" @change="districtChange">
         <el-option
-          v-for="item in options"
+          v-for="item in vuexDistrictList"
           :key="item.value"
           :label="item.label"
           :value="item.value"
@@ -30,9 +30,9 @@
     </div>
     <div class="select-wrap">
         乡：
-      <el-select v-model="value" placeholder="请选择">
+      <el-select v-model="selectStreet" placeholder="请选择" @change="streetChange">
         <el-option
-          v-for="item in options"
+          v-for="item in vuexStreetList"
           :key="item.value"
           :label="item.label"
           :value="item.value"
@@ -45,12 +45,15 @@
 </template>
 
 <script>
-import {mapMutations, mapGetters} from 'vuex'
+import {mapMutations, mapGetters} from 'vuex';
 export default {
   name: "",
   components: {},
   data() {
     return {
+      selectCity: '',
+      selectDistrict: '',
+      selectStreet: '',
       options: [
         {
           value: "选项1",
@@ -82,10 +85,23 @@ export default {
   },
   created() {
     // console.log('this',this);
-    console.log('vuexCityList',this.vuexCityList);
+    // console.log('vuexCityList',this.vuexCityList);
   },
   methods: {
-    ...mapMutations(['changeCityList','changeDistrictList','changeStreetList']),
+    ...mapMutations(['changeSelectCity','changeSelectDistrict','changeSelectStreet']),
+    cityChange(e){
+      // console.log('cityChange',e);
+      this.changeSelectCity(e)
+    },
+    districtChange(e){
+      // console.log('districtChange',e);
+      this.changeSelectDistrict(e);
+      // console.log('vuexSelectDistrict',this.vuexSelectDistrict);
+    },
+    streetChange(e){
+      console.log('streetChange',e);
+      this.changeSelectStreet(e)
+    },
   },
 };
 </script>

src/store/addr/index.js

@@ -3,6 +3,10 @@
  */
 const addr = {
     state: {
+        vuexSelectCity: '',
+        vuexSelectDistrict: '',
+        vuexSelectStreet: '',
+
         vuexCityList: [],
         vuexDistrictList: [],
         vuexStreetList: [],
@@ -17,6 +21,16 @@ const addr = {
         changeStreetList(state, n) {
             state.vuexStreetList = n
         },
+
+        changeSelectCity(state, n) {
+            state.vuexSelectCity = n
+        },
+        changeSelectDistrict(state, n) {
+            state.vuexSelectDistrict = n
+        },
+        changeSelectStreet(state, n) {
+            state.vuexSelectStreet = n
+        },
         // addGoods(state, g) {
         //     state.goods.push(g)
         // },

src/store/getters.js

@@ -7,6 +7,10 @@ const getters = {
     vuexCityList: state => state.addr.vuexCityList,
     vuexDistrictList: state => state.addr.vuexDistrictList,
     vuexStreetList: state => state.addr.vuexStreetList,
+
+    vuexSelectCity: state => state.addr.vuexSelectCity,
+    vuexSelectDistrict: state => state.addr.vuexSelectDistrict,
+    vuexSelectStreet: state => state.addr.vuexSelectStreet,
 }
 
 export default getters

src/utils/request.js

@@ -40,8 +40,7 @@ export const callApi = ({
         const error = new Error('请传入url')
         return Promise.reject(error)
     }
-    // const fullUrl = `/${prefixUrl}/${url}`
-    const fullUrl = `https://www.fastmock.site/mock/849a36d819c7df17b9a9e57c62a74a63/mock/${url}`
+    const fullUrl = `/${prefixUrl}/${url}`
 
     const newOptions = {
         ...defaultOptions,
@@ -92,9 +91,7 @@ export const callApi = ({
         url: fullUrl,
         ...newOptions,
     }).then((response) => {
-        console.log('response', response);
-            const { data } = response
-        console.log('data.code', data.code);
+        const { data } = response
         if (data.code == 'xxx') {
                 // 与服务端约定
                 // 登录校验失败

src/views/index.vue

@@ -130,7 +130,7 @@
     },
     created(){
       echarts01().then(res=>{
-        console.log('res',res);
+        // console.log('res',res);
         this.page1Char1 = res.data;
       }).catch(err=>{
         console.log('echarts01 err',err);

vue.config.js

@@ -1,27 +1,30 @@
 /*
  * @LastEditors: gcz
  */
-// vue.config.js
-const targetApi1 = process.env.NODE_ENV === 'development' ? "https://www.fastmock.site/mock/849a36d819c7df17b9a9e57c62a74a63/mock" : "http://www.ceshi1.com";
+// /*
+//  * @LastEditors: gcz
+//  */
+// // vue.config.js
+// const targetApi1 = process.env.NODE_ENV === 'development' ? "https://www.fastmock.site/mock/849a36d819c7df17b9a9e57c62a74a63/mock" : "http://www.ceshi1.com";
 
-const targetApi2 = process.env.NODE_ENV === 'development' ? "http://www.kaifa2.com" : "http://www.ceshi2.com";
-module.exports = {
-    devServer: {
-        proxy: {
-            '/api1': {
-                target: targetApi1,
-                changeOrigin: true,
-                pathRewrite: {
-                    "/api1": ""
-                }
-            },
-            '/api2': {
-                target: targetApi2,
-                changeOrigin: true,
-                pathRewrite: {
-                    '/api2': ""
-                }
-            },
-        }
-    }
-}
+// const targetApi2 = process.env.NODE_ENV === 'development' ? "http://www.kaifa2.com" : "http://www.ceshi2.com";
+// module.exports = {
+//     devServer: {
+//         proxy: {
+//             '/api1': {
+//                 target: targetApi1,
+//                 changeOrigin: true,
+//                 pathRewrite: {
+//                     "/api1": ""
+//                 }
+//             },
+//             '/api2': {
+//                 target: targetApi2,
+//                 changeOrigin: true,
+//                 pathRewrite: {
+//                     '/api2': ""
+//                 }
+//             },
+//         }
+//     }
+// }