增加日期范围选择器

Tevin

2021-04-01 d7cf84bd603bcab89d44e9942348f017665cb756

增加日期范围选择器

 forms/datePicker/CDateRangeAction.vue

New file
@@ -0,0 +1,119 @@
/**
 * CDateRangeAction - 选择日期范围操作
 * @author Tevin
 */

<template>
    <view class="c-date-range-action">
        <view
            class="c-date-range-slot"
            @tap="evt => handleOpen()"
        >
            <slot />
        </view>
        <view
            class="c-data-range-float"
            ref="floadLayer"
        >
            <AtDrawer
                class="c-data-range-drawer"
                ref="floatDrawer"
                mask
                :show="drawerShow"
                :onClose="evt => drawerShow=false"
            >
                <view class="title">请选择日期</view>
                <view class="date">
                    <picker
                        mode='date'
                        :value="startDate"
                        @change="evt => handleStartDateChange(evt.detail.value)"
                    >
                        <view class="item">
                            <view class="label">开始日期</view>
                            <view :class="startDate?'filled':'empty'">
                                {{ startDate?startDate:'请选择开始日期' }}
                            </view>
                            <view class="at-icon at-icon-chevron-right" />
                        </view>
                    </picker>
                    <picker
                        mode='date'
                        :value="endDate"
                        @change="evt => handleEndDateChange(evt.detail.value)"
                    >
                        <view class="item">
                            <view class="label">结束日期</view>
                            <view :class="endDate?'filled':'empty'">
                                {{ endDate?endDate:'请选择结束日期' }}
                            </view>
                            <view class="at-icon at-icon-chevron-right" />
                        </view>
                    </picker>
                </view>
                <AtButton
                    class="btn"
                    type="primary"
                    full
                    :circle="false"
                    :onClick="evt => handleFinish()"
                >确定</AtButton>
            </AtDrawer>
        </view>
    </view>
</template>

<script>
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
import { AtDrawer, AtButton } from 'taro-ui-vue';
import './cDateRangeAction.scss';

export default {
    name: 'CDateRangeAction',
    components: {
        AtDrawer,
        AtButton,
    },
    props: {
        value: null,
        onChange: Function,
    },
    data() {
        return {
            drawerShow: false,
            startDate: '',
            endDate: '',
        };
    },
    computed: {},
    methods: {
        handleOpen() {
            this.drawerShow = true;
            const curDates = (this.value || ',').split(',');
            this.startDate = curDates[0];
            this.endDate = curDates[1];
        },
        handleStartDateChange(date) {
            this.startDate = date;
        },
        handleEndDateChange(date) {
            this.endDate = date;
        },
        handleFinish() {
            this.drawerShow = false;
            if (!this.startDate && !this.endDate) {
                this.onChange();
            } else {
                this.onChange(this.startDate + ',' + this.endDate);
            }
        },
    },
    mounted() {
        const $cFilter = $(this.$refs.floadLayer).parents('.c-filter');
        if ($cFilter.length > 0) {
            $cFilter.eq(0).after(this.$refs.floadLayer);
        }
    },
};
</script>

 forms/datePicker/cDateRangeAction.scss

New file
@@ -0,0 +1,65 @@
/**
 * date range action
 * @author Tevin
 */

@import "../../common/sassMixin";

.c-date-range-action {}
.c-data-range-float {
    @include position(fixed, 0 0, 90000);
    .at-drawer .at-drawer__content {
        width: 100%;
        min-height: 200px;
        bottom: auto;
        transform: translateY(-100%);
    }
    .at-drawer--show .at-drawer__content {
        transform: translateY(0%);
    }
    .c-data-range-drawer {
        .title {
            height: 100px;
            text-align: center;
            line-height: 100px;
            border-top: 1PX solid #eee;
            border-bottom: 1PX solid #d6e4ef;
            background-color: #f8f8f8;
        }
        .item {
            @include flexbox(flex, flex-start center);
            width: 100%;
            height: 96px;
            padding: 24px 0 24px 24px;
            white-space: nowrap;
            border-bottom: 1PX solid #d6e4ef;
            box-sizing: border-box;
            background-color: #fff;
            .label {
                flex: 2;
            }
            .filled,
            .empty {
                flex: 6;
                text-align: right;
            }
            .empty {
                color: #ccc;
            }
            .at-icon {
                flex: 1;
                font-size: 40px;
                text-align: center;
                color: #999;
            }
        }
        .date {
            padding-bottom: 24px;
            background-color: #f8f8f8;
        }
        .btn {
            background-color: #36a0e7;
            border: none;
        }
    }
}

 forms/datePicker/index.js

New file
@@ -0,0 +1,10 @@
/**
 * CDatePicker
 * @author Tevin
 */

import CDateRangeAction from '@components/forms/datePicker/CDateRangeAction.vue';

export {
    CDateRangeAction,
}

 plugins/filter/CFilter.vue

@@ -47,6 +47,13 @@
                        :value="filterRes[item.name]"
                        :onChange="evt=>handleChange(item.name, evt)"
                    />
                    <CFilterDateRange
                        v-if="item.type==='dateRange'"
                        type="item"
                        :label="item.label"
                        :value="filterRes[item.name]"
                        :onChange="evt=>handleChange(item.name, evt)"
                    />
                </view>
            </scroll-view>
            <view class="c-filter-drawer-btn">
@@ -60,6 +67,7 @@
import Taro from '@tarojs/taro';
import { AtDrawer } from 'taro-ui-vue';
import CFilterSelect from './CFilterSelect';
import CFilterDateRange from './CFilterDateRange';
import './cFilter.scss';

export default {
@@ -67,6 +75,7 @@
    components: {
        AtDrawer,
        CFilterSelect,
        CFilterDateRange,
    },
    props: {
        // 筛选横条项目

 plugins/filter/CFilterDateRange.vue

New file
@@ -0,0 +1,64 @@
/**
 * CFilterSelect - 筛选项目，选择日期
 * @author Tevin
 */

<template>
    <view
        class="c-filter-select"
        :class="'type-'+type"
    >
        <view
            class="label"
            v-if="type==='item'"
        >{{label}}</view>
        <CDateRangeAction
            :value="value"
            :onChange="evt=>handleChange(evt)"
        >
            <view class="content">
                <view
                    class="label"
                    v-if="type==='bar'"
                >
                    {{label}}：
                </view>
                <view :class="selected ? 'filled':'empty'">
                    {{selected ? value : ('请选择' + label)}}
                </view>
                <view class="at-icon at-icon-chevron-down" />
            </view>
        </CDateRangeAction>
    </view>
</template>

<script>
import Taro from '@tarojs/taro';
import { CDateRangeAction } from '@components/forms/datePicker';

export default {
    name: 'CFilterSelect',
    components: {
        CDateRangeAction,
    },
    props: {
        type: String,
        label: String,
        value: null,
        onChange: Function,
    },
    data() {
        return {};
    },
    computed: {
        selected() {
            return (this.value || '').length > 2;
        },
    },
    methods: {
        handleChange(dateRange) {
            this.onChange(dateRange);
        },
    },
};
</script>

 plugins/filter/CFilterSelect.vue

@@ -25,10 +25,10 @@
                >
                    {{label}}：
                </view>
                <view :class="selected ? 'value':'empty'">
                <view :class="selected ? 'filled':'empty'">
                    {{selected ? options2[current].name : ('请选择' + label)}}
                </view>
                <view class='at-icon at-icon-chevron-down' />
                <view class="at-icon at-icon-chevron-down" />
            </view>
        </picker>
    </view>

 plugins/filter/cFilter.scss

@@ -66,7 +66,7 @@
        .empty {
            color: #ccc;
        }
        .value {
        .filled {
            color: #6190e8;
        }
        .at-icon {
@@ -93,7 +93,7 @@
        }
        .content {
            .empty,
            .value {
            .filled {
                flex: 6;
            }
            .at-icon {