小程序之ecshop地址3级联动

picker标签，官方给出的实例：

<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
    })
  },
})

wxml页面：

<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>

js页面：

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()
      }
    })
  },
})