地址联动组件再优化，所有方法都改用异步回调

Tevin

2023-07-31 6379d7a81d8fb8417977d40031cf587d50f69812

地址联动组件再优化，所有方法都改用异步回调

 forms/chinaArea/CChinaArea.vue

@@ -37,8 +37,6 @@
import { $locations } from '@components/forms/chinaArea/ChinaLocations';
import './cChinaArea.scss';

const { getRegionNames, getRegionCodes } = $locations;

export default {
    name: 'CChinaArea',
    components: {
@@ -63,7 +61,7 @@
    },
    data() {
        return {
            loading: false,
            loading: true,
            range: [],
            current: [],
        };
@@ -87,50 +85,54 @@
                    return;
                }
            }
            const locationTree = $locations.getLocationTree(this.level);
            $locations.getLocationTree(this.level, locationTree => {
            const curVal = this.itemRes.formData[this.itemRes.name];
            const range = [
                locationTree,
                locationTree[0].children,
                locationTree[0].children[0].children,
            ];
                const range2 = (locationTree[0] || {}).children || [];
                const range3 = (range2[0] || {}).children || [];
                const range = [locationTree, range2, range3];
            const current = [0, 0, 0];
            if (this.level === 4) {
                range[3] = locationTree[0].children[0].children[0].children;
                    const range4 = (range3[0] || {}).children || [];
                    range[3] = range4;
                current[3] = '';
            }
            // 有值
            if (curVal && curVal.length > 0) {
                    $locations.getRegionCodes(curVal, codes => {
                // 省
                if (curVal[0]) {
                        if (codes[0]) {
                    const proviceIndex = locationTree.findIndex(
                        provice => provice.value === curVal[0]
                                provice => provice.value === codes[0]
                    );
                    if (proviceIndex >= 0) {
                        range[1] = locationTree[proviceIndex].children;
                        range[2] = locationTree[proviceIndex].children[0].children;
                                range[2] =
                                    locationTree[proviceIndex].children[0].children;
                        current[0] = proviceIndex;
                        // 市
                        if (curVal[1]) {
                                if (codes[1]) {
                            const cityIndex = range[1].findIndex(
                                city => city.value === curVal[1]
                                        city => city.value === codes[1]
                            );
                            if (cityIndex >= 0) {
                                range[2] = range[1][cityIndex].children;
                                current[1] = cityIndex;
                            }
                            // 区
                            if (curVal[2]) {
                                    if (codes[2]) {
                                const distIndex = range[2].findIndex(
                                    dist => dist.value === curVal[2]
                                            dist => dist.value === codes[2]
                                );
                                if (distIndex >= 0) {
                                    current[2] = distIndex;
                                }
                                // 街
                                if (this.level === 4 && curVal[3]) {
                                        if (this.level === 4 && codes[3]) {
                                            if (distIndex >= 0) {
                                                range[3] =
                                                    range[2][distIndex].children || [];
                                    const streetIndex = range[3].findIndex(
                                        street => street.value === curVal[3]
                                                    street => street.value === codes[3]
                                    );
                                    if (streetIndex >= 0) {
                                        current[3] = streetIndex;
@@ -141,11 +143,14 @@
                    }
                }
            }
                    });
                }
            this.range = range;
            this.current = current;
            });
        },
        updateColumns(roll) {
            const locationTree = $locations.getLocationTree(this.level);
            $locations.getLocationTree(this.level, locationTree => {
            // 第一列滚动
            if (roll.column === 0) {
                const cities = locationTree[roll.value].children;
@@ -159,7 +164,8 @@
            }
            // 第二列滚动
            else if (roll.column === 1) {
                const dists = locationTree[this.current[0]].children[roll.value].children;
                    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) {
@@ -173,9 +179,8 @@
                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 || [];
                            locationTree[this.current[0]].children[this.current[1]]
                                .children[roll.value].children || [];
                    this.range.splice(3, 1, streets);
                    this.current.splice(3, 1, '');
                }
@@ -184,9 +189,10 @@
            else if (roll.column === 3) {
                this.current.splice(3, 1, roll.value);
            }
            });
        },
        handleChange(detail) {
            const locationTree = $locations.getLocationTree(this.level);
            $locations.getLocationTree(this.level, locationTree => {
            const names = [];
            const provice = locationTree[detail[0]];
            names[0] = provice.label;
@@ -201,6 +207,7 @@
                }
            }
            this.itemRes.onChange(names);
            });
        },
        _getGeoLocation() {
            this.loading = true;
@@ -217,14 +224,19 @@
                            return;
                        }
                        const address = result.addressComponents;
                        const codes = getRegionCodes([
                        const regions = [
                            address.province.replace(/省|市|自治区|特别行政区/g, ''),
                            address.city,
                            address.district,
                        ]);
                            address.street,
                        ];
                        $locations.getRegionCodes(regions, codes => {
                        if (codes && codes.length > 0) {
                            this.itemRes.onChange(codes);
                                $locations.getRegionNames(codes, names => {
                                    this.itemRes.onChange(names);
                                });
                        }
                        });
                        this.loading = false;
                    });
                },
@@ -235,6 +247,7 @@
    },
    mounted() {
        $locations.onReady(() => {
            this.loading = false;
            this.handleOpen();
            // 开启自动定位时，延迟 0.1 秒后发起定位
            if (this.autoGeo) {

 forms/chinaArea/ChinaLocations.js

@@ -11,7 +11,7 @@
let locationTreeLv3 = [];
let locationTreeLv4 = [];
let locationRes = {};
let readyCallback = () => { };
let readyCallbacks = [];

Taro.request({
    url: $hostBoot.getHost() + project.host.assetsPath + '/datas/ChinaLocations.lv4.min.json',
@@ -26,7 +26,7 @@
    method: 'GET',
    success: response => {
        locationRes = response.data;
        readyCallback();
        readyCallbacks.forEach(callback => callback());
    }
});

@@ -34,7 +34,7 @@

    onReady(callback) {
        if (Tools.isEmptyObject(locationRes)) {
            readyCallback = callback;
            readyCallbacks.push(callback);
        } else {
            callback();
        }
@@ -100,50 +100,37 @@
        return treeDatas;
    }

    getLocationTree(level) {
    getLocationTree(level, callback) {
        this.onReady(() => {
        if (level === 3) {
            if (locationTreeLv3.length === 0) {
                locationTreeLv3 = this._createLocationTree(3);
            }
            return locationTreeLv3;
                callback(locationTreeLv3);
        } else if (level === 4) {
            if (locationTreeLv4.length === 0) {
                locationTreeLv4 = this._createLocationTree(4);
            }
            return locationTreeLv4;
                callback(locationTreeLv4);
        }
        });
    }

    // 获取省市区拼合文本
    getRegionText(regions, callback) {
        if (regions.length === 0) {
            return '';
        }
        let address = '';
        let tempLocationData = locationRes;
        regions.forEach((code) => {
            if (!code || !tempLocationData[code]) {
                address.push('');
                tempLocationData = [];
            } else {
                if (typeof tempLocationData[code].name === 'string') {
                    address += tempLocationData[code].name;
                } else {
                    address += tempLocationData[code];
                }
                tempLocationData = tempLocationData[code].children;
            }
        this.getRegionNames(regions, address => {
            callback(address.join(''));
        });
        return address;
    }

    // 省市区名称
    getRegionNames(regions, callback) {
        this.onReady(() => {
        if (typeof regions === 'string') {
            regions = regions.split(',');
        }
        if (!regions || regions.length === 0 || !regions[0]) {
            return [];
                callback([]);
        }
        let address = [];
        let tempLocationData = locationRes;
@@ -160,16 +147,18 @@
                tempLocationData = tempLocationData[code].children;
            }
        });
        return address;
            callback(address);
        });
    }

    // 省市区文本转code
    getRegionCodes(regions, callback) {
        this.onReady(() => {
        if (typeof regions === 'string') {
            regions = regions.split(',');
        }
        if (!regions || regions.length === 0 || !regions[0]) {
            return '';
                callback([]);
        }
        const codes = [];
        // 省
@@ -178,17 +167,30 @@
                if (locationRes[provinceCode].name === regions[0]) {
                    codes[0] = provinceCode;
                    // 市
                    const provinceChildren = locationRes[provinceCode].children;
                    for (let cityCode in provinceChildren) {
                        if (provinceChildren.hasOwnProperty(cityCode)) {
                            if (provinceChildren[cityCode].name === regions[1]) {
                        const provinceContainer = locationRes[provinceCode].children;
                        for (let cityCode in provinceContainer) {
                            if (provinceContainer.hasOwnProperty(cityCode)) {
                                if (provinceContainer[cityCode].name === regions[1]) {
                                codes[1] = cityCode;
                                // 区
                                const areaChildren = provinceChildren[cityCode].children || [];
                                for (let areaCode in areaChildren) {
                                    if (areaChildren.hasOwnProperty(areaCode)) {
                                        if (areaChildren[areaCode] === regions[2]) {
                                            codes[2] = areaCode;
                                    const distContainer = provinceContainer[cityCode].children;
                                    for (let distCode in distContainer) {
                                        if (distContainer.hasOwnProperty(distCode)) {
                                            if (distContainer[distCode] === regions[2]) {
                                                codes[2] = distCode;
                                                break;
                                            }
                                            if (distContainer[distCode].name === regions[2]) {
                                                codes[2] = distCode;
                                                // 如果存在街道，继续转街道
                                                if (regions[3]) {
                                                    const streetContainer = distContainer[distCode].children;
                                                    Object.keys(streetContainer).forEach(streetCode => {
                                                        if (streetContainer[streetCode] === regions[3]) {
                                                            codes[3] = streetCode;
                                                        }
                                                    });
                                                }
                                            break;
                                        }
                                    }
@@ -201,16 +203,18 @@
                }
            }
        }
        return codes;
            callback(codes);
        });
    }

    // 电话区码
    getRegionsArea(regions) {
    getRegionsArea(regions, callback) {
        this.onReady(() => {
        if (typeof regions === 'string') {
            regions = regions.split(',');
        }
        if (!regions || regions.length === 0 || !regions[0]) {
            return '';
                callback('');
        }
        let area = '';
        // 省
@@ -231,7 +235,8 @@
                }
            }
        }
        return area;
            callback(area);
        });
    }
};