feat(area-selector): 重构地区选择器数据加载逻辑
- 将数据请求逻辑独立为 requestCityData 方法 - 集成腾讯地图行政区域 API 获取准确地区数据 - 实现地区数据格式转换适配组件需求 - 添加内置精简地区数据作为降级方案 - 优化异步处理和错误捕获机制 - 修复子级数据为空时的显示问题
This commit is contained in:
@@ -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: '加载中...' });
|
||||
|
||||
|
||||
Reference in New Issue
Block a user