imt-micro/src/components/filter/Country.vue

<template>
    <div class="filterInfo" :class="`filter--${size}`">
        <block v-if="size === 'big'">
            <h3 class="filterInfoTitle">国家和地区</h3>
        </block>
        <div class="filter-btn" :class="{ noChoose: !valueInfo }" @click="show">
            <h3 class="fontNormal">{{ valueInfo ? $t(valueInfo.label) : size === 'big' ? '请选择' : '地区' }}</h3>
            <van-icon v-if="size === 'big'" color="#CBCFDB" :size="18" name="arrow" />
            <van-icon
                v-if="size === 'small'"
                :color="valueInfo ? $colors.warn : '#878D99'"
                :size="10"
                name="arrow-down"
            />
        </div>

        <van-popup :show="showPopup" round position="bottom" custom-style="height: 300px" @close="showPopup = false">
            <div class="bar">
                <div class="left-icon">
                    <van-icon v-if="headerInfo" color="#5E636D" @click="back" :size="18" name="arrow-left" />
                </div>
                <h3>国家地区</h3>
                <van-icon color="#5E636D" :size="18" name="cross" @click="showPopup = false" />
            </div>
            <van-cell-group :border="false">
                <van-cell
                    @click="backChoose(headerInfo.value)"
                    v-if="headerInfo"
                    :border="false"
                    :custom-class="chooseId === headerInfo.value ? 'active' : ''"
                >
                    <h3 class="fontNormal" slot="title">全部{{ $t(headerInfo.label) }}地区</h3>
                    <van-icon
                        v-if="chooseId === headerInfo.value"
                        slot="right-icon"
                        :size="18"
                        :color="$colors.warn"
                        name="success"
                    />
                </van-cell>
                <block v-for="item in showList" :key="item.value">
                    <van-cell
                        @click="chooseList(item)"
                        :border="false"
                        :custom-class="chooseId === item.value ? 'active' : ''"
                    >
                        <h3 class="fontNormal" slot="title">{{ $t(item.label) }}</h3>
                        <van-icon
                            v-if="chooseId === item.value"
                            slot="right-icon"
                            :size="18"
                            :color="$colors.warn"
                            name="success"
                        />
                    </van-cell>
                </block>
            </van-cell-group>
        </van-popup>
    </div>
</template>
<script>
import { getArray } from '../../utils/commont';
import { mapState } from 'vuex';
export default {
    props: {
        value: {
            type: [Number, String],
            default: 0
        },
        size: {
            type: String,
            default: 'big'
        }
    },
    data() {
        return {
            showPopup: false,
            list: [],
            chooseId: 0,
            main: null
        };
    },
    computed: {
        ...mapState(['areaList']),
        showList() {
            const list = [...this.list];
            if (this.isLeaf) {
                return list.filter(item => {
                    return item.parent === this.chooseInfo.parent && item.value !== this.chooseInfo.parent;
                });
            } else if (this.chooseId) {
                return list.filter(item => {
                    return item.parent === this.chooseId && item.value !== this.chooseId;
                });
            } else {
                return list.filter(item => {
                    return !item.parent;
                });
            }
        },
        isLeaf() {
            if (this.chooseInfo && !this.chooseInfo.children) {
                return true;
            }
            return false;
        },
        chooseInfo() {
            const list = [...this.list];
            return list.find(item => {
                return item.value === this.chooseId;
            });
        },
        valueInfo() {
            const list = [...this.list];
            return list.find(item => {
                return item.value === this.value;
            });
        },
        headerInfo() {
            if (this.isLeaf) {
                const list = [...this.list];
                return list.find(item => {
                    return item.value === this.chooseInfo.parent;
                });
            } else {
                return this.chooseInfo;
            }
        }
    },
    mounted() {
        console.log(this.areaList);
        this.list = getArray(this.areaList, '', 2).flat(Infinity);
    },
    methods: {
        chooseList(info) {
            if (info.children && info.children.length > 0) {
                this.chooseId = info.value;
            } else {
                this.chooseId = info.value;
                this.backChoose();
            }
        },
        back() {
            if (this.headerInfo) {
                this.chooseId = this.headerInfo.parent || 0;
            }
        },
        backChoose(value) {
            this.$emit('input', value || this.chooseId || '');
            this.showPopup = false;
        },
        show() {
            console.log(this.valueInfo);
            this.chooseId = this.value || 0;
            this.showPopup = true;
        },
        clear() {
            this.chooseId = 0;
            this.backChoose();
        }
    }
};
</script>
<style lang="less">
.van-popup {
    .bar {
        position: sticky;
        top: 0;
        height: 48px;
        background: #ffffff;
        display: flex;
        align-items: center;
        padding: 0 16px;
        margin-bottom: 6px;
        z-index: 20;
        .left-icon {
            width: 18px;
        }
        h3 {
            flex-grow: 1;
            text-align: center;
            padding: 0 10px;
        }
    }

    .van-cell {
        padding: 12px 40px;

        &.active {
            h3 {
                color: @warn;
            }
        }
    }
}
.filterInfo {
    &.filter--big {
        padding: 0 16px 20px;
        .filter-btn {
            height: 44px;
            padding: 0 16px;
            h3 {
                padding-right: 10px;
            }
            &.noChoose {
                h3 {
                    color: #bcc1cc;
                }
            }
        }
    }
    &.filter--small {
        .filter-btn {
            height: 28px;
            padding: 0 5px 0 10px;
            background-color: #fff4e5;
            h3 {
                font-size: 12px;
                color: @warn;
                padding-right: 2px;
            }

            &.noChoose {
                background: #f2f3f5;
                h3 {
                    color: #878d99;
                }
            }
        }
    }
    h4 {
        padding: 14px 0;
    }
    .filter-btn {
        background: #f5f7fa;
        border-radius: 4px;
        display: flex;
        align-items: center;

        h3 {
            flex-grow: 1;
        }
    }
}
</style>