zdtap-uniapp-main/components/regionPicker.vue

<template>
  <view>
    <uni-popup ref="popup" type="bottom" @change="handlePopupChange">
      <view class="popup-content">
        <view class="popup-header">
			
          <view  @click="cancelSelection">取消</view>
          <view  @click="confirmSelection">确定</view>
        </view>
		<view class="" style="margin: 0 auto;">
			<picker-view :value="pickerValue" @change="bindChange" style="height: 420rpx;">
			  <picker-view-column>
			    <view v-for="(item, index) in provinces" :key="index">{{ item.label }}</view>
			  </picker-view-column>
			  <picker-view-column>
			    <view v-for="(item, index) in cities" :key="index">{{ item.label }}</view>
			  </picker-view-column>
			  <picker-view-column>
			    <view v-for="(item, index) in areas" :key="index">{{ item.label }}</view>
			  </picker-view-column>
			</picker-view>
		</view>
        
      </view>
    </uni-popup>
  </view>
</template>

<script>
import areaData from '@/common/area-data-min.js'; // 确保路径正确

export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pickerValue: [0, 0, 0],
      provinces: [],
      cities: [],
      areas: [],
      selectedProvince: null,
      selectedCity: null,
      selectedArea: null
    };
  },
  created() {
    this.provinces = areaData;
    this.initDefaultValue();
  },
  methods: {
    initDefaultValue() {
      const defaultProvince = this.provinces[0];
      if (defaultProvince) {
        const defaultCities = defaultProvince.children || [];
        this.cities = defaultCities;
        
        const defaultCity = defaultCities[0];
        if (defaultCity) {
          const defaultAreas = defaultCity.children || [];
          this.areas = defaultAreas;
          
          this.selectedProvince = defaultProvince;
          this.selectedCity = defaultCity;
          this.selectedArea = defaultAreas[0] || null;
        }
      }
    },
    bindChange(e) {
      const val = e.detail.value;
      const [provinceIndex, cityIndex, areaIndex] = val;
      
      const selectedProvince = this.provinces[provinceIndex];
      const cities = selectedProvince?.children || [];
      this.cities = cities;
      
      const selectedCity = cities[cityIndex];
      const areas = selectedCity?.children || [];
      this.areas = areas;
      
      this.pickerValue = val;
      this.selectedProvince = selectedProvince;
      this.selectedCity = selectedCity;
      this.selectedArea = areas[areaIndex];
    },
    cancelSelection() {
      this.$emit('update:show', false);
    },
    confirmSelection() {
      this.$emit('selected', this.selectedProvince, this.selectedCity, this.selectedArea);
      this.$emit('update:show', false);
    },
    handlePopupChange(e) {
      if (!e.show) {
        this.$emit('update:show', false);
        this.$emit('close');
      }
    }
  },
  watch: {
    show(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.$refs.popup.open();
        });
      } else {
        this.$refs.popup.close();
      }
    }
  }
};
</script>

<style scoped>
.popup-content {
  background-color: #fff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  padding: 32rpx;
  box-sizing: border-box;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
  padding: 0 20rpx;
}

.popup-header view {
  font-size: 32rpx;
  padding: 10rpx 20rpx;
}

.popup-header view:first-child {
  color: #999;
}

.popup-header view:last-child {
  color: #D42E78;
  font-weight: 500;
}

picker-view {
  height: 420rpx;
  width: 100%;
}

picker-view-column view {
  line-height: 84rpx;
  text-align: center;
  font-size: 32rpx;
  color: #333;
}
</style>