From eaecd7226fa48d31a9050b0c596ce56340f66e1f Mon Sep 17 00:00:00 2001
From: linbin <495561397@qq.com>
Date: Thu, 2 Oct 2025 18:53:08 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=BC=E8=BF=B0:=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=B8=82=E5=9C=BA=E8=AE=A2=E5=8D=95=E7=AE=A1=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2UI=E5=92=8C=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在市场店铺订单管理和市场订单管理页面中，优化搜索区域的样式和布局
- 将原有的.date-range样式替换为.filter-row和.filter-item，增强样式复用性和一致性
- 为搜索区域的输入框和选择框添加统一的样式类，提升视觉效果和用户体验
- 实现日期范围的快捷选择功能，包括近1天、近7天、近30天和自定义选项
- 添加自定义日期范围的显示/隐藏逻辑，提升页面交互性
---
 .../市场店铺订单管理/市场店铺订单管理.html    | 87 ++++++++++++++-----
 商家端web/市场订单管理/市场订单管理.html      | 87 ++++++++++++++-----
 2 files changed, 132 insertions(+), 42 deletions(-)

diff --git a/商家端web/市场店铺订单管理/市场店铺订单管理.html b/商家端web/市场店铺订单管理/市场店铺订单管理.html
index 3824ad2..d182e71 100644
--- a/商家端web/市场店铺订单管理/市场店铺订单管理.html
+++ b/商家端web/市场店铺订单管理/市场店铺订单管理.html
@@ -78,14 +78,40 @@
             box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
         }
 
-        .date-range {
+        .filter-row {
             display: flex;
             align-items: center;
-            gap: 8px;
+            gap: 20px;
+            flex-wrap: wrap;
         }
 
-        .date-range .form-input {
-            flex: 1;
+        .filter-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .filter-item label {
+            font-weight: 500;
+            color: #333;
+            min-width: 70px;
+        }
+
+        .filter-item select,
+        .filter-item input {
+            padding: 8px 12px;
+            border: 1px solid #d9d9d9;
+            border-radius: 4px;
+            min-width: 120px;
+            font-size: 14px;
+            transition: all 0.3s ease;
+        }
+
+        .filter-item select:focus,
+        .filter-item input:focus {
+            border-color: #1890ff;
+            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+            outline: none;
         }
 
         .button-group {
@@ -408,18 +434,18 @@
 
         <!-- 搜索区域 -->
         <div class="search-section">
-            <div class="search-form">
-                <div class="form-item">
-                    <label class="form-label">收货人姓名</label>
-                    <input type="text" class="form-input" placeholder="收货人姓名搜索">
+            <div class="filter-row">
+                <div class="filter-item">
+                    <label>收货人姓名:</label>
+                    <input type="text" placeholder="收货人姓名搜索">
                 </div>
-                <div class="form-item">
-                    <label class="form-label">订单编号</label>
-                    <input type="text" class="form-input" placeholder="订单编号">
+                <div class="filter-item">
+                    <label>订单编号:</label>
+                    <input type="text" placeholder="订单编号">
                 </div>
-                <div class="form-item">
-                    <label class="form-label">店铺订单状态</label>
-                    <select class="form-input">
+                <div class="filter-item">
+                    <label>店铺订单状态:</label>
+                    <select>
                         <option value="">全部</option>
                         <option value="stock_completed">备货完成</option>
                         <option value="pending_pickup">待取货</option>
@@ -430,13 +456,22 @@
                         <option value="completed">已完成</option>
                     </select>
                 </div>
-                <div class="form-item">
-                    <label class="form-label">订单时间</label>
-                    <div class="date-range">
-                        <input type="date" class="form-input" placeholder="开始日期">
-                        <span>-</span>
-                        <input type="date" class="form-input" placeholder="结束日期">
-                    </div>
+            </div>
+            <div class="filter-row">
+                <div class="filter-item">
+                    <label for="dateRange">日期范围:</label>
+                    <select id="dateRange">
+                        <option value="today">近1天</option>
+                        <option value="week" selected>近7天</option>
+                        <option value="month">近30天</option>
+                        <option value="custom">自定义</option>
+                    </select>
+                </div>
+                <div class="filter-item" id="customDateRange" style="display: none;">
+                    <label for="startDate">开始日期:</label>
+                    <input type="date" id="startDate">
+                    <label for="endDate">结束日期:</label>
+                    <input type="date" id="endDate">
                 </div>
             </div>
             <div class="button-group">
@@ -776,6 +811,16 @@
     </div>
 
     <script>
+        // 日期范围选择
+        document.getElementById('dateRange').addEventListener('change', function() {
+            const customDateRange = document.getElementById('customDateRange');
+            if (this.value === 'custom') {
+                customDateRange.style.display = 'flex';
+            } else {
+                customDateRange.style.display = 'none';
+            }
+        });
+
         // 标签页切换功能
         document.querySelectorAll('.tab').forEach(tab => {
             tab.addEventListener('click', function() {
diff --git a/商家端web/市场订单管理/市场订单管理.html b/商家端web/市场订单管理/市场订单管理.html
index c6894ee..8aab849 100644
--- a/商家端web/市场订单管理/市场订单管理.html
+++ b/商家端web/市场订单管理/市场订单管理.html
@@ -78,14 +78,40 @@
             box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
         }
 
-        .date-range {
+        .filter-row {
             display: flex;
             align-items: center;
-            gap: 8px;
+            gap: 20px;
+            flex-wrap: wrap;
         }
 
-        .date-range .form-input {
-            flex: 1;
+        .filter-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .filter-item label {
+            font-weight: 500;
+            color: #333;
+            min-width: 70px;
+        }
+
+        .filter-item select,
+        .filter-item input {
+            padding: 8px 12px;
+            border: 1px solid #d9d9d9;
+            border-radius: 4px;
+            min-width: 120px;
+            font-size: 14px;
+            transition: all 0.3s ease;
+        }
+
+        .filter-item select:focus,
+        .filter-item input:focus {
+            border-color: #1890ff;
+            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+            outline: none;
         }
 
         .button-group {
@@ -408,18 +434,18 @@
 
         <!-- 搜索区域 -->
         <div class="search-section">
-            <div class="search-form">
-                <div class="form-item">
-                    <label class="form-label">收货人姓名</label>
-                    <input type="text" class="form-input" placeholder="收货人姓名搜索">
+            <div class="filter-row">
+                <div class="filter-item">
+                    <label>收货人姓名:</label>
+                    <input type="text" placeholder="收货人姓名搜索">
                 </div>
-                <div class="form-item">
-                    <label class="form-label">订单编号</label>
-                    <input type="text" class="form-input" placeholder="订单编号">
+                <div class="filter-item">
+                    <label>订单编号:</label>
+                    <input type="text" placeholder="订单编号">
                 </div>
-                <div class="form-item">
-                    <label class="form-label">结算单位订单状态</label>
-                    <select class="form-input">
+                <div class="filter-item">
+                    <label>结算单位订单状态:</label>
+                    <select>
                         <option value="">全部</option>
                         <option value="pending_payment">待支付</option>
                         <option value="pending_accept">待接单</option>
@@ -436,13 +462,22 @@
                         <option value="platform_cancelled">平台取消订单</option>
                     </select>
                 </div>
-                <div class="form-item">
-                    <label class="form-label">订单时间</label>
-                    <div class="date-range">
-                        <input type="date" class="form-input" placeholder="开始日期">
-                        <span>-</span>
-                        <input type="date" class="form-input" placeholder="结束日期">
-                    </div>
+            </div>
+            <div class="filter-row">
+                <div class="filter-item">
+                    <label for="dateRange">日期范围:</label>
+                    <select id="dateRange">
+                        <option value="today">近1天</option>
+                        <option value="week" selected>近7天</option>
+                        <option value="month">近30天</option>
+                        <option value="custom">自定义</option>
+                    </select>
+                </div>
+                <div class="filter-item" id="customDateRange" style="display: none;">
+                    <label for="startDate">开始日期:</label>
+                    <input type="date" id="startDate">
+                    <label for="endDate">结束日期:</label>
+                    <input type="date" id="endDate">
                 </div>
             </div>
             <div class="button-group">
@@ -908,6 +943,16 @@
     </div>
 
     <script>
+        // 日期范围选择
+        document.getElementById('dateRange').addEventListener('change', function() {
+            const customDateRange = document.getElementById('customDateRange');
+            if (this.value === 'custom') {
+                customDateRange.style.display = 'flex';
+            } else {
+                customDateRange.style.display = 'none';
+            }
+        });
+
         // 标签页切换功能
         document.querySelectorAll('.tab').forEach(tab => {
             tab.addEventListener('click', function() {