本篇通过请求省+市+县三个接口完成操作
js代码:
//定义三列数组数据,用于存储省、市、县
let multiArray0 = [];
let multiArray1 = [];
let multiArray2 = [];
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
multiArray: [multiArray0, multiArray1, multiArray2], //封装obj
multiIndex: [0, 0, 0],
location_id: 41, //默认省份id
city_id: "411300000000", //默认城市id
},
//绑定选择器滑动事件
bindMultiPickerColumnChange: function(e) {
let that = this;
console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
let data = {
multiArray: that.data.multiArray,
multiIndex: that.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
//data.multiIndex[0] : 第一列选择第几个
//data.multiIndex[1] : 第二列选择第几个
console.log("multiIndex0:" + data.multiIndex[0])
console.log("multiIndex1:" + data.multiIndex[1])
let province_id = multiArray0[data.multiIndex[0]].location_id; //获取选择到的省份id
let city_id = multiArray1[data.multiIndex[1]].location_id; //获取选择到的市区id
let obj = {
province_id: province_id, //第一列父元素ID
city_id: city_id, //第二列父元素ID
that: that,
column: e.detail.column,
valueIndex: e.detail.value
}
changePicker(obj);
},
//获取省份,后端提供的省份接口地址
loadProivnce() {
let that = this;
wx.request({
url: app.globalData.localUrl + '/api/v2/base/location/listByLevel',
method: "post",
data: {
level: 1,
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'csrf-csrf': 'csrf-csrf',
"Authorization": wx.getStorageSync('Authorization')
},
success: function(res) {
let dataArray = res.data.data;
multiArray0 = dataArray;
//根据默认省,获取默认市
that.loadCity(that.data.location_id)
}
})
},
//获取市级,后端提供的市级接口地址
loadCity(location_id) {
let that = this;
wx.request({
url: app.globalData.localUrl + '/api/v2/base/location/listByPid',
method: "post",
data: {
location_id: location_id,
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'csrf-csrf': 'csrf-csrf',
"Authorization": wx.getStorageSync('Authorization')
},
success: function(res) {
let dataArray = res.data.data
multiArray1 = dataArray;
//根据默认市获取对应区
that.loadCountry(that.data.city_id)
}
})
},
//获取区县
loadCountry(location_id) {
let that = this;
wx.request({
url: app.globalData.localUrl + '/api/v2/base/location/listByPid',
method: "post",
data: {
location_id: location_id,
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'csrf-csrf': 'csrf-csrf',
"Authorization": wx.getStorageSync('Authorization')
},
success: function(res) {
let dataArray = res.data.data
multiArray2 = dataArray;
let province_id = that.data.location_id; //默认的省份id
let city_id = that.data.city_id; //默认的市区id
let multiArray0Index = 0,
multiArray1Index = 0;
multiArray0.map(function(v, i) {
//获取省份所在列的位置
if (v.location_id == province_id) {
multiArray0Index = i;
}
})
multiArray1.map(function(v, i) {
//获取市所在列的位置
if (v.location_id == city_id) {
multiArray1Index = i;
}
})
//市区对应的第一个区县id
let select_id = dataArray[0].location_id
//初始化
that.setData({
multiArray2: dataArray,
multiArray: [multiArray0, multiArray1, multiArray2], //封装obj
multiIndex: [multiArray0Index, multiArray1Index, 0],
country_id: select_id
})
that.search()
}
})
},
search() {
//根据条件查询
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.loadProivnce();
},
})
//改变多列选择
function changePicker(obj) {
let province_id = obj.province_id;
let city_id = obj.city_id;
let column = obj.column;
let valueIndex = obj.valueIndex;
let that = obj.that;
let newArray1 = [],
newArray2 = [];
console.log('province_id:' + province_id);
let province_index = 0;
//遍历省
multiArray0.map(function(value, index) {
if (value.location_id == province_id) {
province_index = index;
//请求市信息
wx.request({
url: app.globalData.localUrl + '/api/v2/base/location/listByPid',
method: "post",
data: {
location_id: province_id,
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'csrf-csrf': 'csrf-csrf',
"Authorization": wx.getStorageSync('Authorization')
},
success: function(res) {
let dataArray = res.data.data
newArray1 = dataArray;
let city_index = 0;
let country_id = newArray1[0].location_id;;
newArray1.map(function(v2, i2) {
if (v2.location_id == city_id) {
city_index = i2;
country_id = v2.location_id
}
})
if (column == 2) {
let select_id = multiArray2[valueIndex].location_id
//不请求区县信息
that.setData({
multiIndex: [province_index, city_index, valueIndex],
country_id: select_id
})
that.searchHospitalByTab()
} else {
//加载区县列表
wx.request({
url: app.globalData.localUrl + '/api/v2/base/location/listByPid',
method: "post",
data: {
location_id: country_id,
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'csrf-csrf': 'csrf-csrf',
"Authorization": wx.getStorageSync('Authorization')
},
success: function(res2) {
let dataArray2 = res2.data.data
newArray2 = dataArray2;
// 判断如果为空的情况下
if (newArray1.length == 0) {
newArray1.push({
location_id: '-1',
location_name: '-',
})
}
if (newArray2.length == 0) {
newArray2.push({
location_id: '-1',
location_name: '-',
})
}
let select_id = newArray2[0].location_id
multiArray1 = newArray1;
multiArray2 = newArray2;
that.setData({
multiArray: [multiArray0, multiArray1, multiArray2],
multiIndex: [province_index, city_index, 0],
city_id: country_id,
country_id: select_id
})
that.searchHospitalByTab()
}
})
}
}
})
}
})
}
wxml:
<picker class="picker" mode="multiSelector" bindchange="bindPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" range-key="{{'location_name'}}">
<text class="menu_text">{{multiArray[2][multiIndex[2]].location_name}}</text>
<icon class="iconfont icon-xiala"></icon>
</picker>