新版筛选组件

components/Yl_Filtrate1/groud.scss

@@ -0,0 +1,64 @@
+.groud {
+    width: 100%;
+    padding: 30rpx;
+    border-bottom: 1px solid #DDDDDD;
+
+    .label {
+        height: 40rpx;
+        font-size: 28rpx;
+        font-family: PingFang SC-Regular, PingFang SC;
+        color: #333333;
+    }
+
+    .content {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+
+       
+
+        .but {
+            width: 188rpx;
+            height: 72rpx;
+            background: #F5F5F5;
+            border-radius: 8rpx;
+            font-size: 28rpx;
+            font-family: PingFang SC-Regular, PingFang SC;
+            color: #333333;
+            box-sizing: border-box;
+            margin-right: 20rpx;
+            margin-top: 20rpx;
+            padding: 0;
+        }
+
+        .active {
+            border: 1px solid #3874F6;
+            color: #3874F6;
+            font-weight: bold;
+            background-color: #F5F5F5;
+        }
+    }
+
+    .time{
+        .partition {
+            margin-right: 20rpx;
+            display: flex;
+            align-items: center;
+        }
+
+        .tbox {
+            width: 220rpx;
+            height: 72rpx;
+            text-align: center;
+            line-height: 72rpx;
+            background: #F5F5F5;
+            border-radius: 8rpx;
+            font-size: 28rpx;
+            font-family: PingFang SC-Regular, PingFang SC;
+            color: #333333;
+            box-sizing: border-box;
+            margin-right: 20rpx;
+            margin-top: 20rpx;
+        }
+    }
+}

components/Yl_Filtrate1/index.js

@@ -0,0 +1,108 @@
+import {
+	getHeight
+} from "../../utils/getHeight";
+Component({
+	properties: {
+		list: {
+			type: Array,
+			value: [{
+				label: "筛选1",
+				index: null,
+				showName: "name", //显示字段
+				valueKey: "name", //返回Key
+				selectKey: "id", //传参 代表选着字段 不传参返回整个选择对象
+				value: "", //选中值
+				list: [{
+					name: "a1",
+					id: 0
+				}, {
+					name: "a2",
+					id: 1
+				}]
+			}]
+		},
+		show: Boolean,
+		handle: Function, //按钮回调函数
+		dateRange: Boolean, //是否开启日期范围筛选
+		zIndex: {
+			type: String,
+			value: 99999,
+		},
+	},
+	data: {
+		startdate: "", //开始时间
+		enddate: "", //结束时间
+	},
+	lifetimes: {
+		ready() {
+			getHeight('.head', this).then(res => this.setData({
+				listHeight: res - 80
+			}));
+		}
+	},
+	methods: {
+		/* 选择 */
+		onSelect(e) {
+			const {
+				item, //被选项
+				index, //列表下标
+				i //被选项下标
+			} = e.currentTarget.dataset;
+			if (this.data.list[index].index == i) {
+				this.setData({
+					[`list[${index}].value`]: "",
+					[`list[${index}].index`]: null
+				});
+			} else {
+				this.setData({
+					[`list[${index}].value`]: this.data.list[index].selectKey ? item[this.data.list[index].selectKey] : item,
+					[`list[${index}].index`]: i
+				});
+			}
+		},
+		/* 点击按钮 */
+		onClick(e) {
+			const {
+				name
+			} = e.target.dataset;
+			if (name == 'reset') {
+				this.setData({
+					list: this.data.list.map(v => {
+						v.value = "";
+						v.index = null;
+						return v;
+					})
+				})
+				this.setData({
+					startdate: '',
+					enddate: ''
+				})
+				this.triggerEvent("handle", {})
+			} else if (name == 'confirm') {
+				let obj = {};
+				this.data.list.forEach(v => {
+					obj[v.valueKey] = v.value;
+				});
+				if (this.data.dateRange) {
+					obj.startdate = this.data.startdate;
+					obj.enddate = this.data.enddate;
+				};
+				this.triggerEvent("handle", obj);
+			}
+			this.onClose();
+		},
+		/* 筛选日期范围 */
+		changeDate(e) {
+			const name = e.currentTarget.dataset.name,
+				value = e.detail.value;
+			this.setData({
+				[name]: value
+			})
+		},
+		onClose() {
+			this.setData({
+				show: false
+			})
+		}
+	}
+})

components/Yl_Filtrate1/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

components/Yl_Filtrate1/index.scss

@@ -0,0 +1,29 @@
+@import "./groud.scss";
+.footer {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10rpx;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px -2px 8rpx;
+
+    .v-but {
+        width: 190rpx;
+        height: 90rpx;
+        background: #FFFFFF;
+        border-radius: 8rpx;
+        border: 1px solid #CCCCCC;
+        font-size: 28rpx;
+        font-family: PingFang SC-Regular, PingFang SC;
+        color: #666666;
+    }
+
+    .confirm {
+        border: none;
+        background: #3874F6;
+        font-size: 28rpx;
+        font-family: PingFang SC-Bold, PingFang SC;
+        font-weight: bold;
+        color: #FFFFFF;
+    }
+}

components/Yl_Filtrate1/index.wxml

@@ -0,0 +1,35 @@
+<van-popup show="{{ show }}" position="right" custom-style="width: 660rpx; height:100vh;" z-index="{{zIndex}}" bind:close="onClose">
+    <view class="head" />
+    <Yl_ListBox height="{{listHeight}}" pullDown='{{false}}'>
+        <block wx:for="{{list}}" wx:key="label">
+            <view class="groud" wx:if="{{item.list.length}}">
+                <view class="label">
+                    {{item.label}}
+                </view>
+                <view class="content">
+                    <van-button custom-class='but {{item.index==i?"active":""}}' wx:for="{{item.list}}" wx:for-item="data" wx:for-index="i" wx:key="i" data-item="{{data}}" data-index="{{index}}" data-i="{{i}}" bindtap="onSelect">{{data[item.showName]}}</van-button>
+                </view>
+            </view>
+        </block>
+        <view wx:if="{{dateRange}}" class="groud">
+            <view class="label">
+                日期范围
+            </view>
+            <view class="content time">
+                <picker mode="date" bindchange='changeDate' data-name="startdate">
+                    <view class="tbox">{{startdate||'开始日期'}}</view>
+                </picker>
+                <view class="partition">-</view>
+                <picker mode="date" bindchange='changeDate' data-name="enddate">
+                    <view class="tbox">{{enddate||"结束日期"}}</view>
+                </picker>
+            </view>
+        </view>
+        <slot />
+    </Yl_ListBox>
+    <view class="footer" bindtap="onClick">
+        <van-button data-name="close" custom-class='v-but'>关闭</van-button>
+        <van-button data-name="reset" custom-class='v-but'>重置</van-button>
+        <van-button data-name="confirm" custom-class='v-but confirm'>确定</van-button>
+    </view>
+</van-popup>