修复地址三级联动的问题

Tevin

2021-04-06 ca2d2295e954f8b50069ee5a0fcc32e80433fafd

 forms/chinaArea/CChinaArea.vue

@@ -1,5 +1,5 @@
/**
 * CChinaArea
 * CChinaArea - 表单项，中国地址三级联动
 * @author Tevin
 */

@@ -16,14 +16,14 @@
            <view @tap="evt=>handleOpen(evt)">
                <AtInput
                    ref="input"
                    :name="itemData.name"
                    :title="itemData.label"
                    :required="itemData.required"
                    :error="itemData.error"
                    :name="itemRes.name"
                    :title="itemRes.label"
                    :required="itemRes.required"
                    :error="itemRes.error"
                    :placeholder="placeholder"
                    :value="selected"
                >
                    <view class="at-icon at-icon-chevron-right" />
                    <AtIcon :value="loading ? 'loading':'chevron-right'" />
                </AtInput>
            </view>
        </picker>
@@ -31,7 +31,7 @@
</template>

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

@@ -41,10 +41,18 @@
    name: 'CChinaArea',
    components: {
        AtInput,
        AtIcon,
    },
    props: {
        // 表单数据资源（表单组件内部机制专用）
        itemRes: Object,
        // 当地址获取经纬度时，设置加载中显示状态
        loading: {
            type: Boolean,
            default: false,
        },
        // 占位提示
        placeholder: String,
        itemData: Object,
    },
    data() {
        return {
@@ -54,7 +62,7 @@
    },
    computed: {
        selected() {
            const curVal = this.itemData.formData[this.itemData.name];
            const curVal = this.itemRes.formData[this.itemRes.name];
            if (curVal && curVal.length === 3) {
                return getRegionNames(curVal).join(' / ');
            } else {
@@ -64,12 +72,14 @@
    },
    methods: {
        handleOpen(evt) {
            if (evt.target.className.indexOf('at-input__title') >= 0) {
                evt.stopPropagation();
                evt.preventDefault();
                return;
            if (process.env.TARO_ENV === 'h5') {
                if (evt && evt.target.className.indexOf('at-input__title') >= 0) {
                    evt.stopPropagation();
                    evt.preventDefault();
                    return;
                }
            }
            const curVal = this.itemData.formData[this.itemData.name];
            const curVal = this.itemRes.formData[this.itemRes.name];
            const range = [
                locationTree,
                locationTree[0].children,
@@ -81,7 +91,7 @@
                // 省
                if (curVal[0]) {
                    const proviceIndex = locationTree.findIndex(
                        (provice) => provice.code === curVal[0]
                        provice => provice.value === curVal[0]
                    );
                    if (proviceIndex >= 0) {
                        range[1] = locationTree[proviceIndex].children;
@@ -89,18 +99,20 @@
                        current[0] = proviceIndex;
                        // 市
                        if (curVal[1]) {
                            const cityIndex = range[1].findIndex((city) => city.code === curVal[1]);
                            const cityIndex = range[1].findIndex(
                                city => city.value === curVal[1]
                            );
                            if (cityIndex >= 0) {
                                range[2] = range[1].children[cityIndex].children;
                                range[2] = range[1][cityIndex].children;
                                current[1] = cityIndex;
                            }
                            // 区
                            if (curVal[2]) {
                                const areaIndex = range[2].findIndex(
                                    (area) => area.code === curVal[2]
                                    area => area.value === curVal[2]
                                );
                                if (areaIndex >= 0) {
                                    current[2] === areaIndex;
                                    current[2] = areaIndex;
                                }
                            }
                        }
@@ -111,15 +123,20 @@
            this.current = current;
        },
        updateColumns(roll) {
            // 第一列滚动
            if (roll.column === 0) {
                const cities = locationTree[roll.value].children;
                this.range.splice(1, 2, cities, cities[0].children);
                this.range = [this.range[0], cities, cities[0].children];
                this.current = [roll.value, 0, 0];
            } else if (roll.column === 1) {
            }
            // 第二列滚动
            else if (roll.column === 1) {
                const areas = locationTree[this.current[0]].children[roll.value].children;
                this.range.splice(2, 1, areas);
                this.range = [this.range[0], this.range[1], areas];
                this.current = [this.current[0], roll.value, 0];
            } else if (roll.column === 3) {
            }
            // 第三列滚动
            else if (roll.column === 3) {
                this.current.splice(2, 1, roll.value);
            }
        },
@@ -131,9 +148,13 @@
            codes[1] = city.value;
            const area = city.children[detail[2]];
            codes[2] = area.value;
            this.itemData.onChange(codes);
            this.itemRes.onChange(codes);
        },
    },
    mounted() {},
    mounted() {
        if (process.env.TARO_ENV === 'weapp') {
            this.handleOpen();
        }
    },
};
</script>