提交代码

src/pages/order/order.tsx

@@ -0,0 +1,53 @@
+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;