微信小程序 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()   }  }) },  })