resources/views/business/pages/order-data/after-sales-expenses.blade.php

@@ -135,16 +135,74 @@
         .order-data-table--wide { min-width: 590rem; }
         .order-data-link { color: var(--vip-content-accent-dark, #856632); }
         .order-data-link .material-icons-outlined { font-size: 1.125rem; }
+
+        .order-data-date-picker {
+            position: relative;
+        }
+
+        .order-data-date-picker input {
+            padding-right: 2.75rem;
+        }
+
+        .order-data-date-picker__trigger {
+            position: absolute;
+            top: 0;
+            right: 0;
+            display: inline-flex;
+            width: 2.125rem;
+            height: 2.125rem;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border: 0;
+            border-left: 1px solid var(--vip-border, #d8d2c7);
+            border-radius: 0 0.5rem 0.5rem 0;
+            background: transparent;
+            color: var(--vip-content-accent-dark, #856632);
+            cursor: pointer;
+        }
+
+        .order-data-date-picker__trigger:hover {
+            background: var(--vip-content-accent-soft, #f7f0de);
+        }
+
+        .order-data-date-picker__trigger:focus-visible {
+            z-index: 1;
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(133, 102, 50, 0.2);
+        }
+
+        .order-data-date-picker__trigger .material-icons-outlined {
+            font-size: 1.125rem;
+        }
     </style>
 
     <form method="GET" class="upstream-data-toolbar" aria-label="订单售后费用明细筛选">
         <div class="upstream-data-field">
             <label for="order-data-from">订单开始日期</label>
-            <input id="order-data-from" name="from" type="date" value="{{ $filters['from'] ?? '' }}">
+            <div class="order-data-date-picker" data-date-picker-contract="order-data-after-sales-date-picker">
+                <input id="order-data-from" name="from" type="date" value="{{ $filters['from'] ?? '' }}">
+                <button
+                    type="button"
+                    class="order-data-date-picker__trigger"
+                    data-date-picker-input="order-data-from"
+                    aria-label="选择订单开始日期"
+                    title="选择订单开始日期"
+                ><span class="material-icons-outlined" aria-hidden="true">calendar_today</span></button>
+            </div>
         </div>
         <div class="upstream-data-field">
             <label for="order-data-to">订单结束日期</label>
-            <input id="order-data-to" name="to" type="date" value="{{ $filters['to'] ?? '' }}">
+            <div class="order-data-date-picker" data-date-picker-contract="order-data-after-sales-date-picker">
+                <input id="order-data-to" name="to" type="date" value="{{ $filters['to'] ?? '' }}">
+                <button
+                    type="button"
+                    class="order-data-date-picker__trigger"
+                    data-date-picker-input="order-data-to"
+                    aria-label="选择订单结束日期"
+                    title="选择订单结束日期"
+                ><span class="material-icons-outlined" aria-hidden="true">calendar_today</span></button>
+            </div>
         </div>
         <div class="upstream-data-field">
             <label for="order-data-order-no">订单号</label>
@@ -261,6 +319,31 @@
 
 <script>
     (() => {
+        document.querySelectorAll('[data-date-picker-input]').forEach((trigger) => {
+            if (trigger.dataset.datePickerBound === 'true') {
+                return;
+            }
+
+            const input = document.getElementById(trigger.dataset.datePickerInput || '');
+
+            if (!input) {
+                return;
+            }
+
+            trigger.dataset.datePickerBound = 'true';
+            trigger.addEventListener('click', () => {
+                input.focus();
+
+                if (typeof input.showPicker === 'function') {
+                    input.showPicker();
+
+                    return;
+                }
+
+                input.click();
+            });
+        });
+
         const button = document.getElementById('order-data-after-sales-export-button');
 
         if (!button || button.dataset.exportBound === 'true') {

tests/Feature/Business/OrderDataPagesUpstreamTest.php

@@ -63,6 +63,15 @@ class OrderDataPagesUpstreamTest extends FeatureTestCase
             ->assertSeeText('123.45')
             ->assertSeeText('DIRECT')
             ->assertSeeText('导出当前页')
+            ->assertSee('id="order-data-from" name="from" type="date" value="2026-08-01"', false)
+            ->assertSee('id="order-data-to" name="to" type="date" value="2026-08-09"', false)
+            ->assertSee('data-date-picker-contract="order-data-after-sales-date-picker"', false)
+            ->assertSee('data-date-picker-input="order-data-from"', false)
+            ->assertSee('aria-label="选择订单开始日期"', false)
+            ->assertSee('data-date-picker-input="order-data-to"', false)
+            ->assertSee('aria-label="选择订单结束日期"', false)
+            ->assertSeeText('calendar_today')
+            ->assertSee("typeof input.showPicker === 'function'", false)
             ->assertSee('id="order-data-after-sales-export-button"', false)
             ->assertSee('data-export-contract="order-data.after-sales.current-page-export"', false)
             ->assertSee('data-export-table="order-data-after-sales-table"', false)
@@ -139,6 +148,7 @@ class OrderDataPagesUpstreamTest extends FeatureTestCase
                 'tab' => 'after-sales-expenses',
             ]))
             ->assertOk()
+            ->assertSeeText('暂无数据')
             ->assertSeeText('导出当前页')
             ->assertSee('id="order-data-after-sales-export-button"', false)
             ->assertSee('disabled="disabled"', false);