支付宝小程序实现自定义地区三级联动

缺乏、安全感 2022-12-09 00:37 247阅读 0赞

支付宝小程序自定义地区三级联动

场景数据结构：

[{
          "id": 110000,
          "name": "北京市",
          "children": [{
            "id": "110100",
            "name": "北京市",
            "children": [{
                "id": "110101",
                "name": "东城区"
              }]
          }]
    }]

view

data:{
        areaAddress: '',
        provinceList: [], // 省份列表
        cityList: [], // 市县列表
        districtList: [], // 区县列表
        areaIndex: [0, 0, 0], // 索引
    },
    
    // 方法
    
      // 初始化三级地区
      initArea() {
        var self = this;
        // 初始化数据
        let initIndex = self.data.areaIndex
        let provinceId, cityId, areaId, provinceName, cityName, areaName
        provinceId = areaList.data[initIndex[0]].id
        provinceName = areaList.data[initIndex[0]].name
        cityId = areaList.data[initIndex[0]].children[initIndex[1]].id
        cityName = areaList.data[initIndex[0]].children[initIndex[1]].name
        areaId = areaList.data[initIndex[0]].children[initIndex[1]].children[initIndex[2]].id
        areaName = areaList.data[initIndex[0]].children[initIndex[1]].children[initIndex[2]].name
        // 初始化列表数据
        self.setData({
          'form.province': provinceId,
          'form.city': cityId,
          'form.area': areaId,
          areaAddress: provinceName + cityName + areaName,
          provinceList: areaList.data,
          cityList: areaList.data[0].children,
          districtList: areaList.data[0].children[0].children
        })
      },
    
    
      // 选择地址——填充选择框——填充上传数据
      bindMultiPickerChange() {
        let self = this
        let initIndex = self.data.areaIndex
        let provinceId, cityId, areaId, provinceName, cityName, areaName
        provinceId = self.data.provinceList[initIndex[0]].id
        provinceName = self.data.provinceList[initIndex[0]].name
        cityId = self.data.provinceList[initIndex[0]].children[initIndex[1]].id
        cityName = self.data.provinceList[initIndex[0]].children[initIndex[1]].name
        areaId = self.data.provinceList[initIndex[0]].children[initIndex[1]].children[initIndex[2]].id
        areaName = self.data.provinceList[initIndex[0]].children[initIndex[1]].children[initIndex[2]].name
    
        self.setData({
          'form.province': provinceId,
          'form.city': cityId,
          'form.area': areaId,
          areaAddress: provinceName + cityName + areaName,
          showArea: false
        })
      },
    
      // 滑动地址
      bindMultiPickerColumnChange(e) {
        let self = this
        let newIndexArr = e.detail.value
        // 监听第一列
        if (newIndexArr[0] !== self.data.areaIndex[0]) {
          // 滑动第一列——初始化第二列和第三列的数据
          let initArr = [newIndexArr[0], 0, 0]
          self.setData({
            areaIndex: initArr,
            cityList: self.data.provinceList[initArr[0]].children,
            districtList: self.data.provinceList[initArr[0]].children[0].children
          })
          return
        }
    
        // 监听第二列滑动
        if (newIndexArr[1] !== self.data.areaIndex[1]) {
          // 滑动第一列——初始化第二列和第三列的数据
          let initArr = [newIndexArr[0], newIndexArr[1], 0]
          self.setData({
            areaIndex: initArr,
            districtList: self.data.provinceList[initArr[0]].children[initArr[1]].children
          })
          return
        }
    
        // 监听第三列
        self.setData({
          areaIndex: newIndexArr
        })
    
      }