省市區選擇器的做法

這里是界面

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