water_affairs/components/timeHorizon.vue

<template>
    <view class="time-horizon">
        <view class="placeholder" @click="show = true">
            {{ showTitle || placeholder }}
        </view>
        <u-popup :show="show" mode="bottom" :safeAreaInsetBottom="true" @close="show = false">
            <view class="title">
                快捷查询日期范围
            </view>
            <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 class="item" :class="day == 60 ? 'active' : ''" @click="fast(60)">
                        60天
                    </view>
                    <view style="width: 10px;" />
                    <u-number-box :value="day" @change="valChange" />
                </view>
            </scroll-view>
            <view class="title">
                自定义日期范围
            </view>
            <view class="row">
                <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 class="bottom">
                <view class="bot" @click="show = false" hover-class="navigator-hover">
                    关闭
                </view>
                <view @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><!--  :class="begindate && enddate ? '' : 'disabled'" -->
            </view>
        </u-popup>
    </view>
</template>

<script>
import { formatTime } from "../utils/getTime";
export default {
    name: "timeHorizon",
    props: {
        placeholder: {
            type: String,
            default: "查询日期范围"
        },
        onConfirm: Function
    },
    data() {
        return {
            loading: false,
            show: false,
            day: 0,
            begindate: "",
            enddate: '',
            showTitle: ""
        }
    },
    created() {
    },
    methods: {
        fast(num) {
            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];
        },
        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;
            }
        },
        reset() {
            this.day = 0;
            this.begindate = "";
            this.enddate = "";
        },
        confirm() {
            this.loading = true;
            this.$emit('onConfirm', [this.begindate, this.enddate], () => {
                this.loading = false;
                this.show = false;
                this.showTitle = this.begindate && this.enddate ? this.begindate + ' 至 ' + this.enddate : ""
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.disabled {
    opacity: .7;
}

.placeholder {
    font-weight: bold;
    color: #fff;
}

.title {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    line-height: 45px;
}

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


.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: 100px;
        height: 40px;
        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>