castgroup_bigscreen/src/components/pickerAddr.vue

<!--
 * @LastEditors: wangcc
-->
<template>
  <div class="pickerAddr u-flex">
    <div class="select-wrap select-province" @click="provinceClick">
      省：
      <el-select v-model="selectProvince.name" placeholder="请选择" disabled>
        <!-- <el-option
          v-for="item in vuexCityList"
          :key="item.areaCode"
          :label="item.areaName"
          :value="{value:item.areaCode,label:item.areaName,areaId:item.areaId}"
        ></el-option>-->
      </el-select>
    </div>
    <div class="select-wrap">
      市：
      <el-select v-model="selectCity" placeholder="请选择" @change="cityChange($event,'city')">
        <el-option
          v-for="item in vuexCityList"
          :key="item.areaCode"
          :label="item.areaName"
          :value="{value:item.areaCode,label:item.areaName,areaId:item.areaId}"
        ></el-option>
      </el-select>
    </div>
    <div class="select-wrap">
      县：
      <el-select v-model="selectDistrict" placeholder="请选择" @change="cityChange($event,'district')">
        <el-option
          v-for="item in vuexDistrictList"
          :key="item.areaCode"
          :label="item.areaName"
          :value="{value:item.areaCode,label:item.areaName,areaId:item.areaId}"
        ></el-option>
      </el-select>
    </div>
    <div class="select-wrap">
      乡：
      <el-select v-model="selectStreet" placeholder="请选择" @change="cityChange($event,'street')">
        <el-option
          v-for="item in vuexStreetList"
          :key="item.areaCode"
          :label="item.areaName"
          :value="{value:item.areaCode,label:item.areaName,areaId:item.areaId}"
        ></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState, mapGetters } from 'vuex';

export default {
  // props:{
  //   selectCity:{},
  //   selectDistrict:{},
  //   selectStreet: {}
  // },
  name: '',
  components: {},
  data() {
    return {
      selectProvince: {
        parentId: '520000',
        name: '贵州省',
        mapLevel: 'province'
      },
      selectCity: {},
      selectDistrict: {},
      selectStreet: {},
      value: '',
      parentId: '520000',
      name: '',
      areaId: ''
    };
  },
  watch: {
    '$store.state.addr.selectCity'(val) {
      this.selectCity = val;
    },
    '$store.state.addr.selectDistrict'(val) {
      this.selectDistrict = val;
    },
    '$store.state.addr.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 中引入
    ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
  },
  created() {
    this.$store.dispatch('searchArea', {
      parentId: this.parentId,
      name: this.name,
      mapLevel: 'province'
    });
  },
  mounted() {},
  methods: {
    ...mapMutations([
      'changeSelectCity',
      'changeSelectDistrict',
      'changeSelectStreet',
      'changeSelectProject'
    ]),
    // 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) {
      if (level == 'city') {
        this.changeSelectCity({
          value: val.value,
          label: val.label,
          areaId: val.areaId,
          prop: '1'
        });
      } else if (level == 'district') {
        this.changeSelectDistrict({
          value: val.value,
          label: val.label,
          areaId: val.areaId,
          prop: '1'
        });
      } else if (level == 'street') {
        this.changeSelectStreet({
          value: val.value,
          label: val.label,
          areaId: val.areaId,
          prop: '1'
        });
      }
      this.parentId = val.value.substring(0, 6);
      this.name = level;
      this.$store.dispatch('searchArea', {
        parentId: this.parentId,
        name: val.label,
        mapLevel: level
      });
    },
    provinceClick() {
      // console.log('provinceClick','provinceClick');
      this.$store.dispatch('searchArea', {
        ...this.selectProvince
      });
      this.changeSelectCity({});
      this.changeSelectDistrict({});
      this.changeSelectStreet({});
      this.changeSelectProject({});
    }
  }
};
</script>

<style lang='scss' scoped>
.pickerAddr {
  font-size: 18px;
  color: var(--main-color);
  text-align: right;
  margin-bottom: 1vh;
  .select-wrap:not(:last-of-type) {
    margin-right: 10px;
  }
  .select-province {
    position: relative;
    &::after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: transparent;
      cursor: pointer;
    }
  }

  .select-province.select-wrap {
    /deep/ .el-input__inner {
      cursor: pointer;
    }
  }
  .el-select {
    width: 8vw;
    /deep/ .el-input__inner {
      font-size: 18px;
      // height: 50px;
      // line-height: 50px;
      color: var(--main-color);
      background: linear-gradient(
        180deg,
        rgba(0, 250, 253, 0.3) 0%,
        rgba(0, 250, 253, 0) 54%,
        rgba(0, 250, 253, 0.3) 100%
      );
      border-radius: 0px 0px 0px 0px;
      opacity: 0.9;
      border: 1px solid rgba(0, 250, 253, 0.3);
      &::-webkit-input-placeholder {
        color: var(--main-color);
      }
      &:hover {
        border-color: var(--main-color);
      }
    }
    /deep/ .el-input__icon {
      color: var(--main-color);
    }
  }
}
@media only screen and (max-width: 1200px) {
  .pickerAddr {
    font-size: 16px;
    .el-select {
      /deep/ .el-input__inner {
        font-size: 16px;
      }
    }
  }
}
</style>