小程序之地址四级联动

转载

mob604756e7db9c 2021-08-17 18:05:00

wxml

　　　　　　　<!-- 地址四级联动 -->
            <view class="page-section" wx:if="{{!version}}">
                <view class="page-section-title">选择地址</view>
                <view class="weui-cell">
                        <picker name="node_id" mode="multiSelector" bindchange="bindPickerChange" bindcancel="bindcancel" bindcolumnchange="bindMultiPickerColumnChange" value="{{[xianxuanzeindex, zhenindex, cunindex, wangdianindex]}}" range="{{[xianxuanze,zhen,cun,wangdian]}}">
                            <view class="weui-cell">{{xianxuanze[xianxuanzeindex]}}-{{zhen[zhenindex]}}-{{cun[cunindex]}}-{{wangdian[wangdianindex]}}</view>
                        </picker>
                </view>
            </view>

js-bindPickerChange()函数点击确认触发

/* 地址 四级联动 value 值改变事件 */ 
  bindPickerChange(e){
    console.log(`确定事件：`,e);
    let { xianxuanzeindex, zhenindex, cunindex, wangdianindex} = this.data;
    if(xianxuanzeindex == 0 || zhenindex == 0 || cunindex == 0 || wangdianindex == 0){
      wx.showToast({
        title: `选择完整的地址`,
        duration: 1000,
        icon: `none`
      })
    }
  },

js-bindMultiPickerColumnChange()函数滚动picker 列触发

/* 地址 四级联动 事件   */ 
  bindMultiPickerColumnChange(e){
    console.log(`四级联动：`,e);
    let that = this;
    let { column, value} = e.detail;
    if( column == 0){
      console.log(`cloum=0 触发`);
      city();
      function city(){
        wx.request({
          url: config.ONLINE_URL + api.parentid3 + that.data.xianxuanzelist[value - 1].id, //仅为示例，并非真实的接
          method: `GET`,
          header: {
            'authentication': 'USERID ' + authentication,
            'content-type': 'application/json'
          },
          success(res) {
            var zhen = that.data.zhen = ['选择街道/乡镇']
            if (res.data.code == '200') {
              for (var i = 0; i < res.data.data.data.length; i++) {
                zhen.push(res.data.data.data[i].title)
              }
              that.setData({
                zhen: zhen,
                zhenlist: res.data.data.data,
                xianxuanzeindex: value,
                zhenindex: 0,
                cunindex: 0,
                wangdianindex: 0,
              })
            } else {
              wx.showModal({
                title: '提示',
                content: res.data.message,
                success(res) {}
              })
            }
          }
        })
      }
    } else if( column == 1) {
      console.log(`cloum=1 触发`);
      city4();
      function city4() {
        wx.request({
          url: config.ONLINE_URL + api.parentid4 + that.data.zhenlist[e.detail.value - 1].id, //仅为示例，并非真实的接口地址
          method: `GET`,
          header: {
            'authentication': 'USERID ' + authentication,
            'content-type': 'application/json'
          },
          success(res) {
            var cun = that.data.cun = ['选择社区/村']
            if (res.data.code == '200') {
              for (var i = 0; i < res.data.data.data.length; i++) {
                cun.push(res.data.data.data[i].title)
              }
              that.setData({
                cun: cun,
                cunlist: res.data.data.data,
                zhenindex: value,
                cunindex: 0,
                wangdianindex: 0,
              })
            } else {
              wx.showModal({
                title: '提示',
                content: res.data.message,
                success(res) {}
              })
            }
          }
        })
      }
    } else if( column == 2) {
      console.log(`cloum=2 触发`);
      cun()
      function cun(){
        wx.request({
          url: config.ONLINE_URL + api.parentid5678 + that.data.cunlist[value - 1].id, //仅为示例，并非真实的接口地址
          method: `GET`,
          header: {
            'authentication': 'USERID ' + authentication,
            'content-type': 'application/json'
          },
          success(res) {
            var wangdian = that.data.wangdian = ['选择网格小区/村社']
            if (res.data.code == '200') {
              for (var i = 0; i < res.data.data.data.length; i++) {
                wangdian.push(res.data.data.data[i].title)
              }
              that.setData({
                wangdian: wangdian,
                wangdianlist: res.data.data.data,
                cunindex: value,
                wangdianindex: 0,
              })
            } else {
              wx.showModal({
                title: '提示',
                content: res.data.message,
                success(res) {}
              })
            }
          }
        })
      }
    } else if( column == 3) {
      console.log(`cloum=3 触发`)
      let { wangdian} = that.data;
      that.setData({
        wangdianindex: value,
        wangdian
      })
    }
  },