小程序省市县镇村五级选择器

何以减压

已于 2023-03-10 15:11:59 修改

阅读量376

点赞数 1

文章标签：小程序 javascript 开发语言 Powered by 金山文档

于 2023-03-10 15:06:42 首次发布

本文链接：https://blog.csdn.net/yxp12345678/article/details/129443189

版权

父组件使用

//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;}

创作不易，点个赞好不好。欢迎分享