auto

src/components/pickerAddr.vue

@@ -10,7 +10,7 @@
           v-for="item in vuexCityList"
           :key="item.areaCode"
           :label="item.areaName"
-          :value="{value:item.areaCode,label:item.areaName}"
+          :value="{value:item.areaCode,label:item.areaName,areaId:item.areaId}"
         ></el-option>
       </el-select>
     </div>
@@ -21,7 +21,7 @@
           v-for="item in vuexDistrictList"
           :key="item.areaCode"
           :label="item.areaName"
-          :value="{value:item.areaCode,label:item.areaName}"
+          :value="{value:item.areaCode,label:item.areaName,areaId:item.areaId}"
         ></el-option>
       </el-select>
     </div>
@@ -32,7 +32,7 @@
           v-for="item in vuexStreetList"
           :key="item.areaCode"
           :label="item.areaName"
-          :value="{value:item.areaCode,label:item.areaName}"
+          :value="{value:item.areaCode,label:item.areaName,areaId:item.areaId}"
         ></el-option>
       </el-select>
     </div>
@@ -57,7 +57,8 @@ export default {
       selectStreet: {},
       value: '',
       parentId: '520000',
-      name: ''
+      name: '',
+      areaId:''
     };
   },
   watch: {
@@ -80,7 +81,17 @@ export default {
   },
   mounted() {},
   methods: {
+    ...mapMutations([
+      'changeSelectCity',
+      'changeSelectDistrict',
+      'changeSelectStreet'
+    ]),
     cityChange(val, level) {
+      if (level == 'city') {
+        this.changeSelectCity({ value: val.value, label: val.label,areaId:val.areaId });
+      } else if (level == 'district') {
+        this.changeSelectDistrict({ value: val.value, label: val.label,areaId:val.areaId });
+      }
       console.log(val);
       this.parentId = val.value.substring(0, 6);
       this.name = level;

src/store/addr/index.js

@@ -55,7 +55,7 @@ const addr = {
   actions: {
     // 获取省市县
     searchArea({ commit }, params = {}) {
-        console.log(params)
+      console.log('searchArea', params)
       searchApi({ parentId: params.parentId }).then(res => {
         if (params.mapLevel == "city") {
           commit("changeDistrictList", res.data);

src/views/index.vue

@@ -175,19 +175,19 @@
            debounce(this.xiaobansearch, 500, false)
           }
       },
-      '$store.state.addr.vuexSelectCity'(val) {
+      '$store.state.addr.selectCity'(val) {
         console.log('this.$store.state.addr',this.$store.state.addr);
         console.log('vuexSelectCity',val);
         this.getPageData();
          
       },
-      '$store.state.addr.vuexSelectDistrict'(val) {
+      '$store.state.addr.selectDistrict'(val) {
         console.log('this.$store.state.addr',this.$store.state.addr);
         console.log('vuexSelectDistrict',val);
         this.getPageData();
          
       },
-      '$store.state.addr.vuexSelectStreet'(val) {
+      '$store.state.addr.selectStreet'(val) {
         console.log('this.$store.state.addr',this.$store.state.addr);
         console.log('vuexSelectStreet',val);
         this.getPageData();
@@ -228,9 +228,9 @@
       },
       getPage1echarts01(){
         let param = {
-          cityId:this.$store.state.addr.vuexSelectCity.value,
-          countyId:this.$store.state.addr.vuexSelectDistrict.value,
-          townId:this.$store.state.addr.vuexSelectStreet.value,
+          cityId:this.$store.state.addr.selectCity.areaId,
+          countyId:this.$store.state.addr.selectDistrict.areaId,
+          townId:this.$store.state.addr.vuexSelectStreet.areaId,
         }
         console.log('cityId',param.cityId);
         page1echarts01(param).then(res=>{
@@ -248,9 +248,9 @@
       },
       getPage1echarts02(){
         let param = {
-          cityId:this.$store.state.addr.vuexSelectCity.value,
-          countyId:this.$store.state.addr.vuexSelectDistrict.value,
-          townId:this.$store.state.addr.vuexSelectStreet.value,
+          cityId:this.$store.state.addr.selectCity.areaId,
+          countyId:this.$store.state.addr.selectDistrict.areaId,
+          townId:this.$store.state.addr.selectStreet.areaId,
         }
         console.log('cityId',param.cityId);
         page1echarts02(param).then(res=>{