water_affairs/components/My_filter.vue

<template>
    <view class="container">
        <u-popup :show="show" :customStyle="{ width: '88vw' }" :overlayStyle="{ zIndex: '997' }" zIndex="998" mode="right"
            @close="close" :closeOnClickOverlay="true">
            <view v-if="isBar" :style="{ height: (tovw(CustomBar + (headTop - 0))) }" />
            <My_listbox :pullDown="false" ref="box">
                <view v-for="(it, i) in filter" :key="it.label">
                    <view class="label">
                        {{ it.label }}
                    </view>
                    <view class="value-box">
                        <view class="item" v-for="(item, index) in it.list" :key="index"
                            :class="it.selectIndex == index ? 'active' : ''" @click="changeValue(i, index)">
                            {{ it.showKey ? item[it.showKey] : item }}
                        </view>
                    </view>
                </view>
                <block v-if="dateRange">
                    <view class="label">
                        时间区间
                    </view>
                    <view class="date-box">
                        <scroll-view :scroll-x="true">
                            <view class="options">
                                <view class="item" :class="day == 1 ? 'active' : ''" @click="fast(1)">
                                    今天
                                </view>
                                <view class="item" :class="day == 7 ? 'active' : ''" @click="fast(7)">
                                    7天
                                </view>
                                <view class="item" :class="day == 30 ? 'active' : ''" @click="fast(30)">
                                    30天
                                </view>
                                <view style="width: 10px;" />
                                <u-number-box :value="day" @change="valChange" />
                            </view>
                        </scroll-view>
                        <view class="row" style="margin-top: 20px">
                            <picker mode="date" class="date-box" :style="{ color: begindate ? '#333' : '#ddd' }"
                                :value="begindate" data-name="begindate" :end="enddate" @change="onDateChange">
                                {{ begindate || '开始日期' }}
                            </picker>
                            <view style="padding: 0 10px;">
                                -
                            </view>
                            <picker mode="date" class="date-box" :style="{ color: enddate ? '#333' : '#ddd' }"
                                :value="enddate" data-name="enddate" @change="onDateChange" :start="begindate">
                                {{ enddate || '结束日期' }}
                            </picker>
                        </view>

                    </view>

                    <!-- 
                    <view class="row">
                        区间：<picker mode="date" class="date-box" :style="{ color: begindate ? '#333' : '#ddd' }"
                            :value="begindate" data-name="begindate" :start="start" :end="enddate" @change="onDateChange">
                            {{ begindate || '开始日期' }}
                        </picker>
                        <view style="padding: 0 10px;">
                            -
                        </view>
                        <picker mode="date" class="date-box" :style="{ color: enddate ? '#333' : '#ddd' }" :value="enddate"
                            data-name="enddate" @change="onDateChange" :start="begindate">
                            {{ enddate || '结束日期' }}
                        </picker>
                    </view>
                     -->
                </block>
            </My_listbox>
            <view id="bottom">
                <view class="bottom">
                    <view class="bot" @click="show = false" hover-class="navigator-hover">
                        关闭
                    </view>
                    <view v-if="isReset" @click="reset" class="bot reset" hover-class="navigator-hover">
                        重置
                    </view>
                    <view v-if="loading" class="bot confirm" hover-class="navigator-hover">
                        <u-loading-icon color="#007aff" mode="semicircle" /> 查询中...
                    </view>
                    <view v-else class="bot confirm" @click="confirm" hover-class="navigator-hover">
                        确定
                    </view>
                </view>
                <view class="safety" />
            </view>
        </u-popup>
    </view>
</template>

<script>
import { formatTime } from "../utils/getTime";

export default {
    name: 'My_filter',
    props: {
        isReset: {
            type: Boolean,
            default: true
        },
        isBar: {
            type: Boolean,
            default: true
        },
        headTop: {
            type: Number,
            default: 0
        },
        filter1: {
            type: Array,
            default: () => [{
                label: "筛选项",
                list: [{
                    name: 1
                }, {
                    name: 2
                }, {
                    name: 3
                }],
                selectKey: "name",
                selectIndex: null,
                default: null,
                showKey: "name",
                key: "name",

            }]
        },
        dateRange: Boolean,
        start: String,
        onConfirm: Function
    },
    data() {
        return {
            show: false,
            CustomBar: this.CustomBar,
            day: 0,
            begindate: "",
            enddate: "",
            filter: [],
            loading: false
        };
    },
    methods: {
        open(num) {
            this.show = true;
            this.filter = this.filter1;
            setTimeout(() => {
                this.getHeight("#bottom", this, false).then(({ height }) => this.$refs.box.setHeight('minus', (height - 0) + (num - 0)))
            }, 100);
        },
        close() {
            this.show = false;
            this.loading = false;
        },
        changeValue(index1, index2) {
            let newltem = this.filter[index1];
            newltem.selectIndex = newltem.selectIndex == index2 ? null : index2;
            this.$set(this.filter, index1, newltem);
        },
        reset() {
            this.filter = this.filter.map(v => {
                v.selectIndex = v.default || null;
                return v
            });
            this.day = 0;
            this.begindate = "";
            this.enddate = "";
        },
        confirm() {
            let obj = {};
            this.filter.forEach(v => {
                let value = v.list[v.selectIndex] || "";
                if (value && v.selectKey) value = value[v.selectKey]
                obj[v.key] = value;
            })
            if (this.dateRange) {
                obj.begindate = this.begindate;
                obj.enddate = this.enddate;
            }
            this.loading = true;
            this.$emit("onConfirm", obj)
        },
        fast(num) {
            return new Promise((resolve) => {
                this.day = num;
                let now = new Date().getTime(),
                    end = now + 86400000,
                    beg = end - (num * 86400000);
                this.begindate = formatTime(new Date(beg)).split(' ')[0];
                this.enddate = formatTime(new Date(end)).split(' ')[0];
                resolve()
            })
        },
        valChange(e) {
            this.fast(e.value)
        },
        onDateChange(e) {
            this[e.target.dataset.name] = e.detail.value;
            if (this.begindate && this.enddate) {
                let end = new Date(this.enddate).getTime(),
                    beg = new Date(this.begindate).getTime();
                this.day = (end - beg) / 86400000;
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.label {
    line-height: 20px;
    font-size: 14px;
    color: #333333;
    padding: 15px 10px 10px;
}

.date-box {

    .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;
        }

        .active {
            background: #0B3F7E !important;
            color: #FFFFFF !important;
        }

        /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;
        }
    }

}

.value-box {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;

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

    .active {
        background: #0B3F7E !important;
        color: #FFFFFF !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: 45px;
        line-height: 45px;
        background: #FFFFFF;
        border-radius: 4px;
        border: 1px solid #CCCCCC;
        font-size: 14px;
        padding-left: 10px;
    }
}

.bottom {
    display: flex;
    justify-content: space-between;
    align-content: center;
    width: 100%;
    border-top: 1px solid #ddd;
    padding: 10px;
    box-sizing: border-box;

    .bot {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 93px;
        height: 45px;
        background: #FFFFFF;
        border-radius: 4px;
        border: 1px solid #CCCCCC;
        font-size: 15px;
        color: #666666;
    }

    .reset {
        border-color: #0B3F7E;
        color: #0B3F7E;
    }

    .confirm {
        border-color: #0B3F7E;
        background-color: #0B3F7E;
        color: #FFFFFF;
    }

    /deep/ .u-button {
        background: #FFFFFF;
        border-radius: 4px;
        margin: 0 !important;
    }

    /deep/ .u-button__text {
        font-size: 14px !important;
    }
}
</style>