轻松搞定户籍地地区选择 原创

前言

最近看到了网上很多一件事专区，其中很重要的户籍地选择一时间让我有点手足无措无从下手，因此我去网上搜集了大量资料，现在来跟大家讲讲如何实现该功能。

先看成果

开发过程

第一步 新建compoments目录，再建一个Picker目录用来存放选择器的所有代码，再新建三个ets文件。

目录结构如下：

第二步 在 data.ets文件中，添加如下代码。

由于全国数据过多，这里的地区数据只列举三个省的市及区。如要增加数据，按照该格式增加
“省”增加该列数字

“市”依照“省”位增加该列数字

“区”依照“省”位以及“市”位增加改列

interface GeneratedTypeLiteralInterface_1 {
  province_list: Record<string, string>;
  city_list: Record<string, string>;
  county_list: Record<string, string>;
}

export const areaList: GeneratedTypeLiteralInterface_1 ={
  province_list: {
    110000: '北京市',
    120000: '天津市',
    130000: '河北省',
  },
  city_list: {
    110100: '北京市',
    120100: '天津市',
    130100: '石家庄市',
    130200: '唐山市',
    130300: '秦皇岛市',
    130400: '邯郸市',
    130500: '邢台市',
    130600: '保定市',
    130700: '张家口市',
    130800: '承德市',
    130900: '沧州市',
    131000: '廊坊市',
    131100: '衡水市',
  },
  county_list: {
    110101: '东城区',
    110102: '西城区',
    110105: '朝阳区',
    110106: '丰台区',
    110107: '石景山区',
    110108: '海淀区',
    110109: '门头沟区',
    110111: '房山区',
    110112: '通州区',
    110113: '顺义区',
    110114: '昌平区',
    110115: '大兴区',
    110116: '怀柔区',
    110117: '平谷区',
    110118: '密云区',
    110119: '延庆区',
    120101: '和平区',
    120102: '河东区',
    120103: '河西区',
    120104: '南开区',
    120105: '河北区',
    120106: '红桥区',
    120110: '东丽区',
    120111: '西青区',
    120112: '津南区',
    120113: '北辰区',
    120114: '武清区',
    120115: '宝坻区',
    120116: '滨海新区',
    120117: '宁河区',
    120118: '静海区',
    120119: '蓟州区',
    130102: '长安区',
    130104: '桥西区',
    130105: '新华区',
    130107: '井陉矿区',
    130108: '裕华区',
    130109: '藁城区',
    130110: '鹿泉区',
    130111: '栾城区',
    130121: '井陉县',
    130123: '正定县',
    130125: '行唐县',
    130126: '灵寿县',
    130127: '高邑县',
    130128: '深泽县',
    130129: '赞皇县',
    130130: '无极县',
    130131: '平山县',
    130132: '元氏县',
    130133: '赵县',
    130171: '石家庄高新技术产业开发区',
    130172: '石家庄循环化工园区',
    130181: '辛集市',
    130183: '晋州市',
    130184: '新乐市',
    130202: '路南区',
    130203: '路北区',
    130204: '古冶区',
    130205: '开平区',
    130207: '丰南区',
    130208: '丰润区',
    130209: '曹妃甸区',
    130224: '滦南县',
    130225: '乐亭县',
    130227: '迁西县',
    130229: '玉田县',
    130273: '唐山高新技术产业开发区',
    130274: '河北唐山海港经济开发区',
    130281: '遵化市',
    130283: '迁安市',
    130284: '滦州市',
    130302: '海港区',
    130303: '山海关区',
    130304: '北戴河区',
    130306: '抚宁区',
    130321: '青龙满族自治县',
    130322: '昌黎县',
    130324: '卢龙县',
    130371: '秦皇岛市经济技术开发区',
    130372: '北戴河新区',
    130390: '经济技术开发区',
    130402: '邯山区',
    130403: '丛台区',
    130404: '复兴区',
    130406: '峰峰矿区',
    130407: '肥乡区',
    130408: '永年区',
    130423: '临漳县',
    130424: '成安县',
    130425: '大名县',
    130426: '涉县',
    130427: '磁县',
    130430: '邱县',
    130431: '鸡泽县',
    130432: '广平县',
    130433: '馆陶县',
    130434: '魏县',
    130435: '曲周县',
    130471: '邯郸经济技术开发区',
    130473: '邯郸冀南新区',
    130481: '武安市',
    130502: '襄都区',
    130503: '信都区',
    130505: '任泽区',
    130506: '南和区',
    130522: '临城县',
    130523: '内丘县',
    130524: '柏乡县',
    130525: '隆尧县',
    130528: '宁晋县',
    130529: '巨鹿县',
    130530: '新河县',
    130531: '广宗县',
    130532: '平乡县',
    130533: '威县',
    130534: '清河县',
    130535: '临西县',
    130571: '河北邢台经济开发区',
    130581: '南宫市',
    130582: '沙河市',
    130602: '竞秀区',
    130606: '莲池区',
    130607: '满城区',
    130608: '清苑区',
    130609: '徐水区',
    130623: '涞水县',
    130624: '阜平县',
    130626: '定兴县',
    130627: '唐县',
    130628: '高阳县',
    130629: '容城县',
    130630: '涞源县',
    130631: '望都县',
    130632: '安新县',
    130633: '易县',
    130634: '曲阳县',
    130635: '蠡县',
    130636: '顺平县',
    130637: '博野县',
    130638: '雄县',
    130671: '保定高新技术产业开发区',
    130672: '保定白沟新城',
    130681: '涿州市',
    130682: '定州市',
    130683: '安国市',
    130684: '高碑店市',
    130702: '桥东区',
    130703: '桥西区',
    130705: '宣化区',
    130706: '下花园区',
    130708: '万全区',
    130709: '崇礼区',
    130722: '张北县',
    130723: '康保县',
    130724: '沽源县',
    130725: '尚义县',
    130726: '蔚县',
    130727: '阳原县',
    130728: '怀安县',
    130730: '怀来县',
    130731: '涿鹿县',
    130732: '赤城县',
    130772: '张家口市察北管理区',
    130802: '双桥区',
    130803: '双滦区',
    130804: '鹰手营子矿区',
    130821: '承德县',
    130822: '兴隆县',
    130824: '滦平县',
    130825: '隆化县',
    130826: '丰宁满族自治县',
    130827: '宽城满族自治县',
    130828: '围场满族蒙古族自治县',
    130871: '承德高新技术产业开发区',
    130881: '平泉市',
    130902: '新华区',
    130903: '运河区',
    130921: '沧县',
    130922: '青县',
    130923: '东光县',
    130924: '海兴县',
    130925: '盐山县',
    130926: '肃宁县',
    130927: '南皮县',
    130928: '吴桥县',
    130929: '献县',
    130930: '孟村回族自治县',
    130971: '河北沧州经济开发区',
    130972: '沧州高新技术产业开发区',
    130973: '沧州渤海新区',
    130981: '泊头市',
    130982: '任丘市',
    130983: '黄骅市',
    130984: '河间市',
    131002: '安次区',
    131003: '广阳区',
    131022: '固安县',
    131023: '永清县',
    131024: '香河县',
    131025: '大城县',
    131026: '文安县',
    131028: '大厂回族自治县',
    131071: '廊坊经济技术开发区',
    131081: '霸州市',
    131082: '三河市',
    131090: '开发区',
    131102: '桃城区',
    131103: '冀州区',
    131121: '枣强县',
    131122: '武邑县',
    131123: '武强县',
    131124: '饶阳县',
    131125: '安平县',
    131126: '故城县',
    131127: '景县',
    131128: '阜城县',
    131171: '河北衡水经济开发区',
    131172: '衡水滨湖新区',
    131182: '深州市',
  },
};

interface CascaderOption {
  text: string;
  children?: CascaderOption[];
}


const makeOption = (
  text: string,
  children?: CascaderOption[],
): CascaderOption => ({
  text,
  children,
});

export function useCascaderAreaData() {
  const city = areaList.city_list;
  const county = areaList.county_list;
  const province = areaList.province_list;

  const provinceMap = new Map<string, CascaderOption>();
  Object.keys(province).forEach((code) => {
    provinceMap.set(code.slice(0, 2), makeOption(province[code],  []));
  });

  const cityMap = new Map<string, CascaderOption>();

  Object.keys(city).forEach((code) => {
    const option = makeOption(city[code],  []);
    cityMap.set(code.slice(0, 4), option);

    const province = provinceMap.get(code.slice(0, 2));
    if (province) {
      province.children!.push(option);
    }
  });

  Object.keys(county).forEach((code) => {
    const city = cityMap.get(code.slice(0, 4));
    if (city) {
      city.children!.push(makeOption(county[code]));
    }
  });

  return Array.from(provinceMap.values());
}

第三步 在AreaPicker.ets文件中添加如下代码：

import { useCascaderAreaData } from './data'

@Component
export default struct AreaPicker {
  @State cascade: TextCascadePickerRangeContent[] = useCascaderAreaData() //省市区列表数据
  @Link value: string[] //选中值例如：['北京市','北京市','东城区']
  private onChange: (value: string[], index: number[]) => void = () => {
  } //选择改变回调函数

  build() {
    TextPicker({ range: this.cascade, value: this.value })
      .canLoop(false)
      .textStyle({
        font: {
          size: '14fp'
        }
      })
      .selectedTextStyle({
        font: {
          size: '16fp'
        }
      })
      .onChange((value: string | string[], index: number | number[]) => {
        this.onChange(value as string[], index as number[])
        this.value = value as string[]
      })

  }
}

第四步 在AreaPickerDialog.ets文件中添加如下代码：

import AreaPicker from './AreaPicker'

@CustomDialog
export default struct AreaPickerDialog {
  private dialogController: CustomDialogController //弹窗控制器
  @State value: string[] = [] //选中值
  //确认关闭选择改变回调
  private onChange: (value: string[]) => void = () => {
  }
  private defaultValue: string[] = []; //首次打开选中值

  aboutToAppear(): void {
    //记录打开时候的默认值
    this.defaultValue = this.value
    if (Array.isArray(this.value) && this.value.length < 3) {
      this.value = ['北京市', '北京市', '东城区']; //设置默认值
    }
  }

  build() {
    Column({ space: 50 }) {
      //头部确认、取消操作行
      Row() {
        Text('取消')
          .fontColor('#909090')
          .onClick(() => {
            this.dialogController.close()
          })
        Text('请选择省市区')
        Text('确定')
          .fontColor('#0A7EE6')
          .onClick(() => {
            //和首次打开值对比
            if (this.defaultValue.join('') !== this.value.join('')) {
              this.onChange(this.value)
            }
            this.dialogController.close()
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)

      //地区选择器
      AreaPicker({ value: this.value })
    }
    .backgroundColor(Color.White)
    .borderRadius(24)
    .padding(20)
    .width('93%')
  }
}

第五步 组件已经形成，我们回到index.ets页面中，在需要使用该组件的位置添加。

在build()上方添加如下代码：

@State pickerValue:string[]=['北京市', '北京市', '东城区']//省市区选中值
@State areaController: CustomDialogController | null = null //省市区选择组件控制器
aboutToAppear(): void {
  //省市区选择器自定义弹窗
  this.areaController=new CustomDialogController({
    builder:AreaPickerDialog({
      value:this.pickerValue,//首次默认选中值
      onChange:(value:string[])=>{//选择改变回调
        this.pickerValue=value
      }
    }),
    customStyle: true,

  })
}

build() {
  Column({space:20}) {
    Text('1.请填写申请人的户籍地')
      .width('100%')
    TextInput({placeholder:'请选择所在户籍地',text:this.pickerValue.join('')})
      .onClick(()=>{
        this.areaController?.open()
      }).padding({bottom:10})
  }
  .height('100%')
  .width('100%')
}

最后你就可以使用这个选择器了。