uptada

f/web-kboss/src/views/customer/orderManagement/index.vue

@@ -1,21 +1,19 @@
 <template>
   <div class="orderManagement">
-    <!-- 搜索框 -->
+    <!-- 移动端搜索框 -->
     <el-card class="mobileCaed" v-if="isMobile">
       <el-row :span="24">
         <el-col :span="24" class="search">
           <el-select v-model="select" filterable @change="selectSearch" class="searchSelect" placeholder="请选择"
             size="small">
-            <!-- <el-option label="全部" value="all" /> -->
-
             <el-option label="订单号" value="id" />
             <el-option label="订单日期" value="order_date" />
             <el-option label="订单状态:未支付" value="0" />
             <el-option label="订单状态:已支付" value="1" />
             <el-option label="订单状态:已取消" value="3" />
           </el-select>
-          <el-input size="small" v-show="this.select == 'id'" placeholder="请输入内容" class="input-with-select" @input="input"
+          <el-input size="small" v-show="this.select == 'id'" placeholder="请输入内容" class="input-with-select"
-            v-model="searchValue" clearable></el-input>
+            @input="input" v-model="searchValue" clearable></el-input>
         </el-col>
       </el-row>
       <el-row>
@@ -29,102 +27,193 @@
           </div>
         </el-col>
       </el-row>
+
+      <!-- 筛选状态显示 -->
+      <el-row v-if="hasActiveFilters" style="margin-top: 5px;">
+        <el-col :span="24">
+          <div class="filter-status">
+            <span class="filter-label">当前筛选: </span>
+            <el-tag v-if="businessOpFilter" size="small" closable @close="clearBusinessOpFilter">
+              {{ getOrderTypeConfig(businessOpFilter).text }}
+            </el-tag>
+            <el-tag v-if="orderStatusFilter" size="small" closable @close="clearOrderStatusFilter"
+                    :type="orderStatusFilter === '1' ? 'success' : orderStatusFilter === '0' ? 'danger' : 'info'">
+              {{ getOrderStatusText(orderStatusFilter) }}
+            </el-tag>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 移动端类型筛选 -->
+      <el-row style="margin-top: 10px;">
+        <el-col :span="24">
+          <div class="mobile-filter">
+            <span class="filter-label">类型:</span>
+            <el-button
+              v-for="(config, type) in orderTypes"
+              :key="type"
+              size="mini"
+              :type="businessOpFilter === type ? config.buttonType : ''"
+              @click="handleBusinessOpFilter(type)">
+              {{ config.text }}
+            </el-button>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 移动端状态筛选 -->
+      <el-row style="margin-top: 5px;">
+        <el-col :span="24">
+          <div class="mobile-filter">
+            <span class="filter-label">状态:</span>
+            <el-button
+              v-for="status in orderStatuses"
+              :key="status.value"
+              size="mini"
+              :type="orderStatusFilter === status.value ? status.buttonType : ''"
+              @click="handleOrderStatusFilter(status.value)">
+              {{ status.text }}
+            </el-button>
+          </div>
+        </el-col>
+      </el-row>
+
       <el-row class="allPrice">
         <el-col :span="24">
           <span class="price" style="font-size: 18px">支付总金额:¥ {{ all_price }}</span>
-          <el-button type="primary" class="searchSelectIcon" @click="set">重置</el-button>
+          <el-button type="primary" class="searchSelectIcon" @click="resetAllFilters">重置</el-button>
         </el-col>
       </el-row>
     </el-card>
 
-    <el-card class="pcCard" v-else style="height:80px;display: flex;justify-content: flex-start;align-items: center;">
+    <!-- PC端头部 -->
-      <el-row :span="24">
+    <el-card class="pcCard" v-else>
-        <el-col :span="24" class="search" style="display: flex;justify-content: flex-start;align-items: center">
+      <div class="header-container">
-          <el-select v-model="select" filterable @change="selectSearch" class="searchSelect" placeholder="请选择"
+        <div class="search-group">
-            width="130px" size="small">
+          <el-select v-model="select" filterable @change="selectSearch" class="search-select" placeholder="请选择"
-            <!-- <el-option label="全部" value="all" /> -->
+            size="small" style="width: 100px">
             <el-option label="订单号" value="id" />
             <el-option label="订单日期" value="order_date" />
-            <el-option label="订单状态:未支付" value="0" />
+            <!-- <el-option label="订单状态:未支付" value="0" />
             <el-option label="订单状态:已支付" value="1" />
-            <el-option label="订单状态:已取消" value="3" />
+            <el-option label="订单状态:已取消" value="3" /> -->
           </el-select>
-          <el-input style="width: 150px;margin-left:10px;" size="small" v-show="this.select == 'id'" placeholder="请输入内容"
+
-            class="input-with-select" @input="input" v-model="searchValue" clearable></el-input>
+          <el-input size="small" v-show="select == 'id'" placeholder="请输入内容" class="search-input" @input="input"
-          <div v-if="select == 'order_date'">
+            v-model="searchValue" clearable style="width: 180px; margin-left: 10px">
-            <div style="display:flex;margin-left:10px;">
+          </el-input>
-              <el-date-picker size="small" @change="change" v-model="value1" type="daterange" range-separator="至"
+
-                start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
+          <div v-if="select == 'order_date'" class="date-picker-container">
-              </el-date-picker>
+            <el-date-picker size="small" @change="change" v-model="value1" type="daterange" range-separator="至"
+              start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
+              style="width: 240px; margin-left: 10px">
+            </el-date-picker>
+          </div>
+        </div>
+
+        <!-- 筛选状态显示 -->
+        <div v-if="hasActiveFilters" class="filter-status-pc">
+          <span class="filter-label">当前筛选: </span>
+          <el-tag v-if="businessOpFilter" size="small" closable @close="clearBusinessOpFilter">
+            {{ getOrderTypeConfig(businessOpFilter).text }}
+          </el-tag>
+          <el-tag v-if="orderStatusFilter" size="small" closable @close="clearOrderStatusFilter"
+                  :type="orderStatusFilter === '1' ? 'success' : orderStatusFilter === '0' ? 'danger' : 'info'">
+            {{ getOrderStatusText(orderStatusFilter) }}
+          </el-tag>
+        </div>
+
+        <div class="stats-group">
+          <div class="stat-item">
+            <span class="stat-label">累计支付总金额:</span>
+            <div class="stat-value">
+              <el-skeleton animated v-if="all_price_show" :rows="1" style="width: 80px" />
+              <span v-else class="price-text">¥ {{ all_price || '0.00' }}</span>
             </div>
           </div>
-          <el-button type="primary" style="padding: 0 5px;height: 30px; margin-left:10px;" class="searchSelectIcon"
+          <div class="stat-item">
-            @click="set">重置
+            <span class="stat-label">累计优惠总金额:</span>
-          </el-button>
+            <div class="stat-value">
-          <span
+              <el-skeleton animated v-if="all_price_show" :rows="1" style="width: 80px" />
-            style="font-size: 16px;padding-left:15px;display: flex;justify-content: center;align-items: center">支付总金额:
+              <span v-else class="price-text">¥ {{ all_discount || '0.00' }}</span>
-            <div style="width: 250px;line-height: 36px">
-              <el-skeleton animated v-if="all_price_show" rows="2" />
-              <span v-else> ¥ {{ all_price }}</span>
             </div>
+          </div>
+        </div>
 
-          </span>
+        <!-- 类型筛选 -->
-        </el-col>
+        <div class="type-filter">
-      </el-row>
+          <span>订单类型筛选：</span>
+          <el-button
+            v-for="(config, type) in orderTypes"
+            :key="type"
+            :type="businessOpFilter === type ? config.buttonType : ''"
+            @click="handleBusinessOpFilter(type)">
+            {{ config.text }}
+          </el-button>
+        </div>
+
+        <!-- 状态筛选 -->
+        <div class="status-filter">
+          <span>订单状态筛选：</span>
+          <el-button
+            v-for="status in orderStatuses"
+            :key="status.value"
+            :type="orderStatusFilter === status.value ? status.buttonType : ''"
+            @click="handleOrderStatusFilter(status.value)">
+            {{ status.text }}
+          </el-button>
+        </div>
+
+        <!-- 重置按钮 -->
+        <div class="reset">
+          <el-button type="primary" size="small" class="reset-btn" @click="resetAllFilters"
+            style="margin-left: 10px; padding: 7px 15px">
+            重置
+          </el-button>
+        </div>
+      </div>
     </el-card>
-    <!-- 表格 -->
+
+    <!-- 表格部分 -->
     <el-card class="orderList">
-      <el-table border :data="tableData" class="table" height="calc(100vh - 280px)" v-loading="all_price_show">
+      <el-table border :data="tableData" class="table" height="calc(100vh - 264px)" v-loading="all_price_show">
-        <!-- 序号 -->
+        <el-table-column label="序号" width="180">
-        <el-table-column label="序号" width="80">
           <template slot-scope="scope">
-            {{ scope.$index + 1 }}
+            {{ (pagination.page - 1) * pagination.size + scope.$index + 1 }}
           </template>
         </el-table-column>
-        <!-- 订单名称 -->
+        <el-table-column align="center" min-width="180" header-align="center" prop="product_name" label="产品名称">
-        <el-table-column align="center" min-width="180" header-align="center" prop="source" label="产品名称">
         </el-table-column>
-        <el-table-column align="center" min-width="300" header-align="center" prop="id" label="订单号"></el-table-column>
+        <el-table-column align="center" min-width="180" header-align="center" prop="id" label="订单号"></el-table-column>
-        <el-table-column align="center" header-align="center" label="订单原价">
+        <el-table-column align="center" header-align="center" label="订单原价" prop="list_price">
           <template slot-scope="scope">
-            <!--                <div style="padding-left: 35px">-->
+            ￥{{ scope.row.list_price }}
-            ￥{{ scope.row.countprice }}
-            <!--                </div>-->
           </template>
         </el-table-column>
         <el-table-column align="center" header-align="center" label="订单折后价">
           <template slot-scope="scope">
             {{ scope.row.amount ? "￥" + scope.row.amount : "-" }}
           </template>
-
         </el-table-column>
         <el-table-column align="center" header-align="center" label="订单类型">
           <template slot-scope="scope">
-            <!--            {{ orderTypeMap(scope.row.business_op) }}-->
+            <el-tag :style="{ padding: '0 8px' }" :type="getOrderTypeConfig(scope.row.business_op).type">
-            <el-tag :style="{ padding: '0 8px' }" :type="orderTypeMap(scope.row.business_op).type">
+              {{ getOrderTypeConfig(scope.row.business_op).text }}
-              {{ orderTypeMap(scope.row.business_op).text }}
             </el-tag>
           </template>
         </el-table-column>
-
         <el-table-column align="center" header-align="center" label="订单状态">
           <template slot-scope="scope">
-            <el-tag v-if="scope.row.order_status === '0'" style="padding: 0 5px" type="warning" effect="dark">
+            <el-tag :style="{ padding: '0 5px' }" :type="getOrderStatusConfig(scope.row.order_status).tagType" effect="dark">
-              {{ getResult(scope.row.order_status) }}
+              {{ getOrderStatusConfig(scope.row.order_status).text }}
-            </el-tag>
-            <el-tag v-else-if="scope.row.order_status === '1'" style="padding: 0 5px" type="success" effect="dark">
-              {{ getResult(scope.row.order_status) }}
-            </el-tag>
-            <el-tag v-else style="padding: 0 5px" type="info" effect="dark">
-              {{ getResult(scope.row.order_status) }}
             </el-tag>
           </template>
         </el-table-column>
         <el-table-column align="center" header-align="center" prop="order_date" label="订单日期"></el-table-column>
         <el-table-column align="center" header-align="center" label="操作">
           <template slot-scope="scope">
-            <el-button size="small" v-if="scope.row.order_status === '0'" type="primary" @click="orderDetails(scope.row)"
+            <el-button size="small" v-if="scope.row.order_status === '0'" type="primary"
-              style="padding: 8px 15px">去支付
+              @click="orderDetails(scope.row)" style="padding: 8px 15px">去支付
             </el-button>
             <el-button size="small" v-else type="primary" @click="orderDetails(scope.row)" style="padding: 8px">
               查看详情
@@ -133,12 +222,12 @@
         </el-table-column>
       </el-table>
 
-      <!-- 分 页-->
+      <!-- 分页 -->
       <div class="page">
-        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-        :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
+          :current-page="pagination.page" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.size"
-        :total="400">
+          layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
-      </el-pagination>
+        </el-pagination>
       </div>
     </el-card>
   </div>
@@ -148,15 +237,19 @@
 import { getOrderAPI } from "@/api/product/product";
 
 export default {
+  name: 'OrderManagement',
   data() {
     return {
-
+      pagination: {
-      all_price_show: true,//金额显示骨架屏
+        page: 1,
-      // 获取用户代理字P串
+        size: 10,
+        total: 0
+      },
+      all_price_show: true,
       userAgent: window.navigator.userAgent,
-      // 判断是否为移动设备
       isMobile: false,
       all_price: '',
+      all_discount: '0.00',
       showDate: false,
       pickerOptions: {
         shortcuts: [{
@@ -188,11 +281,30 @@ export default {
       value1: '',
       select: "",
       tableData: [],
-      page: 1,
       searchValue: null,
       order_status_select: null,
       userId: sessionStorage.getItem("userId"),
       dialogVisible: false,
+
+      // 订单类型筛选
+      businessOpFilter: null,
+      // 订单状态筛选
+      orderStatusFilter: null,
+
+      // 订单类型配置
+      orderTypes: {
+        'BUY_REVERSE': { text: '退费', type: 'danger', buttonType: 'danger' },
+        'RENEW': { text: '续费', type: 'primary', buttonType: 'primary' },
+        'BUY': { text: '购买', type: 'success', buttonType: 'success' }
+      },
+
+      // 订单状态配置
+      orderStatuses: [
+        { value: '1', text: '已支付', buttonType: 'success', tagType: 'success' },
+        { value: '0', text: '未支付', buttonType: 'danger', tagType: 'warning' },
+        { value: '3', text: '已取消', buttonType: 'info', tagType: 'info' }
+      ],
+
       orderDetail: {
         order_goods: [
           {
@@ -207,82 +319,31 @@ export default {
       },
     };
   },
+  computed: {
+    // 检查是否有活跃的筛选条件
+    hasActiveFilters() {
+      return this.businessOpFilter || this.orderStatusFilter;
+    }
+  },
   created() {
     this.getOrder();
     this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent);
   },
   methods: {
-    // 订单类型映射
+    // 获取订单类型配置
-    orderTypeMap(type) {
+    getOrderTypeConfig(type) {
-      switch (type) {
+      return this.orderTypes[type] || { text: "-", type: "primary", buttonType: "" };
-        case 'BUY_REVERSE':
-          // return <el-tag type="danger"></el-tag>;
-          return { text: "退款", type: "danger" };
-        case 'RENEW':
-          return { text: "续费", type: "primary" };
-        case 'BUY':
-          return { text: "购买", type: "success" };
-        default:
-          return { text: "-", type: "primary" };
-      }
     },
-    getOrder(data) {//获取订单
-      let params = {};
-      if (this.select) {
-        if (this.select === 'id' && this.searchValue) {
-          params['type'] = '200'
-          params['id'] = this.searchValue
-        }
-        if (this.select === 'order_date' && this.value1) {
-          params['start_time'] = data[0]
-          params['end_time'] = data[1]
-          params['type'] = '200'
-        }
-        if (this.select == '0') {
-          params['type'] = '200'
-          params['order_status'] = '0'
-        }
-        if (this.select == '1') {
-          params['type'] = '200'
-          params['order_status'] = '1'
-        }
-        if (this.select == '3') {
-          params['type'] = '200'
-          params['order_status'] = '3'
-        }
-      }
-      getOrderAPI(params).then((res) => {
-        this.all_price_show = false
-        if (res.status == true) {
-          this.tableData = res.data;
-          this.all_price = res.all_price
-        }
-      });
-    },
-    change(e) {//选择时间
-      this.value1 = e
-      this.getOrder(e)
-    },
-    set() {//重置
-      this.value1 = null
-      this.searchValue = null
-      this.select = null
-      this.getOrder()
 
+    // 获取订单状态配置
+    getOrderStatusConfig(status) {
+      const statusConfig = this.orderStatuses.find(s => s.value === status);
+      return statusConfig || { text: this.getOrderStatusText(status), tagType: 'info' };
     },
-    selectSearch(e) { //下拉搜索事件
+
-      this.select = e
+    // 获取订单状态文本
-      this.getOrder(e)
+    getOrderStatusText(status) {
-    },
+      switch (status) {
-    input(e) {//input事件
-      this.searchValue = e
-      this.getOrder(e)
-    },
-    orderDetails(row) {  //查看订单详情
-      this.$router.push({ name: "orderDetil", query: { id: row.id } });
-    },
-    getResult(data) {
-      switch (data) {
         case "0":
           return "未支付";
         case "1":
@@ -293,36 +354,197 @@ export default {
           return "已取消";
         case "4":
           return "后付费";
+        default:
+          return "未知状态";
       }
     },
-  },
+
-  handleSizeChange(val) {
+    // 处理订单类型筛选
-    console.log(`每页 ${val} 条`);
+    handleBusinessOpFilter(type) {
-  },
+      console.log("订单类型筛选:", type, this.getOrderTypeConfig(type).text);
-  handleCurrentChange(val) {
+
-    console.log(`当前页: ${val}`);
+      // 如果点击已经选中的按钮，则取消筛选
+      if (this.businessOpFilter === type) {
+        this.businessOpFilter = null;
+      } else {
+        this.businessOpFilter = type;
+      }
+      this.pagination.page = 1;
+      this.getOrder();
+    },
+
+    // 清除订单类型筛选
+    clearBusinessOpFilter() {
+      this.businessOpFilter = null;
+      this.pagination.page = 1;
+      this.getOrder();
+    },
+
+    // 处理订单状态筛选
+    handleOrderStatusFilter(status) {
+      console.log("订单状态筛选:", status, this.getOrderStatusText(status));
+
+      // 如果点击已经选中的按钮，则取消筛选
+      if (this.orderStatusFilter === status) {
+        this.orderStatusFilter = null;
+      } else {
+        this.orderStatusFilter = status;
+      }
+      this.pagination.page = 1;
+      this.getOrder();
+    },
+
+    // 清除订单状态筛选
+    clearOrderStatusFilter() {
+      this.orderStatusFilter = null;
+      this.pagination.page = 1;
+      this.getOrder();
+    },
+
+    // 重置所有筛选条件
+    resetAllFilters() {
+      this.value1 = null;
+      this.searchValue = null;
+      this.select = null;
+      this.businessOpFilter = null;
+      this.orderStatusFilter = null;
+      this.pagination.page = 1;
+      this.getOrder();
+    },
+
+    // 获取订单数据
+    getOrder() {
+      let params = {
+        page: this.pagination.page,
+        size: this.pagination.size,
+        type: '200' // 确保始终传递type参数
+      };
+
+      // 订单号搜索
+      if (this.select === 'id' && this.searchValue) {
+        params['id'] = this.searchValue;
+      }
+
+      // 日期范围搜索
+      if (this.select === 'order_date' && this.value1) {
+        params['start_time'] = this.value1[0];
+        params['end_time'] = this.value1[1];
+      }
+
+      // 下拉选择的状态筛选
+      if (['0', '1', '3'].includes(this.select)) {
+        params['order_status'] = this.select;
+      }
+
+      // 按钮状态筛选 - 优先级高于下拉选择
+      if (this.orderStatusFilter) {
+        params['order_status'] = this.orderStatusFilter;
+      }
+
+      // 订单类型筛选
+      if (this.businessOpFilter) {
+        params['business_op'] = this.businessOpFilter;
+      }
+
+      console.log("API请求参数:", params);
+
+      this.all_price_show = true;
+      getOrderAPI(params).then((res) => {
+        this.all_price_show = false;
+        console.log("API响应数据:", res);
+
+        if (res.status === true || res.code === 200) {
+          this.tableData = res.data || [];
+          this.all_price = res.all_price || '0.00';
+          this.all_discount = res.all_discount || '0.00';
+
+          // 修复分页总数设置
+          if (res.pagination && res.pagination.total !== undefined) {
+            this.pagination.total = res.pagination.total;
+          } else if (res.total !== undefined) {
+            this.pagination.total = res.total;
+          } else {
+            this.pagination.total = this.tableData.length;
+          }
+
+          // 调试信息：显示筛选后的数据
+          if (this.businessOpFilter) {
+            const filteredData = this.tableData.filter(item => item.business_op === this.businessOpFilter);
+            console.log(`类型筛选结果: ${this.getOrderTypeConfig(this.businessOpFilter).text}`, filteredData);
+          }
+        } else {
+          this.$message.error(res.message || '获取数据失败');
+        }
+      }).catch(error => {
+        console.error("获取订单数据失败:", error);
+        this.all_price_show = false;
+        this.$message.error('请求失败，请检查网络连接');
+      });
+    },
+
+    handleSizeChange(val) {
+      this.pagination.size = val;
+      this.pagination.page = 1;
+      this.getOrder();
+    },
+
+    handleCurrentChange(val) {
+      this.pagination.page = val;
+      this.getOrder();
+    },
+
+    change(e) {
+      this.value1 = e;
+      this.pagination.page = 1;
+      this.getOrder();
+    },
+
+    selectSearch(e) {
+      this.select = e;
+      // 当选择状态选项时，直接触发搜索
+      if (['0', '1', '3'].includes(e)) {
+        this.getOrder();
+      } else {
+        // 对于其他选项（如订单号、日期），清空其他搜索条件
+        if (e !== 'order_date') {
+          this.value1 = null;
+        }
+        if (e !== 'id') {
+          this.searchValue = null;
+        }
+      }
+    },
+
+    input(e) {
+      this.searchValue = e;
+      this.pagination.page = 1;
+      this.getOrder();
+    },
+
+    orderDetails(row) {
+      this.$router.push({ name: "orderDetil", query: { id: row.id } });
+    }
   }
 };
 </script>
 
 <style lang="less" scoped>
-* {
-  padding: 0;
-  margin: 0;
-}
-
 .orderManagement {
   height: calc(100vh - 180px);
+
   .mobileCaed {
-    height: 100px;
+    height: auto;
     display: flex;
+    flex-direction: column;
     justify-content: flex-start;
-    align-items: center;
+    align-items: flex-start;
-    
+    padding: 10px;
+
     .search {
       display: flex;
       justify-content: flex-start;
       align-items: center;
+      width: 100%;
 
       .searchSelect {
         width: 150px;
@@ -334,13 +556,52 @@ export default {
       }
     }
 
+    .filter-status {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+
+      .filter-label {
+        font-size: 14px;
+        color: #606266;
+        white-space: nowrap;
+      }
+
+      .el-tag {
+        cursor: pointer;
+      }
+    }
+
+    .mobile-filter {
+      display: flex;
+      align-items: center;
+      margin-bottom: 5px;
+
+      .filter-label {
+        margin-right: 8px;
+        font-size: 14px;
+        color: #606266;
+        white-space: nowrap;
+      }
+
+      .el-button {
+        margin-right: 5px;
+        padding: 4px 8px;
+        font-size: 12px;
+      }
+    }
+
     .allPrice {
-      margin-top: 5px;
+      margin-top: 10px;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
 
       .searchSelectIcon {
         padding: 0 5px;
         height: 20px;
-        margin-left: 10px;
       }
 
       .price {
@@ -356,40 +617,121 @@ export default {
     }
   }
 
+  // PC端优化样式
   .pcCard {
-    .search {
+    margin-bottom: 10px;
-      text-align: left;
 
-      .input-with-select {
+    .header-container {
-        width: 60%;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      // height: 60px;
+      flex-wrap: wrap;
 
-        .searchSelect {
+      .search-group {
-          width: 150px;
+        display: flex;
+        align-items: center;
+
+        .search-select {
+          width: 130px;
         }
 
-        .searchSelectIcon {
+        .search-input {
-          width: 30px;
+          width: 180px;
+        }
+
+        .date-picker-container {
+          display: flex;
+          align-items: center;
         }
       }
-    }
 
-    .orderList {
+      .filter-status-pc {
-      margin-top: 10px;
+        display: flex;
-      // height: calc(100vh - 180px);
+        align-items: center;
+        gap: 8px;
+        margin-left: 8px;
 
-      .table {
+        .filter-label {
-        width: 100%;
+          font-size: 14px;
+          color: #606266;
+          white-space: nowrap;
+        }
+
+        .el-tag {
+          cursor: pointer;
+        }
+      }
+
+      .stats-group {
+        display: flex;
+        align-items: center;
+
+        .stat-item {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          margin-left: 10px;
+          .stat-label {
+            color: #606266;
+            margin-right: 8px;
+            white-space: nowrap;
+          }
+
+          .stat-value {
+            min-width: 80px;
+
+            .price-text {
+              color: #e6a23c;
+              font-weight: 600;
+              font-size: 16px;
+            }
+          }
+        }
+      }
+
+      .type-filter, .status-filter {
+        display: flex;
+        align-items: center;
+        margin-left: 20px;
+
+        span {
+          margin-right: 8px;
+          font-size: 14px;
+          color: #606266;
+          white-space: nowrap;
+        }
+
+        .el-button {
+          margin-right: 5px;
+          padding: 7px 12px;
+        }
+      }
+
+      .reset {
+        display: flex;
+        align-items: center;
       }
     }
   }
+
+  .orderList {
+    margin-top: 10px;
+    height: calc(100vh - 180px);
+
+    .table {
+      width: 100%;
+    }
+  }
 }
-.page{
+
+.page {
   text-align: center;
   margin: 20px;
 }
-</style>
+
-<style>
+// 全局样式调整
-.el-table .el-table__header {
+::v-deep .el-table .el-table__header {
   background-color: #d0cff8;
 }
 
@@ -397,4 +739,45 @@ export default {
   padding: 0 8px !important;
 }
 
+// 响应式调整
+@media screen and (max-width: 1200px) {
+  .pcCard .header-container {
+    height: auto;
+    padding: 10px 0;
+
+    .search-group,
+    .stats-group,
+    .type-filter,
+    .status-filter,
+    .reset {
+      margin-bottom: 10px;
+    }
+  }
+}
+
+// 按钮选中状态优化
+::v-deep .el-button--primary:focus,
+::v-deep .el-button--primary:hover,
+::v-deep .el-button--success:focus,
+::v-deep .el-button--success:hover,
+::v-deep .el-button--danger:focus,
+::v-deep .el-button--danger:hover {
+  opacity: 0.8;
+}
+
+// 移动端适配
+@media screen and (max-width: 768px) {
+  .mobile-filter {
+    flex-wrap: wrap;
+
+    .filter-label {
+      width: 100%;
+      margin-bottom: 5px;
+    }
+
+    .el-button {
+      margin-bottom: 5px;
+    }
+  }
+}
 </style>