Просмотр исходного кода

app省市区下拉选择组件优化 去掉省市区静态文件引入 改成接口调用

@dongkboy 6 дней назад
Родитель
Сommit
3f0183deec
1 измененных файлов с 25 добавлено и 24 удалено
  1. 25 24
      components/uni-areaCascadePicker/uni-areaCascadePicker.vue

+ 25 - 24
components/uni-areaCascadePicker/uni-areaCascadePicker.vue

@@ -40,8 +40,6 @@
 </template>
 
 <script>
-	import address from '@/utils/address.json'
-
 	export default {
 		props: {
 			show: Boolean,
@@ -83,9 +81,23 @@
 			}
 		},
 		async created() {
-			await this.initData()
+			await this.areaQueryTree();
 		},
 		methods: {
+			// 接口获取省市区树(替代静态 address.json),返回数据直接交给 fullData
+			async areaQueryTree() {
+				let res = await this.$http.post('/area/queryTree');
+				if (res.code == 200) {
+					// res.data 可能是数组(多个省份),也可能单棵树,统一转为数组
+					let list = Array.isArray(res.data) ? res.data : (res.data?.child || []);
+					this.fullData = list.map(p => this.mapArea(p)).filter(Boolean);
+					this.columns[0] = this.fullData.map(p => ({
+						name: p.name,
+						code: p.code
+					}));
+					this.initDefaultSelection();
+				}
+			},
 			//月份滚动事件
 			monthbindChange: function(e) {
 				const val = e.detail.value; // 当前选中下标数组 [省索引, 市索引, 区索引]
@@ -142,27 +154,6 @@
 					this.value = [provinceIndex, cityIndex, areaIndex];
 				});
 			},
-			// 初始化数据结构(含6位码处理)
-			initData() {
-				this.fullData = address.map(province => ({
-					...province,
-					code: this.ensure6DigitCode(province.code),
-					children: province.children.map(city => ({
-						...city,
-						code: this.ensure6DigitCode(city.code),
-						children: (city.children || []).map(area => ({
-							...area,
-							code: this.ensure6DigitCode(area.code)
-						}))
-					}))
-				}))
-				// 初始化省级选项
-				this.columns[0] = this.fullData.map(p => ({
-					name: p.name,
-					code: p.code
-				}))
-				this.initDefaultSelection();
-			},
 			initDefaultSelection() {
 				if (this.defaultCodes && this.defaultCodes.length >= 3) {
 					// 如果传入了defaultCodes,优先使用
@@ -229,6 +220,16 @@
 				return code // 6位或9位码保持不变
 			},
 
+			// 接口数据(areaCode/areaCname/child) → 组件结构(code/name/children),code 统一补全6位
+			mapArea(node) {
+				if (!node) return null
+				return {
+					name: node.areaCname,
+					code: this.ensure6DigitCode(node.areaCode),
+					children: (node.child || []).map(c => this.mapArea(c)).filter(Boolean)
+				}
+			},
+
 			// 选择变化事件(适配6位码)
 			changeHandler(e) {
 				const {