|  | @@ -3,7 +3,7 @@
 | 
	
		
			
				|  |  |  -->
 | 
	
		
			
				|  |  |  <template>
 | 
	
		
			
				|  |  |    <div class="pickerAddr u-flex">
 | 
	
		
			
				|  |  | -    <div class="select-wrap select-province" @click="provinceClick" >
 | 
	
		
			
				|  |  | +    <div class="select-wrap select-province" @click="provinceClick">
 | 
	
		
			
				|  |  |        省:
 | 
	
		
			
				|  |  |        <el-select v-model="selectProvince" placeholder="请选择" disabled>
 | 
	
		
			
				|  |  |          <!-- <el-option
 | 
	
	
		
			
				|  | @@ -11,7 +11,7 @@
 | 
	
		
			
				|  |  |            :key="item.areaCode"
 | 
	
		
			
				|  |  |            :label="item.areaName"
 | 
	
		
			
				|  |  |            :value="{value:item.areaCode,label:item.areaName,areaId:item.areaId}"
 | 
	
		
			
				|  |  | -        ></el-option> -->
 | 
	
		
			
				|  |  | +        ></el-option>-->
 | 
	
		
			
				|  |  |        </el-select>
 | 
	
		
			
				|  |  |      </div>
 | 
	
		
			
				|  |  |      <div class="select-wrap">
 | 
	
	
		
			
				|  | @@ -36,7 +36,7 @@
 | 
	
		
			
				|  |  |          ></el-option>
 | 
	
		
			
				|  |  |        </el-select>
 | 
	
		
			
				|  |  |      </div>
 | 
	
		
			
				|  |  | -    <div class="select-wrap" >
 | 
	
		
			
				|  |  | +    <div class="select-wrap">
 | 
	
		
			
				|  |  |        乡:
 | 
	
		
			
				|  |  |        <el-select v-model="selectStreet" placeholder="请选择" @change="cityChange($event,'street')">
 | 
	
		
			
				|  |  |          <el-option
 | 
	
	
		
			
				|  | @@ -51,7 +51,7 @@
 | 
	
		
			
				|  |  |  </template>
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  <script>
 | 
	
		
			
				|  |  | -import { mapMutations,mapState, mapGetters } from 'vuex';
 | 
	
		
			
				|  |  | +import { mapMutations, mapState, mapGetters } from 'vuex';
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  export default {
 | 
	
		
			
				|  |  |    // props:{
 | 
	
	
		
			
				|  | @@ -63,26 +63,49 @@ export default {
 | 
	
		
			
				|  |  |    components: {},
 | 
	
		
			
				|  |  |    data() {
 | 
	
		
			
				|  |  |      return {
 | 
	
		
			
				|  |  | -      selectProvince:'贵州省',
 | 
	
		
			
				|  |  | +      selectProvince: '贵州省',
 | 
	
		
			
				|  |  |        selectCity: {},
 | 
	
		
			
				|  |  |        selectDistrict: {},
 | 
	
		
			
				|  |  |        selectStreet: {},
 | 
	
		
			
				|  |  |        value: '',
 | 
	
		
			
				|  |  |        parentId: '520000',
 | 
	
		
			
				|  |  |        name: '',
 | 
	
		
			
				|  |  | -      areaId:''
 | 
	
		
			
				|  |  | +      areaId: ''
 | 
	
		
			
				|  |  |      };
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    watch: {
 | 
	
		
			
				|  |  |      '$store.state.addr.selectCity'(val) {
 | 
	
		
			
				|  |  | -      this.selectCity = val
 | 
	
		
			
				|  |  | +      this.selectCity = val;
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  |      '$store.state.addr.selectDistrict'(val) {
 | 
	
		
			
				|  |  | -      this.selectDistrict = val
 | 
	
		
			
				|  |  | +      this.selectDistrict = val;
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  |      '$store.state.addr.selectStreet'(val) {
 | 
	
		
			
				|  |  | -      this.selectStreet = val
 | 
	
		
			
				|  |  | +      this.selectStreet = val;
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | +    '$store.state.addr.smallClassSearch': {
 | 
	
		
			
				|  |  | +      handler(val) {
 | 
	
		
			
				|  |  | +        console.log(val);
 | 
	
		
			
				|  |  | +        this.areaData = val;
 | 
	
		
			
				|  |  | +        this.getCityChange();
 | 
	
		
			
				|  |  | +        this.getDistrictChange();
 | 
	
		
			
				|  |  | +        // this.vuexStreetList.forEach((item) => {
 | 
	
		
			
				|  |  | +        //   if (val.townId == item.areaId) {
 | 
	
		
			
				|  |  | +        //     valCode = item.areaCode;
 | 
	
		
			
				|  |  | +        //   }
 | 
	
		
			
				|  |  | +        // });
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        // this.selectStreet = {
 | 
	
		
			
				|  |  | +        //   areaId: val.townId,
 | 
	
		
			
				|  |  | +        //   label: val.townName,
 | 
	
		
			
				|  |  | +        //   value: valCode
 | 
	
		
			
				|  |  | +        // };
 | 
	
		
			
				|  |  | +        // if (val.countyId && val.countyName) {
 | 
	
		
			
				|  |  | +        //   console.log(this.selectDistrict);
 | 
	
		
			
				|  |  | +        //   this.setcity();
 | 
	
		
			
				|  |  | +        // }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    computed: {
 | 
	
		
			
				|  |  |      // 引入getters中的计算属性,需要在 computed 中引入
 | 
	
	
		
			
				|  | @@ -101,15 +124,68 @@ export default {
 | 
	
		
			
				|  |  |        'changeSelectDistrict',
 | 
	
		
			
				|  |  |        'changeSelectStreet'
 | 
	
		
			
				|  |  |      ]),
 | 
	
		
			
				|  |  | +    getCityChange() {
 | 
	
		
			
				|  |  | +      if (this.areaData.cityId && this.areaData.cityName) {
 | 
	
		
			
				|  |  | +        let valCode = '';
 | 
	
		
			
				|  |  | +        this.vuexCityList.forEach((item) => {
 | 
	
		
			
				|  |  | +          if (this.areaData.cityId == item.areaId) {
 | 
	
		
			
				|  |  | +            valCode = item.areaCode.substring(0, 6);
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        this.selectCity = {
 | 
	
		
			
				|  |  | +          areaId: this.areaData.cityId,
 | 
	
		
			
				|  |  | +          label: this.areaData.cityName,
 | 
	
		
			
				|  |  | +          value: valCode
 | 
	
		
			
				|  |  | +        };
 | 
	
		
			
				|  |  | +        this.$store.dispatch('searchArea', {
 | 
	
		
			
				|  |  | +          parentId: valCode,
 | 
	
		
			
				|  |  | +          name: this.areaData.cityName,
 | 
	
		
			
				|  |  | +          mapLevel: 'city'
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    getDistrictChange() {
 | 
	
		
			
				|  |  | +      let valCode = '';
 | 
	
		
			
				|  |  | +      this.vuexDistrictList.forEach((item) => {
 | 
	
		
			
				|  |  | +        if (this.areaData.countyId == item.areaId) {
 | 
	
		
			
				|  |  | +          valCode = item.areaCode.substring(0, 6);
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +      this.selectDistrict = {
 | 
	
		
			
				|  |  | +        areaId: this.areaData.countyId,
 | 
	
		
			
				|  |  | +        label: this.areaData.countyName,
 | 
	
		
			
				|  |  | +        value: valCode
 | 
	
		
			
				|  |  | +      };
 | 
	
		
			
				|  |  | +      
 | 
	
		
			
				|  |  | +      this.$store.dispatch('searchArea', {
 | 
	
		
			
				|  |  | +        parentId: valCode,
 | 
	
		
			
				|  |  | +        name: this.areaData.countyName,
 | 
	
		
			
				|  |  | +        mapLevel: 'district'
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  |      cityChange(val, level) {
 | 
	
		
			
				|  |  |        console.log(val);
 | 
	
		
			
				|  |  |        if (level == 'city') {
 | 
	
		
			
				|  |  | -        this.changeSelectCity({ value: val.value, label: val.label,areaId:val.areaId });
 | 
	
		
			
				|  |  | +        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 });
 | 
	
		
			
				|  |  | +        this.changeSelectDistrict({
 | 
	
		
			
				|  |  | +          value: val.value,
 | 
	
		
			
				|  |  | +          label: val.label,
 | 
	
		
			
				|  |  | +          areaId: val.areaId
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  |        } else if (level == 'street') {
 | 
	
		
			
				|  |  | -        this.changeSelectStreet({ value: val.value, label: val.label,areaId:val.areaId });
 | 
	
		
			
				|  |  | +        this.changeSelectStreet({
 | 
	
		
			
				|  |  | +          value: val.value,
 | 
	
		
			
				|  |  | +          label: val.label,
 | 
	
		
			
				|  |  | +          areaId: val.areaId
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  | +      console.log(val.value.substring(0, 6));
 | 
	
		
			
				|  |  |        this.parentId = val.value.substring(0, 6);
 | 
	
		
			
				|  |  |        this.name = level;
 | 
	
		
			
				|  |  |        this.$store.dispatch('searchArea', {
 | 
	
	
		
			
				|  | @@ -118,7 +194,7 @@ export default {
 | 
	
		
			
				|  |  |          mapLevel: level
 | 
	
		
			
				|  |  |        });
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | -    provinceClick(){
 | 
	
		
			
				|  |  | +    provinceClick() {
 | 
	
		
			
				|  |  |        // console.log('provinceClick','provinceClick');
 | 
	
		
			
				|  |  |        this.$store.dispatch('searchArea', {
 | 
	
		
			
				|  |  |          parentId: '520000',
 | 
	
	
		
			
				|  | @@ -126,7 +202,7 @@ export default {
 | 
	
		
			
				|  |  |          mapLevel: 'province'
 | 
	
		
			
				|  |  |        });
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | -    getSelectModel() {},
 | 
	
		
			
				|  |  | +    getSelectModel() {}
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  |  };
 | 
	
		
			
				|  |  |  </script>
 | 
	
	
		
			
				|  | @@ -140,9 +216,9 @@ export default {
 | 
	
		
			
				|  |  |    .select-wrap:not(:last-of-type) {
 | 
	
		
			
				|  |  |      margin-right: 10px;
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  | -  .select-province{
 | 
	
		
			
				|  |  | +  .select-province {
 | 
	
		
			
				|  |  |      position: relative;
 | 
	
		
			
				|  |  | -    &::after{
 | 
	
		
			
				|  |  | +    &::after {
 | 
	
		
			
				|  |  |        content: '';
 | 
	
		
			
				|  |  |        width: 100%;
 | 
	
		
			
				|  |  |        height: 100%;
 | 
	
	
		
			
				|  | @@ -153,12 +229,11 @@ export default {
 | 
	
		
			
				|  |  |        cursor: pointer;
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  | -  
 | 
	
		
			
				|  |  | -  .select-province.select-wrap{
 | 
	
		
			
				|  |  | -    /deep/ .el-input__inner{
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  .select-province.select-wrap {
 | 
	
		
			
				|  |  | +    /deep/ .el-input__inner {
 | 
	
		
			
				|  |  |        cursor: pointer;
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  | -    
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  |    .el-select {
 | 
	
		
			
				|  |  |      width: 8vw;
 | 
	
	
		
			
				|  | @@ -171,21 +246,21 @@ export default {
 | 
	
		
			
				|  |  |        background-size: 100% 100%;
 | 
	
		
			
				|  |  |        border: none;
 | 
	
		
			
				|  |  |        &::-webkit-input-placeholder {
 | 
	
		
			
				|  |  | -        color:  var(--main-color);
 | 
	
		
			
				|  |  | +        color: var(--main-color);
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  | -      &:hover{
 | 
	
		
			
				|  |  | -        border-color:var(--main-color);
 | 
	
		
			
				|  |  | +      &:hover {
 | 
	
		
			
				|  |  | +        border-color: var(--main-color);
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  | -    /deep/ .el-input__icon{
 | 
	
		
			
				|  |  | +    /deep/ .el-input__icon {
 | 
	
		
			
				|  |  |        color: var(--main-color);
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  | -@media only screen and (max-width : 1200px) {
 | 
	
		
			
				|  |  | -  .pickerAddr{
 | 
	
		
			
				|  |  | +@media only screen and (max-width: 1200px) {
 | 
	
		
			
				|  |  | +  .pickerAddr {
 | 
	
		
			
				|  |  |      font-size: 16px;
 | 
	
		
			
				|  |  | -    .el-select{
 | 
	
		
			
				|  |  | +    .el-select {
 | 
	
		
			
				|  |  |        /deep/ .el-input__inner {
 | 
	
		
			
				|  |  |          font-size: 16px;
 | 
	
		
			
				|  |  |        }
 |