<!-- * @LastEditors: wangcc --> <template> <div class="pickerAddr u-flex"> <div class="select-wrap select-province" @click="provinceClick"> 省: <el-select v-model="selectProvince" 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: '贵州省', 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' ]), // 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 }); } else if (level == 'district') { 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.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', { parentId: '520000', name: '贵州省', mapLevel: 'province' }); }, getSelectModel() {} } }; </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: url(../assets/img/select-bg.png) no-repeat; background-size: 100% 100%; border: none; &::-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>