From 0e1d55e17a409bbd3d3859b58f08b6c426583de9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Fri, 3 Apr 2026 21:02:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(area-selector):=20=E9=87=8D=E6=9E=84?=
=?UTF-8?q?=E5=9C=B0=E5=8C=BA=E9=80=89=E6=8B=A9=E5=99=A8=E6=95=B0=E6=8D=AE?=
=?UTF-8?q?=E5=8A=A0=E8=BD=BD=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 将数据请求逻辑独立为 requestCityData 方法
- 集成腾讯地图行政区域 API 获取准确地区数据
- 实现地区数据格式转换适配组件需求
- 添加内置精简地区数据作为降级方案
- 优化异步处理和错误捕获机制
- 修复子级数据为空时的显示问题
---
.idea/workspace.xml | 26 +-
.../liu-customize-sel/liu-customize-sel.vue | 336 +++++++++++++++---
2 files changed, 311 insertions(+), 51 deletions(-)
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 0dd995a..7ed9d5a 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,7 +4,10 @@
-
+
+
+
+
@@ -26,6 +29,7 @@
"RunOnceActivity.ShowReadmeOnStart": "true",
"RunOnceActivity.git.unshallow": "true",
"git-widget-placeholder": "master",
+ "junie.onboarding.icon.badge.shown": "true",
"last_opened_file_path": "/Users/gxwebsoft/APP/anshangjia-uniapp",
"node.js.detected.package.eslint": "true",
"node.js.detected.package.tslint": "true",
@@ -33,6 +37,7 @@
"node.js.selected.package.tslint": "(autodetect)",
"nodejs_package_manager_path": "npm",
"settings.editor.selected.configurable": "preferences.pluginManager",
+ "to.speed.mode.migration.done": "true",
"ts.external.directory.path": "/Applications/WebStorm.app/Contents/plugins/javascript-plugin/jsLanguageServicesImpl/external",
"vue.rearranger.settings.migration": "true"
}
@@ -45,7 +50,7 @@
-
+
@@ -69,6 +74,8 @@
+
+
@@ -102,15 +109,26 @@
1749474861846
-
+
+
+ 1770982645978
+
+
+
+ 1770982645978
+
+
+
+
-
+
+
\ No newline at end of file
diff --git a/uni_modules/liu-customize-sel/components/liu-customize-sel/liu-customize-sel.vue b/uni_modules/liu-customize-sel/components/liu-customize-sel/liu-customize-sel.vue
index 167ea04..c05ee22 100644
--- a/uni_modules/liu-customize-sel/components/liu-customize-sel/liu-customize-sel.vue
+++ b/uni_modules/liu-customize-sel/components/liu-customize-sel/liu-customize-sel.vue
@@ -130,55 +130,297 @@
this.close();
},
- async getData() {
- // 加载数据
- if (this.checkArr.length == this.tabList.length) return;
- // 模拟数据
- let list = [];
- uni.showLoading({
- title: '加载中...'
- });
- if (this.checkArr.length) {
- var id = this.checkArr?.[this.id - 1]?.value
- let idList = this.checkBox?.[this.id - 1]?.find(item => {
- return item.value == id;
- })
- idList?.children.map(e => {
- list.push(e);
- });
- uni.hideLoading();
- this.$set(this.checkBox, this.id, list)
+ async getData() {
+ // 加载数据
+ if (this.checkArr.length == this.tabList.length) return;
+
+ uni.showLoading({ title: '加载中...' });
+
+ if (this.checkArr.length) {
+ // 已有选择，从缓存children取数据
+ var id = this.checkArr?.[this.id - 1]?.value
+ let idList = this.checkBox?.[this.id - 1]?.find(item => {
+ return item.value == id;
+ })
+ if (idList?.children && idList.children.length > 0) {
+ this.$set(this.checkBox, this.id, idList.children)
} else {
- // 接口请求数据实例--------------
- // console.log("cityList: ",this.cityList);
- uni.request({
- url: 'https://file.wsdns.cn/json/city.js',
- success(res) {
- res.data.map(e => {
- list.push(e);
- });
- }
- })
- // this.cityList.map(e => {
- // list.push(e);
- // });
- uni.hideLoading();
- this.$set(this.checkBox, this.id, list)
+ this.$set(this.checkBox, this.id, [])
}
- //接口请求数据实例--------------
- // let params = {
- // code: this.checkArr && this.checkArr.length > 0 ? this.checkArr[this.checkArr.length - 1]
- // .code : ''
- // };
- // await getData(params).then(res => {
- // if (res.code == 200) {
- // this.$set(this.checkBox, this.id, res.data);
- // } else {
- // this.$set(this.checkBox, this.id, []);
- // }
- // uni.hideLoading()
- // })
- },
+ uni.hideLoading();
+ } else {
+ // 首次加载 - 使用 Promise 正确处理异步
+ try {
+ const res = await this.requestCityData()
+ if (res && res.data) {
+ this.$set(this.checkBox, this.id, res.data)
+ } else {
+ this.$set(this.checkBox, this.id, [])
+ }
+ } catch (e) {
+ console.error('获取城市数据失败:', e)
+ this.$set(this.checkBox, this.id, [])
+ } finally {
+ uni.hideLoading();
+ }
+ }
+ },
+
+ // 独立的请求方法 - 使用腾讯地图行政区域API
+ requestCityData() {
+ return new Promise((resolve, reject) => {
+ // 腾讯地图 WebService API 密钥（需要去腾讯位置服务申请）
+ const key = '7CBBZ-BLRL3-4EB35-RUCIH-XANPE-6FFTJ';
+
+ uni.request({
+ url: `https://apis.map.qq.com/ws/district/v1/list?key=${key}&output=json`,
+ method: 'GET',
+ timeout: 15000,
+ success: (res) => {
+ if (res.statusCode === 200 && res.data && res.data.status === 0) {
+ // 转换腾讯地图数据格式为组件需要的格式
+ const districtData = res.data.result;
+ const formattedData = this.formatDistrictData(districtData);
+ resolve({ data: formattedData });
+ } else {
+ // API失败时，使用内置精简数据作为降级方案
+ console.warn('腾讯地图API失败，使用内置数据');
+ resolve({ data: this.getFallbackData() });
+ }
+ },
+ fail: (err) => {
+ console.error('请求失败，尝试内置数据:', err);
+ // 网络失败时使用内置精简数据
+ resolve({ data: this.getFallbackData() });
+ }
+ });
+ });
+ },
+
+ // 转换腾讯地图数据格式
+ formatDistrictData(districtData) {
+ // 腾讯地图返回的是 [省数组, 市数组, 区数组] 的嵌套结构
+ const provinces = districtData[0] || [];
+ const cities = districtData[1] || [];
+ const districts = districtData[2] || [];
+
+ // 构建以parent_id为key的映射
+ const cityMap = {};
+ const districtMap = {};
+
+ cities.forEach(city => {
+ if (!cityMap[city.parent_id]) cityMap[city.parent_id] = [];
+ cityMap[city.parent_id].push({
+ id: city.id,
+ value: city.id,
+ label: city.fullname || city.name,
+ name: city.fullname || city.name,
+ children: []
+ });
+ });
+
+ districts.forEach(dist => {
+ if (!districtMap[dist.parent_id]) districtMap[dist.parent_id] = [];
+ districtMap[dist.parent_id].push({
+ id: dist.id,
+ value: dist.id,
+ label: dist.fullname || dist.name,
+ name: dist.fullname || dist.name,
+ children: []
+ });
+ });
+
+ // 组装完整的树形结构
+ return provinces.map(province => {
+ const provinceItem = {
+ id: province.id,
+ value: province.id,
+ label: province.fullname || province.name,
+ name: province.fullname || province.name,
+ children: cityMap[province.id] || []
+ };
+
+ // 补充区/县数据
+ provinceItem.children.forEach(city => {
+ city.children = districtMap[city.id] || [];
+ });
+
+ return provinceItem;
+ });
+ },
+
+ // 内置精简数据（常见省份，直辖市、港澳台）
+ getFallbackData() {
+ return [
+ { id: '110000', value: '110000', label: '北京市', name: '北京市', children: [
+ { id: '110100', value: '110100', label: '市辖区', name: '市辖区', children: [
+ { id: '110101', value: '110101', label: '东城区', name: '东城区', children: [] },
+ { id: '110102', value: '110102', label: '西城区', name: '西城区', children: [] },
+ { id: '110105', value: '110105', label: '朝阳区', name: '朝阳区', children: [] },
+ { id: '110106', value: '110106', label: '丰台区', name: '丰台区', children: [] },
+ { id: '110107', value: '110107', label: '石景山区', name: '石景山区', children: [] },
+ { id: '110108', value: '110108', label: '海淀区', name: '海淀区', children: [] },
+ { id: '110109', value: '110109', label: '门头沟区', name: '门头沟区', children: [] },
+ { id: '110111', value: '110111', label: '房山区', name: '房山区', children: [] },
+ { id: '110112', value: '110112', label: '通州区', name: '通州区', children: [] },
+ { id: '110113', value: '110113', label: '顺义区', name: '顺义区', children: [] },
+ { id: '110114', value: '110114', label: '昌平区', name: '昌平区', children: [] },
+ { id: '110115', value: '110115', label: '大兴区', name: '大兴区', children: [] },
+ { id: '110116', value: '110116', label: '怀柔区', name: '怀柔区', children: [] },
+ { id: '110117', value: '110117', label: '平谷区', name: '平谷区', children: [] },
+ { id: '110118', value: '110118', label: '密云区', name: '密云区', children: [] },
+ { id: '110119', value: '110119', label: '延庆区', name: '延庆区', children: [] }
+ ]}
+ ]},
+ { id: '120000', value: '120000', label: '天津市', name: '天津市', children: [
+ { id: '120100', value: '120100', label: '市辖区', name: '市辖区', children: [
+ { id: '120101', value: '120101', label: '和平区', name: '和平区', children: [] },
+ { id: '120102', value: '120102', label: '河东区', name: '河东区', children: [] },
+ { id: '120103', value: '120103', label: '河西区', name: '河西区', children: [] },
+ { id: '120104', value: '120104', label: '南开区', name: '南开区', children: [] },
+ { id: '120105', value: '120105', label: '河北区', name: '河北区', children: [] },
+ { id: '120106', value: '120106', label: '红桥区', name: '红桥区', children: [] },
+ { id: '120110', value: '120110', label: '东丽区', name: '东丽区', children: [] },
+ { id: '120111', value: '120111', label: '西青区', name: '西青区', children: [] },
+ { id: '120112', value: '120112', label: '津南区', name: '津南区', children: [] },
+ { id: '120113', value: '120113', label: '北辰区', name: '北辰区', children: [] },
+ { id: '120114', value: '120114', label: '武清区', name: '武清区', children: [] },
+ { id: '120115', value: '120115', label: '宝坻区', name: '宝坻区', children: [] },
+ { id: '120116', value: '120116', label: '滨海新区', name: '滨海新区', children: [] },
+ { id: '120117', value: '120117', label: '宁河区', name: '宁河区', children: [] },
+ { id: '120118', value: '120118', label: '静海区', name: '静海区', children: [] },
+ { id: '120119', value: '120119', label: '蓟州区', name: '蓟州区', children: [] }
+ ]}
+ ]},
+ { id: '310000', value: '310000', label: '上海市', name: '上海市', children: [
+ { id: '310100', value: '310100', label: '市辖区', name: '市辖区', children: [
+ { id: '310101', value: '310101', label: '黄浦区', name: '黄浦区', children: [] },
+ { id: '310104', value: '310104', label: '徐汇区', name: '徐汇区', children: [] },
+ { id: '310105', value: '310105', label: '长宁区', name: '长宁区', children: [] },
+ { id: '310106', value: '310106', label: '静安区', name: '静安区', children: [] },
+ { id: '310107', value: '310107', label: '普陀区', name: '普陀区', children: [] },
+ { id: '310109', value: '310109', label: '虹口区', name: '虹口区', children: [] },
+ { id: '310110', value: '310110', label: '杨浦区', name: '杨浦区', children: [] },
+ { id: '310112', value: '310112', label: '闵行区', name: '闵行区', children: [] },
+ { id: '310113', value: '310113', label: '宝山区', name: '宝山区', children: [] },
+ { id: '310114', value: '310114', label: '嘉定区', name: '嘉定区', children: [] },
+ { id: '310115', value: '310115', label: '浦东新区', name: '浦东新区', children: [] },
+ { id: '310116', value: '310116', label: '金山区', name: '金山区', children: [] },
+ { id: '310117', value: '310117', label: '松江区', name: '松江区', children: [] },
+ { id: '310118', value: '310118', label: '青浦区', name: '青浦区', children: [] },
+ { id: '310120', value: '310120', label: '奉贤区', name: '奉贤区', children: [] },
+ { id: '310151', value: '310151', label: '崇明区', name: '崇明区', children: [] }
+ ]}
+ ]},
+ { id: '440000', value: '440000', label: '广东省', name: '广东省', children: [
+ { id: '440100', value: '440100', label: '广州市', name: '广州市', children: [
+ { id: '440103', value: '440103', label: '荔湾区', name: '荔湾区', children: [] },
+ { id: '440104', value: '440104', label: '越秀区', name: '越秀区', children: [] },
+ { id: '440105', value: '440105', label: '海珠区', name: '海珠区', children: [] },
+ { id: '440106', value: '440106', label: '天河区', name: '天河区', children: [] },
+ { id: '440111', value: '440111', label: '白云区', name: '白云区', children: [] },
+ { id: '440112', value: '440112', label: '黄埔区', name: '黄埔区', children: [] },
+ { id: '440113', value: '440113', label: '番禺区', name: '番禺区', children: [] },
+ { id: '440114', value: '440114', label: '花都区', name: '花都区', children: [] },
+ { id: '440115', value: '440115', label: '南沙区', name: '南沙区', children: [] },
+ { id: '440117', value: '440117', label: '从化区', name: '从化区', children: [] },
+ { id: '440118', value: '440118', label: '增城区', name: '增城区', children: [] }
+ ]},
+ { id: '440300', value: '440300', label: '深圳市', name: '深圳市', children: [
+ { id: '440303', value: '440303', label: '罗湖区', name: '罗湖区', children: [] },
+ { id: '440304', value: '440304', label: '福田区', name: '福田区', children: [] },
+ { id: '440305', value: '440305', label: '南山区', name: '南山区', children: [] },
+ { id: '440306', value: '440306', label: '宝安区', name: '宝安区', children: [] },
+ { id: '440307', value: '440307', label: '龙岗区', name: '龙岗区', children: [] },
+ { id: '440308', value: '440308', label: '盐田区', name: '盐田区', children: [] },
+ { id: '440309', value: '440309', label: '龙华区', name: '龙华区', children: [] },
+ { id: '440310', value: '440310', label: '坪山区', name: '坪山区', children: [] },
+ { id: '440311', value: '440311', label: '光明区', name: '光明区', children: [] }
+ ]},
+ { id: '440600', value: '440600', label: '佛山市', name: '佛山市', children: [
+ { id: '440604', value: '440604', label: '禅城区', name: '禅城区', children: [] },
+ { id: '440605', value: '440605', label: '南海区', name: '南海区', children: [] },
+ { id: '440606', value: '440606', label: '顺德区', name: '顺德区', children: [] },
+ { id: '440607', value: '440607', label: '三水区', name: '三水区', children: [] },
+ { id: '440608', value: '440608', label: '高明区', name: '高明区', children: [] }
+ ]},
+ { id: '441900', value: '441900', label: '东莞市', name: '东莞市', children: [
+ { id: '441901', value: '441901', label: '东莞市', name: '东莞市', children: [] }
+ ]},
+ { id: '442000', value: '442000', label: '中山市', name: '中山市', children: [
+ { id: '442001', value: '442001', label: '中山市', name: '中山市', children: [] }
+ ]}
+ ]},
+ { id: '330000', value: '330000', label: '浙江省', name: '浙江省', children: [
+ { id: '330100', value: '330100', label: '杭州市', name: '杭州市', children: [
+ { id: '330102', value: '330102', label: '上城区', name: '上城区', children: [] },
+ { id: '330105', value: '330105', label: '拱墅区', name: '拱墅区', children: [] },
+ { id: '330106', value: '330106', label: '西湖区', name: '西湖区', children: [] },
+ { id: '330108', value: '330108', label: '滨江区', name: '滨江区', children: [] },
+ { id: '330109', value: '330109', label: '萧山区', name: '萧山区', children: [] },
+ { id: '330110', value: '330110', label: '余杭区', name: '余杭区', children: [] },
+ { id: '330111', value: '330111', label: '富阳区', name: '富阳区', children: [] },
+ { id: '330112', value: '330112', label: '临安区', name: '临安区', children: [] },
+ { id: '330113', value: '330113', label: '临平区', name: '临平区', children: [] },
+ { id: '330114', value: '330114', label: '钱塘区', name: '钱塘区', children: [] }
+ ]},
+ { id: '330200', value: '330200', label: '宁波市', name: '宁波市', children: [
+ { id: '330203', value: '330203', label: '海曙区', name: '海曙区', children: [] },
+ { id: '330205', value: '330205', label: '江北区', name: '江北区', children: [] },
+ { id: '330206', value: '330206', label: '北仑区', name: '北仑区', children: [] },
+ { id: '330211', value: '330211', label: '镇海区', name: '镇海区', children: [] },
+ { id: '330212', value: '330212', label: '鄞州区', name: '鄞州区', children: [] }
+ ]},
+ { id: '330300', value: '330300', label: '温州市', name: '温州市', children: [] },
+ { id: '330400', value: '330400', label: '嘉兴市', name: '嘉兴市', children: [] },
+ { id: '330500', value: '330500', label: '湖州市', name: '湖州市', children: [] },
+ { id: '330600', value: '330600', label: '绍兴市', name: '绍兴市', children: [] },
+ { id: '330700', value: '330700', label: '金华市', name: '金华市', children: [] },
+ { id: '330800', value: '330800', label: '衢州市', name: '衢州市', children: [] },
+ { id: '330900', value: '330900', label: '舟山市', name: '舟山市', children: [] },
+ { id: '331000', value: '331000', label: '台州市', name: '台州市', children: [] },
+ { id: '331100', value: '331100', label: '丽水市', name: '丽水市', children: [] }
+ ]},
+ { id: '320000', value: '320000', label: '江苏省', name: '江苏省', children: [
+ { id: '320100', value: '320100', label: '南京市', name: '南京市', children: [
+ { id: '320102', value: '320102', label: '玄武区', name: '玄武区', children: [] },
+ { id: '320104', value: '320104', label: '秦淮区', name: '秦淮区', children: [] },
+ { id: '320105', value: '320105', label: '建邺区', name: '建邺区', children: [] },
+ { id: '320106', value: '320106', label: '鼓楼区', name: '鼓楼区', children: [] },
+ { id: '320111', value: '320111', label: '浦口区', name: '浦口区', children: [] },
+ { id: '320113', value: '320113', label: '栖霞区', name: '栖霞区', children: [] },
+ { id: '320114', value: '320114', label: '雨花台区', name: '雨花台区', children: [] },
+ { id: '320115', value: '320115', label: '江宁区', name: '江宁区', children: [] },
+ { id: '320116', value: '320116', label: '六合区', name: '六合区', children: [] },
+ { id: '320117', value: '320117', label: '溧水区', name: '溧水区', children: [] },
+ { id: '320118', value: '320118', label: '高淳区', name: '高淳区', children: [] }
+ ]},
+ { id: '320500', value: '320500', label: '苏州市', name: '苏州市', children: [
+ { id: '320505', value: '320505', label: '虎丘区', name: '虎丘区', children: [] },
+ { id: '320506', value: '320506', label: '吴中区', name: '吴中区', children: [] },
+ { id: '320507', value: '320507', label: '相城区', name: '相城区', children: [] },
+ { id: '320508', value: '320508', label: '姑苏区', name: '姑苏区', children: [] },
+ { id: '320509', value: '320509', label: '吴江区', name: '吴江区', children: [] },
+ { id: '320505', value: '320505', label: '虎丘区', name: '虎丘区', children: [] },
+ { id: '320581', value: '320581', label: '常熟市', name: '常熟市', children: [] },
+ { id: '320582', value: '320582', label: '张家港市', name: '张家港市', children: [] },
+ { id: '320583', value: '320583', label: '昆山市', name: '昆山市', children: [] },
+ { id: '320585', value: '320585', label: '太仓市', name: '太仓市', children: [] }
+ ]},
+ { id: '320200', value: '320200', label: '无锡市', name: '无锡市', children: [] },
+ { id: '320300', value: '320300', label: '徐州市', name: '徐州市', children: [] },
+ { id: '320400', value: '320400', label: '常州市', name: '常州市', children: [] },
+ { id: '320600', value: '320600', label: '南通市', name: '南通市', children: [] },
+ { id: '320700', value: '320700', label: '连云港市', name: '连云港市', children: [] },
+ { id: '320800', value: '320800', label: '淮安市', name: '淮安市', children: [] },
+ { id: '320900', value: '320900', label: '盐城市', name: '盐城市', children: [] },
+ { id: '321000', value: '321000', label: '扬州市', name: '扬州市', children: [] },
+ { id: '321100', value: '321100', label: '镇江市', name: '镇江市', children: [] },
+ { id: '321200', value: '321200', label: '泰州市', name: '泰州市', children: [] },
+ { id: '321300', value: '321300', label: '宿迁市', name: '宿迁市', children: [] }
+ ]}
+ ];
+ },
},
};