Bootstrap

uniApp 省市区自定义数据

关于自定义省市区选择 其实也是用了 uniApp的内置组件 picker  

<picker mode="multiSelector" @change="bindRegionChange"
@columnchange="bindMultiPickerColumnChange" :value="valueRegion" :range="multiArray">
  <view class='acea-row'>
  <view class="picker line1">{{region[0]}},{{region[1]}},{{region[2]}}</view>
  <view class='iconfont icon-xiangyou abs_right'></view>
  </view>
  </picker>


data(){
  return{
    region: ['省', '市', '区'],
    valueRegion: [0, 0, 0],
    district: [],
    multiArray: [],
    multiIndex: [0, 0, 0],
    cityId: 0,
  }
},
methods:{
  // 获取地址数据
  getCityList: function() {
    let that = this;
    getCity().then(res => {
      this.district = res.data;
      let oneDay = 24 * 3600 * 1000;
      //设置不过期时间的方法  可以换成uni.setStorageSync('xx',xx)
      this.$Cache.setItem({name:'cityList',value:res.data,expires:oneDay * 7});  //设置七天过期时间
      that.initialize();
    })
  },
  initialize: function() {
    let that = this,province = [],city = [],area = [];
    if (that.district.length) {
      let cityChildren = that.district[0].child || [];
      let areaChildren = cityChildren.length ? (cityChildren[0].child || []) : [];
      that.district.forEach(function(item) {
        province.push(item.name);
      });
      cityChildren.forEach(function(item) {
        city.push(item.name);
      });
      areaChildren.forEach(function(item) {
        area.push(item.name);
      });
      this.multiArray = [province, city, area]
    }
  },
  bindRegionChange: function(e) {
    let multiIndex = this.multiIndex,
      province = this.district[multiIndex[0]] || {
        child: []
      },
      city = province.child[multiIndex[1]] || {
        cityId: 0
      },
      multiArray = this.multiArray,
      value = e.detail.value;

    this.region = [multiArray[0][value[0]], multiArray[1][value[1]], multiArray[2][value[2]]]
    this.cityId = city.cityId
    this.valueRegion = [0, 0, 0]
    this.initialize();
  },
  bindMultiPickerColumnChange: function(e) {
    let that = this,
      column = e.detail.column,
      value = e.detail.value,
      currentCity = this.district[value] || {
        child: []
      },
      multiArray = that.multiArray,
      multiIndex = that.multiIndex;
    multiIndex[column] = value;
    switch (column) {
      case 0:
        let areaList = currentCity.child[0] || {
          child: []
        };
        multiArray[1] = currentCity.child.map((item) => {
          return item.name;
        });
        multiArray[2] = areaList.child.map((item) => {
          return item.name;
        });
        break;
      case 1:
        let cityList = that.district[multiIndex[0]].child[multiIndex[1]].child || [];
        multiArray[2] = cityList.map((item) => {
          return item.name;
        });
        break;
      case 2:

        break;
    }
    // #ifdef MP || APP-PLUS
    this.$set(this.multiArray, 0, multiArray[0]);
    this.$set(this.multiArray, 1, multiArray[1]);
    this.$set(this.multiArray, 2, multiArray[2]);
    // #endif
    // #ifdef H5
    this.multiArray = multiArray;
    // #endif
    this.multiIndex = multiIndex
    // this.setData({ multiArray: multiArray, multiIndex: multiIndex});
  },
}

;