YXGJ/components/filtrate.vue

<template>
    <view class="filtrate-box">
        <view :style="{ position: 'absolute', zIndex: index }">
            <u-transition :show="show">
                <view class="shade" catchtouchmove="true" @touchmove.stop.prevent="() => { }" @click="changeShow">
                    <view @click.stop="">
                        <scroll-view :style="{ maxHeight: tovw(maxHeight) }" class="scroll-view" scroll-y>
                            <group v-for="(item, index) in list" :ref="'group' + index" :key="item.key" :item="item"
                                :rowIndex="index" @onChange="onChange" />
                        </scroll-view>
                        <view class="but-box">
                            <view class="reset" hover-class="navigator-hover" @click="onReset">
                                重置
                            </view>
                            <view class="confirm" hover-class="navigator-hover" @click="onConfirm">
                                确定
                            </view>
                        </view>
                    </view>
                </view>
            </u-transition>
        </view>
    </view>
</template>

<script>
import group from "./filtrate-group.vue"
export default {
    components: { group },
    props: {
        zIndex: {
            type: [String, Number],
            default: 9
        },
        filtrateList: {
            type: Array,
            default: [{
                title: "",//组名称
                key: 'id',//提交时返回的Key
                showKey: "",//显示的key
                selected: "",//选择时选择的字段
                isAll: false,//true 返回整个对象 false 返回selected选中的value
                value: "",//提交时选中的value
                defaultVal: "",//默认值
                rang: "",//选择的范围
            }]
        },
        arrName: {
            type: String,
            default: "filtrateList"
        },
        onFiltration: {
            type: Function
        }
    },
    watch: {
        filtrateList: function (newVal) {
            if (newVal) {
                this.list = JSON.parse(JSON.stringify(newVal))
            } else {

            }
        }
    },
    data() {
        return {
            show: false,
            maxHeight: 0,
            index: -99,
            list: []
        }
    },
    methods: {
        changeShow() {
            this.show = !this.show;
            if (this.show) {
                this.index = this.zIndex
                setTimeout(this.setHeight, 10);
            } else {
                setTimeout(() => { this.index = -99 }, 150)
            }
        },
        setHeight() {
            this.getHeight(".filtrate-box", this).then(res => {
                this.maxHeight = res - 300;
            });
        },
        onChange(option, index) {
            console.log(option, index)
            let item = this.list[index];
            this.$set(item, 'value', option[item.selected]);
            try {
                if (item.isAll) item.selectObj = option;
            } catch (error) { }
            this.$set(this.list, index, item);
        },
        onReset() {
            let page = getCurrentPages()[getCurrentPages().length - 1];
            // #ifdef H5
            this.list = JSON.parse(JSON.stringify(page[this.arrName]))
            // #endif
            // #ifndef H5
            this.list = JSON.parse(JSON.stringify(page.data[this.arrName]))
            // #endif
            console.log("重置")
        },
        onConfirm() {
            let obj = {};
            this.list.forEach(v => {
                if (v.value || v.defaultVal) {
                    if (v.isAll) {
                        obj[v.key] = v.rang.find(s => s[v.selected] == v.value) || v.rang.find(s => s[v.selected] == v.defaultVal);
                    } else {
                        obj[v.key] = v.value || v.defaultVal;
                    }
                } else {
                    obj[v.key] = v.rang.find(s => s[v.selected] == v.value || s[v.selected] == v.defaultVal);
                }
            })
            this.$emit("onFiltration", obj)
            this.changeShow();
        },
    },
}
</script>

<style lang="scss">
.filtrate-box {
    position: relative;

    .scroll-view {
        width: 100vw;
        background: #fff;
    }

    .but-box {
        display: flex;
        justify-content: space-between;
        width: 100vw;
        padding: 10px;
        background: #fff;
        box-sizing: border-box;

        .reset {
            width: 82px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            background: #FFFFFF;
            border-radius: 5px;
            border: 1px solid #999999;
        }

        .confirm {
            width: 263px;
            height: 45px;
            text-align: center;
            line-height: 45px;
            background: #C30D23;
            border-radius: 5px;
            font-size: 16px;
            color: #FFFFFF;
        }
    }

    .shade {
        position: absolute;
        top: 0;
        width: 100vw;
        height: 9999px;
        background: rgba($color: #000000, $alpha: .7);
    }
}
</style>