<template> <!-- 选择器触发区域 --> <view class="picker-input" @tap="showPopup"> <view class="picker-placeholder"> {{ regionText || '请选择地区' }} </view> <uni-icons type="right" size="28rpx" color="#999" class="icon-arrow"></uni-icons> </view> <!-- 自定义级联弹窗（uView版本） --> <van-popup v-model:show="show" position="bottom" round @close="handlePopupClose"> <view class="custom-cascader"> <!-- 标题 --> <view class="cascader-header">请选择所在地区</view> <!-- 4级选择区域：竖向排列 + 逐级解锁 --> <view class="level-container"> <!-- 省级选择：默认启用 --> <view class="level-item" :class="{ active: tempProvince }"> <view class="level-label" @tap="openProvincePicker" :class="{ disabled: false }"> {{ tempProvince?.name || '请选省' }} </view> <u-picker ref="provincePickerRef" :show="provincePickerShow" :columns="[provinceList]" @confirm="onProvinceConfirm" @cancel="provincePickerShow = false" keyName="name" title="选择省份" confirmColor="#1989fa" cancelColor="#999" @close="provincePickerShow = false;" closeOnClickOverlay> </u-picker> </view> <!-- 市级选择：选完省份才解锁 --> <view class="level-item" :class="{ active: tempCity }"> <view class="level-label" @tap="openCityPicker" :class="{ disabled: !tempProvince }"> {{ tempCity?.name || '请选市' }} </view> <u-picker ref="cityPickerRef" :show="cityPickerShow" :columns="[cityList]" @confirm="onCityConfirm" @cancel="cityPickerShow = false" keyName="name" title="选择城市" confirmColor="#1989fa" cancelColor="#999" @close="cityPickerShow = false;" closeOnClickOverlay> </u-picker> </view> <!-- 区级选择：选完城市才解锁 --> <view class="level-item" :class="{ active: tempDistrict }"> <view class="level-label" @tap="openDistrictPicker" :class="{ disabled: !tempCity }"> {{ tempDistrict?.name || '请选区' }} </view> <u-picker ref="districtPickerRef" :show="districtPickerShow" :columns="[districtList]" @confirm="onDistrictConfirm" @cancel="districtPickerShow = false" keyName="name" title="选择区县" confirmColor="#1989fa" cancelColor="#999" @close="districtPickerShow = false;" closeOnClickOverlay> </u-picker> </view> <!-- 街道选择：选完区县才解锁 --> <view class="level-item" :class="{ active: tempStreet }"> <view class="level-label" @tap="openStreetPicker" :class="{ disabled: !tempDistrict }"> {{ tempStreet?.name || '请选街道' }} </view> <u-picker ref="streetPickerRef" :show="streetPickerShow" :columns="[streetList]" @confirm="onStreetConfirm" @cancel="streetPickerShow = false" @close="streetPickerShow = false;" closeOnClickOverlay keyName="name" title="选择街道" confirmColor="#1989fa" cancelColor="#999"> </u-picker> </view> </view> <!-- 确认按钮：常驻显示，选完所有层级解禁 --> <view class="confirm-btn" @tap="onFinalConfirm" :class="{ disabled: !canConfirm }"> 确认选择 </view> </view> </van-popup> </template> <script setup> import { ref, computed, nextTick, watch, onMounted, triggerRef } from 'vue' import { onLoad } from '@dcloudio/uni-app'; import { getRegionData } from '@/http/api.js' // ========== 父组件v-model配置 ========== const props = defineProps({ modelValue: { type: Array, default: function() { return [] } } }) const emit = defineEmits(['update:modelValue']) // ========== 核心状态（区分临时/正式） ========== const show = ref(false) // 正式选中状态（仅点击确认选择后更新，用于regionText显示） const selectedProvince = ref(null) const selectedCity = ref(null) const selectedDistrict = ref(null) const selectedStreet = ref(null) // 临时选中状态（选择器确认时更新，弹窗关闭时清空） const tempProvince = ref(null) const tempCity = ref(null) const tempDistrict = ref(null) const tempStreet = ref(null) // 每一级的数据源（纯数组，适配u-picker） const provinceList = ref([]) const cityList = ref([]) const districtList = ref([]) const streetList = ref([]) // 加载状态（避免重复请求） const loading = ref(false) // 初始化完成标记 const initCompleted = ref(false) // u-picker显示状态（核心：控制选择器显隐） const provincePickerShow = ref(false) const cityPickerShow = ref(false) const districtPickerShow = ref(false) const streetPickerShow = ref(false) // ========== 核心：判断是否可确认（基于临时状态） ========== const canConfirm = computed(function() { return !!tempProvince.value && !!tempCity.value && !!tempDistrict.value && !!tempStreet.value }) // ========== 核心：显示文本（基于正式状态） ========== const regionText = computed(function() { const provinceName = selectedProvince.value?.name?.trim() || '' const cityName = selectedCity.value?.name?.trim() || '' const districtName = selectedDistrict.value?.name?.trim() || '' const streetName = selectedStreet.value?.name?.trim() || '' if (streetName) { return [provinceName, cityName, districtName, streetName].join('/') } else if (districtName) { return [provinceName, cityName, districtName].join('/') } else if (cityName) { return [provinceName, cityName].join('/') } else if (provinceName) { return provinceName } else { return '' } }) // ========== 工具函数：模糊匹配地区名称（解决别名/空格问题） ========== function matchRegionItem(list, name) { if (!list || !list.length || !name) return null // 移除所有空格后匹配 const targetName = name.replace(/\s+/g, '') return list.find(function(item) { const itemName = item.name.replace(/\s+/g, '') return itemName === targetName || itemName.includes(targetName) || targetName.includes(itemName) }) } // ========== 新增：模糊匹配兜底函数（解决名称微小差异问题） ========== function fuzzyMatchFallback(list, name) { if (!list || !list.length || !name) return null const targetName = name.replace(/\s+/g, '').toLowerCase() // 遍历列表，做更宽松的匹配 for (const item of list) { const itemName = item.name.replace(/\s+/g, '').toLowerCase() // 匹配规则： // 1. 包含匹配 // 2. 去除"市/区/县/街道"后匹配 // 3. 首字符匹配 const simplifiedTarget = targetName.replace(/(市|区|县|街道|镇|乡)/g, '') const simplifiedItem = itemName.replace(/(市|区|县|街道|镇|乡)/g, '') if ( itemName.includes(targetName) || targetName.includes(itemName) || simplifiedItem === simplifiedTarget || itemName.charAt(0) === targetName.charAt(0) ) { console.log(`🔧 模糊匹配成功：${name} -> ${item.name}`) return item } } return null } // ========== 核心：重写自动回显逻辑（同步到临时+正式状态） ========== async function initRegionData(regionArr) { if (!regionArr || regionArr.length < 1 || initCompleted.value) return // 标记初始化中 initCompleted.value = true // 重置所有状态 selectedProvince.value = null selectedCity.value = null selectedDistrict.value = null selectedStreet.value = null tempProvince.value = null tempCity.value = null tempDistrict.value = null tempStreet.value = null provinceList.value = [] cityList.value = [] districtList.value = [] streetList.value = [] const [provName, cityName, distName, streetName] = regionArr // 记录匹配过程日志 const matchLog = { step: 'start', province: { name: provName, matched: false }, city: { name: cityName, matched: false }, district: { name: distName, matched: false }, street: { name: streetName, matched: false } } try { // ========== 1. 加载省级数据（增加重试机制） ========== let provinceDataLoaded = false let provinceRetryCount = 0 while (!provinceDataLoaded && provinceRetryCount < 2) { try { await loadProvinceData() provinceDataLoaded = true matchLog.step = 'province_loaded' } catch (e) { provinceRetryCount++ console.warn(`加载省级数据失败，重试第${provinceRetryCount}次：`, e) // 延迟重试 await new Promise(resolve => setTimeout(resolve, 300)) } } if (!provinceDataLoaded) { throw new Error('省级数据加载失败（重试2次仍失败）') } // 匹配省份（增加模糊匹配兜底） const provinceItem = matchRegionItem(provinceList.value, provName) || fuzzyMatchFallback(provinceList .value, provName) if (provinceItem) { selectedProvince.value = provinceItem tempProvince.value = provinceItem // 同步到临时状态 triggerRef(selectedProvince) matchLog.province.matched = true matchLog.step = 'province_matched' console.log('✅ 省份匹配成功：', provinceItem.name) } else { console.warn(`❌ 省份匹配失败：${provName}，列表数据：`, provinceList.value) // 省份匹配失败仍继续（兜底），避免中断后续逻辑 } // ========== 2. 加载市级数据（增加前置校验+兜底） ========== if (cityName && selectedProvince.value) { let cityDataLoaded = false let cityRetryCount = 0 while (!cityDataLoaded && cityRetryCount < 2) { try { await loadCityData(selectedProvince.value.adcode) cityDataLoaded = true matchLog.step = 'city_loaded' } catch (e) { cityRetryCount++ console.warn(`加载市级数据失败，重试第${cityRetryCount}次：`, e) await new Promise(resolve => setTimeout(resolve, 300)) } } if (cityDataLoaded) { const cityItem = matchRegionItem(cityList.value, cityName) || fuzzyMatchFallback(cityList.value, cityName) if (cityItem) { selectedCity.value = cityItem tempCity.value = cityItem // 同步到临时状态 triggerRef(selectedCity) matchLog.city.matched = true matchLog.step = 'city_matched' console.log('✅ 城市匹配成功：', cityItem.name) } else { console.warn(`❌ 城市匹配失败：${cityName}，列表数据：`, cityList.value) } } else { console.error('❌ 市级数据加载失败（重试2次仍失败）') } } // ========== 3. 加载区县数据（增加前置校验+兜底） ========== if (distName && selectedCity.value) { let districtDataLoaded = false let districtRetryCount = 0 while (!districtDataLoaded && districtRetryCount < 2) { try { await loadDistrictData(selectedCity.value.adcode) districtDataLoaded = true matchLog.step = 'district_loaded' } catch (e) { districtRetryCount++ console.warn(`加载区县数据失败，重试第${districtRetryCount}次：`, e) await new Promise(resolve => setTimeout(resolve, 300)) } } if (districtDataLoaded) { const districtItem = matchRegionItem(districtList.value, distName) || fuzzyMatchFallback( districtList.value, distName) if (districtItem) { selectedDistrict.value = districtItem tempDistrict.value = districtItem // 同步到临时状态 triggerRef(selectedDistrict) matchLog.district.matched = true matchLog.step = 'district_matched' console.log('✅ 区县匹配成功：', districtItem.name) } else { console.warn(`❌ 区县匹配失败：${distName}，列表数据：`, districtList.value) } } else { console.error('❌ 区县数据加载失败（重试2次仍失败）') } } // ========== 4. 加载街道数据（增加前置校验+兜底） ========== if (streetName && selectedDistrict.value) { let streetDataLoaded = false let streetRetryCount = 0 while (!streetDataLoaded && streetRetryCount < 2) { try { await loadStreetData(selectedDistrict.value.adcode) streetDataLoaded = true matchLog.step = 'street_loaded' } catch (e) { streetRetryCount++ console.warn(`加载街道数据失败，重试第${streetRetryCount}次：`, e) await new Promise(resolve => setTimeout(resolve, 300)) } } if (streetDataLoaded) { const streetItem = matchRegionItem(streetList.value, streetName) || fuzzyMatchFallback(streetList .value, streetName) if (streetItem) { selectedStreet.value = streetItem tempStreet.value = streetItem // 同步到临时状态 triggerRef(selectedStreet) matchLog.street.matched = true matchLog.step = 'street_matched' console.log('✅ 街道匹配成功：', streetItem.name) } else { console.warn(`❌ 街道匹配失败：${streetName}，列表数据：`, streetList.value) } } else { console.error('❌ 街道数据加载失败（重试2次仍失败）') } } // 确保视图更新完成 await nextTick() // 完整日志输出 console.log('📝 地区数据回显完成：', { input: regionArr, result: { province: selectedProvince.value?.name, city: selectedCity.value?.name, district: selectedDistrict.value?.name, street: selectedStreet.value?.name }, matchLog: matchLog }) } catch (err) { console.error('💥 初始化地区数据失败：', err) // 异常兜底：至少保证已匹配的层级数据不丢失 await nextTick() console.log('📝 回显异常兜底数据：', { province: selectedProvince.value?.name, city: selectedCity.value?.name, district: selectedDistrict.value?.name, street: selectedStreet.value?.name }) } finally { initCompleted.value = false } } // ========== 监听父组件传值，同步回显 ========== watch(function() { return props.modelValue }, function(newVal) { // 仅当数据有效且长度>0时触发回显 if (newVal && newVal.length > 0 && !initCompleted.value) { // 延迟执行，确保组件已挂载 setTimeout(function() { initRegionData(newVal) }, 100) } }, { immediate: true, // 初始化时立即执行 deep: true }) // ========== 页面加载+挂载时初始化 ========== onLoad(function() { // 加载省级基础数据 loadProvinceData() }) onMounted(function() { // 挂载后再次检测初始数据（兜底） if (props.modelValue && props.modelValue.length > 0 && !initCompleted.value) { nextTick(function() { initRegionData(props.modelValue) }) } }) // ========== 弹窗关闭处理（清空临时状态） ========== function handlePopupClose() { show.value = false // 仅清空临时状态，保留正式状态 tempProvince.value = null tempCity.value = null tempDistrict.value = null tempStreet.value = null // 关闭所有选择器 provincePickerShow.value = false cityPickerShow.value = false districtPickerShow.value = false streetPickerShow.value = false } // ========== 优化数据加载方法（增加数据非空校验） ========== /** 加载省级数据 */ function loadProvinceData() { return new Promise(function(resolve, reject) { if (loading.value) { resolve() return } // 强制重新加载（解决缓存问题） provinceList.value = [] loading.value = true getRegionData({ subdistrict: 1 }).then(function(res) { const rawData = res?.result?.districts?.[0]?.districts || [] // 增加数据非空校验 if (rawData.length === 0) { reject(new Error('省级接口返回空数据')) loading.value = false return } if (rawData.length > 0) { provinceList.value = rawData.map(function(item) { return { adcode: item.adcode || item.code || item.id || '', name: item.name || item.districtName || '' } }) } loading.value = false resolve() }).catch(function(err) { uni.showToast({ title: '加载省份失败', icon: 'none' }) console.error('加载省份失败：', err) loading.value = false reject(err) }) }) } /** 加载市级数据 */ function loadCityData(provAdcode) { return new Promise(function(resolve, reject) { if (!provAdcode || loading.value) { resolve() return } // 清空原有数据 cityList.value = [] loading.value = true getRegionData({ keywords: provAdcode, subdistrict: 2 }).then(function(res) { const rawData = res?.result?.districts?.[0]?.districts || [] // 增加数据非空校验 if (rawData.length === 0) { reject(new Error(`市级接口返回空数据（adcode:${provAdcode}）`)) loading.value = false return } if (rawData.length > 0) { cityList.value = rawData.map(function(item) { return { adcode: item.adcode || item.code || item.id || '', name: item.name || item.districtName || '' } }) } loading.value = false resolve() }).catch(function(err) { uni.showToast({ title: '加载城市失败', icon: 'none' }) console.error('加载城市失败：', err) loading.value = false reject(err) }) }) } /** 加载区县数据 */ function loadDistrictData(cityAdcode) { return new Promise(function(resolve, reject) { if (!cityAdcode || loading.value) { resolve() return } // 清空原有数据 districtList.value = [] loading.value = true getRegionData({ keywords: cityAdcode, subdistrict: 2 }).then(function(res) { const rawData = res?.result?.districts?.[0]?.districts || [] // 增加数据非空校验 if (rawData.length === 0) { reject(new Error(`区县接口返回空数据（adcode:${cityAdcode}）`)) loading.value = false return } if (rawData.length > 0) { districtList.value = rawData.map(function(item) { return { adcode: item.adcode || item.code || item.id || '', name: item.name || item.districtName || '' } }) } loading.value = false resolve() }).catch(function(err) { uni.showToast({ title: '加载区县失败', icon: 'none' }) console.error('加载区县失败：', err) loading.value = false reject(err) }) }) } /** 加载街道数据 */ function loadStreetData(distAdcode) { return new Promise(function(resolve, reject) { if (!distAdcode || loading.value) { resolve() return } // 清空原有数据 streetList.value = [] loading.value = true getRegionData({ keywords: distAdcode, subdistrict: 2 }).then(function(res) { const rawData = res?.result?.districts?.[0]?.districts || [] // 增加数据非空校验 if (rawData.length === 0) { reject(new Error(`街道接口返回空数据（adcode:${distAdcode}）`)) loading.value = false return } if (rawData.length > 0) { streetList.value = rawData.map(function(item) { return { adcode: item.adcode || item.code || item.id || '', name: item.name || item.districtName || '' } }) } loading.value = false resolve() }).catch(function(err) { uni.showToast({ title: '加载街道失败', icon: 'none' }) console.error('加载街道失败：', err) loading.value = false reject(err) }) }) } // ========== 选择器控制方法（基于临时状态） ========== function openProvincePicker() { provincePickerShow.value = true } function openCityPicker() { if (!tempProvince.value) return // 强制检查数据 if (cityList.value.length === 0) { loadCityData(tempProvince.value.adcode).then(function() { nextTick(function() { cityPickerShow.value = true }) }) } else { cityPickerShow.value = true } } function openDistrictPicker() { if (!tempCity.value) return if (districtList.value.length === 0) { loadDistrictData(tempCity.value.adcode).then(function() { nextTick(function() { districtPickerShow.value = true }) }) } else { districtPickerShow.value = true } } function openStreetPicker() { if (!tempDistrict.value) return if (streetList.value.length === 0) { loadStreetData(tempDistrict.value.adcode).then(function() { nextTick(function() { streetPickerShow.value = true }) }) } else { streetPickerShow.value = true } } // ========== 选择确认事件（更新临时状态） ========== /** 选中省份（更新临时状态） */ function onProvinceConfirm(e) { const selectedArr = e.value?.[0] || [] const selectedItem = selectedArr || null if (!selectedItem || !selectedItem.name?.trim()) { uni.showToast({ title: '请选择有效省份', icon: 'none' }) return } tempProvince.value = Object.assign({}, selectedItem) triggerRef(tempProvince) provincePickerShow.value = false // 重置临时下级 tempCity.value = null tempDistrict.value = null tempStreet.value = null cityList.value = [] districtList.value = [] streetList.value = [] // 预加载市级数据 loadCityData(selectedItem.adcode) } /** 选中城市（更新临时状态） */ function onCityConfirm(e) { const selectedArr = e.value?.[0] || [] const selectedItem = selectedArr || null if (!selectedItem || !selectedItem.name?.trim()) { uni.showToast({ title: '请选择有效城市', icon: 'none' }) return } tempCity.value = Object.assign({}, selectedItem) triggerRef(tempCity) cityPickerShow.value = false // 重置临时下级 tempDistrict.value = null tempStreet.value = null districtList.value = [] streetList.value = [] // 预加载区县数据 loadDistrictData(selectedItem.adcode) } /** 选中区县（更新临时状态） */ function onDistrictConfirm(e) { const selectedArr = e.value?.[0] || [] const selectedItem = selectedArr || null if (!selectedItem || !selectedItem.name?.trim()) { uni.showToast({ title: '请选择有效区县', icon: 'none' }) return } tempDistrict.value = Object.assign({}, selectedItem) triggerRef(tempDistrict) districtPickerShow.value = false // 重置临时下级 tempStreet.value = null streetList.value = [] // 预加载街道数据 loadStreetData(selectedItem.adcode) } /** 选中街道（更新临时状态） */ function onStreetConfirm(e) { const selectedArr = e.value?.[0] || [] const selectedItem = selectedArr || null if (!selectedItem || !selectedItem.name?.trim()) { uni.showToast({ title: '请选择有效街道', icon: 'none' }) return } tempStreet.value = Object.assign({}, selectedItem) triggerRef(tempStreet) streetPickerShow.value = false } /** 最终确认选择（临时状态同步到正式状态） */ function onFinalConfirm() { if (!canConfirm.value) return // 临时状态同步到正式状态 selectedProvince.value = tempProvince.value selectedCity.value = tempCity.value selectedDistrict.value = tempDistrict.value selectedStreet.value = tempStreet.value const provinceName = selectedProvince.value?.name?.trim() || '' const cityName = selectedCity.value?.name?.trim() || '' const districtName = selectedDistrict.value?.name?.trim() || '' const streetName = selectedStreet.value?.name?.trim() || '' const regionArr = [provinceName, cityName, districtName, streetName].filter(function(item) { return item }) console.log('最终选择的地区数组：', regionArr) emit('update:modelValue', regionArr) // 关闭弹窗 nextTick(function() { show.value = false }) } /** 显示弹窗（初始化临时状态） */ function showPopup() { show.value = true // 弹窗打开时，将正式状态同步到临时状态（保留已选内容） tempProvince.value = selectedProvince.value tempCity.value = selectedCity.value tempDistrict.value = selectedDistrict.value tempStreet.value = selectedStreet.value // 弹窗打开时确保数据已加载 if (props.modelValue.length > 0 && !selectedProvince.value) { initRegionData(props.modelValue) } } </script> <style lang="scss" scoped> // 触发区域样式 .picker-input { width: 100%; height: 92rpx; padding: 0 20rpx; border-radius: 10rpx; background-color: #F8F8F8; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; &:active { background-color: #f0f0f0; } .picker-placeholder { font-size: 28rpx; color: #666; flex: 1; } .icon-arrow { flex-shrink: 0; margin-left: 10rpx; } } // 弹窗主体样式 .custom-cascader { padding: 30rpx 20rpx; .cascader-header { font-size: 32rpx; font-weight: 600; text-align: center; padding: 0 0 30rpx; color: #333; } // 竖向排列的选择器容器 .level-container { display: flex; flex-direction: column; gap: 20rpx; margin-bottom: 40rpx; } // 单个选择器项样式 .level-item { width: 100%; .level-label { width: 100%; height: 88rpx; line-height: 88rpx; text-align: center; font-size: 28rpx; color: #333; background-color: #F8F8F8; border-radius: 10rpx; transition: all 0.3s ease; // 选中态 &.active { background-color: #e8f4ff; color: #1989fa; font-weight: 600; } // 禁用态 &.disabled { background-color: #f5f5f5; color: #ccc; cursor: not-allowed; // 禁用态点击无反馈 &:active { background-color: #f5f5f5 !important; } } // 可点击态点击反馈 &:not(.disabled):active { background-color: #eaeaea; } } } // 确认按钮：常驻显示，解禁样式区分 .confirm-btn { width: 100%; height: 88rpx; line-height: 88rpx; text-align: center; font-size: 32rpx; border-radius: 10rpx; transition: all 0.3s ease; // 解禁态 &:not(.disabled) { background-color: #1989fa; color: #fff; &:active { background-color: #0e75d8; } } // 禁用态 &.disabled { background-color: #ccc; color: #fff; cursor: not-allowed; } } } // 样式适配 ::v-deep { .van-popup { z-index: 9999 !important; max-height: 90vh; padding-bottom: 20rpx; } .u-picker { z-index: 10000 !important; } } </style>引入组件：
import RegionPickerFourLevel from '@/components/RegionPicker-FourLevel.vue';调用方式：
<RegionPickerFourLevel v-model="form.region" /><!-- form.region: ['河南省', '郑州市', '中原区', '梧桐街道'] -->
