forked from gxwebsoft/mp-10550
refactor(app): 重构用户中心和订单相关页面
-调整了 app.config.ts 中的页面路径和顺序 - 移除了 article 页面 - 重构了 cart、find、order 和 user 页面的布局和功能 - 优化了导航栏和订单状态的显示逻辑 - 统一了页面样式和图标使用
This commit is contained in:
156
src/user/order/order.tsx
Normal file
156
src/user/order/order.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
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 OrderList from "./components/OrderList";
|
||||
// import OrderSearch from "./components/OrderSearch";
|
||||
import {ShopOrder, ShopOrderParam} from "@/api/shop/shopOrder/model";
|
||||
import {pageShopOrder} from "@/api/shop/shopOrder";
|
||||
import './order.scss'
|
||||
|
||||
function Order() {
|
||||
const [list, setList] = useState<ShopOrder[]>([])
|
||||
const [searchParams, setSearchParams] = useState<ShopOrderParam>({})
|
||||
const [showSearch, setShowSearch] = useState(false)
|
||||
const [searchKeyword, setSearchKeyword] = useState('')
|
||||
|
||||
const reload = async (params?: ShopOrderParam) => {
|
||||
const searchConditions = {
|
||||
userId: Taro.getStorageSync('UserId'),
|
||||
...params
|
||||
}
|
||||
const orders = await pageShopOrder(searchConditions)
|
||||
if (orders) {
|
||||
setList(orders.list || [])
|
||||
}
|
||||
}
|
||||
|
||||
// 处理搜索
|
||||
const handleSearch = (params: ShopOrderParam) => {
|
||||
setSearchParams(params)
|
||||
reload(params)
|
||||
}
|
||||
|
||||
// 重置搜索
|
||||
const handleResetSearch = () => {
|
||||
setSearchParams({})
|
||||
reload()
|
||||
}
|
||||
|
||||
useDidShow(() => {
|
||||
// 设置导航栏标题
|
||||
Taro.setNavigationBarTitle({
|
||||
title: '我的订单'
|
||||
});
|
||||
|
||||
Taro.setNavigationBarColor({
|
||||
backgroundColor: '#ffffff',
|
||||
frontColor: '#000000',
|
||||
});
|
||||
|
||||
reload().then()
|
||||
});
|
||||
|
||||
return (
|
||||
<View className="bg-gray-50 min-h-screen">
|
||||
{/* 搜索和筛选工具栏 */}
|
||||
<View className="bg-white px-4 py-3 flex justify-between items-center border-b border-gray-100">
|
||||
<View className="flex items-center">
|
||||
<Search
|
||||
size={18}
|
||||
className="mr-3 text-gray-600"
|
||||
onClick={() => setShowSearch(!showSearch)}
|
||||
/>
|
||||
<Filter
|
||||
size={18}
|
||||
className="text-gray-600"
|
||||
onClick={() => setShowSearch(!showSearch)}
|
||||
/>
|
||||
</View>
|
||||
<View className="text-sm text-gray-500">
|
||||
共{list.length}个订单
|
||||
</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={setSearchKeyword}
|
||||
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>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setSearchKeyword('');
|
||||
handleResetSearch();
|
||||
}}
|
||||
>
|
||||
重置
|
||||
</Button>
|
||||
</Space>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
{/*暂无订单*/}
|
||||
{list.length == 0 && (
|
||||
<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'
|
||||
}}>
|
||||
<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}
|
||||
onReload={() => reload(searchParams)}
|
||||
searchParams={searchParams}
|
||||
showSearch={showSearch}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default Order;
|
||||
Reference in New Issue
Block a user