小程序 省市区三级联动

项目需要省市地区三级联动 然后需要最终返回 区县的code 数据为后台请求

wxml

 <view class='input_type'>
<text>地区选择：</text>
<!-- <input data-type="areaCode" type="text" bindblur="inputVal"></input> -->
<picker bindchange="bindPickerChange" value="{{index}}" range="{{provice}}" class='limit_one' style='width:120rpx;'>
  <view class="picker" data-code=''>
    {{proviceName}}
  </view>
</picker>
<picker bindchange="bindCityChange" value="{{index}}" range="{{city}}" class='limit_one' style='width:120rpx;'>
  <view class="picker" data-code='1'>
    {{cityName}}
  </view>
</picker>
<picker bindchange="bindDistrictChange" value="{{index}}" range="{{district}}" class='limit_one' style='width:245rpx;'>
  <view class="picker"  data-code='2'>
    {{districtName}}
  </view>
</picker>

</view>

js

[
    {
        CityName:"东城区",
        CodeId:110101,
        ParentId:1101,
        Sort:0      
    },
    {
        CityName:"东城区",
        CodeId:110101,
        ParentId:1101,
        Sort:0      
    },
]


const httpHelper = require('../../libs/httpRequertHelper.js')//封装的ajax

Page({
  /**
   * 页面的初始数据
   */
  data: {
    provice: [],//仅含有名称
    city: [],
    district:[],
    proviceName: '省',
    cityName: '市',
    districtName:'区县',
    proviceList :[],//所有数据 包括名称 code
    cityList :[],
    districtList:[],
    index:0,//下标
    Pcode:0,//父级code  也是最终code
  },
  checkboxChange:function(){

  },
  onLoad: function (options) {
    //首先加载省数据
    var that = this;
    var arr = [];
    var http = new httpHelper.HttpRequert({
      data: {
        parentCode: 0
      },
      success: returnData => {
        if (returnData.data.status == 200) {
          var datas = JSON.parse(returnData.data.list);
          for (var i = 0; i < datas.length; i++) {
            arr.push(datas[i].CityName)
          }
          that.setData({
            provice: arr,
            proviceList:datas
          })          
        }
      }
    });
    http.send('/Common/FindCityList');
  },
  bindPickerChange: function (e) {   //省级选择完
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value,
      proviceName: this.data.provice[e.detail.value],
      Pcode: this.data.proviceList[e.detail.value].CodeId
    })
    this.getCity(1);
  },
  bindCityChange: function (e) {//市级选择完
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value,
      cityName: this.data.city[e.detail.value],
      Pcode: this.data.cityList[e.detail.value].CodeId      
    })
    this.getCity(2);
    
  },
  bindDistrictChange: function (e) {//区县
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value,
      districtName: this.data.district[e.detail.value],
      Pcode: this.data.districtList[e.detail.value].CodeId,
    })  
  },
  getCity:function(types){
    var that=this;
    var arr=[];    
    var http = new httpHelper.HttpRequert({
      data: {
        parentCode:this.data.Pcode
      },
      success: returnData => {
        if (returnData.data.status == 200) {
          var datas=JSON.parse(returnData.data.list)
          console.log(datas)
          for (var i = 0; i < datas.length;i++){
            arr.push(datas[i].CityName)
          }
          if(types==1){
            that.setData({
              city: arr,
              cityList:datas
            })
          } else if (types == 2) {
            that.setData({
              district: arr,
              districtList:datas
            })
          }
        }
      }
    });
    http.send('/Common/FindCityList');
  },
  onShow:function(){
    
  },
  

})