From fdeb869c386da95150a087bc22bcebc4e57d0f76 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Tue, 18 Mar 2025 18:16:32 +0800
Subject: [PATCH] 更新所有表单组件文档和头注释
---
forms/chinaArea/CChinaArea.vue | 259 ++++++++++++++++++++++++++++++++-------------------
1 files changed, 161 insertions(+), 98 deletions(-)
diff --git a/forms/chinaArea/CChinaArea.vue b/forms/chinaArea/CChinaArea.vue
index 087a6aa..faadcf5 100644
--- a/forms/chinaArea/CChinaArea.vue
+++ b/forms/chinaArea/CChinaArea.vue
@@ -1,11 +1,15 @@
/**
* CChinaArea - 表单项，中国地址三级联动
+ * 中国地区选择器组件，用于在表单中选择省市区地址
+ * 内置完整的中国行政区划数据，支持多级联动选择
+ * 支持自动通过地理定位获取省市区
* @author Tevin
*/
<template>
<view class="c-china-area">
<picker
+ class="c-china-area-picker"
mode="multiSelector"
:range="range"
:value="current"
@@ -33,10 +37,8 @@
<script>
import Taro from '@tarojs/taro';
import { AtInput, AtIcon } from 'taro-ui-vue';
-import ChinaLocations from './ChinaLocations';
+import { $locations } from '@components/forms/chinaArea/ChinaLocations';
import './cChinaArea.scss';
-
-const { onReady, getLocationTree, getRegionNames, getRegionCodes } = ChinaLocations;
export default {
name: 'CChinaArea',
@@ -52,21 +54,26 @@
type: Boolean,
default: false,
},
+ // 联动级别
+ level: {
+ type: Number,
+ default: 3,
+ },
// 占位提示
placeholder: String,
},
data() {
return {
- loading: false,
- range: [[], [], []],
- current: [0, 0, 0],
+ loading: true,
+ range: [],
+ current: [],
};
},
computed: {
selected() {
const curVal = this.itemRes.formData[this.itemRes.name];
- if (curVal && curVal.length === 3) {
- return getRegionNames(curVal).join(' / ');
+ if (curVal && (curVal.length === 3 || curVal.length === 4)) {
+ return curVal.join(' / ');
} else {
return '';
}
@@ -81,79 +88,129 @@
return;
}
}
- const locationTree = getLocationTree();
- const curVal = this.itemRes.formData[this.itemRes.name];
- const range = [
- locationTree,
- locationTree[0].children,
- locationTree[0].children[0].children,
- ];
- const current = [0, 0, 0];
- // 有值
- if (curVal && curVal.length > 0) {
- // 省
- if (curVal[0]) {
- const proviceIndex = locationTree.findIndex(
- provice => provice.value === curVal[0]
- );
- if (proviceIndex >= 0) {
- range[1] = locationTree[proviceIndex].children;
- range[2] = locationTree[proviceIndex].children[0].children;
- current[0] = proviceIndex;
- // 市
- if (curVal[1]) {
- const cityIndex = range[1].findIndex(
- city => city.value === curVal[1]
+ $locations.getLocationTree(this.level, locationTree => {
+ const curVal = this.itemRes.formData[this.itemRes.name];
+ const range2 = (locationTree[0] || {}).children || [];
+ const range3 = (range2[0] || {}).children || [];
+ const range = [locationTree, range2, range3];
+ const current = [0, 0, 0];
+ if (this.level === 4) {
+ const range4 = (range3[0] || {}).children || [];
+ range[3] = range4;
+ current[3] = '';
+ }
+ // 有值
+ if (curVal && curVal.length > 0) {
+ $locations.getRegionCodes(curVal, codes => {
+ // 省
+ if (codes[0]) {
+ const proviceIndex = locationTree.findIndex(
+ provice => provice.value === codes[0],
);
- if (cityIndex >= 0) {
- range[2] = range[1][cityIndex].children;
- current[1] = cityIndex;
- }
- // 区
- if (curVal[2]) {
- const areaIndex = range[2].findIndex(
- area => area.value === curVal[2]
- );
- if (areaIndex >= 0) {
- current[2] = areaIndex;
+ if (proviceIndex >= 0) {
+ range[1] = locationTree[proviceIndex].children;
+ range[2] =
+ locationTree[proviceIndex].children[0].children;
+ current[0] = proviceIndex;
+ // 市
+ if (codes[1]) {
+ const cityIndex = range[1].findIndex(
+ city => city.value === codes[1],
+ );
+ if (cityIndex >= 0) {
+ range[2] = range[1][cityIndex].children;
+ current[1] = cityIndex;
+ }
+ // 区
+ if (codes[2]) {
+ const distIndex = range[2].findIndex(
+ dist => dist.value === codes[2],
+ );
+ if (distIndex >= 0) {
+ current[2] = distIndex;
+ }
+ // 街
+ if (this.level === 4) {
+ range[3] =
+ range[2][current[2]].children || [];
+ const streetIndex = range[3].findIndex(
+ street => street.value === codes[3],
+ );
+ if (streetIndex >= 0) {
+ current[3] = streetIndex;
+ }
+ }
+ }
}
}
}
- }
+ });
}
- }
- this.range = range;
- this.current = current;
+ this.range = range;
+ setTimeout(() => {
+ this.current = current;
+ }, 100);
+ });
},
updateColumns(roll) {
- const locationTree = getLocationTree();
- // 第一列滚动
- if (roll.column === 0) {
- const cities = locationTree[roll.value].children;
- this.range = [this.range[0], cities, cities[0].children];
- this.current = [roll.value, 0, 0];
- }
- // 第二列滚动
- else if (roll.column === 1) {
- const areas = locationTree[this.current[0]].children[roll.value].children;
- this.range = [this.range[0], this.range[1], areas];
- this.current = [this.current[0], roll.value, 0];
- }
- // 第三列滚动
- else if (roll.column === 3) {
- this.current.splice(2, 1, roll.value);
- }
+ $locations.getLocationTree(this.level, locationTree => {
+ // 第一列滚动
+ if (roll.column === 0) {
+ const cities = locationTree[roll.value].children;
+ this.range = [this.range[0], cities, cities[0].children];
+ this.current = [roll.value, 0, 0];
+ if (this.level === 4) {
+ const range3 = (cities[0].children[0] || {}).children || [];
+ this.range.splice(3, 1, range3);
+ this.current.splice(3, 1, '');
+ }
+ }
+ // 第二列滚动
+ else if (roll.column === 1) {
+ const dists =
+ locationTree[this.current[0]].children[roll.value].children;
+ this.range = [this.range[0], this.range[1], dists];
+ this.current = [this.current[0], roll.value, 0];
+ if (this.level === 4) {
+ const range3 = dists[0].children || [];
+ this.range.splice(3, 1, range3);
+ this.current.splice(3, 1, '');
+ }
+ }
+ // 第三列滚动
+ else if (roll.column === 2) {
+ this.current.splice(2, 1, roll.value);
+ if (this.level === 4) {
+ const streets =
+ locationTree[this.current[0]].children[this.current[1]]
+ .children[roll.value].children || [];
+ this.range.splice(3, 1, streets);
+ this.current.splice(3, 1, '');
+ }
+ }
+ // 第四列滚动
+ else if (roll.column === 3) {
+ this.current.splice(3, 1, roll.value);
+ }
+ });
},
handleChange(detail) {
- const locationTree = getLocationTree();
- const codes = [];
- const provice = locationTree[detail[0]];
- codes[0] = provice.value;
- const city = provice.children[detail[1]];
- codes[1] = city.value;
- const area = city.children[detail[2]];
- codes[2] = area.value;
- this.itemRes.onChange(codes);
+ $locations.getLocationTree(this.level, locationTree => {
+ const names = [];
+ const provice = locationTree[detail[0]];
+ names[0] = provice.label;
+ const city = provice.children[detail[1]] || {};
+ names[1] = city.label;
+ const dist = city.children[detail[2]] || {};
+ names[2] = dist.label;
+ if (this.level === 4) {
+ const street = (dist.children || [])[detail[3]] || {};
+ if (street.value) {
+ names[3] = street.label;
+ }
+ }
+ this.itemRes.onChange(names);
+ });
},
_getGeoLocation() {
this.loading = true;
@@ -170,14 +227,21 @@
return;
}
const address = result.addressComponents;
- const codes = getRegionCodes([
+ const regions = [
address.province.replace(/省|市|自治区|特别行政区/g, ''),
address.city,
address.district,
- ]);
- if (codes && codes.length > 0) {
- this.itemRes.onChange(codes);
+ ];
+ if (this.level === 4) {
+ regions.push(address.street);
}
+ $locations.getRegionCodes(regions, codes => {
+ if (codes && codes.length > 0) {
+ $locations.getRegionNames(codes, names => {
+ this.itemRes.onChange(names);
+ });
+ }
+ });
this.loading = false;
});
},
@@ -187,31 +251,30 @@
},
},
mounted() {
- if (process.env.TARO_ENV === 'weapp') {
- onReady(() => {
- this.handleOpen();
- });
- }
- // 开启自动定位时，延迟 0.1 秒后发起定位
- if (this.autoGeo) {
- if (process.env.TARO_ENV === 'weapp') {
- setTimeout(() => {
- // TODO：小程序中定位
- }, 100);
- } else if (process.env.TARO_ENV === 'h5') {
- if (typeof wx === 'undefined') {
- console.warn('无法进行地理位置定位，wx 不存在！');
- return;
- }
- wx.ready(() => {
- if (typeof BMap === 'undefined') {
- console.warn('无法进行地理位置定位，BMap 不存在！');
+ $locations.onReady(() => {
+ this.loading = false;
+ this.handleOpen();
+ // 开启自动定位时，延迟 0.1 秒后发起定位
+ if (this.autoGeo) {
+ if (process.env.TARO_ENV === 'weapp') {
+ setTimeout(() => {
+ // TODO：小程序中定位
+ }, 100);
+ } else if (process.env.TARO_ENV === 'h5') {
+ if (typeof wx === 'undefined') {
+ console.warn('无法进行地理位置定位，wx 不存在！');
return;
}
- this._getGeoLocation();
- });
+ wx.ready(() => {
+ if (typeof BMap === 'undefined') {
+ console.warn('无法进行地理位置定位，BMap 不存在！');
+ return;
+ }
+ this._getGeoLocation();
+ });
+ }
}
- }
+ });
},
};
</script>
\ No newline at end of file
--
Gitblit v1.9.1