Browse Source

feat(user/order): 添加状态栏高度适配并优化订单页面布局- 在 Order 组件中添加状态栏高度获取和适配

- 引入 NavBar 组件并设置固定位置
- 调整搜索栏和订单列表的样式以适应新布局
- 优化 OrderList 组件的样式,移除固定的 top 属性
master
科技小王子 2 weeks ago
parent
commit
f7825b84b1
  1. 5
      src/user/order/components/OrderList.tsx
  2. 40
      src/user/order/order.tsx

5
src/user/order/components/OrderList.tsx

@ -11,8 +11,8 @@ import {ShopOrderGoods} from "@/api/shop/shopOrderGoods/model";
import {copyText} from "@/utils/common";
const getInfiniteUlStyle = (showSearch: boolean = false): CSSProperties => ({
marginTop: showSearch ? '65px' : '44px', // 如果显示搜索框,增加更多的上边距
height: showSearch ? '75vh' : '82vh', // 相应调整高度
marginTop: showSearch ? '0' : '0', // 如果显示搜索框,增加更多的上边距
height: showSearch ? '75vh' : '84vh', // 相应调整高度
width: '100%',
padding: '0',
overflowY: 'auto',
@ -263,7 +263,6 @@ function OrderList(props: OrderListProps) {
align={'left'}
className={'fixed left-0'}
style={{
top: '44px',
zIndex: 998,
borderBottom: '1px solid #e5e5e5'
}}

40
src/user/order/order.tsx

@ -1,8 +1,8 @@
import {useState} from "react";
import Taro, {useDidShow} from '@tarojs/taro'
import {Space, Empty, Button, ConfigProvider, Input} from '@nutui/nutui-react-taro'
import {Search, Filter} from '@nutui/icons-react-taro'
import { View } from '@tarojs/components';
import {Space, NavBar, Empty, Button, ConfigProvider, 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 OrderSearch from "./components/OrderSearch";
import {ShopOrder, ShopOrderParam} from "@/api/shop/shopOrder/model";
@ -10,6 +10,7 @@ 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)
@ -39,6 +40,12 @@ function Order() {
}
useDidShow(() => {
// 获取状态栏高度
Taro.getSystemInfo({
success: (res) => {
setStatusBarHeight(res.statusBarHeight)
},
})
// 设置导航栏标题
Taro.setNavigationBarTitle({
title: '我的订单'
@ -54,6 +61,27 @@ function Order() {
return (
<View className="bg-gray-50 min-h-screen">
<View style={{height: `${statusBarHeight}px`, backgroundColor: '#ffffff'}}></View>
<NavBar
fixed={true}
style={{marginTop: `${statusBarHeight}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-b border-gray-100">
<View className="flex items-center">
@ -84,7 +112,7 @@ function Order() {
onChange={setSearchKeyword}
onConfirm={() => {
if (searchKeyword.trim()) {
handleSearch({ keywords: searchKeyword.trim() });
handleSearch({keywords: searchKeyword.trim()});
}
}}
style={{
@ -100,7 +128,7 @@ function Order() {
type="primary"
onClick={() => {
if (searchKeyword.trim()) {
handleSearch({ keywords: searchKeyword.trim() });
handleSearch({keywords: searchKeyword.trim()});
}
}}
>
@ -123,7 +151,7 @@ function Order() {
<ConfigProvider>
<div className={'h-full flex flex-col justify-center items-center'} style={{
height: showSearch ? 'calc(100vh - 200px)' : 'calc(100vh - 150px)',
marginTop: showSearch ? '60px' : '0px'
marginTop: showSearch ? '60px' : '0'
}}>
<Empty
style={{

Loading…
Cancel
Save