首先说找了很多插件，也装过很多插件，最终选择了weUI
QQ20180331-103628.png
因为省市区要分别调用接口，最终没有选择三组的picker，用单联的picker传数据给下一级接口
- data
data() {
return {
customer: { 这里是需要显示和向后台传入所需的参数
provinceId: "",
provinceName: "",
cityId: "",
cityName: "",
areaId: "",
areaName: "",
},
pickerItem: { province: [], city: [], area: [] }, //选择器需要获得列表的参数
pickerDefault: [], //选择器列表中默认值
};
},
- 省市区获取方法
我们要把接口里的数据转成picker插件里能用的格式
// 获取省
getProByGrade: function() {
service.getHnAreaByGrade( //接口
{
grade: 0
},
res => {
if (res.status == "00000") {
res.data.forEach((item, index) => {
this.pickerItem.province.push({ // weui.picker所需的数据格式
label: item.name,
value: item.id
});
});
}
}
);
},
// 获取市
getCityByGrade: function(parentId) { //接口要求根据省的id获得市的列表
this.pickerItem.city = []; //获取市的时候，city都要清空
service.getHnAreaByGrade(
{
grade: 1,
parentId: parentId
},
res => {
if (res.status == "00000") {
res.data.forEach((item, index) => {
this.pickerItem.city.push({
label: item.name,
value: item.id
});
});
}
}
);
},
// 获取区
getDistrictbyGrade: function(parentId) { //同“市”
this.pickerItem.area = [];
service.getHnAreaByGrade(
{
grade: 2,
parentId: parentId
},
res => {
if (res.status == "00000") {
res.data.forEach((item, index) => {
this.pickerItem.area.push({
label: item.name,
value: item.id
});
});
}
}
);
},
省市区获得完毕，开始调用
- 调用
created: function() {
this.getProByGrade(); //获得省
}
初始化的时候只需要先调用省列表的方法，市和区需要在选择之后才触发
- 选择器
因为我需要调用三次选择器，但是三次选择器又对应不同的列表，但是我又不想放三个选择器，所以就用一个index传参数，来判断是省、市、区
weuiPicker: function(item, index) {
var res = "";
var that = this;
weui.picker(item, {
id: 'pick'+index,
defaultValue: [that.pickerDefault[index]], //默认值
onChange: function(result) {},
onConfirm: function(result) {
res = result.toString();
if (index == 0) { // 当index为0 是省
that.customer.provinceId = res;
that.pickerItem.province.forEach(item => {
if (res == item.value) {
that.customer.provinceName = item.label;
that.$set(that.pickerDefault, index, res);
//为了每次选择记录选择的默认值，下一次打开还是当前选择的位置
return;
}
});
that.customer.cityName = ""; //选省的时候，市和区要清空
that.customer.areaName = "";
that.getCityByGrade(res); //调用获得市的方法
} else if (index == 1) { // 当index为1 是市
that.customer.cityId = res;
that.pickerItem.city.forEach(item => {
if (res == item.value) {
that.customer.cityName = item.label;
that.$set(that.pickerDefault, index, res);
return;
}
});
that.customer.areaName = ""; //选市的时候，区要清空
that.getDistrictbyGrade(res); //调用获得区的方法
} else if (index == 2) {// 当index为2 是区
that.customer.areaId = res;
that.pickerItem.area.forEach(item => {
if (res == item.value) {
that.customer.areaName = item.label;
that.$set(that.pickerDefault, index, res);
return;
}
});
}
}
// id: "singleLinePicker"
});
},
这里defaultValue的默认值，测试了很久，它选择完得到的默认值是['value']，所以我们value里是什么的 得到的就是啥，页面上显示的是label
- 调用选择器
<div @click="selectPicker(0)">
省份
<div class="weui-cell__bd" >
{{customer.provinceName}}
</div>
</div>
<div @click="selectPicker(1)">
城市</label>
<div class="weui-cell__bd" >
{{customer.cityName}}
</div>
</div>
<div @click="selectPicker(2)">
区/镇级
<div class="weui-cell__bd" >
{{customer.areaName}}
</div>
</div>
selectPicker(index) {
var item = [];
if (index == 0) {
item = this.pickerItem.province;
this.weuiPicker(item, index);
} else if (index == 1) {
if (this.pickerItem.city.length > 0) {
//一定要判断一下，不然市和省初始化没有值会报错
item = this.pickerItem.city;
this.weuiPicker(item, index);
} else {
this.toast("请您先选择省！");
}
} else if (index == 2) {
if (this.pickerItem.area.length > 0) {
item = this.pickerItem.area;
this.weuiPicker(item, index);
} else {
this.toast("请您先选择市！");
}
}
},
以上省市区选择器就搞定了
如果我们还想有定位，初始化就给默认值，那么直接就把默认值设置到this.pickerDefault里就好了，根据省市区的index设置
this.$set(this.pickerDefault, 1, item.id);
网友评论