小程序-城市联动(二级)
<div class="item">
<picker mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
<input type="text" disabled placeholder="省份、城市" v-model="area">
</picker>
</div>
<script>
import {
get,
post,
getStorageOpenid
} from "../../utils";
import $store from "../../store/index";
export default {
data() {
return {
items: [
{id: 1, checked: false},
],
tt:0,
imgurl: $store.state.str,
token: $store.state.token,
multiIndex:[0,0],
multiArray:[],
area:'',
objectMultiArray: [],
city_id : '',
privince_id:'',
};
},
methods: {
async bindMultiPickerChange(e){
console.log("省");
this.multiIndex[0] = e.mp.detail.value[0];
this.multiIndex[1] = e.mp.detail.value[1];
var privince = this.multiArray[0][e.mp.detail.value[0]];
var city = this.multiArray[1][e.mp.detail.value[1]];
this.area = privince+"-"+city;
for (var i = 0; i < this.objectMultiArray.length; i++) {
if (this.objectMultiArray[i].region_name == city ){
this.city_id = this.objectMultiArray[i].region_id;
}
if(this.objectMultiArray[i].region_name == privince){
this.privince_id =this.objectMultiArray[i].region_id;
}
}
},
//初始化事件
async getPrence(){
const data = await get("Checkout/getprivince", { });
console.log(data);
if(data.code == 200){
this.multiArray = data.data.privince;
this.objectMultiArray =data.data.city;
}else if(data.code == 201){
wx.navigateTo({
url: '/pages/login/main' // 跳到登录页面
})
}
},
bindMultiPickerColumnChange(e){
switch (e.target.column) {
case 0:
var list = [];
for (var i = 0; i < this.objectMultiArray.length; i++) {
if (this.objectMultiArray[i].parent_id == this.objectMultiArray[e.target.value].region_id) {
list.push(this.objectMultiArray[i].region_name)
}
}
this.multiArray[1] = list;
this.multiIndex[0] = e.target.value;
this.multiIndex[1] = 0;
var privince = this.multiArray[0][e.target.value];
var city = this.multiArray[1][0];
this.area = privince+"-"+city;
}
},
};
</script>