微信小程序封装区域选择组件不使用picker

以下是一个简单的微信小程序封装区域选择组件的示例，不使用picker：

1. 在小程序的components文件夹中新建一个名为area-selector的文件夹，用于存放组件相关文件。

2. 在area-selector文件夹中新建area-selector.wxml、area-selector.wxss和area-selector.js三个文件，分别用于定义组件的结构、样式和逻辑。

area-selector.wxml：

<view class="area-selector">
  <view class="area-item" bindtap="selectProvince">{{selectedProvince || '请选择省份'}}</view>
  <view class="area-item" bindtap="selectCity">{{selectedCity || '请选择城市'}}</view>
  <view class="area-item" bindtap="selectDistrict">{{selectedDistrict || '请选择区县'}}</view>
</view>
<view class="mask" wx:if="{{showAreaSelector}}" bindtap="hideAreaSelector"></view>
<view class="area-selector-popup" wx:if="{{showAreaSelector}}">
  <view class="area-selector-header">
    <view class="area-selector-title">{{selectorTitle}}</view>
    <view class="area-selector-close" bindtap="hideAreaSelector">ￗ</view>
  </view>
  <scroll-view class="area-selector-content" scroll-y="true" style="height: {{selectorHeight}}px;">
    <view class="area-selector-item" wx:for="{{selectorData}}" wx:key="{{item.code}}" bindtap="selectItem">{{item.name}}</view>
  </scroll-view>
</view>

area-selector.wxss：

.area-selector {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 10px;
}

.area-selector .area-item {
  flex: 1;
  margin-right: 10px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.area-selector-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}

.area-selector-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.area-selector-title {
  font-size: 16px;
  font-weight: bold;
}

.area-selector-close {
  font-size: 20px;
  cursor: pointer;
}

.area-selector-content {
  padding: 10px;
}

.area-selector-item {
  line-height: 40px;
  padding: 0 10px;
  cursor: pointer;
  border-bottom: 1px solid #ccc;
}

.area-selector-item:last-child {
  border-bottom: none;
}

area-selector.js：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    provinceList: {
      type: Array,
      value: []
    },
    cityList: {
      type: Array,
      value: []
    },
    districtList: {
      type: Array,
      value: []
    },
    selectorHeight: {
      type: Number,
      value: 200
    },
    selectorTitle: {
      type: String,
      value: '请选择'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    showAreaSelector: false,
    selectorType: '', // 省份、城市、区县
    selectorData: [],
    selectedProvince: '',
    selectedCity: '',
    selectedDistrict: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 显示区域选择器
    showAreaSelector: function (e) {
      let type = e.currentTarget.dataset.type;
      let data = [];
      if (type === 'province') {
        data = this.data.provinceList;
      } else if (type === 'city') {
        data = this.data.cityList;
      } else if (type === 'district') {
        data = this.data.districtList;
      }
      this.setData({
        showAreaSelector: true,
        selectorType: type,
        selectorData: data
      });
    },
    // 隐藏区域选择器
    hideAreaSelector: function () {
      this.setData({
        showAreaSelector: false
      });
    },
    // 选择区域
    selectItem: function (e) {
      let item = e.currentTarget.dataset.item;
      if (this.data.selectorType === 'province') {
        this.setData({
          selectedProvince: item.name,
          selectedCity: '',
          selectedDistrict: ''
        });
        this.triggerEvent('selectProvince', item);
      } else if (this.data.selectorType === 'city') {
        this.setData({
          selectedCity: item.name,
          selectedDistrict: ''
        });
        this.triggerEvent('selectCity', item);
      } else if (this.data.selectorType === 'district') {
        this.setData({
          selectedDistrict: item.name
        });
        this.triggerEvent('selectDistrict', item);
      }
      this.hideAreaSelector();
    },
    // 选择省份
    selectProvince: function () {
      this.showAreaSelector({ currentTarget: { dataset: { type: 'province' } } });
    },
    // 选择城市
    selectCity: function () {
      if (!this.data.selectedProvince) {
        wx.showToast({
          title: '请先选择省份',
          icon: 'none'
        });
        return;
      }
      let cityList = this.data.cityList.filter(item => item.parentCode === this.data.selectedProvince.code);
      this.showAreaSelector({ currentTarget: { dataset: { type: 'city' } } });
      this.setData({
        selectorData: cityList
      });
    },
    // 选择区县
    selectDistrict: function () {
      if (!this.data.selectedCity) {
        wx.showToast({
          title: '请先选择城市',
          icon: 'none'
        });
        return;
      }
      let districtList = this.data.districtList.filter(item => item.parentCode === this.data.selectedCity.code);
      this.showAreaSelector({ currentTarget: { dataset: { type: 'district' } } });
      this.setData({
        selectorData: districtList
      });
    }
  }
})

3. 在需要使用该组件的页面中，引入并使用该组件。

<area-selector provinceList="{{provinceList}}" cityList="{{cityList}}" districtList="{{districtList}}"
  bind:selectProvince="onSelectProvince" bind:selectCity="onSelectCity" bind:selectDistrict="onSelectDistrict" />

其中，provinceList、cityList和districtList是省份、城市和区县的数据列表，onSelectProvince、onSelectCity和onSelectDistrict是选中省份、城市和区县时的回调函数，用于接收选中的区域信息