微信小程序 --- 三级联动（省市区）

优化：以code作为唯一标识，避免相同的地区造成混轮 

        
          请选择省市区
          
            {
    { proviceName }} {
    { cityName }} {
    { districtName }}
          
        

// 转换格式
const formatAreaList = (areaList) => {
  let provinceArr = []
  let provinceArrCode = []
  let cityArrObj = {}
  let cityCodeArrObj = {}
  let areaArrObj = {}

  areaList.forEach((item, index) => {
    provinceArr.push(item.name)
    provinceArrCode.push(item.code)

    let cityArr = item.list.map(i => {
      return i.name
    })

    let cityCodeArr = item.list.map(i => {
      return i.code
    })

    cityArrObj[item.code] = cityArr
    cityCodeArrObj[item.code] = cityCodeArr

    item.list.forEach((value, count) => {
      let areaArr = value.list.map(j => {
        return j.name
      })
      areaArrObj[value.code] = areaArr
    })
  })
  return {
    provinceArr,
    cityArrObj,
    cityCodeArrObj,
    areaArrObj,
    provinceArrCode
  }
}

  data: {

    proviceName: '',
    proviceCode: '',
    cityName: '',
    cityCode: '',
    districtName: '',
    districtCode: '',

    // 三级联动
    areaList: [],
    multiIndex: [0, 0, 0],
    multiArray: [
      [],
      [],
      []
    ],
    multiCodeArray: [
      [],
      [],
      []
    ],
    provinceArr: [],
    provinceArrCode: [],
    cityArrObj: {},
    cityCodeArrObj: {},
    areaArrObj: {},

  onShow: function () {
    // 获取三级联动地址数据
    this.fetchLinkAddress()
  },

  // 获取三级联动地址数据
  fetchLinkAddress() {
    $showLoading()
    app.func.$get('customercenter/common/area/queryAreaList', {}, res => {
      console.log('三级联动', res)
      let {
        areaList,
        code
      } = res
      if (code == $SUCCESS) {
        // 调整二级联动数据结构
        this.adjustAreaList(areaList)
      } else {
        $toast('网络错误')
        $hideLoading()
      }
    })
  },

   // 调整二级联动数据结构
  adjustAreaList(areaList) {
    let {
      proviceName,
      proviceCode,
      cityName,
      cityCode,
      districtName
    } = this.data

    let {
      provinceArr,
      cityArrObj,
      areaArrObj,
      provinceArrCode,
      cityCodeArrObj
    } = formatAreaList(areaList)

    if (proviceCode && cityCode) {
      // 存在则自动定位到相应的省市(修改地址进来时)
      this.setData({
        multiArray: [
          provinceArr, cityArrObj[proviceCode], areaArrObj[cityCode]
        ],
        multiIndex: [
          provinceArr.indexOf(proviceName),
          cityArrObj[proviceCode].indexOf(cityName),
          areaArrObj[cityCode].indexOf(districtName)
        ],
        areaList,
        provinceArr,
        cityArrObj,
        cityCodeArrObj,
        areaArrObj,
        provinceArrCode
      })
    } else {
      // 默认第一个的省code
      let provinceIndex = provinceArrCode[0]

      // 默认第一个省的第一个市的code
      let areaIndex = areaList[0].list[0].code

      this.setData({
        multiArray: [
          provinceArr,
          cityArrObj[provinceIndex],
          areaArrObj[areaIndex]
        ],
        multiIndex: [0, 0, 0],
        provinceArr,
        cityArrObj,
        areaArrObj,
        areaList,
        cityCodeArrObj,
        provinceArrCode
      })
    }
    $hideLoading()
  },

    // 确定地址选择器的选择
  bindMultiPickerChange(e) {
    app.wxTrack.emit(1, addressPageEventObj[1])
    let {
      multiArray,
      areaList,
      cityCopy
    } = this.data
    let multiIndex = e.detail.value

    let codes = areaList[multiIndex[0]]
    // 省
    let proviceCode = codes.code
    let proviceName = multiArray[0][multiIndex[0]]

    // 市
    let cityCode = codes.list[multiIndex[1]].code
    let cityName = multiArray[1][multiIndex[1]]

    // 区
    let districtCode = ''
    let districtName = multiArray[2][multiIndex[2]]

    // 不存在区，将市的code传给后台,存在则转区的code
    if (!districtName) {
      districtName = ''
      districtCode = cityCode
    } else {
      districtCode = codes.list[multiIndex[1]].list[multiIndex[2]].code
    }

    this.setData({
      multiIndex,
      proviceName,
      proviceCode,
      cityName,
      cityCode,
      districtName,
      districtCode
    })
  },

   // 地址选择器滚动中
  bindMultiPickerColumnChange(e) {
    let {
      multiArray,
      multiCodeArray,
      multiIndex,
      provinceArrCode,
      cityArrObj,
      cityCodeArrObj,
      areaArrObj
    } = this.data

    let col = e.detail.column
    let val = e.detail.value
    multiIndex[col] = val

    switch (col) {
      case 0:
        let index = multiIndex[0]
        console.log('滑动第一级别', index)
        switch (index) {
          case index:
            // 省code
            let provCode = provinceArrCode[index]
            // 省code对应的第一个市code
            let cityCode = cityCodeArrObj[provCode][0]

            multiArray[1] = cityArrObj[provCode]
            multiCodeArray[1] = cityCodeArrObj[provCode]
            multiArray[2] = areaArrObj[cityCode]
            break
        }
        multiIndex[1] = 0
        multiIndex[2] = 0
        break

      case 1:
        let index2 = multiIndex[1]
        console.log('滑动第二级别', index2)
        switch (index2) {
          case index2:
            // 当前的市code

            // 若用户直接滑动第二级别的，则默认将三级联动第一个省对应的市获取出来
            if (multiCodeArray[1].length == 0){
                multiCodeArray[1] = cityCodeArrObj[provinceArrCode[0]]
            }
            let code = multiCodeArray[1][index2]
            multiArray[2] = areaArrObj[code]
            break
        }
        multiIndex[2] = 0
        break
    }
    this.setData({
      multiIndex,
      multiArray,
      multiCodeArray
    })
  },

   // 选择器取消
  bindPickerCancel(e) {
    let {
      provinceArr,
      cityArrObj,
      areaArrObj,
      proviceName,
      proviceCode,
      cityName,
      cityCode,
      districtName,
      provinceArrCode,
      cityCodeArrObj
    } = this.data
    if (proviceName) {
      let provinceIndex = provinceArr.indexOf(proviceName) || 0
      let citys = cityArrObj[proviceCode]
      let cityIndex = citys.indexOf(cityName) || 0
      let areas = areaArrObj[cityCode]
      let areaIndex = areas.indexOf(districtName) || 0
      let multiArray = [provinceArr, citys, areas]
      this.setData({
        multiIndex: [provinceIndex, cityIndex, areaIndex],
        multiArray
      })
    } else {
      let provinceIndex = provinceArrCode[0]
      let cityCode = cityCodeArrObj[provinceIndex][0]
      this.setData({
        multiArray: [
          provinceArr,
          cityArrObj[provinceIndex],
          areaArrObj[cityCode]
        ],
        multiIndex: [0, 0, 0]
      })
    }
  },

后台返回数据格式：

[{
		"code": "11",
		"level": 1,
		"name": "北京市",
		"list": [{
			"code": "1101",
			"level": 2,
			"name": "市辖区",
			"list": [{
				"code": "110101",
				"level": 3,
				"name": "东城区",
				"list": null
			}, {
				"code": "110102",
				"level": 3,
				"name": "西城区",
				"list": null
			}, {
				"code": "110105",
				"level": 3,
				"name": "朝阳区",
				"list": null
			}, {
				"code": "110106",
				"level": 3,
				"name": "丰台区",
				"list": null
			}, {
				"code": "110107",
				"level": 3,
				"name": "石景山区",
				"list": null
			}, {
				"code": "110108",
				"level": 3,
				"name": "海淀区",
				"list": null
			}, {
				"code": "110109",
				"level": 3,
				"name": "门头沟区",
				"list": null
			}, {
				"code": "110111",
				"level": 3,
				"name": "房山区",
				"list": null
			}, {
				"code": "110112",
				"level": 3,
				"name": "通州区",
				"list": null
			}, {
				"code": "110113",
				"level": 3,
				"name": "顺义区",
				"list": null
			}, {
				"code": "110114",
				"level": 3,
				"name": "昌平区",
				"list": null
			}, {
				"code": "110115",
				"level": 3,
				"name": "大兴区",
				"list": null
			}, {
				"code": "110116",
				"level": 3,
				"name": "怀柔区",
				"list": null
			}, {
				"code": "110117",
				"level": 3,
				"name": "平谷区",
				"list": null
			}, {
				"code": "110118",
				"level": 3,
				"name": "密云区",
				"list": null
			}, {
				"code": "110119",
				"level": 3,
				"name": "延庆区",
				"list": null
			}]
		}]
	},
	{
		"code": "12",
		"level": 1,
		"name": "天津市",
		"list": [{
			"code": "1201",
			"level": 2,
			"name": "市辖区",
			"list": [{
				"code": "120101",
				"level": 3,
				"name": "和平区",
				"list": null
			}, {
				"code": "120102",
				"level": 3,
				"name": "河东区",
				"list": null
			}, {
				"code": "120103",
				"level": 3,
				"name": "河西区",
				"list": null
			}, {
				"code": "120104",
				"level": 3,
				"name": "南开区",
				"list": null
			}, {
				"code": "120105",
				"level": 3,
				"name": "河北区",
				"list": null
			}, {
				"code": "120106",
				"level": 3,
				"name": "红桥区",
				"list": null
			}, {
				"code": "120110",
				"level": 3,
				"name": "东丽区",
				"list": null
			}, {
				"code": "120111",
				"level": 3,
				"name": "西青区",
				"list": null
			}, {
				"code": "120112",
				"level": 3,
				"name": "津南区",
				"list": null
			}, {
				"code": "120113",
				"level": 3,
				"name": "北辰区",
				"list": null
			}, {
				"code": "120114",
				"level": 3,
				"name": "武清区",
				"list": null
			}, {
				"code": "120115",
				"level": 3,
				"name": "宝坻区",
				"list": null
			}, {
				"code": "120116",
				"level": 3,
				"name": "滨海新区",
				"list": null
			}, {
				"code": "120117",
				"level": 3,
				"name": "宁河区",
				"list": null
			}, {
				"code": "120118",
				"level": 3,
				"name": "静海区",
				"list": null
			}, {
				"code": "120119",
				"level": 3,
				"name": "蓟州区",
				"list": null
			}]
		}]
	},
	{
		"code": "13",
		"level": 1,
		"name": "河北省",
		"list": [{
				"code": "1301",
				"level": 2,
				"name": "石家庄市",
				"list": [{
					"code": "130102",
					"level": 3,
					"name": "长安区",
					"list": null
				}, {
					"code": "130104",
					"level": 3,
					"name": "桥西区",
					"list": null
				}, {
					"code": "130105",
					"level": 3,
					"name": "新华区",
					"list": null
				}, {
					"code": "130107",
					"level": 3,
					"name": "井陉矿区",
					"list": null
				}, {
					"code": "130108",
					"level": 3,
					"name": "裕华区",
					"list": null
				}, {
					"code": "130109",
					"level": 3,
					"name": "藁城区",
					"list": null
				}, {
					"code": "130110",
					"level": 3,
					"name": "鹿泉区",
					"list": null
				}, {
					"code": "130111",
					"level": 3,
					"name": "栾城区",
					"list": null
				}, {
					"code": "130121",
					"level": 3,
					"name": "井陉县",
					"list": null
				}, {
					"code": "130123",
					"level": 3,
					"name": "正定县",
					"list": null
				}, {
					"code": "130125",
					"level": 3,
					"name": "行唐县",
					"list": null
				}, {
					"code": "130126",
					"level": 3,
					"name": "灵寿县",
					"list": null
				}, {
					"code": "130127",
					"level": 3,
					"name": "高邑县",
					"list": null
				}, {
					"code": "130128",
					"level": 3,
					"name": "深泽县",
					"list": null
				}, {
					"code": "130129",
					"level": 3,
					"name": "赞皇县",
					"list": null
				}, {
					"code": "130130",
					"level": 3,
					"name": "无极县",
					"list": null
				}, {
					"code": "130131",
					"level": 3,
					"name": "平山县",
					"list": null
				}, {
					"code": "130132",
					"level": 3,
					"name": "元氏县",
					"list": null
				}, {
					"code": "130133",
					"level": 3,
					"name": "赵县",
					"list": null
				}, {
					"code": "130171",
					"level": 3,
					"name": "石家庄高新技术产业开发区",
					"list": null
				}, {
					"code": "130172",
					"level": 3,
					"name": "石家庄循环化工园区",
					"list": null
				}, {
					"code": "130181",
					"level": 3,
					"name": "辛集市",
					"list": null
				}, {
					"code": "130183",
					"level": 3,
					"name": "晋州市",
					"list": null
				}, {
					"code": "130184",
					"level": 3,
					"name": "新乐市",
					"list": null
				}]
			},
			{
				"code": "1302",
				"level": 2,
				"name": "唐山市",
				"list": [{
					"code": "130202",
					"level": 3,
					"name": "路南区",
					"list": null
				}, {
					"code": "130203",
					"level": 3,
					"name": "路北区",
					"list": null
				}, {
					"code": "130204",
					"level": 3,
					"name": "古冶区",
					"list": null
				}, {
					"code": "130205",
					"level": 3,
					"name": "开平区",
					"list": null
				}, {
					"code": "130207",
					"level": 3,
					"name": "丰南区",
					"list": null
				}, {
					"code": "130208",
					"level": 3,
					"name": "丰润区",
					"list": null
				}, {
					"code": "130209",
					"level": 3,
					"name": "曹妃甸区",
					"list": null
				}, {
					"code": "130223",
					"level": 3,
					"name": "滦县",
					"list": null
				}, {
					"code": "130224",
					"level": 3,
					"name": "滦南县",
					"list": null
				}, {
					"code": "130225",
					"level": 3,
					"name": "乐亭县",
					"list": null
				}, {
					"code": "130227",
					"level": 3,
					"name": "迁西县",
					"list": null
				}, {
					"code": "130229",
					"level": 3,
					"name": "玉田县",
					"list": null
				}, {
					"code": "130271",
					"level": 3,
					"name": "唐山市芦台经济技术开发区",
					"list": null
				}, {
					"code": "130272",
					"level": 3,
					"name": "唐山市汉沽管理区",
					"list": null
				}, {
					"code": "130273",
					"level": 3,
					"name": "唐山高新技术产业开发区",
					"list": null
				}, {
					"code": "130274",
					"level": 3,
					"name": "河北唐山海港经济开发区",
					"list": null
				}, {
					"code": "130281",
					"level": 3,
					"name": "遵化市",
					"list": null
				}, {
					"code": "130283",
					"level": 3,
					"name": "迁安市",
					"list": null
				}]
			},
			{
				"code": "1303",
				"level": 2,
				"name": "秦皇岛市",
				"list": [{
					"code": "130302",
					"level": 3,
					"name": "海港区",
					"list": null
				}, {
					"code": "130303",
					"level": 3,
					"name": "山海关区",
					"list": null
				}, {
					"code": "130304",
					"level": 3,
					"name": "北戴河区",
					"list": null
				}, {
					"code": "130306",
					"level": 3,
					"name": "抚宁区",
					"list": null
				}, {
					"code": "130321",
					"level": 3,
					"name": "青龙满族自治县",
					"list": null
				}, {
					"code": "130322",
					"level": 3,
					"name": "昌黎县",
					"list": null
				}, {
					"code": "130324",
					"level": 3,
					"name": "卢龙县",
					"list": null
				}, {
					"code": "130371",
					"level": 3,
					"name": "秦皇岛市经济技术开发区",
					"list": null
				}, {
					"code": "130372",
					"level": 3,
					"name": "北戴河新区",
					"list": null
				}]
			},
			{
				"code": "1304",
				"level": 2,
				"name": "邯郸市",
				"list": [{
					"code": "130402",
					"level": 3,
					"name": "邯山区",
					"list": null
				}, {
					"code": "130403",
					"level": 3,
					"name": "丛台区",
					"list": null
				}, {
					"code": "130404",
					"level": 3,
					"name": "复兴区",
					"list": null
				}, {
					"code": "130406",
					"level": 3,
					"name": "峰峰矿区",
					"list": null
				}, {
					"code": "130407",
					"level": 3,
					"name": "肥乡区",
					"list": null
				}, {
					"code": "130408",
					"level": 3,
					"name": "永年区",
					"list": null
				}, {
					"code": "130423",
					"level": 3,
					"name": "临漳县",
					"list": null
				}, {
					"code": "130424",
					"level": 3,
					"name": "成安县",
					"list": null
				}, {
					"code": "130425",
					"level": 3,
					"name": "大名县",
					"list": null
				}, {
					"code": "130426",
					"level": 3,
					"name": "涉县",
					"list": null
				}, {
					"code": "130427",
					"level": 3,
					"name": "磁县",
					"list": null
				}, {
					"code": "130430",
					"level": 3,
					"name": "邱县",
					"list": null
				}, {
					"code": "130431",
					"level": 3,
					"name": "鸡泽县",
					"list": null
				}, {
					"code": "130432",
					"level": 3,
					"name": "广平县",
					"list": null
				}, {
					"code": "130433",
					"level": 3,
					"name": "馆陶县",
					"list": null
				}, {
					"code": "130434",
					"level": 3,
					"name": "魏县",
					"list": null
				}, {
					"code": "130435",
					"level": 3,
					"name": "曲周县",
					"list": null
				}, {
					"code": "130471",
					"level": 3,
					"name": "邯郸经济技术开发区",
					"list": null
				}, {
					"code": "130473",
					"level": 3,
					"name": "邯郸冀南新区",
					"list": null
				}, {
					"code": "130481",
					"level": 3,
					"name": "武安市",
					"list": null
				}]
			},
			{
				"code": "1305",
				"level": 2,
				"name": "邢台市",
				"list": [{
					"code": "130502",
					"level": 3,
					"name": "桥东区",
					"list": null
				}, {
					"code": "130503",
					"level": 3,
					"name": "桥西区",
					"list": null
				}, {
					"code": "130521",
					"level": 3,
					"name": "邢台县",
					"list": null
				}, {
					"code": "130522",
					"level": 3,
					"name": "临城县",
					"list": null
				}, {
					"code": "130523",
					"level": 3,
					"name": "内丘县",
					"list": null
				}, {
					"code": "130524",
					"level": 3,
					"name": "柏乡县",
					"list": null
				}, {
					"code": "130525",
					"level": 3,
					"name": "隆尧县",
					"list": null
				}, {
					"code": "130526",
					"level": 3,
					"name": "任县",
					"list": null
				}, {
					"code": "130527",
					"level": 3,
					"name": "南和县",
					"list": null
				}, {
					"code": "130528",
					"level": 3,
					"name": "宁晋县",
					"list": null
				}, {
					"code": "130529",
					"level": 3,
					"name": "巨鹿县",
					"list": null
				}, {
					"code": "130530",
					"level": 3,
					"name": "新河县",
					"list": null
				}, {
					"code": "130531",
					"level": 3,
					"name": "广宗县",
					"list": null
				}, {
					"code": "130532",
					"level": 3,
					"name": "平乡县",
					"list": null
				}, {
					"code": "130533",
					"level": 3,
					"name": "威县",
					"list": null
				}, {
					"code": "130534",
					"level": 3,
					"name": "清河县",
					"list": null
				}, {
					"code": "130535",
					"level": 3,
					"name": "临西县",
					"list": null
				}, {
					"code": "130571",
					"level": 3,
					"name": "河北邢台经济开发区",
					"list": null
				}, {
					"code": "130581",
					"level": 3,
					"name": "南宫市",
					"list": null
				}, {
					"code": "130582",
					"level": 3,
					"name": "沙河市",
					"list": null
				}]
			},
			{
				"code": "1306",
				"level": 2,
				"name": "保定市",
				"list": [{
					"code": "130602",
					"level": 3,
					"name": "竞秀区",
					"list": null
				}, {
					"code": "130606",
					"level": 3,
					"name": "莲池区",
					"list": null
				}, {
					"code": "130607",
					"level": 3,
					"name": "满城区",
					"list": null
				}, {
					"code": "130608",
					"level": 3,
					"name": "清苑区",
					"list": null
				}, {
					"code": "130609",
					"level": 3,
					"name": "徐水区",
					"list": null
				}, {
					"code": "130623",
					"level": 3,
					"name": "涞水县",
					"list": null
				}, {
					"code": "130624",
					"level": 3,
					"name": "阜平县",
					"list": null
				}, {
					"code": "130626",
					"level": 3,
					"name": "定兴县",
					"list": null
				}, {
					"code": "130627",
					"level": 3,
					"name": "唐县",
					"list": null
				}, {
					"code": "130628",
					"level": 3,
					"name": "高阳县",
					"list": null
				}, {
					"code": "130629",
					"level": 3,
					"name": "容城县",
					"list": null
				}, {
					"code": "130630",
					"level": 3,
					"name": "涞源县",
					"list": null
				}, {
					"code": "130631",
					"level": 3,
					"name": "望都县",
					"list": null
				}, {
					"code": "130632",
					"level": 3,
					"name": "安新县",
					"list": null
				}, {
					"code": "130633",
					"level": 3,
					"name": "易县",
					"list": null
				}, {
					"code": "130634",
					"level": 3,
					"name": "曲阳县",
					"list": null
				}, {
					"code": "130635",
					"level": 3,
					"name": "蠡县",
					"list": null
				}, {
					"code": "130636",
					"level": 3,
					"name": "顺平县",
					"list": null
				}, {
					"code": "130637",
					"level": 3,
					"name": "博野县",
					"list": null
				}, {
					"code": "130638",
					"level": 3,
					"name": "雄县",
					"list": null
				}, {
					"code": "130671",
					"level": 3,
					"name": "保定高新技术产业开发区",
					"list": null
				}, {
					"code": "130672",
					"level": 3,
					"name": "保定白沟新城",
					"list": null
				}, {
					"code": "130681",
					"level": 3,
					"name": "涿州市",
					"list": null
				}, {
					"code": "130682",
					"level": 3,
					"name": "定州市",
					"list": null
				}, {
					"code": "130683",
					"level": 3,
					"name": "安国市",
					"list": null
				}, {
					"code": "130684",
					"level": 3,
					"name": "高碑店市",
					"list": null
				}]
			}
		]
	}
]