From 41ce4729b48cedc120b504bab76924f995bb47bb Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 01 Apr 2021 16:22:23 +0800
Subject: [PATCH] 完善筛选组件
---
forms/datePicker/CDateRangeAction.vue | 26 +++++++++++++
plugins/filter/CFilter.vue | 64 +++++++++++++++++++++++++++----
plugins/filter/cFilter.scss | 30 +++++++++++++++
3 files changed, 111 insertions(+), 9 deletions(-)
diff --git a/forms/datePicker/CDateRangeAction.vue b/forms/datePicker/CDateRangeAction.vue
index 45b8341..1d2cc05 100644
--- a/forms/datePicker/CDateRangeAction.vue
+++ b/forms/datePicker/CDateRangeAction.vue
@@ -95,9 +95,35 @@
this.endDate = curDates[1];
},
handleStartDateChange(date) {
+ if (date && this.endDate) {
+ const startTime = new Date(date);
+ const endTime = new Date(this.endDate);
+ if (startTime > endTime) {
+ Taro.showToast({
+ title: '开始日期不能晚于结束日期！',
+ icon: 'none',
+ mask: true,
+ duration: 2000,
+ });
+ return;
+ }
+ }
this.startDate = date;
},
handleEndDateChange(date) {
+ if (date && this.startDate) {
+ const startTime = new Date(this.startDate);
+ const endTime = new Date(date);
+ if (startTime > endTime) {
+ Taro.showToast({
+ title: '结束日期不能早于开始日期！',
+ icon: 'none',
+ mask: true,
+ duration: 2000,
+ });
+ return;
+ }
+ }
this.endDate = date;
},
handleFinish() {
diff --git a/plugins/filter/CFilter.vue b/plugins/filter/CFilter.vue
index 924972c..51b0e7c 100644
--- a/plugins/filter/CFilter.vue
+++ b/plugins/filter/CFilter.vue
@@ -15,20 +15,24 @@
:label="bar.label"
:options="selectOptions[bar.name]"
:value="filterRes[bar.name]"
- :onChange="evt=>handleChange(bar.name, evt)"
+ :onChange="evt=>handleBarChange(bar.name, evt)"
/>
</view>
<view
class="c-filter-more"
+ :class="itemsChanged?'on':''"
v-if="items && items.length > 0"
- @tap="evt => drawerShow=true"
- >更多筛选 »</view>
+ @tap="evt => handleOpen()"
+ >
+ <text>更多筛选 </text>
+ <text class="arrow">»</text>
+ </view>
<AtDrawer
class="c-filter-drawer"
mask
right
:show="drawerShow"
- :onClose="evt => drawerShow=false"
+ :onClose="evt => handleFinish()"
>
<scroll-view
class="c-filter-drawer-list"
@@ -45,19 +49,28 @@
:label="item.label"
:options="selectOptions[item.name]"
:value="filterRes[item.name]"
- :onChange="evt=>handleChange(item.name, evt)"
+ :onChange="evt=>handleItemChange(item.name, evt)"
/>
<CFilterDateRange
v-if="item.type==='dateRange'"
type="item"
:label="item.label"
:value="filterRes[item.name]"
- :onChange="evt=>handleChange(item.name, evt)"
+ :onChange="evt=>handleItemChange(item.name, evt)"
/>
</view>
</scroll-view>
<view class="c-filter-drawer-btn">
- 重置 完成
+ <AtButton
+ type="primary"
+ :circle="false"
+ :onClick="evt => handleClean()"
+ >重置</AtButton>
+ <AtButton
+ type="primary"
+ :circle="false"
+ :onClick="evt => handleFinish()"
+ >完成</AtButton>
</view>
</AtDrawer>
</view>
@@ -65,7 +78,7 @@
<script>
import Taro from '@tarojs/taro';
-import { AtDrawer } from 'taro-ui-vue';
+import { AtDrawer, AtButton } from 'taro-ui-vue';
import CFilterSelect from './CFilterSelect';
import CFilterDateRange from './CFilterDateRange';
import './cFilter.scss';
@@ -74,6 +87,7 @@
name: 'CFilter',
components: {
AtDrawer,
+ AtButton,
CFilterSelect,
CFilterDateRange,
},
@@ -91,13 +105,45 @@
return {
filterRes: {},
drawerShow: false,
+ itemsChanged: false,
};
},
methods: {
- handleChange(name, value) {
+ handleOpen() {
+ this.drawerShow = true;
+ },
+ handleBarChange(name, value) {
this.$set(this.filterRes, name, value);
this.onChange(this.filterRes);
},
+ handleItemChange(name, value) {
+ this.handleBarChange(name, value);
+ if (value || typeof value !== 'undefined') {
+ this.itemsChanged = true;
+ } else {
+ let valuehas = false;
+ for (let item of items) {
+ if (
+ this.filterRes[item.name] ||
+ typeof this.filterRes[item.name] !== 'undefined'
+ ) {
+ valuehas = true;
+ break;
+ }
+ }
+ this.itemsChanged = valuehas;
+ }
+ },
+ handleClean() {
+ Object.keys(this.filterRes).forEach(key => {
+ this.filterRes[key] = [][0];
+ });
+ this.itemsChanged = false;
+ this.onChange(this.filterRes);
+ },
+ handleFinish() {
+ this.drawerShow = false;
+ },
},
};
</script>
diff --git a/plugins/filter/cFilter.scss b/plugins/filter/cFilter.scss
index 171a251..3c1a27d 100644
--- a/plugins/filter/cFilter.scss
+++ b/plugins/filter/cFilter.scss
@@ -32,6 +32,22 @@
&:active {
background-color: #f2f2f2;
}
+ &.on {
+ position: relative;
+ color: #36a0e7;
+ &::after {
+ display: block;
+ @include position(absolute, 20px n n 44px);
+ width: 12px;
+ height: 12px;
+ content: " ";
+ background-color: #36a0e7;
+ border-radius: 50%;
+ }
+ }
+ .arrow {
+ color: #666;
+ }
}
.c-filter-drawer {
.at-drawer__content {
@@ -49,6 +65,20 @@
}
.c-filter-drawer-btn {
height: 90px;
+ @include flexbox(flex, center center);
+ .at-button {
+ flex: 3;
+ height: 90px;
+ line-height: 88px;
+ border: none;
+ border-radius: 0;
+ background-color: #36a0e7;
+ &:first-child {
+ flex: 2;
+ color: #36a0e7;
+ background-color: #d4f1f7;
+ }
+ }
}
}
}
--
Gitblit v1.9.1