xinda-miniprogram/src/components/pickerArea/index.ts

const app = getApp<IAppOption>();

Component({
  properties: {
    // 省份名称
    pname: {
      type: String,
      value: '',
    },
    // 省份ID
    pid: {
      type: String,
      value: '',
    },
    // 城市名称
    cname: {
      type: String,
      value: '',
    },
    // 城市ID
    cid: {
      type: String,
      value: '',
    },
  },
  observers: {
    show(newVal: boolean) {
      this.triggerEvent('show', newVal);
    },
  },
  data: {
    show: false,
    word: '',
    imageUrl: app.globalData.imageUrl,
    Timestamp: app.globalData.Timestamp,

    active: 0,
    ProvinceName: '',
    ProvinceId: '',
    CityName: '',
    CityId: '',
    proList: {
      A: [
        {
          name: '安徽省',
          code: '340000',
        },
        {
          name: '澳门特别行政区',
          code: '820000',
        },
      ],
      B: [
        {
          name: '北京市',
          code: '110000',
        },
      ],
      C: [
        {
          name: '重庆市',
          code: '500000',
        },
      ],
      F: [
        {
          name: '福建省',
          code: '350000',
        },
      ],
      G: [
        {
          name: '甘肃省',
          code: '620000',
        },
        {
          name: '广东省',
          code: '440000',
        },
        {
          name: '广西壮族自治区',
          code: '450000',
        },
        {
          name: '贵州省',
          code: '520000',
        },
      ],
      H: [
        {
          name: '海南省',
          code: '460000',
        },
        {
          name: '河北省',
          code: '130000',
        },
        {
          name: '河南省',
          code: '410000',
        },
        {
          name: '黑龙江省',
          code: '230000',
        },
        {
          name: '湖北省',
          code: '420000',
        },
        {
          name: '湖南省',
          code: '430000',
        },
      ],
      J: [
        {
          name: '吉林省',
          code: '220000',
        },
        {
          name: '江苏省',
          code: '320000',
        },
        {
          name: '江西省',
          code: '360000',
        },
      ],
      L: [
        {
          name: '辽宁省',
          code: '210000',
        },
      ],
      N: [
        {
          name: '宁夏回族自治区',
          code: '640000',
        },
        {
          name: '内蒙古自治区',
          code: '150000',
        },
      ],
      Q: [
        {
          name: '青海省',
          code: '630000',
        },
      ],
      S: [
        {
          name: '山东省',
          code: '370000',
        },
        {
          name: '山西省',
          code: '140000',
        },
        {
          name: '陕西省',
          code: '610000',
        },
        {
          name: '上海市',
          code: '310000',
        },
        {
          name: '四川省',
          code: '510000',
        },
      ],
      T: [
        {
          name: '天津市',
          code: '120000',
        },
        {
          name: '台湾省',
          code: '710000',
        },
      ],
      X: [
        {
          name: '西藏自治区',
          code: '540000',
        },
        {
          name: '新疆维吾尔自治区',
          code: '650000',
        },
        {
          name: '香港特别行政区',
          code: '810000',
        },
      ],
      Y: [
        {
          name: '云南省',
          code: '530000',
        },
      ],
      Z: [
        {
          name: '浙江省',
          code: '330000',
        },
      ],
    },
    area: [] as any,
    range: [],

    scrollIntoView0: '',
    scrollIntoView1: '',
  },
  methods: {
    handleShow() {
      this.setData({
        show: true,
        ProvinceName: this.data.pname || '',
        ProvinceId: this.data.pid || '',
        CityName: this.data.cname || '',
        CityId: this.data.cid || '',

        scrollIntoView0: this.data.pid || '',
        scrollIntoView1: this.data.cid || '',
      });
      this.getArea();
    },
    getArea() {
      wx.ajax({
        method: 'GET',
        url: '/js/area.json',
        isJSON: true,
      }).then((res) => {
        this.setData({
          area: res,
        });
        this.getRangeList();
      });
    },
    handleItem(e: any) {
      const { code, name } = e.currentTarget.dataset;
      this.setData({
        ProvinceId: code,
        ProvinceName: name,
        CityId: '',
        CityName: '',
      });
      this.getRangeList();
    },
    handleChangeCity(e: any) {
      const { code, name } = e.currentTarget.dataset;
      this.setData({
        CityId: code,
        CityName: name,
      });
    },
    handleShare() {
      this.setData({
        show: false,
      });
      this.triggerEvent('ok', {
        ProvinceName: this.data.ProvinceName,
        ProvinceId: this.data.ProvinceId,
        CityName: this.data.CityName,
        CityId: this.data.CityId,
      });
    },
    handleSelect(e) {
      const { id } = e.currentTarget.dataset;
      this.setData({
        word: id,
        scrollIntoView0: id,
      });
    },
    getRangeList() {
      const { area, ProvinceId } = this.data;
      if (!ProvinceId) return;
      const range = area.filter((item: any) => item.value == ProvinceId)[0].children;
      this.setData({
        range,
        active: 1,
        scrollIntoView0: '',
        scrollIntoView1: `id${this.data.CityId}`,
      });
    },
    handleProvince() {
      this.setData({
        active: 0,
        scrollIntoView0: this.data.word || `id${this.data.ProvinceId}`,
        scrollIntoView1: '',
      });
    },
    handleCity() {
      const { ProvinceId } = this.data;
      if (!ProvinceId) {
        wx.showToast({
          title: '请先选择省份',
          icon: 'none',
        });
        return;
      }
      this.getRangeList();
    },
    handleClose() {
      this.setData({
        show: false,
      });
    },
  },
});