自定义原生小程序国家省份城市选择器

前端小凯

已于 2024-07-26 11:13:48 修改

阅读量305

点赞数 2

文章标签：小程序

于 2024-07-26 10:43:16 首次发布

本文链接：https://blog.csdn.net/qq_43235503/article/details/140709230

版权

html：

<view class="option">
  <label class="left-label residence-label">居住地</label>
  <picker class="picker" mode="multiSelector" bindchange="residenceChange" 
    bindcolumnchange="residenceColumnChange" range="{{ residencePickerData }}">
    <view class="right-content">
      <input type="text" class="input residence" value="{{ initialize.residence }}" 
        disabled name="residence" placeholder="选择你的居住地" 
        placeholder-style="#9C9C9C"/>
      <icon class="iconfont icon-xiangzuojiantou-"></icon>
    </view>
  </picker>
</view>

js变量：

data () {
    return {
        initialize: {
            residence: ""  // 现居地
        },
        residenceData: [[], [], []],  // 现居地总数据
        residencePickerData: [[], [], []]  // 现居地picker数据
    }
},

js方法：

/**
 * 获取居住地数据
 */
getResidenceData(country_region_id = "", state_id = "") {
  wx.request({
    url: API.service.getLocations,
    method: 'post',
    data: {
      country_region_id,
      state_id
    },
    success: res => {
      if (res.statusCode == 200) {
        let residenceData = [];
        let residencePickerData = [];
        let index = !country_region_id && !state_id ? 0 : (country_region_id ? 1 : 2 );
        res.data.data.forEach(item => {
          residenceData.push(item);
          residencePickerData.push(item.name);
        });
        this.setData({
          [`residenceData[${index}]`]: residenceData,
          [`residencePickerData[${index}]`]: residencePickerData
        });
        // 判断是否到城市 如果没有则递归获取省份和城市
        if (index == 0) {
          this.getResidenceData(res.data.data[0].id);
        } else  if (index == 1) {
          this.getResidenceData("", res.data.data[0].id);
        };
      } else {
        API.ways.restsCode('获取现居地接口失败');
      };
    },
    fail(err) {
      API.ways.networkError();
    }
  });
},
/**
 * 选择居住地确定
 */
residenceChange(e) {
  let residence = "";
  let residenceIndexArray = e.detail.value;
  residenceIndexArray.forEach((item, index) => {
    residence += `${this.data.residenceData[index][item].name} `;
  });
  this.setData({ 
    "initialize.residence": residence
  });
},
/**
 * 选择居住地行列发生改变
 */
residenceColumnChange(e) {
  let { column, value } = e.detail;
  if (column == 0) {
    this.data.residenceData[1] = [];
    this.data.residenceData[2] = [];
    this.data.residencePickerData[1] = [];
    this.data.residencePickerData[2] = [];
    this.setData({
      residenceData: this.data.residenceData,
      residencePickerData: this.data.residencePickerData
    });
    let country_region_id = this.data.residenceData[column][value].id;
    this.getResidenceData(country_region_id);
  } else if (column == 1) {
    this.data.residenceData[2] = [];
    this.data.residencePickerData[2] = [];
    this.setData({
      residenceData: this.data.residenceData,
      residencePickerData: this.data.residencePickerData
    });
    let state_id = this.data.residenceData[column][value].id;
    this.getResidenceData("", state_id);
  };
}

效果图：