From d7cf84bd603bcab89d44e9942348f017665cb756 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 01 Apr 2021 14:47:48 +0800
Subject: [PATCH] 增加日期范围选择器
---
forms/datePicker/CDateRangeAction.vue | 119 +++++++++++++++++++++++
plugins/filter/CFilterDateRange.vue | 64 ++++++++++++
plugins/filter/CFilterSelect.vue | 4
forms/datePicker/index.js | 10 ++
plugins/filter/CFilter.vue | 9 +
plugins/filter/cFilter.scss | 4
forms/datePicker/cDateRangeAction.scss | 65 +++++++++++++
7 files changed, 271 insertions(+), 4 deletions(-)
diff --git a/forms/datePicker/CDateRangeAction.vue b/forms/datePicker/CDateRangeAction.vue
new file mode 100644
index 0000000..45b8341
--- /dev/null
+++ b/forms/datePicker/CDateRangeAction.vue
@@ -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>
\ No newline at end of file
diff --git a/forms/datePicker/cDateRangeAction.scss b/forms/datePicker/cDateRangeAction.scss
new file mode 100644
index 0000000..2dc4c66
--- /dev/null
+++ b/forms/datePicker/cDateRangeAction.scss
@@ -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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/forms/datePicker/index.js b/forms/datePicker/index.js
new file mode 100644
index 0000000..66810ea
--- /dev/null
+++ b/forms/datePicker/index.js
@@ -0,0 +1,10 @@
+/**
+ * CDatePicker
+ * @author Tevin
+ */
+
+import CDateRangeAction from '@components/forms/datePicker/CDateRangeAction.vue';
+
+export {
+ CDateRangeAction,
+}
\ No newline at end of file
diff --git a/plugins/filter/CFilter.vue b/plugins/filter/CFilter.vue
index a5fde0d..924972c 100644
--- a/plugins/filter/CFilter.vue
+++ b/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: {
// 筛选横条项目
diff --git a/plugins/filter/CFilterDateRange.vue b/plugins/filter/CFilterDateRange.vue
new file mode 100644
index 0000000..85d7a08
--- /dev/null
+++ b/plugins/filter/CFilterDateRange.vue
@@ -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>
\ No newline at end of file
diff --git a/plugins/filter/CFilterSelect.vue b/plugins/filter/CFilterSelect.vue
index 4976cb5..fbbe7ff 100644
--- a/plugins/filter/CFilterSelect.vue
+++ b/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>
diff --git a/plugins/filter/cFilter.scss b/plugins/filter/cFilter.scss
index 2703ceb..171a251 100644
--- a/plugins/filter/cFilter.scss
+++ b/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 {
--
Gitblit v1.9.1