小程序之地址四级联动

　　　　　　　<!-- 地址四级联动 -->
<view class="page-section" wx:if="{{!version}}">
<view class="page-section-title">选择地址</view>
<view class="weui-cell">
<picker name="node_id" mode="multiSelector" bindchange="bindPickerChange" bindcancel="bindcancel" bindcolumnchange="bindMultiPickerColumnChange" value="{{[xianxuanzeindex, zhenindex, cunindex, wangdianindex]}}" range="{{[xianxuanze,zhen,cun,wangdian]}}">
<view class="weui-cell">{{xianxuanze[xianxuanzeindex]}}-{{zhen[zhenindex]}}-{{cun[cunindex]}}-{{wangdian[wangdianindex]}}</view>
</picker>
</view>
</view>

/* 地址 四级联动 value 值改变事件 */
bindPickerChange(e){
console.log(`确定事件：`,e);
let { xianxuanzeindex, zhenindex, cunindex, wangdianindex} = this.data;
if(xianxuanzeindex == 0 || zhenindex == 0 || cunindex == 0 || wangdianindex == 0){
wx.showToast({
title: `选择完整的地址`,
duration: 1000,
icon: `none`
})
}
},

/* 地址 四级联动 事件   */
bindMultiPickerColumnChange(e){
console.log(`四级联动：`,e);
let that = this;
let { column, value} = e.detail;
if( column == 0){
console.log(`cloum=0 触发`);
city();
function city(){
wx.request({
url: config.ONLINE_URL + api.parentid3 + that.data.xianxuanzelist[value - 1].id, //仅为示例，并非真实的接
method: `GET`,
header: {
‘authentication‘: ‘USERID ‘ + authentication,
‘content-type‘: ‘application/json‘
},
success(res) {
var zhen = that.data.zhen = [‘选择街道/乡镇‘]
if (res.data.code == ‘200‘) {
for (var i = 0; i < res.data.data.data.length; i++) {
zhen.push(res.data.data.data[i].title)
}
that.setData({
zhen: zhen,
zhenlist: res.data.data.data,
xianxuanzeindex: value,
zhenindex: 0,
cunindex: 0,
wangdianindex: 0,
})
} else {
wx.showModal({
title: ‘提示‘,
content: res.data.message,
success(res) {}
})
}
}
})
}
} else if( column == 1) {
console.log(`cloum=1 触发`);
city4();
function city4() {
wx.request({
url: config.ONLINE_URL + api.parentid4 + that.data.zhenlist[e.detail.value - 1].id, //仅为示例，并非真实的接口地址
method: `GET`,
header: {
‘authentication‘: ‘USERID ‘ + authentication,
‘content-type‘: ‘application/json‘
},
success(res) {
var cun = that.data.cun = [‘选择社区/村‘]
if (res.data.code == ‘200‘) {
for (var i = 0; i < res.data.data.data.length; i++) {
cun.push(res.data.data.data[i].title)
}
that.setData({
cun: cun,
cunlist: res.data.data.data,
zhenindex: value,
cunindex: 0,
wangdianindex: 0,
})
} else {
wx.showModal({
title: ‘提示‘,
content: res.data.message,
success(res) {}
})
}
}
})
}
} else if( column == 2) {
console.log(`cloum=2 触发`);
cun()
function cun(){
wx.request({
url: config.ONLINE_URL + api.parentid5678 + that.data.cunlist[value - 1].id, //仅为示例，并非真实的接口地址
method: `GET`,
header: {
‘authentication‘: ‘USERID ‘ + authentication,
‘content-type‘: ‘application/json‘
},
success(res) {
var wangdian = that.data.wangdian = [‘选择网格小区/村社‘]
if (res.data.code == ‘200‘) {
for (var i = 0; i < res.data.data.data.length; i++) {
wangdian.push(res.data.data.data[i].title)
}
that.setData({
wangdian: wangdian,
wangdianlist: res.data.data.data,
cunindex: value,
wangdianindex: 0,
})
} else {
wx.showModal({
title: ‘提示‘,
content: res.data.message,
success(res) {}
})
}
}
})
}
} else if( column == 3) {
console.log(`cloum=3 触发`)
let { wangdian} = that.data;
that.setData({
wangdianindex: value,
wangdian
})
}
},