修复已知问题

config/env.ts

@@ -2,7 +2,7 @@
 export const ENV_CONFIG = {
   // 开发环境
   development: {
-    API_BASE_URL: 'https://cms-api.websoft.top/api',
+    API_BASE_URL: 'http://127.0.0.1:9200/api',
     APP_NAME: '时里院子市集',
     DEBUG: 'true',
   },

src/api/cms/cmsModel/model/index.ts

@@ -1,4 +1,4 @@
-import type { PageParam } from '@/api';
+import type { PageParam } from '@/api/index';
 
 /**
  * 模型

src/api/shop/shopOrder/model/index.ts

@@ -221,4 +221,5 @@ export interface ShopOrderParam extends PageParam {
   isInvoice?: boolean;
   userId?: number;
   keywords?: string;
+  deliveryStatus?: number;
 }

src/app.config.ts

@@ -3,6 +3,7 @@ export default defineAppConfig({
     'pages/index/index',
     'pages/order/order',
     'pages/cart/cart',
+    // 'pages/find/find',
     'pages/user/user'
   ],
   "subpackages": [

src/pages/order/components/OrderList.tsx

@@ -1,53 +1,60 @@
 import {Avatar, Cell, Space, Tabs, Button, TabPane, Image} from '@nutui/nutui-react-taro'
 import {useEffect, useState, CSSProperties} from "react";
+import {View} from '@tarojs/components'
 import Taro from '@tarojs/taro';
 import {InfiniteLoading} from '@nutui/nutui-react-taro'
 import dayjs from "dayjs";
-import {pageShopOrder, updateShopOrder} from "@/api/shop/shopOrder";
-import {ShopOrder} from "@/api/shop/shopOrder/model";
+import {pageShopOrder, removeShopOrder, updateShopOrder} from "@/api/shop/shopOrder";
+import {ShopOrder, ShopOrderParam} from "@/api/shop/shopOrder/model";
 import {listShopOrderGoods} from "@/api/shop/shopOrderGoods";
 import {ShopOrderGoods} from "@/api/shop/shopOrderGoods/model";
 import {copyText} from "@/utils/common";
 
-const InfiniteUlStyle: CSSProperties = {
-  marginTop: '44px',
-  height: '82vh',
+const getInfiniteUlStyle = (showSearch: boolean = false): CSSProperties => ({
+  marginTop: showSearch ? '65px' : '44px', // 如果显示搜索框，增加更多的上边距
+  height: showSearch ? '75vh' : '82vh', // 相应调整高度
   width: '100%',
   padding: '0',
   overflowY: 'auto',
   overflowX: 'hidden',
   boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
-}
+})
 const tabs = [
   {
     index: 0,
     key: '全部',
-    title: '全部'
+    title: '全部',
+    description: '所有订单'
   },
   {
     index: 1,
     key: '待付款',
-    title: '待付款'
+    title: '待付款',
+    description: '等待付款的订单'
   },
   {
     index: 2,
     key: '待发货',
-    title: '待发货'
+    title: '待发货',
+    description: '已付款待发货的订单'
   },
   {
     index: 3,
     key: '待收货',
-    title: '待收货'
+    title: '待收货',
+    description: '已发货待收货的订单'
   },
   {
     index: 4,
-    key: '已收货',
-    title: '已收货'
+    key: '已完成',
+    title: '已完成',
+    description: '已完成的订单'
   },
   {
     index: 5,
-    key: '已完成',
-    title: '已完成'
+    key: '已取消',
+    title: '已取消',
+    description: '已取消/退款的订单'
   }
 ]
 
@@ -59,13 +66,17 @@ interface OrderWithGoods extends ShopOrder {
 interface OrderListProps {
   data: ShopOrder[];
   onReload?: () => void;
+  searchParams?: ShopOrderParam;
+  showSearch?: boolean;
 }
 
 function OrderList(props: OrderListProps) {
   const [list, setList] = useState<OrderWithGoods[]>([])
   const [page, setPage] = useState(1)
   const [hasMore, setHasMore] = useState(true)
-  const [tapIndex, setTapIndex] = useState<string | number>('0')
+  const [tapIndex, setTapIndex] = useState<string | number>(0)
+  const [loading, setLoading] = useState(false)
+  const [totalCount, setTotalCount] = useState(0)
 
   // 获取订单状态文本
   const getOrderStatusText = (order: ShopOrder) => {
@@ -79,7 +90,7 @@ function OrderList(props: OrderListProps) {
     if (order.orderStatus === 7) return '客户端申请退款';
 
     // 检查支付状态 (payStatus为boolean类型，false/0表示未付款，true/1表示已付款)
-    if (!order.payStatus || order.payStatus === false) return '待付款';
+    if (!order.payStatus) return '待付款';
 
     // 已付款后检查发货状态
     if (order.deliveryStatus === 10) return '待发货';
@@ -93,39 +104,92 @@ function OrderList(props: OrderListProps) {
     return '未知状态';
   };
 
+  // 检查订单是否为已取消状态
+  const isCancelledOrder = (order: ShopOrder) => {
+    // 已取消的订单状态：2已取消，3取消中，4退款申请中，6退款成功，7客户端申请退款
+    const cancelledStatuses = [2, 3, 4, 6, 7];
+    return cancelledStatuses.includes(order.orderStatus || 0);
+  };
+
+  // 根据tab筛选订单，排除已取消的订单
+  const filterOrdersByTab = (orders: OrderWithGoods[], tabIndex: number) => {
+    const indexStr = String(tabIndex);
+
+    return orders.filter(order => {
+      switch (indexStr) {
+        case '1': // 待付款
+          // 未付款且未取消的订单
+          return !order.payStatus && !isCancelledOrder(order);
+        case '2': // 待发货
+          // 已付款但未发货且未取消的订单
+          return order.payStatus && order.deliveryStatus === 10 && !isCancelledOrder(order);
+        case '3': // 待收货
+          // 已发货且未取消的订单
+          return order.deliveryStatus === 20 && !isCancelledOrder(order);
+        case '4': // 已完成
+          // 已完成的订单
+          return order.orderStatus === 1;
+        case '5': // 已取消
+          // 只显示已取消的订单
+          return isCancelledOrder(order);
+        case '0': // 全部
+        default:
+          return true; // 显示所有订单，包括已取消的
+      }
+    });
+  };
+
   const getOrderStatusParams = (index: string | number) => {
-    let params: { payStatus?: boolean | number; deliveryStatus?: number; orderStatus?: number; userId?: number } = {};
+    let params: ShopOrderParam = {};
     // 添加用户ID过滤
     params.userId = Taro.getStorageSync('UserId');
 
-    switch (index) {
+    // 将数字索引转换为字符串进行匹配
+    const indexStr = String(index);
+
+    switch (indexStr) {
       case '1': // 待付款
-        params.payStatus = false; // 或者 0，取决于后端接口期望的类型
+        params.payStatus = 0; // 0表示未付款
         break;
       case '2': // 待发货
-        params.payStatus = true; // 或者 1
-        params.deliveryStatus = 10;
+        params.payStatus = 1; // 1表示已付款
+        params.deliveryStatus = 10; // 10表示未发货
         break;
       case '3': // 待收货
-        params.deliveryStatus = 20;
+        params.deliveryStatus = 20; // 20表示已发货
         break;
-      case '4': // 已收货
-        params.deliveryStatus = 30;
+      case '4': // 已完成
+        params.orderStatus = 1; // 1表示已完成
         break;
-      case '5': // 已完成
-        params.orderStatus = 1;
+      case '5': // 已取消
+        // 对于已取消的订单，我们获取所有数据然后在前端筛选
+        // 因为取消状态有多种：2已取消，3取消中，4退款申请中，6退款成功，7客户端申请退款
         break;
       case '0': // 全部
       default:
+        // 全部订单，不添加额外的筛选条件
         break;
     }
+
+    console.log(`Tab ${indexStr} (${tabs[Number(index)]?.title}) 筛选参数:`, params);
     return params;
   };
 
   const reload = async (resetPage = false) => {
+    setLoading(true);
     const currentPage = resetPage ? 1 : page;
-    const params = getOrderStatusParams(tapIndex);
-    pageShopOrder({ page: currentPage, ...params }).then(async res => {
+    const statusParams = getOrderStatusParams(tapIndex);
+    const searchConditions = {
+      page: currentPage,
+      ...statusParams,
+      ...props.searchParams
+    };
+    console.log('订单筛选条件:', {
+      tapIndex,
+      statusParams,
+      searchConditions
+    });
+    pageShopOrder(searchConditions).then(async res => {
       let newList: OrderWithGoods[] | undefined = [];
       if (res?.list && res?.list.length > 0) {
         // 为每个订单获取商品信息
@@ -147,7 +211,11 @@ function OrderList(props: OrderListProps) {
           })
         );
 
-        newList = resetPage ? ordersWithGoods : list?.concat(ordersWithGoods);
+        // 合并数据
+        const combinedList = resetPage ? ordersWithGoods : list?.concat(ordersWithGoods);
+
+        // 根据当前tab筛选订单，排除已取消的订单
+        newList = filterOrdersByTab(combinedList, Number(tapIndex));
         setHasMore(true);
       } else {
         newList = [];
@@ -155,6 +223,11 @@ function OrderList(props: OrderListProps) {
       }
       setList(newList || []);
       setPage(currentPage);
+      setTotalCount(res?.count || 0);
+      setLoading(false);
+    }).catch(error => {
+      console.error('加载订单失败:', error);
+      setLoading(false);
     });
   };
 
@@ -186,14 +259,11 @@ function OrderList(props: OrderListProps) {
   // 取消订单
   const cancelOrder = async (order: ShopOrder) => {
     try {
-      await updateShopOrder({
-        ...order,
-        orderStatus: 2 // 已取消
-      });
+      await removeShopOrder(order.orderId);
       Taro.showToast({
-        title: '订单已取消',
+        title: '订单已删除',
       });
-      reload(true); // 重新加载列表
+      reload(true).then(); // 重新加载列表
       props.onReload?.(); // 通知父组件刷新
     } catch (error) {
       console.error('取消订单失败:', error);
@@ -207,25 +277,58 @@ function OrderList(props: OrderListProps) {
     reload(true); // 首次加载或tab切换时重置页码
   }, [tapIndex]); // 监听tapIndex变化
 
+  useEffect(() => {
+    reload(true); // 搜索参数变化时重置页码
+  }, [props.searchParams]); // 监听搜索参数变化
+
   return (
     <>
       <Tabs
         align={'left'}
         className={'fixed left-0'}
-        style={{ top: '44px'}}
-        tabStyle={{ backgroundColor: '#ffffff'}}
+        style={{
+          top: '44px',
+          zIndex: 998,
+          borderBottom: '1px solid #e5e5e5'
+        }}
+        tabStyle={{
+          backgroundColor: '#ffffff',
+          boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+        }}
         value={tapIndex}
         onChange={(paneKey) => {
+          console.log('Tab切换到:', paneKey, '对应状态:', tabs[paneKey]?.title);
           setTapIndex(paneKey)
         }}
       >
         {
           tabs?.map((item, index) => {
-            return <TabPane key={index} title={item.title}></TabPane>
+            return (
+              <TabPane
+                key={index}
+                title={loading && tapIndex === index ? `${item.title}...` : item.title}
+              ></TabPane>
+            )
           })
         }
       </Tabs>
-      <div style={InfiniteUlStyle} id="scroll">
+      <div style={getInfiniteUlStyle(props.showSearch)} id="scroll">
+        {/* 筛选状态提示 */}
+        {tapIndex !== 0 && (
+          <View className="filter-tip" style={{
+            padding: '8px 16px',
+            backgroundColor: '#f0f8ff',
+            borderLeft: '3px solid #007bff',
+            margin: '8px 16px',
+            borderRadius: '4px',
+            fontSize: '12px',
+            color: '#666'
+          }}>
+            当前筛选: {tabs[Number(tapIndex)]?.title}
+            {totalCount >= 0 && ` (${totalCount}条)`}
+          </View>
+        )}
+
         <InfiniteLoading
           target="scroll"
           hasMore={hasMore}
@@ -299,9 +402,9 @@ function OrderList(props: OrderListProps) {
                   {/* 操作按钮 */}
                   <Space className={'btn flex justify-end'}>
                     {/* 待付款状态：显示取消订单和立即支付 */}
-                    {(!item.payStatus || item.payStatus === false) && item.orderStatus !== 2 && (
+                    {(!item.payStatus) && item.orderStatus !== 2 && (
                       <Space>
-                        <Button size={'small'} onClick={(e) => {e.stopPropagation(); cancelOrder(item)}}>取消订单</Button>
+                        <Button size={'small'} onClick={(e) => {e.stopPropagation(); cancelOrder(item)}}>删除订单</Button>
                         <Button size={'small'} type="primary" onClick={(e) => {e.stopPropagation(); console.log('立即支付')}}>立即支付</Button>
                       </Space>
                     )}

src/pages/order/order.scss

@@ -2,3 +2,71 @@ page {
   background: linear-gradient(to bottom, #f3f3f3, #f9fafb);
   background-size: 100%;
 }
+
+.search-container {
+  transition: all 0.3s ease;
+
+  .nut-input {
+    background-color: #f8f9fa !important;
+    border: 1px solid #e5e5e5 !important;
+    border-radius: 4px !important;
+
+    &:focus {
+      border-color: #007bff !important;
+      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
+    }
+  }
+
+  .nut-button {
+    border-radius: 4px !important;
+
+    &--primary {
+      background: linear-gradient(135deg, #007bff, #0056b3) !important;
+      border: none !important;
+    }
+
+    &--small {
+      padding: 6px 12px !important;
+      font-size: 12px !important;
+    }
+  }
+}
+
+// Tabs样式优化
+.nut-tabs {
+  .nut-tabs__titles {
+    background: #ffffff !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+
+    .nut-tabs__titles-item {
+      font-size: 14px !important;
+      font-weight: 500 !important;
+
+      &--active {
+        color: #007bff !important;
+        font-weight: 600 !important;
+      }
+    }
+
+    .nut-tabs__line {
+      background: #007bff !important;
+      height: 3px !important;
+    }
+  }
+}
+
+// 筛选提示样式
+.filter-tip {
+  animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/pages/order/order.tsx

@@ -1,25 +1,44 @@
-import {useState} from "react"; // 添加 useCallback 引入
+import {useState} from "react";
 import Taro, {useDidShow} from '@tarojs/taro'
-import {NavBar, Space, Empty, Button, ConfigProvider} from '@nutui/nutui-react-taro'
-import {Search} from '@nutui/icons-react-taro'
+import {NavBar, Space, Empty, Button, ConfigProvider, Input} from '@nutui/nutui-react-taro'
+import {Search, Filter} from '@nutui/icons-react-taro'
 import { View } from '@tarojs/components';
 import OrderList from "./components/OrderList";
-import {ShopOrder} from "@/api/shop/shopOrder/model";
+// import OrderSearch from "./components/OrderSearch";
+import {ShopOrder, ShopOrderParam} from "@/api/shop/shopOrder/model";
 import {pageShopOrder} from "@/api/shop/shopOrder";
 import './order.scss'
 
 function Order() {
   const [statusBarHeight, setStatusBarHeight] = useState<number>()
   const [list, setList] = useState<ShopOrder[]>([])
+  const [searchParams, setSearchParams] = useState<ShopOrderParam>({})
+  const [showSearch, setShowSearch] = useState(false)
+  const [searchKeyword, setSearchKeyword] = useState('')
 
-
-  const reload = async () => {
-    const orders = await pageShopOrder({userId: Taro.getStorageSync('UserId')})
+  const reload = async (params?: ShopOrderParam) => {
+    const searchConditions = {
+      userId: Taro.getStorageSync('UserId'),
+      ...params
+    }
+    const orders = await pageShopOrder(searchConditions)
     if (orders) {
       setList(orders.list || [])
     }
   }
 
+  // 处理搜索
+  const handleSearch = (params: ShopOrderParam) => {
+    setSearchParams(params)
+    reload(params)
+  }
+
+  // 重置搜索
+  const handleResetSearch = () => {
+    setSearchParams({})
+    reload()
+  }
+
   useDidShow(() => {
     Taro.getSystemInfo({
       success: (res) => {
@@ -27,7 +46,7 @@ function Order() {
       },
     })
     reload().then()
-  }); // 新增: 添加滚动事件监听
+  });
 
   return (
     <>
@@ -39,25 +58,85 @@ function Order() {
           <>
             <div className={'flex justify-between items-center w-full'}>
               <Space>
-                <Search size={18} className={'mx-1'}/>
-                {/*<Filter size={18} className={'mx-1'}/>*/}
+                <Search
+                  size={18}
+                  className={'mx-1'}
+                  onClick={() => setShowSearch(!showSearch)}
+                />
+                <Filter
+                  size={18}
+                  className={'mx-1'}
+                  onClick={() => setShowSearch(!showSearch)}
+                />
               </Space>
             </div>
-            {/*<SearchBar shape="round" maxLength={5} style={{paddingLeft: '1px'}}/>*/}
-            {/*<div className={'flex flex-col text-center justify-center items-center'}>*/}
-            {/*  <Filter size={14}/>*/}
-            {/*  <div className={'text-xs text-gray-600 whitespace-nowrap'}>筛选</div>*/}
-            {/*</div>*/}
           </>
         }
       >
         <span>我的订单</span>
       </NavBar>
+
+      {/* 搜索组件 */}
+      {showSearch && (
+        <View
+          className="search-container bg-white p-3 shadow-sm"
+          style={{
+            position: 'fixed',
+            top: `${(statusBarHeight || 0) + 44}px`, // 导航栏高度通常是44px
+            left: 0,
+            right: 0,
+            zIndex: 999,
+            borderBottom: '1px solid #e5e5e5'
+          }}
+        >
+          <View className="flex items-center">
+            <View className="flex-1 mr-2">
+              <Input
+                placeholder="搜索订单号、商品名称"
+                value={searchKeyword}
+                onChange={setSearchKeyword}
+                onConfirm={() => {
+                  if (searchKeyword.trim()) {
+                    handleSearch({ keywords: searchKeyword.trim() });
+                  }
+                }}
+                style={{
+                  padding: '8px 12px',
+                  border: '1px solid #e5e5e5',
+                  borderRadius: '4px',
+                  backgroundColor: '#f8f9fa'
+                }}
+              />
+            </View>
+            <Space>
+              <Button
+                type="primary"
+                onClick={() => {
+                  if (searchKeyword.trim()) {
+                    handleSearch({ keywords: searchKeyword.trim() });
+                  }
+                }}
+              >
+                搜索
+              </Button>
+              <Button
+                onClick={() => {
+                  setSearchKeyword('');
+                  handleResetSearch();
+                }}
+              >
+                重置
+              </Button>
+            </Space>
+          </View>
+        </View>
+      )}
       {/*暂无订单*/}
       {list.length == 0 && (
         <ConfigProvider>
           <div className={'h-full flex flex-col justify-center items-center'} style={{
-            height: 'calc(100vh - 150px)',
+            height: showSearch ? 'calc(100vh - 200px)' : 'calc(100vh - 150px)',
+            marginTop: showSearch ? '60px' : '0px'
           }}>
             <Empty
               style={{
@@ -75,7 +154,12 @@ function Order() {
       {/*订单列表*/}
       {
         list.length > 0 && (
-          <OrderList data={list} onReload={reload}/>
+          <OrderList
+            data={list}
+            onReload={() => reload(searchParams)}
+            searchParams={searchParams}
+            showSearch={showSearch}
+          />
         )
       }
     </>

src/pages/order/test-order.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { Button, Space, Toast } from '@nutui/nutui-react-taro';
-import Taro from '@tarojs/taro';
-import { createOrder } from '@/api/shop/shopOrder';
-import { OrderCreateRequest } from '@/api/shop/shopOrder/model';
-
-const TestOrder = () => {
-  // 创建测试订单
-  const createTestOrder = async () => {
-    try {
-      const orderData: OrderCreateRequest = {
-        goodsItems: [
-          {
-            goodsId: 1,
-            quantity: 2,
-            skuId: 1,
-            specInfo: '红色 L码'
-          }
-        ],
-        payType: 1, // 微信支付
-        deliveryType: 0, // 快递
-        comments: '测试订单'
-      };
-
-      const result = await createOrder(orderData);
-      console.log('订单创建成功:', result);
-      Toast.show('测试订单创建成功');
-      
-      // 跳转到订单列表
-      setTimeout(() => {
-        Taro.navigateTo({ url: '/pages/order/order' });
-      }, 1000);
-    } catch (error) {
-      console.error('创建订单失败:', error);
-      Toast.show('创建订单失败');
-    }
-  };
-
-  return (
-    <div style={{ padding: '20px' }}>
-      <h2>订单功能测试</h2>
-      <Space direction="vertical">
-        <Button type="primary" onClick={createTestOrder}>
-          创建测试订单
-        </Button>
-        <Button onClick={() => Taro.navigateTo({ url: '/pages/order/order' })}>
-          查看订单列表
-        </Button>
-      </Space>
-    </div>
-  );
-};
-
-export default TestOrder;