关于自定义省市区选择 其实也是用了 uniApp的内置组件 picker
<picker mode="multiSelector" @change="bindRegionChange"
@columnchange="bindMultiPickerColumnChange" :value="valueRegion" :range="multiArray">
<view class='acea-row'>
<view class="picker line1">{{region[0]}},{{region[1]}},{{region[2]}}</view>
<view class='iconfont icon-xiangyou abs_right'></view>
</view>
</picker>
data(){
return{
region: ['省', '市', '区'],
valueRegion: [0, 0, 0],
district: [],
multiArray: [],
multiIndex: [0, 0, 0],
cityId: 0,
}
},
methods:{
// 获取地址数据
getCityList: function() {
let that = this;
getCity().then(res => {
this.district = res.data;
let oneDay = 24 * 3600 * 1000;
//设置不过期时间的方法 可以换成uni.setStorageSync('xx',xx)
this.$Cache.setItem({name:'cityList',value:res.data,expires:oneDay * 7}); //设置七天过期时间
that.initialize();
})
},
initialize: function() {
let that = this,province = [],city = [],area = [];
if (that.district.length) {
let cityChildren = that.district[0].child || [];
let areaChildren = cityChildren.length ? (cityChildren[0].child || []) : [];
that.district.forEach(function(item) {
province.push(item.name);
});
cityChildren.forEach(function(item) {
city.push(item.name);
});
areaChildren.forEach(function(item) {
area.push(item.name);
});
this.multiArray = [province, city, area]
}
},
bindRegionChange: function(e) {
let multiIndex = this.multiIndex,
province = this.district[multiIndex[0]] || {
child: []
},
city = province.child[multiIndex[1]] || {
cityId: 0
},
multiArray = this.multiArray,
value = e.detail.value;
this.region = [multiArray[0][value[0]], multiArray[1][value[1]], multiArray[2][value[2]]]
this.cityId = city.cityId
this.valueRegion = [0, 0, 0]
this.initialize();
},
bindMultiPickerColumnChange: function(e) {
let that = this,
column = e.detail.column,
value = e.detail.value,
currentCity = this.district[value] || {
child: []
},
multiArray = that.multiArray,
multiIndex = that.multiIndex;
multiIndex[column] = value;
switch (column) {
case 0:
let areaList = currentCity.child[0] || {
child: []
};
multiArray[1] = currentCity.child.map((item) => {
return item.name;
});
multiArray[2] = areaList.child.map((item) => {
return item.name;
});
break;
case 1:
let cityList = that.district[multiIndex[0]].child[multiIndex[1]].child || [];
multiArray[2] = cityList.map((item) => {
return item.name;
});
break;
case 2:
break;
}
// #ifdef MP || APP-PLUS
this.$set(this.multiArray, 0, multiArray[0]);
this.$set(this.multiArray, 1, multiArray[1]);
this.$set(this.multiArray, 2, multiArray[2]);
// #endif
// #ifdef H5
this.multiArray = multiArray;
// #endif
this.multiIndex = multiIndex
// this.setData({ multiArray: multiArray, multiIndex: multiIndex});
},
}