feat(area-selector): 重构地区选择器数据加载逻辑

- 将数据请求逻辑独立为 requestCityData 方法
- 集成腾讯地图行政区域 API 获取准确地区数据
- 实现地区数据格式转换适配组件需求
- 添加内置精简地区数据作为降级方案
- 优化异步处理和错误捕获机制
- 修复子级数据为空时的显示问题
This commit is contained in:
2026-04-03 21:58:30 +08:00
parent ea8fcd691d
commit 2b82e4a6d0
3 changed files with 94 additions and 40 deletions

View File

@@ -8,7 +8,7 @@
<view :class="confirmClass" @click="getResult('confirm')">确定</view>
</view>
<view class="sel-title">
<view class="sel-title-item" v-for="(i, e) in tabList" :key="e" @click="checkTab(e)">
<view class="sel-title-item" v-for="(i, e) in tabList" :key="e" @click="checkTab(e)" v-if="e < level">
<view v-if="tabId >= e" :id="'se-' + e"
:class="tabId == e ? ' sel-title-item-true' : 'sel-title-item-false'">
{{ checkArr[e] ? checkArr[e].label : i.title }}
@@ -41,6 +41,11 @@
import noData from '../../static/noData.png'
export default {
props: {
//选择层级2=省市3=省市县区(默认)
level: {
type: Number,
default: 3,
},
//是否开启动画
animation: {
type: Boolean,
@@ -59,8 +64,18 @@
},
computed: {
confirmClass() {
return this.checkArr.length == this.tabList.length ? 'sel-top-right-check' : 'sel-top-right';
return this.checkArr.length >= this.level ? 'sel-top-right-check' : 'sel-top-right';
},
tabListComputed() {
const list = [
{ title: '选择所在省', id: 0 },
{ title: '选择所在市', id: 1 }
];
if (this.level >= 3) {
list.push({ title: '选择所在区', id: 2 });
}
return list;
}
},
data() {
return {
@@ -71,18 +86,10 @@
tabId: 0, //计算当前顶部滑块id
checkArr: [],
id: 0, //通tabId他们2的区别是id先赋值tabId在数据请求成功后才会赋值
tabList: [{
title: '选择所在省',
id: 0,
},
{
title: '选择所在市',
id: 1,
},
{
title: '选择所在县',
id: 2,
}
tabList: [
{ title: '选择所在省', id: 0 },
{ title: '选择所在市', id: 1 },
{ title: '选择所在区', id: 2 }
],
};
},
@@ -106,8 +113,11 @@
this.isShow = false;
},
async check(index) {
console.log('check called - id:', this.id, 'level:', this.level, 'tabList.length:', this.tabList.length);
this.$set(this.checkArr, this.id, this.checkBox[this.id][index]);
console.log('after set checkArr:', JSON.stringify(this.checkArr));
if (this.id < this.tabList.length - 1) this.id = this.id + 1;
console.log('next id:', this.id);
await this.getData(); //同步请求
if (this.tabId < this.tabList.length - 1) this.tabId = this.tabId + 1;
},
@@ -119,20 +129,29 @@
this.checkArr = this.checkArr.splice(0, e);
},
getResult(event) {
if (event == 'confirm') {
if (this.checkArr.length != this.tabList.length) return;
let result = this.checkArr;
this.$emit('change', {
value: result
});
getResult(event) {
if (event == 'confirm') {
// 检查是否选择了所有必要的级别
console.log('getResult confirm:', {
checkArrLength: this.checkArr.length,
level: this.level,
checkArr: this.checkArr
});
if (this.checkArr.length < this.level) {
console.warn('选择不完整,无法确认');
return;
}
this.close();
},
let result = this.checkArr;
this.$emit('change', {
value: result
});
}
this.close();
},
async getData() {
// 加载数据
if (this.checkArr.length == this.tabList.length) return;
if (this.checkArr.length >= this.level) return;
uni.showLoading({ title: '加载中...' });