From 23f376d3a538af410d80045f958be1997ac381e3 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 23 Sep 2021 17:33:36 +0800
Subject: [PATCH] 页面筛选项器与日期范围组件优化，选择使用公共抽屉组件取代TaroUI的抽屉组件
---
forms/datePicker/CDateRangeAction.vue | 15 ++++---
common/Tools.js | 6 ++
plugins/filter/CFilter.vue | 34 +++++++++-------
plugins/filter/cFilter.scss | 9 +++-
forms/datePicker/cDateRangeAction.scss | 11 -----
5 files changed, 40 insertions(+), 35 deletions(-)
diff --git a/common/Tools.js b/common/Tools.js
index 2b2b6a3..e4e7403 100644
--- a/common/Tools.js
+++ b/common/Tools.js
@@ -28,7 +28,11 @@
* @param {String} [search]
* @return {String|Null}
*/
- static getUrlParam(name, search = window.location.search) {
+ static getUrlParam(name, search) {
+ if (process.env.TARO_ENV === 'weapp') {
+ return null;
+ }
+ search = search || window.location.search;
const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
const r = search.substr(1).match(reg);
if (r !== null) {
diff --git a/forms/datePicker/CDateRangeAction.vue b/forms/datePicker/CDateRangeAction.vue
index 3ad0181..95cbf9d 100644
--- a/forms/datePicker/CDateRangeAction.vue
+++ b/forms/datePicker/CDateRangeAction.vue
@@ -15,12 +15,11 @@
class="c-data-range-float"
ref="floadLayer"
>
- <AtDrawer
+ <CDrawer
class="c-data-range-drawer"
- ref="floatDrawer"
- mask
+ direction="top"
:show="drawerShow"
- :onClose="evt => drawerShow=false"
+ :onClose="evt => handleClose()"
>
<view class="title">
<view v-if="placeholder">{{placeholder}}</view>
@@ -61,7 +60,7 @@
:circle="false"
:onClick="evt => handleFinish()"
>确定</AtButton>
- </AtDrawer>
+ </CDrawer>
</view>
</view>
</template>
@@ -70,6 +69,7 @@
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
import { AtDrawer, AtButton } from 'taro-ui-vue';
+import { CDrawer } from '@components/layout/drawer';
import './cDateRangeAction.scss';
export default {
@@ -77,6 +77,7 @@
components: {
AtDrawer,
AtButton,
+ CDrawer,
},
props: {
// 项值
@@ -100,6 +101,9 @@
const curDates = (this.value || ',').split(',');
this.startDate = curDates[0];
this.endDate = curDates[1];
+ },
+ handleClose() {
+ this.drawerShow = false;
},
handleStartDateChange(date) {
if (date && this.endDate) {
@@ -146,7 +150,6 @@
const $cFilter = $(this.$refs.floadLayer).parents('.c-filter');
if ($cFilter.length > 0) {
$cFilter.eq(0).after(this.$refs.floadLayer);
- $cFilter.parent().css('transform', 'translate(0,0)');
}
},
};
diff --git a/forms/datePicker/cDateRangeAction.scss b/forms/datePicker/cDateRangeAction.scss
index 5d2abba..6326783 100644
--- a/forms/datePicker/cDateRangeAction.scss
+++ b/forms/datePicker/cDateRangeAction.scss
@@ -6,16 +6,7 @@
@import "../../common/sassMixin";
.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%);
- }
+ @include position(fixed, 0 0, 9100);
.c-data-range-drawer {
.title {
height: 100px;
diff --git a/plugins/filter/CFilter.vue b/plugins/filter/CFilter.vue
index ee5a95e..9a7d937 100644
--- a/plugins/filter/CFilter.vue
+++ b/plugins/filter/CFilter.vue
@@ -35,17 +35,14 @@
<text>更多筛选 </text>
<text class="arrow">»</text>
</view>
- <AtDrawer
+ <CDrawer
class="c-filter-drawer"
- mask
- right
:show="drawerShow"
:onClose="evt => handleFinish()"
>
<scroll-view
class="c-filter-drawer-list"
:scrollY="true"
- v-if="drawerDisplay"
>
<view
class="box"
@@ -81,13 +78,15 @@
:onClick="evt => handleFinish()"
>完成</AtButton>
</view>
- </AtDrawer>
+ </CDrawer>
</view>
</template>
<script>
import Taro from '@tarojs/taro';
+import { $ } from '@tarojs/extend';
import { AtDrawer, AtButton } from 'taro-ui-vue';
+import { CDrawer } from '@components/layout/drawer';
import CFilterSelect from './CFilterSelect';
import CFilterDateRange from './CFilterDateRange';
import './cFilter.scss';
@@ -99,6 +98,7 @@
AtButton,
CFilterSelect,
CFilterDateRange,
+ CDrawer,
},
props: {
filterData: { type: Object, default: () => {} },
@@ -113,11 +113,11 @@
},
data() {
return {
- filterRes: this.filterData,
+ filterRes: this.filterData || {},
// 抽屉显示隐藏
drawerShow: false,
// 抽屉内容显示隐藏(抽屉展开动画完成后再渲染表单，否则出现动画卡顿)
- drawerDisplay: false,
+ // drawerDisplay: false,
// 面板项有已选
itemsFilled: false,
// 本次打开是否有改变
@@ -127,11 +127,7 @@
methods: {
handleOpen() {
this.drawerShow = true;
- this.$nextTick(() => {
- setTimeout(() => {
- this.drawerDisplay = true;
- }, 100);
- });
+ // $(this.$refs.drawer).addClass('on');
},
handleBarChange(name, value) {
this.$set(this.filterRes, name, value);
@@ -158,6 +154,16 @@
},
handleClean() {
Object.keys(this.filterRes).forEach(key => {
+ // 如果不能取消，跳过
+ if (key === this.bar.name && this.bar.cancelable === false) {
+ return;
+ }
+ for (let item of this.items) {
+ if (key === item.name && item.cancelable === false) {
+ return;
+ }
+ }
+ // 清除值
this.filterRes[key] = [][0];
});
this.itemsFilled = false;
@@ -165,10 +171,8 @@
this.onChange(this.filterRes);
},
handleFinish() {
+ // $(this.$refs.drawer).removeClass('on');
this.drawerShow = false;
- this.$nextTick(() => {
- this.drawerDisplay = false;
- });
// 有项目改变时，发送变化
if (this.itemsChanged) {
this.itemsChanged = false;
diff --git a/plugins/filter/cFilter.scss b/plugins/filter/cFilter.scss
index 185b562..97f02f3 100644
--- a/plugins/filter/cFilter.scss
+++ b/plugins/filter/cFilter.scss
@@ -20,6 +20,9 @@
height: 100%;
padding: 0 20px;
box-sizing: border-box;
+ &:active {
+ background-color: #f2f2f2;
+ }
}
.c-filter-more {
float: right;
@@ -50,9 +53,6 @@
}
}
.c-filter-drawer {
- .at-drawer__content {
- width: 550px;
- }
.c-filter-drawer-list {
height: calc(100% - 90px);
border-top: 1PX solid #eee;
@@ -61,6 +61,9 @@
min-height: 20px;
padding: 30px 0 10px 30px;
border-bottom: 1PX solid #eee;
+ &:active {
+ background-color: #f2f2f2;
+ }
}
}
.c-filter-drawer-btn {
--
Gitblit v1.9.1