省市区选择器的做法

这里是界面

<view class='value'>

    <text class='area_text' bindtap='areaOnShow'>{{areaText}}</text>   // 点击是为了打开下面省市区组件的弹出框

</view>

// 省市区组件弹出框
<van-popup show="{{ popupShow }}" position="bottom" bind:close="areaOnClose">
  <van-area area-list="{{ areaList }}" bind:confirm="changeArea" bind:cancel="areaOnClose"/>
</van-popup>

data:{
    areaText: '选择省/市/区',  //这里是placehold的样式
    popupShow: false,  // 这里是开关省市区的组件
    areaList: '',        
    city_id: null, //市
    district_id: null, //区
    province_id: null, //省    
}

// 数据 data的 areaList

  //获取省市区
  getAreaList: function () {    =============先从接口获取省市区
    const that = this;
    var postData = {};
    let header = getApp().header;
    let datainfo = requestSign.requestSign(postData);
    header.sign = datainfo;
    wx.request({
      url: api.get_area,
      data: postData,
      header: header,
      method: 'POST',
      dataType: 'json',
      responseType: 'text',
      success: (res) => {
        console.log(res);
        let areaList = {            ================================data上的areaList给用户看的
          province_list: res.data.data.province_list,
          city_list: res.data.data.city_list,
          county_list: res.data.data.county_list,
        }
        let areaIdList = {　　　　　　================================选择的地址去匹配省市区的id
          province_id_list: res.data.data.province_id_list,
          city_id_list: res.data.data.city_id_list,
          county_id_list: res.data.data.county_id_list,
        }
        that.setData({
          areaList: areaList,
          areaIdList: areaIdList
        })
      },
      fail: (res) => {},
    })
  },

  //获取选择的省市区
  changeArea: function (event) {
    const that = this;
    console.log(event);
    let areaArray = event.detail.values;
    let area = [];
    let provinceCode = '';
    let cityCode = '';
    let countyCode = '';
    let provinceId = '';
    let cityId = '';
    let countyId = '';
    // 遍历这个数组
    for (var i = 0; i < areaArray.length; i++) {
      area.push(areaArray[i].name); // 把每一项的省市区的name去出来
      // 把选择的省市区的code取出来
      provinceCode = areaArray[0].code;
      cityCode = areaArray[1].code;
      countyCode = areaArray[2].code;
    }
    //  这个areaIdList是接口里获取的最大的areaIDList
    let areaIdList = that.data.areaIdList;
    //  分别把省市区遍历一次
    for (var key in areaIdList.province_id_list) {
      // 遍历如果省市区的code 和 用户选择的code相等了 就取出当前的id
      if (key == provinceCode) {
        provinceId = areaIdList.province_id_list[key];
      }
    }
    for (var key in areaIdList.city_id_list) {
      if (key == cityCode) {
        cityId = areaIdList.city_id_list[key];
      }
    }
    for (var key in areaIdList.county_id_list) {
      if (key == countyCode) {
        countyId = areaIdList.county_id_list[key];
      }
    }
    let areaText = area.join("/");
    that.setData({
      areaText: areaText,
      province_id: provinceId,
      city_id: cityId,
      district_id: countyId
    })
    that.areaOnClose();
  },