websopy-mp/src/user/order/order.tsx

import {useState, useCallback, useRef, useEffect} from "react";
import Taro from '@tarojs/taro'
import {Space, NavBar, Button, Input} from '@nutui/nutui-react-taro'
import {Search, Filter, ArrowLeft} from '@nutui/icons-react-taro'
import {View} from '@tarojs/components';
import OrderList from "./components/OrderList";
import {useDidShow, useRouter} from '@tarojs/taro'
import {ShopOrderParam} from "@/api/shop/shopOrder/model";
import './order.scss'

function Order() {
  const {params} = useRouter();
  const [statusBarHeight, setStatusBarHeight] = useState<number>(0) // 默认值为0
  const [searchParams, setSearchParams] = useState<ShopOrderParam>({
    statusFilter: params.statusFilter != undefined && params.statusFilter != '' ? parseInt(params.statusFilter) : -1
  })
  const [showSearch, setShowSearch] = useState(false)
  const [searchKeyword, setSearchKeyword] = useState('')
  const searchTimeoutRef = useRef<NodeJS.Timeout>()

  const reload = async (where?: ShopOrderParam) => {
    console.log(where,'where...')
    setSearchParams(prev => ({ ...prev, ...where }))
  }

  // 防抖搜索函数
  const debouncedSearch = useCallback((keyword: string) => {
    if (searchTimeoutRef.current) {
      clearTimeout(searchTimeoutRef.current);
    }

    searchTimeoutRef.current = setTimeout(() => {
      if (keyword.trim()) {
        handleSearch({keywords: keyword.trim()});
      } else {
        // 如果搜索关键词为空，清除keywords参数
        const newSearchParams = { ...searchParams };
        delete newSearchParams.keywords;
        setSearchParams(newSearchParams);
        reload(newSearchParams).then();
      }
    }, 500); // 500ms防抖延迟
  }, [searchParams]);

  // 处理搜索
  const handleSearch = (where: ShopOrderParam) => {
    // 合并搜索参数，保留当前的statusFilter
    const newSearchParams = {
      ...searchParams, // 保留当前的所有参数（包括statusFilter）
      ...where // 应用新的搜索条件
    };
    setSearchParams(newSearchParams)
    reload(newSearchParams).then()
  }
  useEffect(() => {
    // 获取状态栏高度
    Taro.getSystemInfo({
      success: (res) => {
        setStatusBarHeight(res.statusBarHeight ?? 0)
      },
    })
    // 设置导航栏标题
    Taro.setNavigationBarTitle({
      title: '我的订单'
    });

    Taro.setNavigationBarColor({
      backgroundColor: '#ffffff',
      frontColor: '#000000',
    });

    reload().then()
  }, []);

  // 页面从其它页面返回/重新展示时，刷新一次列表数据
  // 典型场景：微信支付取消后返回到待支付列表，需要重新拉取订单/商品信息，避免使用旧数据再次支付失败
  useDidShow(() => {
    const statusFilter =
      params.statusFilter != undefined && params.statusFilter !== ''
        ? parseInt(params.statusFilter)
        : -1;
    // 同步路由上的statusFilter，并触发子组件重新拉取列表
    setSearchParams(prev => ({ ...prev, statusFilter }));
  });

  return (
    <View className="bg-gray-50 min-h-screen">
      <View style={{height: `${statusBarHeight || 0}px`, backgroundColor: '#ffffff'}}></View>
      <NavBar
        fixed={true}
        style={{marginTop: `${statusBarHeight || 0}px`, backgroundColor: '#ffffff'}}
        left={
          <>
            <div className={'flex justify-between items-center w-full'}>
              <Space>
                <ArrowLeft onClick={() => Taro.navigateBack()}/>
                <Search
                  size={18}
                  className={'mx-4'}
                  onClick={() => setShowSearch(!showSearch)}
                />
              </Space>
            </div>
          </>
        }
      >
        <span>我的订单</span>
      </NavBar>
      {/* 搜索和筛选工具栏 */}
      <View className="bg-white px-4 py-3 flex justify-between items-center border-gray-100">
        <View className="flex items-center">
          <Filter
            size={18}
            className="text-gray-600"
            onClick={() => setShowSearch(!showSearch)}
          />
          <span className="ml-2 text-sm text-gray-600">筛选</span>
        </View>
      </View>

      {/* 搜索组件 */}
      {showSearch && (
        <View className="bg-white p-3 shadow-sm border-b border-gray-100">
          <View className="flex items-center">
            <View className="flex-1 mr-2">
              <Input
                placeholder="搜索订单号、商品名称"
                value={searchKeyword}
                onChange={(value) => {
                  setSearchKeyword(value);
                  debouncedSearch(value); // 使用防抖搜索
                }}
                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>
            </Space>
          </View>
        </View>
      )}

      {/*订单列表*/}
      <OrderList
        onReload={() => reload(searchParams)}
        searchParams={searchParams}
        showSearch={showSearch}
        onSearchParamsChange={(newParams) => {
          console.log('父组件接收到searchParams变化:', newParams);
          setSearchParams(newParams);
        }}
      />
    </View>
  );
}

export default Order;