地址联动组件升级，支持第四级街道，数据采用异步

Tevin

2023-07-31 92d034e0e124928179f072224e9c2c1ad87fc1b2

 forms/chinaArea/CChinaArea.vue

@@ -6,6 +6,7 @@
<template>
    <view class="c-china-area">
        <picker
            class="c-china-area-picker"
            mode="multiSelector"
            :range="range"
            :value="current"
@@ -33,10 +34,10 @@
<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;
const { getRegionNames, getRegionCodes } = $locations;

export default {
    name: 'CChinaArea',
@@ -52,21 +53,26 @@
            type: Boolean,
            default: false,
        },
        // 联动级别
        level: {
            type: Number,
            default: 3,
        },
        // 占位提示
        placeholder: String,
    },
    data() {
        return {
            loading: false,
            range: [[], [], []],
            current: [0, 0, 0],
            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,7 +87,7 @@
                    return;
                }
            }
            const locationTree = getLocationTree();
            const locationTree = $locations.getLocationTree(this.level);
            const curVal = this.itemRes.formData[this.itemRes.name];
            const range = [
                locationTree,
@@ -89,6 +95,10 @@
                locationTree[0].children[0].children,
            ];
            const current = [0, 0, 0];
            if (this.level === 4) {
                range[3] = locationTree[0].children[0].children[0].children;
                current[3] = '';
            }
            // 有值
            if (curVal && curVal.length > 0) {
                // 省
@@ -111,11 +121,20 @@
                            }
                            // 区
                            if (curVal[2]) {
                                const areaIndex = range[2].findIndex(
                                    area => area.value === curVal[2]
                                const distIndex = range[2].findIndex(
                                    dist => dist.value === curVal[2]
                                );
                                if (areaIndex >= 0) {
                                    current[2] = areaIndex;
                                if (distIndex >= 0) {
                                    current[2] = distIndex;
                                }
                                // 街
                                if (this.level === 4 && curVal[3]) {
                                    const streetIndex = range[3].findIndex(
                                        street => street.value === curVal[3]
                                    );
                                    if (streetIndex >= 0) {
                                        current[3] = streetIndex;
                                    }
                                }
                            }
                        }
@@ -126,34 +145,62 @@
            this.current = current;
        },
        updateColumns(roll) {
            const locationTree = getLocationTree();
            const locationTree = $locations.getLocationTree(this.level);
            // 第一列滚动
            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 areas = locationTree[this.current[0]].children[roll.value].children;
                this.range = [this.range[0], this.range[1], areas];
                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 === 3) {
            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 locationTree = $locations.getLocationTree(this.level);
            const names = [];
            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);
            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;
@@ -187,31 +234,29 @@
        },
    },
    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.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>