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>
                            <block v-for="(item, index) in list" :key="item.key">
                                <block v-if="item.type == 'dateRange'">
                                    <view class="date-label">
                                        {{ item.title || '时间区间' }}
                                    </view>
                                    <view class="date-box">
                                        <scroll-view :scroll-x="true">
                                            <view class="options">
                                                <view class="item" hover-class="navigator-hover"
                                                    :class="item.day == 1 ? 'active' : ''" @click="fast(1, index)">
                                                    今天
                                                </view>
                                                <view class="item" hover-class="navigator-hover"
                                                    :class="item.day == 7 ? 'active' : ''" @click="fast(7, index)">
                                                    7天
                                                </view>
                                                <view class="item" hover-class="navigator-hover"
                                                    :class="item.day == 30 ? 'active' : ''" @click="fast(30, index)">
                                                    30天
                                                </view>
                                                <view style="width: 10px;" />
                                                <u-number-box :value="item.day || 1" @change="valChange($event, index)" />
                                            </view>
                                        </scroll-view>
                                        <view class="row" style="margin-top: 20px">
                                            <picker mode="date" class="date-box"
                                                :style="{ color: item.begindate ? '#333' : '#ddd' }" :value="item.begindate"
                                                data-name="begindate" :end="enddate" @change="onDateChange($event, index)">
                                                {{ item.begindate || '开始日期' }}
                                            </picker>
                                            <view style="padding: 0 10px;">
                                                -
                                            </view>
                                            <picker mode="date" class="date-box"
                                                :style="{ color: item.enddate ? '#333' : '#ddd' }" :value="item.enddate"
                                                data-name="enddate" @change="onDateChange($event, index)" :start="enddate">
                                                {{ item.enddate || '结束日期' }}
                                            </picker>
                                        </view>
                                    </view>
                                </block>
                                <group v-else :ref="'group' + index" :item="item" :rowIndex="index" @onChange="onChange" />
                            </block>
                        </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: "",//选择的范围
                interrupt: false,//中断
            }]
        },
        onFiltration: {
            type: Function
        },
        onInterrupt: {
            type: Function
        }
    },
    watch: {
        filtrateList: {
            handler: function (newVal) {
                if (newVal) {
                    this.list = JSON.parse(JSON.stringify(newVal));
                }
            },
            immediate: true,
        }
    },
    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) {
            let item = this.list[index];
            this.$set(item, 'value', item.selected ? option[item.selected] : option);
            try {
                if (item.isAll) item.selectObj = option;
            } catch (error) { }
            this.$set(this.list, index, item);
            if (item.interrupt) this.$emit("onInterrupt", { item, index, option })
        },
        onReset() {
            this.list = JSON.parse(JSON.stringify(this.filtrateList));
        },
        fast(num, index) {
            return new Promise((resolve) => {
                let now = new Date().getTime() - 0,
                    end = now + 86400000,
                    beg = end - (num * 86400000);
                this.list[index].begindate = this.formatTime(new Date(beg)).split(' ')[0];
                this.list[index].enddate = this.formatTime(new Date(end)).split(' ')[0];
                this.list[index].day = num;
                resolve()
            })
        },
        valChange(e, index) {
            this.fast(e.value, index)
        },
        onDateChange(e, index) {
            this[e.target.dataset.name] = e.detail.value;
            let item = this.list[index];
            if (item.begindate && item.enddate) {
                let end = new Date(item.enddate).getTime(),
                    beg = new Date(item.begindate).getTime();
                item.day = (end - beg) / 86400000;
            }
            this.list[index] = item;
        },
        onConfirm() {
            let obj = {};
            this.list.forEach(v => {
                if (v.type == "dateRange") {
                    obj[v.key] = {
                        begindate: v.begindate,
                        enddate: v.enddate,
                    };
                } else {
                    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] = '';
                    }
                }
            })
            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);
    }
}


.date-label {
    line-height: 22px;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    padding: 10px;
}

.date-box {
    .active {
        background: #C30D23 !important;
        color: #FFFFFF !important;
    }

    .options {
        display: flex;

        .item {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #F5F5F5;
            border-radius: 4px;
            margin-left: 10px;
            font-size: 14px;
            color: #333333;
            overflow: hidden;
            box-sizing: border-box;
            padding: 6px 12px;
            flex-shrink: 0;
        }


        /deep/ .u-number-box__minus,
        /deep/.u-number-box__input,
        /deep/.u-number-box__plus {
            height: 30px !important;
        }

        /deep/ .u-number-box__input {
            width: 35px !important;
        }
    }

    .row {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #646566;
        padding: 10px;
        padding-top: 0;
        border-bottom: 1px solid #ddd;
        box-sizing: border-box;

        .date-box {
            flex: 1;
            height: 35px;
            line-height: 35px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #CCCCCC;
            font-size: 14px;
            padding-left: 10px;
        }
    }

}
</style>