小程序省市县镇村五级选择器
发布时间
阅读量：
阅读量
父组件使用
//json
{
"component": true,
"usingComponents": {
"cascader":"../../cascader/cascader"
}
}//wxml
<cascader bind:onClose="onClose" data-valueName="formData.permanentAddr" data-showname="permanentShow" data-value="permanentValue" bind:onFinish="onFinish"></cascader>//js
onClose(e) {
this.setData({
[e.currentTarget.dataset.showname]: false,
});
},
onFinish(e){
var detail=e.detail;
this.setData({
[e.currentTarget.dataset.valuename]:detail.provinceName+'/'+detail.cityName+'/'+detail.areaName+'/'+detail.addressName+'/'+detail.communityName,
[e.currentTarget.dataset.showname]: false,
[e.currentTarget.dataset.value]: detail.communityName,
})
},组件wxml核心代码
<view class="area-select-bg" wx:if="{{isShow}}">
<view class="area-select-box">
<view class="area-select-title">
<view catchtap='_cancelEvent' class="select-off">取消</view>
地址选择
<view catchtap='_confirmEvent' class="select-on">确认</view>
</view>
<view class="area-select-btn" style="overflow-x: auto;">
<view class="area-select-btn-item" wx:if="{{selectNum>0}}" data-id="1" bindtap="tabBtn">{{provinceName}}</view>
<view class="area-select-btn-item" wx:if="{{selectNum>1}}" data-id="2" bindtap="tabBtn">{{cityName}}</view>
<view class="area-select-btn-item" wx:if="{{selectNum>2}}" data-id="3" bindtap="tabBtn">{{areaName}}</view>
<view class="area-select-btn-item" wx:if="{{selectNum>3}}" data-id="4" bindtap="tabBtn">{{addressName}}</view>
<view class="area-select-btn-item" wx:if="{{selectNum>=4}}" data-id="5" bindtap="tabBtn">{{communityName}}</view>
<view class="area-select-btn-active area-select-btn-item" wx:if="{{isHaveSubset}}">请选择</view>
</view>
<view class="area-select-show">
<view style="height:660rpx;overflow-y: auto;">
<view wx:for="{{list}}" wx:key="index">
<view class="area-select-show-item" data-item="{{item}}" bindtap="selectBtn">
<view class="area-select-show-item-name" style="color:{{item.checked?'#0454D2':''}}">{{item.regionName}}</view>
</view>
</view>
</view>
</view>
</view>
</view>js核心代码
import {
provinceList,
subList
} from "../../utils/api"
Component({
/** * 组件的属性列表
*/
properties: {
},
/** * 组件的初始数据
*/
data: {
isShow:true,
// 公用列表数据
list:[],
// 获取的列表数组
area:{
province:[],
city:[],
area:[],
address:[],
community:[]
},
// 地址code
provinceCode:'',
cityCode:'',
areaCode:'',
addressCode:'',
// 选择按钮
selectNum:0,
// 地址名称
provinceName:'',
cityName:'',
areaName:'',
addressName:'',
communityName:'',
// 判断是否还有下一级
isHaveSubset:true,
// 外部使用的数据包，如需使用地址数据请，在外部定义后直接调用this.data.addressObj即可
addressObj:{
province:'',
city:'',
area:'',
address:'',
community:''
},
// 请求函数通道
getBol:false
},
/* *组件生命周期函数，在组件实例进入页面节点树时执行
*/
attached:function(){
this.getProvince();
},
/** * 组件的方法列表
*/
methods: {
//隐藏弹框
hideDialog(){
this.setData({
isShow: !this.data.isShow
})
},
//展示弹框
showDialog(){
this.setData({
isShow: !this.data.isShow
})
},
/* * 内部私有方法建议以下划线开头
* triggerEvent 用于触发事件
*/
_cancelEvent(){
//触发取消回调
this.triggerEvent("onClose");
},
_confirmEvent(){
// 判断地址是否选择完毕
if (this.data.isHaveSubset) {
return wx.showToast({
icon: 'none',
title: "请选择到社区（村）在点击",
});
}
//触发成功回调
var data={
provinceName:this.data.provinceName,
cityName:this.data.cityName,
areaName:this.data.areaName,
addressName:this.data.addressName,
communityName:this.data.communityName
}
this.triggerEvent("onFinish",data);
},
/* * 公有方法
*/
// 地址三级请求函数
// 省
getProvince(){
var _this=this;
provinceList().then(res=>{
res.data.forEach(function(item){
item.checked=false;
})
_this.data.area.province=res.data;
_this.setData({
list:res.data
})
})
},
// 市
getCity(code){
var _this=this;
subList({regionCode:code}).then(res=>{
// 为所有的市添加checked
res.data.forEach(function(item){
item.checked=false;
})
_this.data.area.city=res.data;
_this.setData({
list:res.data
})
console.log(_this.data.list)
})
},
// 区/县
getArea(regionCode){
var _this=this;
subList({regionCode}).then(res=>{
// 为所有的区添加checked
res.data.forEach(function(item){
item.checked=false;
})
_this.data.area.area=res.data;
_this.setData({
list:res.data
})
})
},
// 街道
getAddress(regionCode){
var _this=this;
subList({regionCode}).then(res=>{
// 为所有的街道添加checked
res.data.forEach(function(item){
item.checked=false;
})
_this.data.area.address=res.data;
_this.setData({
list:res.data
})
})
},
// 小区
getCommunity(regionCode){
var _this=this;
subList({regionCode}).then(res=>{
// 为所有的街道添加checked
res.data.forEach(function(item){
item.checked=false;
})
_this.data.area.community=res.data;
_this.setData({
list:res.data
})
})
},
// 点击tab进行切换
tabBtn(event){
// 判断点击的级别
if (event.currentTarget.dataset.id==1) {
// 更新列表
this.data.list=this.data.area.province;
// 更新点击框
this.data.selectNum=0;
}else if (event.currentTarget.dataset.id==2) {
this.data.list=this.data.area.city;
this.data.selectNum=1;
}else if (event.currentTarget.dataset.id==3) {
this.data.list=this.data.area.area;
this.data.selectNum=2;
}else if (event.currentTarget.dataset.id==4) {
this.data.list=this.data.area.address;
this.data.selectNum=3;
}else if (event.currentTarget.dataset.id==5) {
this.data.list=this.data.area.community;
this.data.selectNum=4;
}
this.setData({
list:this.data.list,
selectNum:this.data.selectNum,
isHaveSubset:this.data.list[0]?true:false
})
},
// 点击地址进行选择处理
selectBtn(event){
// 清空列表
this.setData({
list:[]
})
// 判断当前的点击区域selectNum值 0：省。1：市。2：区。3：街道。
if (this.data.selectNum==0) {
// 保存信息
this.data.area.province.forEach(function(item){
if (item.regionCode==event.currentTarget.dataset.item.regionCode) {
item.checked=true;
}else{
item.checked=false;
}
})
this.data.selectNum=1;
this.setData({
provinceCode:event.currentTarget.dataset.item.regionCode,
area:this.data.area,
selectNum:this.data.selectNum,
provinceName:event.currentTarget.dataset.item.regionName,
})
this.getCity(event.currentTarget.dataset.item.regionCode);
}
// 市
else if (this.data.selectNum==1) {
// 保存信息
this.data.area.city.forEach(function(item){
if (item.regionCode==event.currentTarget.dataset.item.regionCode) {
item.checked=true;
}else{
item.checked=false;
}
})
this.data.selectNum=2;
this.setData({
cityCode:event.currentTarget.dataset.item.regionCode,
area:this.data.area,
selectNum:this.data.selectNum,
cityName:event.currentTarget.dataset.item.regionName,
})
this.getArea(event.currentTarget.dataset.item.regionCode);
}else if(this.data.selectNum==2){
// 保存信息
this.data.area.area.forEach(function(item){
if (item.regionCode==event.currentTarget.dataset.item.regionCode) {
item.checked=true;
}else{
item.checked=false;
}
})
this.data.selectNum=3;
this.setData({
areaCode:event.currentTarget.dataset.item.regionCode,
area:this.data.area,
selectNum:this.data.selectNum,
areaName:event.currentTarget.dataset.item.regionName,
})
this.getAddress(event.currentTarget.dataset.item.regionCode);
}else if (this.data.selectNum==3) {
// 保存信息
this.data.area.address.forEach(function(item){
if (item.regionCode==event.currentTarget.dataset.item.regionCode) {
item.checked=true;
}else{
item.checked=false;
}
})
this.data.selectNum=4;
this.setData({
addressCode:event.currentTarget.dataset.item.regionCode,
area:this.data.area,
selectNum:this.data.selectNum,
addressName:event.currentTarget.dataset.item.regionName,
})
this.getCommunity(event.currentTarget.dataset.item.regionCode);
}else if(this.data.selectNum==4){
// 保存信息
this.data.area.community.forEach(function(item){
if (item.regionCode==event.currentTarget.dataset.item.regionCode) {
item.checked=true;
}else{
item.checked=false;
}
})
this.data.selectNum=4;
this.setData({
communityCode:event.currentTarget.dataset.item.regionCodes,
selectNum:this.data.selectNum,
area:this.data.area,
communityName:event.currentTarget.dataset.item.regionName,
isHaveSubset:event.currentTarget.dataset.item.isHaveSubset?true:false
})
this._confirmEvent()
}
}
}
})css样式自己搬运修改
.area-select-bg{width:750rpx;height:100%;position:fixed;top:0;left:0;z-index:11;}
.area-select-box{width:750rpx;height:800rpx;background:white;position:absolute;bottom:0;left:0;}
.area-select-box .area-select-title{width:100%;line-height:80rpx;font-size:30rpx;color:#999999;text-align:center;display:flex;justify-content:space-between;align-items:center;}
.area-select-box .area-select-title .select-off{width:100rpx;line-height:80rpx;}
.area-select-box .area-select-title .select-on{width:100rpx;line-height:80rpx;color:#0454D2;}
.area-select-box .area-select-btn{height:60rpx;display:flex;justify-content:flex-start;align-items:center;position:relative;top:0;left:0;}
.area-select-box .area-select-btn .area-select-btn-item{height:56rpx;border-bottom:4rpx solid white;font-size:28rpx;line-height:56rpx;color:#666666;margin:0 10rpx;}
.area-select-box .area-select-btn .area-select-btn-active{border-bottom:4rpx solid #0454D2;color:#0454D2;}
.area-select-box .area-select-btn:after{content:'';width:100%;height:1rpx;background:#e5e5e5;position:absolute;bottom:0;left:0;}
.area-select-box .area-select-show{width:750rpx;height:660rpx;}
.area-select-box .area-select-show .area-select-show-item{width:auto;padding:0 26rpx;font-size:28rpx;color:#666666;line-height:76rpx;display:flex;justify-content:flex-start;align-items:center;}
.area-select-box .area-select-show .area-select-show-item image{width:28rpx;height:20rpx;margin-left:20rpx;}创作不易，点个赞好不好。欢迎分享
全部评论 (0)
还没有任何评论哟~