forked from gxwebsoft/mp-10550
89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
import {useState} from "react"; // 添加 useCallback 引入
|
||
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 OrderList from "./components/OrderList";
|
||
import {ShopOrder} 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 reload = async () => {
|
||
const orders = await pageShopOrder({userId: Taro.getStorageSync('UserId')})
|
||
if (orders) {
|
||
setList(orders.list || [])
|
||
}
|
||
}
|
||
|
||
useDidShow(() => {
|
||
Taro.getSystemInfo({
|
||
success: (res) => {
|
||
setStatusBarHeight(res.statusBarHeight)
|
||
},
|
||
})
|
||
// 设置导航栏背景色（含状态栏）
|
||
Taro.setNavigationBarColor({
|
||
backgroundColor: '#ffffff', // 状态栏+导航栏背景色
|
||
frontColor: 'black', // 状态栏文字颜色（仅支持 black/white）
|
||
});
|
||
reload().then()
|
||
}); // 新增: 添加滚动事件监听
|
||
|
||
return (
|
||
<>
|
||
<NavBar
|
||
fixed={true}
|
||
style={{marginTop: `${statusBarHeight}px`, backgroundColor: 'transparent'}}
|
||
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>
|
||
{/*暂无订单*/}
|
||
{list.length == 0 && (
|
||
<ConfigProvider>
|
||
<div className={'h-full flex flex-col justify-center items-center'} style={{
|
||
height: 'calc(100vh - 150px)',
|
||
}}>
|
||
<Empty
|
||
style={{
|
||
backgroundColor: 'transparent'
|
||
}}
|
||
description="您还没有订单哦"
|
||
/>
|
||
<Space>
|
||
<Button type="success" fill="dashed"
|
||
onClick={() => Taro.switchTab({url: '/pages/index/index'})}>去挑选商品</Button>
|
||
</Space>
|
||
</div>
|
||
</ConfigProvider>
|
||
)}
|
||
{/*订单列表*/}
|
||
{
|
||
list.length > 0 && (
|
||
<OrderList data={list}/>
|
||
)
|
||
}
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default Order;
|