template:
<div :class="{borBm: activeCol == 5,region:true}">
<span>收货地址:</span>
<div @click="regionShow()" v-if="villageName =='[请选择]'">请选择<i class="mintui mintui-back"></i></div>
<div @click="regionShow()" v-if="villageName !='[请选择]'">{{provinceName}}-{{cityName}}-{{countyName}}-{{villageName}}</div>
</div>
<mt-popup v-model="regionVisible" position="bottom" style="width: 100%">
<div class="popupTop">
<span @click="HiddenVisible()">确认</span>
</div>
<div class="region" style="display: flex">
<mt-picker :slots="myAddressSlots1" valueKey="name" @change="addressChange1" :itemHeight="40" style="width: 25%"></mt-picker>
<mt-picker :slots="myAddressSlots2" valueKey="name" @change="addressChange2" :itemHeight="40" style="width: 25%"></mt-picker>
<mt-picker :slots="myAddressSlots3" valueKey="name" @change="addressChange3" :itemHeight="40" style="width: 25%"></mt-picker>
<mt-picker :slots="myAddressSlots4" valueKey="name" @change="addressChange4" :itemHeight="40" style="width: 25%"></mt-picker>
</div>
</mt-popup>
data:
regionVisible: false, //弹出框是否可见
//省
myAddressSlots1: [{
flex: 1,
values: [{
name: "北京市",
id: "1"
}], //省份数组
textAlign: 'center'
}],
//市
myAddressSlots2: [{
flex: 1,
values: [{
name: "[请选择]",
id: -1
}, ],
textAlign: 'center'
}],
//县
myAddressSlots3: [{
flex: 1,
values: [{
name: "[请选择]",
id: -1
}],
textAlign: 'center'
}],
// 乡
myAddressSlots4: [{
flex: 1,
values: [{
name: "[请选择]",
id: -1
}],
textAlign: 'center'
}],
provinceName: '',
cityName: '',
countyName: '',
villageName: '',
provinceId: null,
cityId: null,
countyId: null,
villageId: null,
created:
this.$store.dispatch("newTitle", "新增收货地址")
this.getRegion()
methods
HiddenVisible() {
this.regionVisible = false
},
getRegion() {
// 进入页面时的处理
let Slots1 = $App.getProvinceList(); //省
this.myAddressSlots1[0].values = JSON.parse(Slots1)
},
addressChange1(msg, value) {
this.provinceId = value[0].id;
this.provinceName = value[0].name;
let Slots2 = $App.getCityList(this.provinceId); // 市
this.myAddressSlots2[0].values = JSON.parse(Slots2)
this.myAddressSlots2[0].values.unshift({
name: "[请选择]",
id: -1
})
},
addressChange2(msg, value) {
this.cityId = value[0].id;
this.cityName = value[0].name;
let Slots3 = $App.getCountryList(this.cityId); // 区县
this.myAddressSlots3[0].values = JSON.parse(Slots3)
this.myAddressSlots3[0].values.unshift({
name: "[请选择]",
id: -1
})
},
addressChange3(msg, value) {
this.countyId = value[0].id;
this.countyName = value[0].name;
let Slots4 = $App.getTownsList(this.countyId); // 乡镇
this.myAddressSlots4[0].values = JSON.parse(Slots4)
this.myAddressSlots4[0].values.unshift({
name: "[请选择]",
id: -1
})
if (!Slots4) {
this.villageId = -1
this.villageName = "[请选择]"
}
},
addressChange4(msg, value) {
this.villageId = value[0].id;
this.villageName = value[0].name;
},
// 弹窗显示
regionShow() {
this.regionVisible = true
},
css:
.popupTop {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 10px 15px;
span {
height: 80%; // background: #39c;
color: #fff;
color: #39c;
padding: 4px 20px;
/* prettier-ignore */
border: 1PX solid #39c;
border-radius: 3px;
}
}