Browse Source

Enhance OrderListPage with additional filter options and state management

- Added a toggle button to expand/collapse additional filter options for better user experience.
- Introduced a new state variable to manage the visibility of the filter section.
- Updated the SkillOrderAdminQuery interface to include a new property for first order discount status.
- Refactored the form to conditionally display additional filtering criteria based on the toggle state.
0es 3 weeks ago
parent
commit
0457048db9
2 changed files with 61 additions and 27 deletions
  1. 57 27
      src/app/(dashboard)/order/list/page.tsx
  2. 4 0
      src/types/api/order.ts

+ 57 - 27
src/app/(dashboard)/order/list/page.tsx

@@ -3,10 +3,12 @@
 import {
   CloseCircleOutlined,
   DownloadOutlined,
+  DownOutlined,
   EyeOutlined,
   ReloadOutlined,
   SearchOutlined,
   UndoOutlined,
+  UpOutlined,
 } from "@ant-design/icons";
 import {
   App,
@@ -78,6 +80,9 @@ const OrderListPage: React.FC = () => {
   const [currentCancelOrder, setCurrentCancelOrder] =
     useState<SkillOrderAdminDTO | null>(null);
 
+  // 更多筛选项展开/收起(默认收起)
+  const [filterExpanded, setFilterExpanded] = useState(false);
+
   // 加载分页数据
   const loadPageData = async () => {
     setLoading(true);
@@ -126,6 +131,11 @@ const OrderListPage: React.FC = () => {
         values.refundApply === "" || values.refundApply === undefined
           ? undefined
           : values.refundApply,
+      firstOrderDiscount:
+        values.firstOrderDiscount === "" ||
+        values.firstOrderDiscount === undefined
+          ? undefined
+          : values.firstOrderDiscount,
       type:
         values.type === "" || values.type === undefined
           ? undefined
@@ -473,35 +483,55 @@ const OrderListPage: React.FC = () => {
               <Select.Option value={8}>用户取消</Select.Option>
             </Select>
           </Form.Item>
-          <Form.Item label="退款申请中" name="refundApply">
-            <Select
-              placeholder="是否退款申请中"
-              allowClear
-              style={{ width: 180 }}
-            >
-              <Select.Option value={true}>是</Select.Option>
-              <Select.Option value={false}>否</Select.Option>
-            </Select>
-          </Form.Item>
-          <Form.Item label="下单类型" name="type">
-            <Select
-              placeholder="请选择下单类型"
-              allowClear
-              style={{ width: 180 }}
+          <Form.Item>
+            <Button
+              type="link"
+              className="p-0"
+              onClick={() => setFilterExpanded((v) => !v)}
+              icon={filterExpanded ? <UpOutlined /> : <DownOutlined />}
             >
-              <Select.Option value={0}>常规下单</Select.Option>
-              <Select.Option value={1}>通用码下单</Select.Option>
-              <Select.Option value={2}>特定码下单</Select.Option>
-            </Select>
-          </Form.Item>
-          <Form.Item label="品类" name="bizCategoryCode">
-            <BizCategoryTreeSelect
-              placeholder="请选择品类"
-              allowClear
-              style={{ width: 220 }}
-              allowAllLevels
-            />
+              {filterExpanded ? "收起筛选项" : "展开筛选项"}
+            </Button>
           </Form.Item>
+          {filterExpanded && (
+            <>
+              <Form.Item label="退款申请中" name="refundApply">
+                <Select
+                  placeholder="是否退款申请中"
+                  allowClear
+                  style={{ width: 180 }}
+                >
+                  <Select.Option value={true}>是</Select.Option>
+                  <Select.Option value={false}>否</Select.Option>
+                </Select>
+              </Form.Item>
+              <Form.Item label="是否首单一折订单" name="firstOrderDiscount">
+                <Select placeholder="请选择" allowClear style={{ width: 180 }}>
+                  <Select.Option value={true}>是</Select.Option>
+                  <Select.Option value={false}>否</Select.Option>
+                </Select>
+              </Form.Item>
+              <Form.Item label="下单类型" name="type">
+                <Select
+                  placeholder="请选择下单类型"
+                  allowClear
+                  style={{ width: 180 }}
+                >
+                  <Select.Option value={0}>常规下单</Select.Option>
+                  <Select.Option value={1}>通用码下单</Select.Option>
+                  <Select.Option value={2}>特定码下单</Select.Option>
+                </Select>
+              </Form.Item>
+              <Form.Item label="品类" name="bizCategoryCode">
+                <BizCategoryTreeSelect
+                  placeholder="请选择品类"
+                  allowClear
+                  style={{ width: 220 }}
+                  allowAllLevels
+                />
+              </Form.Item>
+            </>
+          )}
           <Form.Item label="下单时间" name="orderTimeRange">
             <RangePicker
               showTime

+ 4 - 0
src/types/api/order.ts

@@ -165,6 +165,10 @@ export interface SkillOrderAdminQuery {
    * 是否退款申请中
    */
   refundApply?: boolean;
+  /**
+   * 是否首单一折订单:true-是,false-否
+   */
+  firstOrderDiscount?: boolean;
   /**
    * 陪玩师用户编号
    */