From 910572f2c2bbd678c3983db0ca4a293fa5c0dd33 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 17 Aug 2023 16:01:04 +0800
Subject: [PATCH] 页面筛选组件，增加单项开关子组件
---
plugins/filter/cFilterSwitchRadio.scss | 25 ++++++
plugins/filter/CFilterSelect.vue | 1
forms/switch/cSwitch.scss | 4
plugins/filter/CFilterSwitchRadio.vue | 68 +++++++++++++++++
plugins/filter/cFilterSelect.scss | 60 +++++++++++++++
plugins/filter/CFilter.vue | 9 ++
plugins/filter/cFilter.scss | 54 -------------
7 files changed, 165 insertions(+), 56 deletions(-)
diff --git a/forms/switch/cSwitch.scss b/forms/switch/cSwitch.scss
index 0224cd5..a356ee7 100644
--- a/forms/switch/cSwitch.scss
+++ b/forms/switch/cSwitch.scss
@@ -56,7 +56,7 @@
}
.c-switch-radio-item {
display: inline-block;
- padding-left: 18px;
+ padding-left: 24px;
}
.c-switch-radio-icon {
@include flexbox(inline, center center);
@@ -90,7 +90,7 @@
padding-right: 0;
.c-switch-radio-item {
padding-left: 0;
- padding-right: 22px;
+ padding-right: 24px;
}
}
}
diff --git a/plugins/filter/CFilter.vue b/plugins/filter/CFilter.vue
index bca1b5d..91c09dd 100644
--- a/plugins/filter/CFilter.vue
+++ b/plugins/filter/CFilter.vue
@@ -67,6 +67,13 @@
:value="filterRes[item.name]"
:onChange="evt=>handleItemChange(item.name, evt)"
/>
+ <CFilterSwitchRadio
+ v-if="item.type==='switchRadio'"
+ type="item"
+ :label="item.label"
+ :value="filterRes[item.name]"
+ :onChange="evt=>handleItemChange(item.name, evt)"
+ />
</view>
</scroll-view>
<view class="c-filter-drawer-btn">
@@ -92,6 +99,7 @@
import { CDrawer } from '@components/layout/drawer';
import CFilterSelect from './CFilterSelect';
import CFilterDateRange from './CFilterDateRange';
+import CFilterSwitchRadio from './CFilterSwitchRadio';
import './cFilter.scss';
export default {
@@ -101,6 +109,7 @@
AtButton,
CFilterSelect,
CFilterDateRange,
+ CFilterSwitchRadio,
CDrawer,
},
props: {
diff --git a/plugins/filter/CFilterSelect.vue b/plugins/filter/CFilterSelect.vue
index 4a8b9d3..1c04022 100644
--- a/plugins/filter/CFilterSelect.vue
+++ b/plugins/filter/CFilterSelect.vue
@@ -35,6 +35,7 @@
<script>
import Taro from '@tarojs/taro';
+import './cFilterSelect.scss';
export default {
name: 'CFilterSelect',
diff --git a/plugins/filter/CFilterSwitchRadio.vue b/plugins/filter/CFilterSwitchRadio.vue
new file mode 100644
index 0000000..22a62bb
--- /dev/null
+++ b/plugins/filter/CFilterSwitchRadio.vue
@@ -0,0 +1,68 @@
+/**
+ * CFilterSwitchRadio - 筛选项目，单选
+ * @author Tevin
+ */
+
+<template>
+ <view
+ class="c-filter-switch-radio"
+ :class="'type-'+type"
+ >
+ <view
+ class="label"
+ v-if="type==='item'"
+ >{{label}}</view>
+ <CSwitchRadio
+ :itemRes="{
+ label: type==='bar' ? label : '',
+ name: switchName,
+ formData: switchData,
+ onChange: evt => handleChange(evt),
+ }"
+ checkAlign="left"
+ checkedLabel="在线"
+ uncheckedLabel="离线"
+ />
+ </view>
+</template>
+
+<script>
+import Taro from '@tarojs/taro';
+import { CSwitchRadio } from '@components/forms/switch';
+import './cFilterSwitchRadio.scss';
+
+export default {
+ name: 'CFilterRadio',
+ components: {
+ CSwitchRadio,
+ },
+ props: {
+ type: String,
+ label: String,
+ value: Boolean,
+ onChange: Function,
+ },
+ data() {
+ return {
+ switchName: 'radio',
+ switchData: {
+ radio: '',
+ },
+ };
+ },
+ computed: {},
+ watch: {
+ value(newVal, oldVal) {
+ this.switchData.radio = newVal;
+ },
+ },
+ methods: {
+ handleChange(value) {
+ this.onChange(value);
+ },
+ },
+ mounted() {
+ this.switchData.radio = this.value;
+ },
+};
+</script>
\ No newline at end of file
diff --git a/plugins/filter/cFilter.scss b/plugins/filter/cFilter.scss
index 355c818..b35c274 100644
--- a/plugins/filter/cFilter.scss
+++ b/plugins/filter/cFilter.scss
@@ -86,58 +86,4 @@
}
}
}
-}
-
-.c-filter-select {
- .content {
- @include flexbox(flex, flex-start center);
- white-space: nowrap;
- .empty,
- .value {
- display: inline-block;
- vertical-align: middle;
- @include ellipsis();
- }
- .empty {
- color: #ccc;
- }
- .filled {
- color: #6190e8;
- }
- .at-icon {
- text-align: center;
- color: #666;
- }
- }
- &.type-bar {
- .content {
- height: 86px;
- .label {
- padding-right: 12px;
- color: #666;
- }
- .filled {
- letter-spacing: -2px;
- }
- .at-icon {
- padding-left: 4px;
- vertical-align: middle;
- }
- }
- }
- &.type-item {
- .label {
- color: #666;
- line-height: 40px;
- }
- .content {
- .empty,
- .filled {
- flex: 6;
- }
- .at-icon {
- flex: 1;
- }
- }
- }
}
\ No newline at end of file
diff --git a/plugins/filter/cFilterSelect.scss b/plugins/filter/cFilterSelect.scss
new file mode 100644
index 0000000..ba0ba7f
--- /dev/null
+++ b/plugins/filter/cFilterSelect.scss
@@ -0,0 +1,60 @@
+/**
+ * filter select
+ * @author Tevin
+ */
+
+@import "../../common/sassMixin";
+
+.c-filter-select {
+ .content {
+ @include flexbox(flex, flex-start center);
+ white-space: nowrap;
+ .empty,
+ .value {
+ display: inline-block;
+ vertical-align: middle;
+ @include ellipsis();
+ }
+ .empty {
+ color: #ccc;
+ }
+ .filled {
+ color: #6190e8;
+ }
+ .at-icon {
+ text-align: center;
+ color: #666;
+ }
+ }
+ &.type-bar {
+ .content {
+ height: 86px;
+ .label {
+ padding-right: 12px;
+ color: #666;
+ }
+ .filled {
+ letter-spacing: -2px;
+ }
+ .at-icon {
+ padding-left: 4px;
+ vertical-align: middle;
+ }
+ }
+ }
+ &.type-item {
+ .label {
+ color: #666;
+ line-height: 40px;
+ }
+ .content {
+ .empty,
+ .filled {
+ flex: 6;
+ }
+ .at-icon {
+ flex: 1;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/plugins/filter/cFilterSwitchRadio.scss b/plugins/filter/cFilterSwitchRadio.scss
new file mode 100644
index 0000000..e66cf98
--- /dev/null
+++ b/plugins/filter/cFilterSwitchRadio.scss
@@ -0,0 +1,25 @@
+/**
+ * CFilterSwitchRadio
+ * @author Tevin
+ */
+
+@import "../../common/sassMixin";
+
+.c-filter-switch-radio {
+ .label {
+ color: #666;
+ line-height: 40px;
+ }
+ &.type-item {
+ .c-switch-radio {
+ .at-switch {
+ display: none;
+ }
+ .c-switch-radio-group {
+ position: sticky;
+ padding: 0;
+ transform: none;
+ }
+ }
+ }
+}
\ No newline at end of file
--
Gitblit v1.9.1