订单列表

src/views/orderList/FilterButton.vue

@@ -1,11 +1,36 @@
-<script setup>
-
-</script>
-
 <template>
-
+  <div class="status-filter" style="display: flex; justify-content: space-between">
+    <div class="status-filter" style="display: flex; justify-content: space-between">
+      <div>
+        <button
+          v-for="item in filterItems"
+          :key="item.value"
+          class="filter-btn"
+          :class="{ active: activeFilter === item.value }"
+          style="margin-right: 10px"
+          @click="handleFilterChange(item.value)"
+        >
+          {{ item.label }} ({{ item.sum }})
+        </button>
+      </div>
+    </div>
+  </div>
 </template>
 
-<style scoped lang="scss">
+<script setup>
+const filterItems = [
+  { label: '全部订单', value: 'all', sum: originalData.length },
+  { label: '待签署', value: 'pending_sign', sum: originalData.filter((item) => item.orderStatus === '待签署').length },
+  { label: '待付款', value: 'pending_payment', sum: originalData.filter((item) => item.orderStatus === '待付款').length },
+  { label: '已取消', value: 'cancelled', sum: originalData.filter((item) => item.orderStatus === '已取消').length },
+  { label: '已完成', value: 'completed', sum: originalData.filter((item) => item.orderStatus === '已完成').length },
+  { label: '已退款', value: 'refunded', sum: originalData.filter((item) => item.orderStatus === '已退款').length }
+];
+const handleFilterChange = (value) => {
+  activeFilter.value = value;
+  // 这里可以添加根据筛选条件重新获取数据的逻辑
+  getList();
+};
+</script>
 
-</style>
+<style scoped lang="scss"></style>