添加组件

miniprogram/pages/components/sort-plugin/sort-plugin.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "popup-plugin": "/pages/components/popup-plugin/popup-plugin"
+  }
+}

miniprogram/pages/components/sort-plugin/sort-plugin.ts

@@ -0,0 +1,39 @@
+import { getDataSet } from '@/utils/util';
+
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    options: Array,
+    value: null,
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    visible: false,
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    open() {
+      this.setData({ visible: true });
+    },
+    onClose() {
+      this.setData({ visible: false });
+    },
+    select(e: any) {
+      const dataset = getDataSet(e);
+      const index = dataset.index;
+      const item = this.data.options[index];
+      const order = dataset.order;
+
+      this.triggerEvent('ok', { value: item.value + ' ' + order });
+      this.onClose();
+    },
+  },
+});

miniprogram/pages/components/sort-plugin/sort-plugin.wxml

@@ -0,0 +1,18 @@
+<t-button bind:tap="open" size="small" variant="outline" theme="primary">
+  排序
+  <t-icon slot="suffix" name="{{ visible ? 'chevron-up' : 'chevron-down'}}" size="34rpx" />
+</t-button>
+
+<popup-plugin visible="{{ visible }}" title="排序" bind:close="onClose">
+  <t-cell title="{{item.label}}" wx:for="{{options}}" wx:key="value">
+    <view slot="note" style="display: flex;align-items: center;">
+      <t-button size="small" theme="primary"
+        variant="{{value != (item.value || '') + ' asc' ? 'outline': 'base'}}"
+        style="margin-right: 24rpx;" bind:tap="select" data-index="{{index}}" data-order="asc">升序
+      </t-button>
+      <t-button size="small" theme="primary" variant="outline"
+        variant="{{value != (item.value || '') + ' desc' ? 'outline': 'base'}}" bind:tap="select"
+        data-index="{{index}}" data-order="desc">降序</t-button>
+    </view>
+  </t-cell>
+</popup-plugin>

miniprogram/pages/components/sort-plugin/sort-plugin.wxss

@@ -0,0 +1,9 @@
+.sort-plugin {
+  display: inline-flex;
+  align-items: center;
+  height: 64rpx;
+  box-sizing: border-box;
+  border: 1rpx solid #ddd;
+  border-radius: 8rpx;
+  padding: 0 16rpx;
+}