订单搜索

ghsApp/src/admin/home/order.vue

@@ -26,7 +26,11 @@
       </view>
       <view class="search-container">
         <AppSearchModule ref="appSearch" placeholder="这里搜索" @input="searchFn" />
-        <view v-if="customId != 0" class="search-clear-overlay" @click.stop="clearSearch">清空搜索</view>
+        <view v-if="customId != 0" class="search-clear-overlay" @click.stop="clearSearch">清空</view>
+      </view>
+      <view class="filter-btn-wrap">
+        <button class="admin-button-com big filter-btn" @click="openFilterPanel">筛选</button>
+        <view v-if="hasActiveFilters" class="filter-dot"></view>
       </view>
       <view>
         <button class="admin-button-com big" style="width: 120upx; margin-left:16upx;margin-top:10upx;" @click="getMore()">更多</button>
@@ -77,6 +81,79 @@
 
     <NotLogin></NotLogin>
 
+    <view v-if="showFilterPanel" class="filter-overlay" @click="closeFilterPanel">
+      <view class="filter-panel" @click.stop>
+        <view class="filter-header">筛选订单</view>
+        <view class="filter-section">
+          <view class="filter-title">在线支付</view>
+          <view class="filter-options">
+            <view
+              v-for="(item, index) in onlinePayOptions"
+              :key="index"
+              class="filter-option"
+              :class="{ active: filterOnlinePay === item.value }"
+              @click="onSelectOnlinePay(index)"
+            >
+              {{ item.label }}
+            </view>
+          </view>
+        </view>
+        <view class="filter-section">
+          <view class="filter-title">预订单</view>
+          <view class="filter-options">
+            <view
+              v-for="(item, index) in bookOptions"
+              :key="index"
+              class="filter-option"
+              :class="{ active: filterBook === item.value }"
+              @click="onSelectBook(index)"
+            >
+              {{ item.label }}
+            </view>
+          </view>
+        </view>
+        <view class="filter-section">
+          <view class="filter-title">开单员工</view>
+          <view class="filter-options">
+            <view
+              class="filter-option"
+              :class="{ active: filterShopAdminId === 0 }"
+              @click="onSelectStaff(0)"
+            >
+              全部
+            </view>
+            <view
+              v-for="(item, index) in staffList"
+              :key="index"
+              class="filter-option"
+              :class="{ active: filterShopAdminId === item.id }"
+              @click="onSelectStaff(item.id)"
+            >
+              {{ item.name }}
+            </view>
+          </view>
+        </view>
+        <view class="filter-section">
+          <view class="filter-title">配送方式</view>
+          <view class="filter-options">
+            <view
+              v-for="(item, index) in sendTypeOptions"
+              :key="index"
+              class="filter-option"
+              :class="{ active: filterSendType === item.value }"
+              @click="onSelectSendType(index)"
+            >
+              {{ item.label }}
+            </view>
+          </view>
+        </view>
+        <view class="filter-actions">
+          <button class="filter-action-btn clear-btn" @click="clearFilters">重置</button>
+          <button class="filter-action-btn confirm-btn" @click="confirmFilters">确定</button>
+        </view>
+      </view>
+    </view>
+
     <uni-popup ref="rightShowMore" background-color="#fff" type="center" :animation="true" class="class-popup-style">
       <view
         style="
@@ -91,7 +168,6 @@
           overflow: auto;
         "
       >
-        <view style="width: 100vw"><button @click="clearSearch()">清空搜索</button></view>
         <view style="width: 100vw; margin-top: 20upx"><button @click="printWlList()">打印物流列表</button></view>
         <view style="width: 100vw; margin-top: 35upx"><button @click="closeMore()">取消</button></view>
       </view>
@@ -119,6 +195,7 @@ import {
   shareSingleOrderOnApp
 } from '@/utils/orderShare';
 import { getList } from '@/api/member';
+import { getStaffList } from '@/api/staff';
 export default {
   name: 'order',
   components: {
@@ -134,7 +211,10 @@ export default {
   mixins: [list],
   computed: {
     ...mapGetters(['getLoginInfo', 'getDictionariesInfo']),
-    ...mapGetters({ dictInfo: 'getDictionariesInfo' })
+    ...mapGetters({ dictInfo: 'getDictionariesInfo' }),
+    hasActiveFilters() {
+      return this.filterOnlinePay !== -1 || this.filterBook !== -1 || this.filterShopAdminId !== 0 || this.filterSendType !== -1;
+    }
   },
   data() {
     return {
@@ -197,7 +277,31 @@ export default {
       showSearch: false,
       customId: 0,
       pendingSharePayload: null,
-      singleShareOrderId: 0
+      singleShareOrderId: 0,
+      showFilterPanel: false,
+      staffList: [],
+      filterShopAdminId: 0,
+      filterBook: -1,
+      filterOnlinePay: -1,
+      filterSendType: -1,
+      onlinePayOptions: [
+        { label: '全部', value: -1 },
+        { label: '在线支付', value: 2 },
+        { label: '线下支付', value: 1 }
+      ],
+      bookOptions: [
+        { label: '全部', value: -1 },
+        { label: '预订单', value: 1 },
+        { label: '普通单', value: 0 }
+      ],
+      sendTypeOptions: [
+        { label: '全部', value: -1 },
+        { label: '送货上门', value: 0 },
+        { label: '到店自取', value: 1 },
+        { label: '跑腿送货', value: 2 },
+        { label: '发物流', value: 3 },
+        { label: '发快递', value: 4 }
+      ]
     };
   },
   onPullDownRefresh() {
@@ -335,6 +439,55 @@ export default {
       });
     },
     init() {
+      this.loadStaffList();
+      this.getOrderList();
+    },
+    loadStaffList() {
+      getStaffList().then((res) => {
+        if (res.code == 1) {
+          this.staffList = res.data.list || [];
+        }
+      });
+    },
+    openFilterPanel() {
+      this.showFilterPanel = true;
+    },
+    closeFilterPanel() {
+      this.showFilterPanel = false;
+    },
+    onSelectOnlinePay(index) {
+      const item = this.onlinePayOptions[index];
+      if (item) {
+        this.filterOnlinePay = item.value;
+      }
+    },
+    onSelectBook(index) {
+      const item = this.bookOptions[index];
+      if (item) {
+        this.filterBook = item.value;
+      }
+    },
+    onSelectStaff(id) {
+      this.filterShopAdminId = id;
+    },
+    onSelectSendType(index) {
+      const item = this.sendTypeOptions[index];
+      if (item) {
+        this.filterSendType = item.value;
+      }
+    },
+    clearFilters() {
+      this.filterOnlinePay = -1;
+      this.filterBook = -1;
+      this.filterShopAdminId = 0;
+      this.filterSendType = -1;
+      this.closeFilterPanel();
+      this.resetList();
+      this.getOrderList();
+    },
+    confirmFilters() {
+      this.closeFilterPanel();
+      this.resetList();
       this.getOrderList();
     },
     printOrder(item) {
@@ -386,6 +539,10 @@ export default {
       this.searchTime = '';
       this.startTime = '';
       this.endTime = '';
+      this.filterOnlinePay = -1;
+      this.filterBook = -1;
+      this.filterShopAdminId = 0;
+      this.filterSendType = -1;
       this.resetList();
       this.getOrderList();
     },
@@ -413,7 +570,11 @@ export default {
         status: this.tabs[this.tabIndex].id,
         page: this.list.page,
         searchType: this.searchType,
-        customId: this.customId
+        customId: this.customId,
+        shopAdminId: this.filterShopAdminId,
+        book: this.filterBook,
+        onlinePay: this.filterOnlinePay,
+        sendType: this.filterSendType
       }).then((res) => {
         this.completes(res);
         if (this.$util.isEmpty(res.data)) {
@@ -531,6 +692,105 @@ page {
   border: 1upx solid #3385FF;
   background-color: rgba(255, 255, 255, 0.9);
 }
+.filter-btn-wrap {
+  position: relative;
+  margin-left: 16upx;
+  margin-top: 10upx;
+}
+.filter-btn {
+  width: 120upx;
+}
+.filter-dot {
+  position: absolute;
+  top: 6upx;
+  right: 6upx;
+  width: 14upx;
+  height: 14upx;
+  border-radius: 50%;
+  background-color: #3385ff;
+}
+.filter-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999999;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.filter-panel {
+  width: 100%;
+  max-height: 90vh;
+  overflow-y: auto;
+  border-radius: 0 0 24upx 24upx;
+  background: #fff;
+}
+.filter-header {
+  padding: 24upx 0;
+  text-align: center;
+  color: #333;
+  font-size: 32upx;
+  font-weight: 700;
+  border-bottom: 1upx solid #f0f0f0;
+}
+.filter-section {
+  padding: 30upx 40upx;
+  border-bottom: 1upx solid #f0f0f0;
+}
+.filter-title {
+  margin-bottom: 20upx;
+  color: #333;
+  font-size: 28upx;
+  font-weight: 700;
+}
+.filter-options {
+  display: flex;
+  flex-wrap: wrap;
+}
+.filter-option {
+  min-width: 120upx;
+  padding: 15upx 28upx;
+  margin-right: 18upx;
+  margin-top: 18upx;
+  border: 1upx solid #dce2e0;
+  border-radius: 28upx;
+  color: #60666d;
+  background: #fff;
+  font-size: 26upx;
+  text-align: center;
+}
+.filter-option.active {
+  color: #3385ff;
+  border-color: #3385ff;
+  background: #eef5ff;
+  font-weight: 700;
+}
+.filter-actions {
+  display: flex;
+  padding: 30upx 40upx 40upx;
+}
+.filter-action-btn {
+  flex: 1;
+  height: 80upx;
+  line-height: 80upx;
+  font-size: 28upx;
+  border-radius: 40upx;
+}
+.filter-action-btn::after {
+  border: none;
+}
+.clear-btn {
+  margin-right: 20upx;
+  color: #60666d;
+  background: #f5f5f5;
+}
+.confirm-btn {
+  color: #fff;
+  background: #3385ff;
+}
 .upload-confirm-wrap {
   max-height: 600upx;
   overflow-y: auto;