template-10584/src/pages/order/order.tsx

import {useEffect, useState} from "react"; // 添加 useCallback 引入
import Taro from '@tarojs/taro';
import {NavBar, Space} from '@nutui/nutui-react-taro'
import {Search} from '@nutui/icons-react-taro'
import OrderList from "@/components/OrderList";
import './order.scss'
function Order() {
  const [statusBarHeight, setStatusBarHeight] = useState<number>()

  useEffect(() => {
    Taro.getSystemInfo({
      success: (res) => {
        setStatusBarHeight(res.statusBarHeight)
      },
    })
    // 设置导航栏背景色（含状态栏）
    Taro.setNavigationBarColor({
      backgroundColor: '#ffffff', // 状态栏+导航栏背景色
      frontColor: 'black',       // 状态栏文字颜色（仅支持 black/white）
    });
  }, []); // 新增: 添加滚动事件监听

  return (
    <>
      <NavBar
        fixed={true}
        style={{marginTop: `${statusBarHeight}px`, backgroundColor: 'transparent'}}
        onBackClick={() => {
        }}
        left={
          <>
            <div className={'flex justify-between items-center w-full'}>
              <Space>
                <Search size={18} className={'mx-1'}/>
                {/*<Filter size={18} className={'mx-1'}/>*/}
              </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>
      <OrderList/>
    </>
  );
}

export default Order;