优化地址三级联动组件，允许只有两级的地址，可以被选中

Tevin

2022-02-21 58cec38eef64d74f77fd2688911dff380f1b2a24

 forms/chinaArea/CChinaArea.vue

@@ -31,11 +31,12 @@
</template>

<script>
import Taro from '@tarojs/taro';
import { AtInput, AtIcon } from 'taro-ui-vue';
import ChinaLocations from './ChinaLocations';
import './cChinaArea.scss';

const { onReady, getLocationTree, getRegionNames } = ChinaLocations;
const { onReady, getLocationTree, getRegionNames, getRegionCodes } = ChinaLocations;

export default {
    name: 'CChinaArea',
@@ -46,8 +47,8 @@
    props: {
        // 表单数据资源（表单组件内部机制专用）
        itemRes: Object,
        // 当地址获取经纬度时，设置加载中显示状态
        loading: {
        // 是否自动通过地理定位获取省市区
        autoGeo: {
            type: Boolean,
            default: false,
        },
@@ -56,6 +57,7 @@
    },
    data() {
        return {
            loading: false,
            range: [[], [], []],
            current: [0, 0, 0],
        };
@@ -64,7 +66,7 @@
        selected() {
            const curVal = this.itemRes.formData[this.itemRes.name];
            if (curVal && curVal.length === 3) {
                return getRegionNames(curVal).join(' / ');
                return getRegionNames(curVal).filter(Boolean).join(' / ');
            } else {
                return '';
            }
@@ -147,11 +149,41 @@
            const codes = [];
            const provice = locationTree[detail[0]];
            codes[0] = provice.value;
            const city = provice.children[detail[1]];
            const city = provice.children[detail[1]] || [];
            codes[1] = city.value;
            const area = city.children[detail[2]];
            const area = city.children[detail[2]] || [];
            codes[2] = area.value;
            this.itemRes.onChange(codes);
        },
        _getGeoLocation() {
            this.loading = true;
            Taro.getLocation({
                type: 'wgs84',
                success: res => {
                    const latitude = res.latitude;
                    const longitude = res.longitude;
                    const myGeo = new BMap.Geocoder();
                    // 根据坐标得到地址描述
                    myGeo.getLocation(new BMap.Point(longitude, latitude), result => {
                        if (!result) {
                            this.locationLoading = false;
                            return;
                        }
                        const address = result.addressComponents;
                        const codes = getRegionCodes([
                            address.province.replace(/省|市|自治区|特别行政区/g, ''),
                            address.city,
                            address.district,
                        ]);
                        if (codes && codes.length > 0) {
                            this.itemRes.onChange(codes);
                        }
                        this.loading = false;
                    });
                },
                cancel: res => (this.loading = false),
                fail: err => (this.loading = false),
            });
        },
    },
    mounted() {
@@ -160,6 +192,26 @@
                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 不存在！');
                        return;
                    }
                    this._getGeoLocation();
                });
            }
        }
    },
};
</script>