将地理位置定位功能，转移到地址三级联动组件内部

Tevin

2021-07-21 3d9a675214409c251774d5989cd3252f74e467b2

 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 { locationTree, 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],
        };
@@ -79,6 +81,7 @@
                    return;
                }
            }
            const locationTree = getLocationTree();
            const curVal = this.itemRes.formData[this.itemRes.name];
            const range = [
                locationTree,
@@ -123,6 +126,7 @@
            this.current = current;
        },
        updateColumns(roll) {
            const locationTree = getLocationTree();
            // 第一列滚动
            if (roll.column === 0) {
                const cities = locationTree[roll.value].children;
@@ -141,6 +145,7 @@
            }
        },
        handleChange(detail) {
            const locationTree = getLocationTree();
            const codes = [];
            const provice = locationTree[detail[0]];
            codes[0] = provice.value;
@@ -150,10 +155,62 @@
            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() {
        if (process.env.TARO_ENV === 'weapp') {
            this.handleOpen();
            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 不存在！');
                        return;
                    }
                    this._getGeoLocation();
                });
            }
        }
    },
};