From df15102661bace142ef442765ffe7fd44d48e59b Mon Sep 17 00:00:00 2001
From: lzhizhao <790086754@qq.com>
Date: Tue, 30 Sep 2025 23:35:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=A2=E5=8D=95=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=92=8C=E6=8E=A5=E5=8F=A3=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/config/index.js                        |   2 +-
 src/api/modules/mer_admin.js                  |  40 ++
 .../operation-management/order/index.vue      | 643 +++++++++++++-----
 3 files changed, 507 insertions(+), 178 deletions(-)

diff --git a/public/config/index.js b/public/config/index.js
index b0aa92a..415da64 100644
--- a/public/config/index.js
+++ b/public/config/index.js
@@ -12,7 +12,7 @@
 (function () {
   window.SITE_CONFIG = {};
   // api接口请求地址
-  window.SITE_CONFIG["baseUrl"] = "https://admin.damajishi.cn/";
+  window.SITE_CONFIG["baseUrl"] = "https://admin-test.damajishi.cn/";
   // 在线api接口请求地址
   //  window.SITE_CONFIG['baseUrl'] = 'http://119.29.103.250:8082/red-memory';
   // 在线api接口请求地址
diff --git a/src/api/modules/mer_admin.js b/src/api/modules/mer_admin.js
index 5c97df2..bbeb2d4 100644
--- a/src/api/modules/mer_admin.js
+++ b/src/api/modules/mer_admin.js
@@ -352,5 +352,45 @@ export const mer_admin = {
   },
   membershipEnableSaveSettings: data => {
     return $http.post(`/merchant-api/membershipEnable/saveSettings`, data);
+  },
+  /**
+   * 订单分页查询
+   * @param {object} data 查询参数
+   * @param {number} data.pageNumber 页码
+   * @param {number} data.pageSize 每页数量
+   * @param {string} data.sortOrder 排序顺序
+   * @param {string} data.sortName 排序字段
+   * @param {string} data.receiverName 收货人姓名
+   * @param {string} data.receiverPhone 收货人手机号
+   * @param {string} data.statusList 订单业务状态列表 0： 待支付、1：待接单、2：待备货、3：待取货、4：已取货（待配送）、5： 配送中（待送达）、6： 已配送（待收货）、8：完成、-1：未支付订单取消、-2：用户申请退款中、-3：用户申请已退款：-4：商家取消订单、-5：平台取消订单
+   * @param {string} data.unitOrderNo 结算订单号
+   * @param {string} data.startTime 开始日期
+   * @param {string} data.endTime 结束日期
+   * @returns {Promise}
+   */
+  orderV2Page: data => {
+    return $http.request({
+      method: "get",
+      url: `/merchant-api/backend/order/v2/page`,
+      params: data
+    });
+  },
+  /**
+   * 订单概览
+   * @param {object} data 查询参数
+   * @param {string} data.receiverName 收货人姓名
+   * @param {string} data.receiverPhone 收货人手机号
+   * @param {string} data.statusList 订单业务状态 0： 待支付、1：待接单、2：待备货、3：待取货、4：已取货（待配送）、5： 配送中（待送达）、6： 已配送（待收货）、8：完成、-1：未支付订单取消、-2：用户申请退款中、-3：用户申请已退款：-4：商家取消订单、-5：平台取消订单
+   * @param {string} data.unitOrderNo 结算订单号
+   * @param {string} data.startTime 开始日期
+   * @param {string} data.endTime 结束日期
+   * @returns {Promise}
+   */
+  orderV2Overview: data => {
+    return $http.request({
+      method: "get",
+      url: `/merchant-api/backend/order/v2/overview`,
+      params: data
+    });
   }
 };
diff --git a/src/views/modules/operation-management/order/index.vue b/src/views/modules/operation-management/order/index.vue
index b6399d3..a28c662 100644
--- a/src/views/modules/operation-management/order/index.vue
+++ b/src/views/modules/operation-management/order/index.vue
@@ -1,209 +1,498 @@
 <template>
-  <div style="height: calc(100vh - 200px)">
-    <el-form
-      v-if="storeList.length > 1"
-      :inline="true"
-      :model="formInline"
-      class="demo-form-inline"
-    >
-      <el-form-item label="摊铺">
-        <el-select
-          class="filter-item"
-          style="width: 200px"
-          v-model="formInline.shopId"
-          placeholder="请选择摊铺"
+  <div class="page-container">
+    <div class="fixed-content">
+      <el-card class="search-card" shadow="never">
+        <!-- 搜索表单 -->
+        <el-form
+          :model="searchForm"
+          ref="searchForm"
+          label-position="top"
+          class="search-form"
+          size="small"
         >
-          <el-option
-            v-for="item in storeList"
-            :key="item.shopId"
-            :label="item.shopName"
-            :value="item.shopId"
-          >
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="getList">查询</el-button>
-        <el-button type="primary" @click="Reset">重置</el-button>
-        <el-button
-          type="success"
-          @click="
-            $router.push({ name: 'operation-management-total-order/index' })
-          "
-          >菜市场总订单</el-button
-        >
-      </el-form-item>
-    </el-form>
-    <el-tabs v-model="formInline.group" @tab-click="handleClick">
-      <el-tab-pane
-        v-for="item in statusList"
-        :key="item.value"
-        :label="item.label"
-        :name="item.value"
-      ></el-tab-pane>
-    </el-tabs>
-    <el-table :data="tableData" height="70vh" border style="width: 100%">
-      <el-table-column type="expand">
-        <template slot-scope="props">
-          <div style="padding-left: 20px" m="4">
-            <el-table :data="props.row.productOrders" :border="true">
-              <el-table-column type="index" width="50" label="序号">
-              </el-table-column>
-              <el-table-column label="商品订单号" prop="productOrderNo" />
-              <el-table-column label="商品名称" prop="productName" />
-              <el-table-column label="商品原价" prop="originPrice" />
-              <el-table-column label="商品终价" prop="finalPrice" />
-              <el-table-column label="商品订单金额" prop="productOrderMoney" />
-              <el-table-column label="商品数量" prop="productCount" />
-              <el-table-column label="商品单价" prop="productFinalPrice" />
-              <el-table-column label="商品图片" prop="productImg">
-                <template slot-scope="scope">
-                  <el-image
-                    style="width: 60px; height: 60px"
-                    :src="scope.row.productImg"
-                    :preview-src-list="[scope.row.productImg]"
-                  >
-                  </el-image>
-                </template>
-              </el-table-column>
-            </el-table>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="总订单号" prop="orderNo" />
-      <el-table-column label="结算单位订单号" prop="unitOrderNo" />
-      <el-table-column label="总商品数量" prop="productCount" />
-      <el-table-column label="顾客实际支付" prop="totalPayMoney" />
-      <el-table-column label="商品总价" prop="productMoney" />
-      <el-table-column label="配送费" prop="deliveryMoney" />
-      <el-table-column label="优惠券减免" prop="couponMoney" />
-      <el-table-column label="支付时间" prop="payTime" />
-      <el-table-column label="预计送达时间" prop="predictDeliveryTime" />
-      <el-table-column label="预计收入" prop="predictIncome" />
-      <el-table-column label="距离" prop="distance" />
-      <el-table-column label="备注" prop="remark" />
-      <el-table-column fixed="right" width="100px" label="操作" align="center">
-        <template slot-scope="scope">
-          <el-button type="primary" size="mini" @click="view(scope.row)">
-            查看
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <div class="pagination-container">
+          <el-row :gutter="15">
+            <el-col :span="6">
+              <el-form-item label="收货人姓名" prop="receiverName">
+                <el-input
+                  v-model="searchForm.receiverName"
+                  placeholder="请输入收货人姓名"
+                  clearable
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="订单编号" prop="unitOrderNo">
+                <el-input
+                  v-model="searchForm.unitOrderNo"
+                  placeholder="请输入订单编号"
+                  clearable
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="订单状态" prop="statusList">
+                <el-select
+                  v-model="searchForm.statusList"
+                  multiple
+                  placeholder="请选择订单状态"
+                  clearable
+                  style="width: 100%;"
+                >
+                  <el-option
+                    v-for="item in orderStatusOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="订单时间" prop="dateRange">
+                <el-date-picker
+                  v-model="searchForm.dateRange"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  style="width: 100%;"
+                ></el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24" class="search-buttons">
+              <el-button type="primary" @click="handleSearch" icon="el-icon-search" size="small">搜索</el-button>
+              <el-button @click="handleReset" icon="el-icon-refresh" size="small">重置</el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-card>
+
+      <el-card class="stats-card" shadow="never">
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <div class="stat-item">
+              <div class="stat-label">订单数量(笔)</div>
+              <div class="stat-value">{{ stats.totalCount || 0 }}</div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="stat-item">
+              <div class="stat-label">订单金额(元)</div>
+              <div class="stat-value">¥ {{ (stats.totalMoney / 100).toFixed(2) || '0.00' }}</div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="stat-item">
+              <div class="stat-label">订单完成率</div>
+              <div class="stat-value">{{ (stats.completeRate * 100).toFixed(2) || '0.00' }}%</div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="stat-item">
+              <div class="stat-label">代理商抽成(元)</div>
+              <div class="stat-value">¥ {{ (stats.agentCommission / 100).toFixed(2) || '0.00' }}</div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-card>
+    </div>
+
+    <el-card class="table-card" shadow="never">
+       <div slot="header">
+        <span>订单列表</span>
+      </div>
+      <!-- 表格 -->
+      <el-table
+        :data="tableData"
+        v-loading="loading"
+        style="width: 100%"
+        row-key="unitOrderNo"
+        size="small"
+        :expand-row-keys="expandedRows"
+        @expand-change="handleExpandChange"
+        :default-expand-all="false">
+
+        <el-table-column type="expand" width="50">
+          <template slot-scope="props">
+            <div class="expand-content">
+              <div class="shop-order" v-for="(shopOrder, shopIndex) in props.row.shopOrderList" :key="shopIndex">
+                <h4>店铺: {{ shopOrder.shopName }}</h4>
+                <!-- 二级子列表: 店铺订单信息 -->
+                <el-table
+                  :data="[shopOrder]"
+                  size="small"
+                  style="width: 100%; margin-bottom: 10px;"
+                  :show-header="true">
+                  <el-table-column label="序号" width="50">
+                    <template slot-scope="shopScope">
+                      {{ shopIndex + 1 }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="shopOrderNo" label="店铺订单号" width="180"></el-table-column>
+                  <el-table-column prop="status" label="档位" width="100">
+                    <template slot-scope="shopScope">
+                      {{ shopScope.row.status || "暂无" }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="status" label="订单状态" width="120">
+                    <template slot-scope="shopScope">
+                      <el-tag :type="getShopStatusType(shopScope.row.status)" size="small">
+                        {{ getShopStatusText(shopScope.row.status) }}
+                      </el-tag>
+                    </template>
+                  </el-table-column>
+                </el-table>
+
+                <!-- 三级子列表: 商品信息 -->
+                <el-table
+                  :data="shopOrder.productOrderList"
+                  size="small"
+                  style="width: 100%"
+                  :show-header="true">
+                  <el-table-column label="序号" width="50">
+                    <template slot-scope="productScope">
+                      {{ productScope.$index + 1 }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="productName" label="商品名称" width="150"></el-table-column>
+                  <el-table-column prop="productCount" label="商品数量" width="80"></el-table-column>
+                  <el-table-column label="商品原价" width="100">
+                    <template slot-scope="productScope">
+                      ¥ {{ (productScope.row.originPrice / 100).toFixed(2) }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="商品终价" width="100">
+                    <template slot-scope="productScope">
+                      ¥ {{ (productScope.row.finalPrice / 100).toFixed(2) }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="商品订单金额" width="120">
+                    <template slot-scope="productScope">
+                      ¥ {{ (productScope.row.productOrderMoney / 100).toFixed(2) }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="productImg" label="商品图片" width="80">
+                    <template slot-scope="productScope">
+                      <el-image v-if="productScope.row.productImg"
+                                :src="productScope.row.productImg"
+                                style="width: 40px; height: 40px;"
+                                fit="cover"
+                                :preview-src-list="[productScope.row.productImg]"></el-image>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+
+        <!-- 一级列表字段 -->
+        <el-table-column label="序号" width="50">
+          <template slot-scope="scope">
+            {{ (pagination.pageNumber - 1) * pagination.pageSize + scope.$index + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="unitOrderNo" label="结算订单号" min-width="180"></el-table-column>
+        <el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
+        <el-table-column prop="receiverName" label="收货人姓名" width="120"></el-table-column>
+        <el-table-column prop="receiverPhone" label="收货人电话" width="150"></el-table-column>
+        <el-table-column prop="poi" label="收货人地址" min-width="200"></el-table-column>
+        <el-table-column label="市场订单金额" width="120">
+          <template slot-scope="scope">
+            <span>¥ {{ (scope.row.unitOrderMoney / 100).toFixed(2) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="市场订单商品金额" width="120">
+          <template slot-scope="scope">
+            <span>¥ {{ (scope.row.productMoney / 100).toFixed(2) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="市场订单配送费" width="120">
+          <template slot-scope="scope">
+            <span>¥ {{ (scope.row.deliveryMoney / 100).toFixed(2) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="调度费" width="100">
+          <template slot-scope="scope">
+            <span>¥ {{ (scope.row.dispatchMoney / 100).toFixed(2) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="包装费" width="100">
+          <template slot-scope="scope">
+            <span>¥ {{ (scope.row.packageMoney / 100).toFixed(2) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="订单状态" width="120">
+           <template slot-scope="scope">
+            <el-tag :type="getStatusTagType(scope.row.status)" size="small">
+              {{ getStatusText(scope.row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="marketId" label="市场编号" width="100"></el-table-column>
+        <el-table-column prop="marketName" label="市场名称" min-width="150"></el-table-column>
+        <el-table-column prop="refundReason" label="申请退款原因" min-width="150"></el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
       <el-pagination
-        :current-page="formInline.pageNumber"
-        :page-sizes="[10, 20, 30, 50]"
-        :page-size="formInline.pageSize"
-        :total="total"
-        background
-        layout="total, sizes, prev, pager, next, jumper"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-      />
-    </div>
-    <!-- 订单详情 -->
-    <viewDetails ref="viewDetails"></viewDetails>
+        :current-page="pagination.pageNumber"
+        :page-sizes="[10, 20, 30, 50]"
+        :page-size="pagination.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pagination.total"
+        class="pagination-container"
+      ></el-pagination>
+    </el-card>
   </div>
 </template>
 
 <script>
-import viewDetails from "./popup/view-details.vue";
-import { mapState } from "vuex";
+import { mer_admin } from "@/api/modules/mer_admin";
+
 export default {
-  components: { viewDetails },
+  name: "OrderManagement",
   data() {
     return {
-      formInline: {
-        group: "",
-        shopId: "",
-        pageNumber: 1,
-        pageSize: 10,
+      searchForm: {
+        receiverName: "",
+        unitOrderNo: "",
+        statusList: [],
+        dateRange: [],
       },
-      statusList: [
-        {
-          label: "全部订单",
-          value: "0",
-        },
-        {
-          label: "待备货",
-          value: "1",
-        },
-        {
-          label: "待取货",
-          value: "2",
-        },
-        {
-          label: "待收货",
-          value: "3",
-        },
-        {
-          label: "已完成",
-          value: "4",
-        },
+      stats: {
+        totalCount: 0,
+        totalMoney: 0,
+        completeRate: 0,
+        agentCommission: 0,
+      },
+      orderStatusOptions: [
+        { label: "待支付", value: 0 },
+        { label: "待接单", value: 1 },
+        { label: "待备货", value: 2 },
+        { label: "待取货", value: 3 },
+        { label: "已取货（待配送）", value: 4 },
+        { label: "配送中（待送达）", value: 5 },
+        { label: "已配送（待收货）", value: 6 },
+        { label: "完成", value: 8 },
+        { label: "未支付订单取消", value: -1 },
+        { label: "用户申请退款中", value: -2 },
+        { label: "用户申请已退款", value: -3 },
+        { label: "商家取消订单", value: -4 },
+        { label: "平台取消订单", value: -5 },
       ],
       tableData: [],
-      total: 0,
+      pagination: {
+        pageNumber: 1,
+        pageSize: 10,
+        total: 0,
+      },
+      loading: false,
+      expandedRows: [],
     };
   },
   created() {
-    this.formInline = {
-      group: "0",
-      // marketId: this.marketId,
-      shopId: this.shopId,
-      agentId: this.agentId
-    };
-    this.getList();
+    this.fetchData();
+    this.fetchOverview();
   },
   methods: {
-    getList() {
-      //根据店铺查询
-      this.$api.mer_admin
-        .shopOrderPage({
-          ...this.formInline,
-        })
-        .then((res) => {
-          console.log(res);
-          this.tableData = res.data.data.data;
-          this.total = Number(res.data.data.total);
-        });
-    },
-    Reset() {
-      this.formInline = {
-        group: "0",
-        shopId: this.shopId,
-        agentId: this.agentId
+    getCommonParams() {
+      const params = {
+        receiverName: this.searchForm.receiverName || null,
+        unitOrderNo: this.searchForm.unitOrderNo || null,
+        statusList: this.searchForm.statusList.length ? this.searchForm.statusList.join(',') : null,
+        startTime: null,
+        endTime: null,
       };
-      this.getList();
+      if (this.searchForm.dateRange && this.searchForm.dateRange.length === 2) {
+        params.startTime = this.searchForm.dateRange[0];
+        params.endTime = this.searchForm.dateRange[1];
+      }
+      return params;
     },
-    handleClick(e) {
-      this.advanceSellStatus = e.name;
-      this.getList();
+    fetchData() {
+      this.loading = true;
+      const params = {
+        ...this.getCommonParams(),
+        pageNumber: this.pagination.pageNumber,
+        pageSize: this.pagination.pageSize,
+      };
+
+      mer_admin.orderV2Page(params).then(res => {
+        if (res.data && res.data.data) {
+          this.tableData = res.data.data.data;
+          this.pagination.total = parseInt(res.data.data.total) || 0;
+        } else {
+          this.tableData = [];
+          this.pagination.total = 0;
+        }
+      }).catch(err => {
+        console.error("Error fetching order data:", err);
+        this.tableData = [];
+        this.pagination.total = 0;
+      }).finally(() => {
+        this.loading = false;
+      });
     },
-    view(row) {
-      this.$refs.viewDetails.toggle(row).update();
+    fetchOverview() {
+      const params = this.getCommonParams();
+      mer_admin.orderV2Overview(params).then(res => {
+        if (res.data && res.data.data) {
+          this.stats = res.data.data;
+        } else {
+          this.stats = {
+            totalCount: 0,
+            totalMoney: 0,
+            completeRate: 0,
+            agentCommission: 0,
+          };
+        }
+      }).catch(err => {
+        console.error("Error fetching overview data:", err);
+      });
+    },
+    handleSearch() {
+      this.pagination.pageNumber = 1;
+      this.fetchData();
+      this.fetchOverview();
+    },
+    handleReset() {
+      this.$refs.searchForm.resetFields();
+      this.searchForm.dateRange = [];
+      this.handleSearch();
     },
     handleSizeChange(val) {
-      this.formInline.pageSize = val;
-      this.getList();
+      this.pagination.pageSize = val;
+      this.fetchData();
     },
     handleCurrentChange(val) {
-      this.formInline.pageNumber = val;
-      this.getList();
+      this.pagination.pageNumber = val;
+      this.fetchData();
     },
-  },
-  computed: {
-    ...mapState("userData", [
-      "isMerchant",
-      "marketList",
-      "storeList",
-      "marketId",
-      "shopId",
-      "agentId"
-    ]),
+    getStatusText(status) {
+      if (status === undefined || status === null) {
+        return "未知状态";
+      }
+      const statusOption = this.orderStatusOptions.find(opt => opt.value === status);
+      return statusOption ? statusOption.label : "未知状态";
+    },
+    getStatusTagType(status) {
+      switch (status) {
+        case 0: return 'warning'; // 待支付
+        case 1:
+        case 2:
+        case 3:
+        case 4:
+        case 5:
+        case 6:
+          return 'info'; // 进行中
+        case 8: return 'success'; // 完成
+        case -1:
+        case -2:
+        case -3:
+        case -4:
+        case -5:
+          return 'danger'; // 取消或退款
+        default: return 'primary';
+      }
+    },
+    viewDetails(row) {
+      // 路由跳转或弹窗显示详情
+      console.log("View details for:", row.unitOrderNo);
+      // this.$router.push({ name: 'OrderDetail', params: { id: row.unitOrderNo } });
+    },
+    handleExpandChange(row, expandedRows) {
+      this.expandedRows = expandedRows.map(item => item.unitOrderNo);
+    },
+    getShopStatusText(status) {
+      const shopStatusMap = {
+        0: '待备货',
+        1: '备货完成 待取货',
+        2: '已取货（待配送）',
+        3: '配送中',
+        4: '配送完成(待收货)',
+        5: '待评价',
+        6: '已完成'
+      };
+      return shopStatusMap[status] || '未知状态';
+    },
+    getShopStatusType(status) {
+      switch (status) {
+        case 0: // 待备货
+        case 1: // 备货完成 待取货
+          return 'warning';
+        case 2: // 已取货（待配送）
+        case 3: // 配送中
+        case 4: // 配送完成(待收货)
+          return 'info';
+        case 5: // 待评价
+          return 'primary';
+        case 6: // 已完成
+          return 'success';
+        default:
+          return 'danger';
+      }
+    }
   },
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped>
+.page-container {
+}
+.search-card {
+  margin-bottom: 15px;
+}
+.stats-card {
+  margin-bottom: 15px;
+}
+.stat-item {
+  text-align: center;
+  background-color: #f5f5f5;
+  padding: 15px;
+  border-radius: 4px;
+}
+.stat-label {
+  font-size: 14px;
+  color: #606266;
+  margin-bottom: 5px;
+}
+.stat-value {
+  font-size: 20px;
+  font-weight: bold;
+  color: #409EFF;
+}
+.search-form .el-form-item {
+  margin-bottom: 10px;
+}
+.search-buttons {
+  text-align: left;
+}
+.pagination-container {
+  margin-top: 20px;
+  text-align: right;
+}
+.expand-content {
+  padding: 10px;
+}
+.shop-order {
+  margin-bottom: 15px;
+}
+.shop-order h4 {
+  margin: 0 0 10px 0;
+  font-size: 14px;
+  font-weight: bold;
+}
+</style>
+<style>
+.search-form .el-form-item__label {
+  padding-bottom: 0px !important;
+  font-size: 12px;
+  line-height: 20px;
+}
+</style>