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

mini-program/components/filter/index.js

@@ -0,0 +1,84 @@
+Component({
+  externalClasses: ['wr-class'],
+
+  options: {
+    multipleSlots: true,
+  },
+
+  properties: {
+    overall: {
+      type: Number,
+      value: 1,
+      observer(overall) {
+        this.setData({
+          overall,
+        });
+      },
+    },
+    layout: {
+      type: Number,
+      value: 1,
+      observer(layout) {
+        this.setData({
+          layout,
+        });
+      },
+    },
+    sorts: {
+      type: String,
+      value: '',
+      observer(sorts) {
+        this.setData({
+          sorts,
+        });
+      },
+    },
+    color: {
+      type: String,
+      value: '#FA550F',
+    },
+  },
+
+  data: {
+    layout: 1,
+    overall: 1,
+    sorts: '',
+  },
+
+  methods: {
+    onChangeShowAction() {
+      const { layout } = this.data;
+      const nextLayout = layout === 1 ? 0 : 1;
+      this.triggerEvent('change', { ...this.properties, layout: nextLayout });
+    },
+
+    handlePriseSort() {
+      const { sorts } = this.data;
+      this.triggerEvent('change', {
+        ...this.properties,
+        overall: 0,
+        sorts: sorts === 'desc' ? 'asc' : 'desc',
+      });
+    },
+
+    open() {
+      this.triggerEvent('showFilterPopup', {
+        show: true,
+      });
+    },
+
+    onOverallAction() {
+      const { overall } = this.data;
+      const nextOverall = overall === 1 ? 0 : 1;
+      const nextData = {
+        sorts: '',
+        prices: [],
+      };
+      this.triggerEvent('change', {
+        ...this.properties,
+        ...nextData,
+        overall: nextOverall,
+      });
+    },
+  },
+});

mini-program/components/filter/index.json

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

mini-program/components/filter/index.wxml

@@ -0,0 +1,37 @@
+<!-- 过滤组件 -->
+<view class="wr-class filter-wrap">
+	<view class="filter-left-content">
+		<view class="filter-item {{overall === 1 ? 'filter-active-item' : ''}}" bindtap="onOverallAction">
+			综合
+		</view>
+		<view class="filter-item" bind:tap="handlePriseSort">
+			<text style="color: {{sorts !== '' ? color : '' }}">价格</text>
+			<view class="filter-price">
+				<t-icon
+				  prefix="wr"
+				  name="arrow_drop_up"
+				  size="18rpx"
+				  style="color:{{sorts === 'asc' ? color : '#bbb'}}"
+				/>
+				<t-icon
+				  prefix="wr"
+				  name="arrow_drop_down"
+				  size="18rpx"
+				  style="color:{{sorts === 'desc' ? color : '#bbb'}}"
+				/>
+			</view>
+		</view>
+		<view class="filter-item {{prices.length ? 'filter-active-item' : ''}}" bindtap="open" data-index="5">
+			筛选
+			<t-icon
+			  name="filter"
+			  prefix="wr"
+			  color="#333"
+			  size="32rpx"
+			/>
+		</view>
+	</view>
+</view>
+<!-- 筛选弹框 -->
+<slot name="filterPopup" />
+

mini-program/components/filter/index.wxss

@@ -0,0 +1,50 @@
+.filter-wrap {
+  width: 100%;
+  height: 88rpx;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  background: #fff;
+}
+
+.filter-right-content {
+  height: 100%;
+  flex-basis: 100rpx;
+  text-align: center;
+  line-height: 88rpx;
+}
+
+.filter-left-content {
+  height: 100%;
+  display: flex;
+  flex-grow: 2;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+}
+
+.filter-left-content .filter-item {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26rpx;
+  line-height: 36rpx;
+  font-weight: 400;
+  color: rgba(51, 51, 51, 1);
+}
+
+.filter-left-content .filter-item .filter-price {
+  display: flex;
+  flex-direction: column;
+  margin-left: 6rpx;
+  justify-content: space-between;
+}
+
+.filter-left-content .filter-item .wr-filter {
+  margin-left: 8rpx;
+}
+
+.filter-left-content .filter-active-item {
+  color: #fa550f;
+}