项目需要省市地区三级联动 然后需要最终返回 区县的code 数据为后台请求
wxml
<view class='input_type'>
<text>地区选择：</text>
<!-- <input data-type="areaCode" type="text" bindblur="inputVal"></input> -->
<picker bindchange="bindPickerChange" value="{{index}}" range="{{provice}}" class='limit_one' style='width:120rpx;'>
<view class="picker" data-code=''>
{{proviceName}}
</view>
</picker>
<picker bindchange="bindCityChange" value="{{index}}" range="{{city}}" class='limit_one' style='width:120rpx;'>
<view class="picker" data-code='1'>
{{cityName}}
</view>
</picker>
<picker bindchange="bindDistrictChange" value="{{index}}" range="{{district}}" class='limit_one' style='width:245rpx;'>
<view class="picker" data-code='2'>
{{districtName}}
</view>
</picker>
</view>
js
[
{
CityName:"东城区",
CodeId:110101,
ParentId:1101,
Sort:0
},
{
CityName:"东城区",
CodeId:110101,
ParentId:1101,
Sort:0
},
]
const httpHelper = require('../../libs/httpRequertHelper.js')//封装的ajax
Page({
/**
* 页面的初始数据
*/
data: {
provice: [],//仅含有名称
city: [],
district:[],
proviceName: '省',
cityName: '市',
districtName:'区县',
proviceList :[],//所有数据 包括名称 code
cityList :[],
districtList:[],
index:0,//下标
Pcode:0,//父级code 也是最终code
},
checkboxChange:function(){
},
onLoad: function (options) {
//首先加载省数据
var that = this;
var arr = [];
var http = new httpHelper.HttpRequert({
data: {
parentCode: 0
},
success: returnData => {
if (returnData.data.status == 200) {
var datas = JSON.parse(returnData.data.list);
for (var i = 0; i < datas.length; i++) {
arr.push(datas[i].CityName)
}
that.setData({
provice: arr,
proviceList:datas
})
}
}
});
http.send('/Common/FindCityList');
},
bindPickerChange: function (e) { //省级选择完
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value,
proviceName: this.data.provice[e.detail.value],
Pcode: this.data.proviceList[e.detail.value].CodeId
})
this.getCity(1);
},
bindCityChange: function (e) {//市级选择完
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value,
cityName: this.data.city[e.detail.value],
Pcode: this.data.cityList[e.detail.value].CodeId
})
this.getCity(2);
},
bindDistrictChange: function (e) {//区县
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value,
districtName: this.data.district[e.detail.value],
Pcode: this.data.districtList[e.detail.value].CodeId,
})
},
getCity:function(types){
var that=this;
var arr=[];
var http = new httpHelper.HttpRequert({
data: {
parentCode:this.data.Pcode
},
success: returnData => {
if (returnData.data.status == 200) {
var datas=JSON.parse(returnData.data.list)
console.log(datas)
for (var i = 0; i < datas.length;i++){
arr.push(datas[i].CityName)
}
if(types==1){
that.setData({
city: arr,
cityList:datas
})
} else if (types == 2) {
that.setData({
district: arr,
districtList:datas
})
}
}
}
});
http.send('/Common/FindCityList');
},
onShow:function(){
},
})