微信小程序 ecshop地址三级联动实现实例代码

<view class="section">
 <view class="section__title">地区选择器</view>
 <picker bindchange="bindpickerchange" value="{{index}}" range="{{array}}">
  <view class="picker">
   当前选择：{{array[index]}}
  </view>
 </picker>
</view>

 page({
 data: {
  array: ['美国', '中国', '巴西', '日本'],
  index: 0,
 },
 bindpickerchange: function(e) {
  console.log('picker发送选择改变，携带值为', e.detail.value)
  this.setdata({
   index: e.detail.value
  })
 },
})

<view class="add-list under-line" >

    <view class="add-lab">收货地址</view>
    <view class="add-text">
      <picker class="w-3" bindchange="bindpickerprovince" value="{{provinceindex}}" range="{{province}}" >
        <view class="picker">{{province[provinceindex]}}</view>
      </picker> 
      <picker class="w-3" bindchange="bindpickercity" value="{{cityindex}}" range="{{city}}" >
        <view class="picker">{{city[cityindex]}}</view>
      </picker>
      <picker class="w-3" bindchange="bindpickerdistrict" value="{{districtindex}}" range="{{district}}" >
        <view class="picker">{{district[districtindex]}}</view>
      </picker>        
    </view>
  </view>

var app = getapp()
page({
 data:{
  motto: 'jxcat',
  serverurl: app.globaldata.ajaxurl,
  baseurl: app.globaldata.baseurl,
  title: "收货地址",
  address_id: "",
  address: "",

  province:[],

  province_id: [], //后台返回的数据对应 region_id city,district 与此相同
  province_name: [], //后台返回的数据对应 region_name
  provinceindex: 0, //wxml页面选择的选项，从0开始
  provinceid: 0, //根据wxml页面选择的选项获取到province_id: []对应的region_id

  city:[].
  city_id: [],
  city_name: [],
  cityindex: 0,
  cityid: 0,

  district:[],
  district_id: [],  
  district_name: [],
  districtindex: 0,
  districtid: 0,
 },
 onload:function(options){
  // 页面初始化 options为页面跳转所带来的参数
  var that = this
  var get_data
  wx.checksession({
   success: function(){
    //登录态未过期
    wx.getstorage({
     key: 'wcx_session',
     success: function(sres) {
       get_data = {
            m: 'api',
            c: 'user' ,
            a: 'edit_address',
            wcx_session: sres.data,
        }
       if(options.act == 'edit'){
         get_data = {
            m: 'api',
            c: 'user' ,
            a: 'edit_address',
            id: options.id,
            wcx_session: sres.data,
        }
       }
       wx.request({
        url: app.globaldata.ajaxurl, 
        data: get_data,
        header: {
          'content-type': 'application/json'
        },
        success: function(res) {
  
          if(options.act == "edit"){
           that.data.provinceid = res.data.consignee.province
           that.data.cityid = res.data.consignee.city
           that.data.districtid = res.data.consignee.district
          }
          for(var i=0; i<res.data.province_list.length; i++){{
           that.data.province_id[i] = res.data.province_list[i].region_id //把region_id存入province_id
           that.data.province_name[i] = res.data.province_list[i].region_name //把region_name存入province_name
           if(res.data.consignee.province == res.data.province_list[i].region_id){
            that.data.provinceindex = i
           }
          }}
          for(var i=0; i<res.data.city_list.length; i++){{
           that.data.city_id[i] = res.data.city_list[i].region_id
           that.data.city_name[i] = res.data.city_list[i].region_name
           if(res.data.consignee.city == res.data.city_list[i].region_id){
            that.data.cityindex = i
           }
          }}
          for(var i=0; i<res.data.district_list.length; i++){{
           that.data.district_id[i] = res.data.district_list[i].region_id
           that.data.district_name[i] = res.data.district_list[i].region_name
           if(res.data.consignee.district == res.data.district_list[i].region_id){
            that.data.districtindex = i
           }
          }}
          that.data.address_id = options.id
          that.setdata({
           consignee: res.data.consignee,
           province: that.data.province_name,
           provinceindex: that.data.provinceindex,
           city: that.data.city_name,
           cityindex: that.data.cityindex,
           district: that.data.district_name,
           districtindex: that.data.districtindex
          }) 
        }
       })
       //request
     } 
    })
   },
   fail: function(){
    //登录态过期
    wx.login()
   }
  })
  
 },
 bindpickerprovince: function(event){
  var that = this
  var getid = event.detail.value //获取到wxml选择的选项对应的下标，从0开始
  that.data.provinceid = that.data.province_id[getid] //根据获取到的下标获取到region_name对应的region_id
  wx.request({
   url: app.globaldata.ajaxurl, 
   data: {
    m: 'api',
    c: 'public' ,
    a: 'region',
    rtype: 2,
    rparent: that.data.provinceid,
   },
   header: {
     'content-type': 'application/json'
   },
   success: function(res){
    for(var i=0; i<res.data.regions.length; i++){{
     that.data.city_id[i] = res.data.regions[i].region_id
     that.data.city_name[i] = res.data.regions[i].region_name
    }}
    that.setdata({
      city: that.data.city_name,
      provinceindex: getid,
     }) 
   },
   
  })
 },
 bindpickercity: function(event){
  var that = this
  var getid = event.detail.value
  that.data.cityid = that.data.city_id[getid]
  wx.request({
   url: app.globaldata.ajaxurl, 
   data: {
    m: 'api',
    c: 'public' ,
    a: 'region',
    rtype: 3,
    rparent: that.data.cityid,
   },
   header: {
     'content-type': 'application/json'
   },
   success: function(res){
    for(var i=0; i<res.data.regions.length; i++){{
     that.data.district_id[i] = res.data.regions[i].region_id
     that.data.district_name[i] = res.data.regions[i].region_name
    }}
    that.setdata({
      district: that.data.district_name,
      cityindex: getid,
     }) 
   },
   
  })
 },
 bindpickerdistrict: function(event){
   var that = this
   var getid = event.detail.value
   that.data.districtid = that.data.district_id[getid]
   that.setdata({
      districtindex: getid,
   }) 
 },
 formsubmit: function(event) {
  var that = this
  wx.checksession({
   success: function(){
    //登录态未过期
    wx.getstorage({
     key: 'wcx_session',
     success: function(sres) {
       wx.request({
        url: app.globaldata.ajaxurl, 
        data: {
         m: 'api',
         c: 'user' ,
         a: 'add_address',
         address_id: that.data.address_id,
         province: that.data.provinceid, // wxml页面选择的地址对应的 region_id
         city: that.data.cityid,
         district: that.data.districtid,
         address: event.detail.value.address,
         consignee: event.detail.value.consignee,
         mobile: event.detail.value.mobile,
         zipcode: event.detail.value.zipcode,
         wcx_session: sres.data,
        }, 
        header: {
          'content-type': 'application/json'
        },
        
        success: function(res) {
          console.log(res)
          wx.redirectto({
                url: 'address'
            })
        }
       })
       //request
     } 
    })
   },
   fail: function(){
    //登录态过期
    wx.login()
   }
  })
 },


  
})