1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
| /**
| * CFilter - 页面筛选
| * @author Tevin
| */
|
| <template>
| <view class="c-filter">
| <view
| class="c-filter-bar"
| v-if="bar"
| >
| <CFilterSelect
| v-if="bar.type==='select'"
| type="bar"
| :label="bar.label"
| :options="selectOptions[bar.name]"
| :value="filterRes[bar.name]"
| :onChange="evt=>handleChange(bar.name, evt)"
| />
| </view>
| <view
| class="c-filter-more"
| v-if="items && items.length > 0"
| @tap="evt => drawerShow=true"
| >更多筛选 »</view>
| <AtDrawer
| class="c-filter-drawer"
| mask
| right
| :show="drawerShow"
| :onClose="evt => drawerShow=false"
| >
| <scroll-view
| class="c-filter-drawer-list"
| :scrollY="true"
| >
| <view
| class="box"
| v-for="(item,index) of items"
| :key="index"
| >
| <CFilterSelect
| v-if="item.type==='select'"
| type="item"
| :label="item.label"
| :options="selectOptions[item.name]"
| :value="filterRes[item.name]"
| :onChange="evt=>handleChange(item.name, evt)"
| />
| </view>
| </scroll-view>
| <view class="c-filter-drawer-btn">
| 重置 完成
| </view>
| </AtDrawer>
| </view>
| </template>
|
| <script>
| import Taro from '@tarojs/taro';
| import { AtDrawer } from 'taro-ui-vue';
| import CFilterSelect from './CFilterSelect';
| import './cFilter.scss';
|
| export default {
| name: 'CFilter',
| components: {
| AtDrawer,
| CFilterSelect,
| },
| props: {
| // 筛选横条项目
| bar: Object,
| // 筛选展开层项目列表
| items: Array,
| // 各个项目的选项列表
| selectOptions: Object,
| // 筛选变化时的回调
| onChange: Function,
| },
| data() {
| return {
| filterRes: {},
| drawerShow: false,
| };
| },
| methods: {
| handleChange(name, value) {
| this.$set(this.filterRes, name, value);
| this.onChange(this.filterRes);
| },
| },
| };
| </script>
|
|
