通过微信开发者工具 商城模板 创建新小程序

mini-program/components/filter-popup/index.js

@@ -0,0 +1,36 @@
+Component({
+  externalClasses: ['wr-class'],
+
+  options: {
+    multipleSlots: true,
+  },
+
+  properties: {
+    show: {
+      type: Boolean,
+      observer(show) {
+        this.setData({ visible: show });
+      },
+    },
+    closeBtn: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  data: { visible: false },
+
+  methods: {
+    reset() {
+      this.triggerEvent('reset');
+    },
+    confirm() {
+      this.triggerEvent('confirm');
+    },
+    close() {
+      this.triggerEvent('showFilterPopupClose');
+
+      this.setData({ visible: false });
+    },
+  },
+});

mini-program/components/filter-popup/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "t-popup": "tdesign-miniprogram/popup/popup"
+    }
+}

mini-program/components/filter-popup/index.wxml

@@ -0,0 +1,18 @@
+<t-popup
+ visible="{{visible}}"
+ placement="right"
+ bind:visible-change="close"
+ data-index="5"
+ close-btn="{{closeBtn}}"
+>
+	<view class="content">
+		<slot name="filterSlot" />
+		<view class="filter-btns-wrap">
+			<view class="filter-btn btn-reset" bind:tap="reset">重置</view>
+			<view class="filter-btn btn-confirm" bind:tap="confirm" data-index="5">
+				确定
+			</view>
+		</view>
+	</view>
+</t-popup>
+

mini-program/components/filter-popup/index.wxss

@@ -0,0 +1,39 @@
+.content .filter-btns-wrap {
+  width: 100%;
+  position: absolute;
+  bottom: calc(20rpx + env(safe-area-inset-bottom));
+  display: flex;
+  flex-direction: row;
+  border-radius: 10rpx 0 0 10rpx;
+  padding: 16rpx 32rpx;
+  border-top: 1rpx solid #e5e5e5;
+  box-sizing: border-box;
+}
+
+.filter-btn {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 28rpx;
+  font-weight: 500;
+  height: 80rpx;
+}
+
+.btn-reset {
+  color: #fa4126;
+  background: rgba(255, 255, 255, 1);
+  position: relative;
+  border: 1rpx solid #fa4126;
+  border-radius: 84rpx 0 0 84rpx;
+}
+
+.btn-confirm {
+  border-radius: 0 84rpx 84rpx 0;
+  border: 1rpx solid #fa4126;
+}
+
+.btn-confirm {
+  color: #fff;
+  background: #fa4126;
+}