feat(pages): 添加管理页面功能和配置
- 创建 .editorconfig 文件统一代码风格配置 - 配置 .eslintrc 使用 taro/react 规则集 - 完善 .gitignore 忽略编译产物和敏感文件 - 添加 admin/article/add 页面实现文章管理功能 - 添加 dealer/apply/add 页面实现经销商申请功能 - 添加 dealer/bank/add 页面实现银行卡管理功能 - 添加 dealer/customer/add 页面实现客户管理功能 - 添加 user/address/add 页面实现用户地址管理功能 - 添加 user/chat/message/add 页面实现消息功能 - 添加 user/gift/add 页面实现礼品管理功能 - 配置各页面导航栏标题和样式 - 实现表单验证和数据提交功能 - 集成图片上传和头像选择功能 - 添加日期选择和数据校验逻辑 - 实现编辑和新增模式切换 - 集成用户权限和角色管理功能
This commit is contained in:
161
src/user/order/order.tsx
Normal file
161
src/user/order/order.tsx
Normal file
@@ -0,0 +1,161 @@
|
||||
import {useState, useCallback, useRef, useEffect} from "react";
|
||||
import Taro from '@tarojs/taro'
|
||||
import {Space, NavBar, Button, 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 {useRouter} from '@tarojs/taro'
|
||||
import {ShopOrderParam} from "@/api/shop/shopOrder/model";
|
||||
import './order.scss'
|
||||
|
||||
function Order() {
|
||||
const {params} = useRouter();
|
||||
const [statusBarHeight, setStatusBarHeight] = useState<number>(0) // 默认值为0
|
||||
const [searchParams, setSearchParams] = useState<ShopOrderParam>({
|
||||
statusFilter: params.statusFilter != undefined && params.statusFilter != '' ? parseInt(params.statusFilter) : -1
|
||||
})
|
||||
const [showSearch, setShowSearch] = useState(false)
|
||||
const [searchKeyword, setSearchKeyword] = useState('')
|
||||
const searchTimeoutRef = useRef<NodeJS.Timeout>()
|
||||
|
||||
const reload = async (where?: ShopOrderParam) => {
|
||||
console.log(where,'where...')
|
||||
setSearchParams(prev => ({ ...prev, ...where }))
|
||||
}
|
||||
|
||||
// 防抖搜索函数
|
||||
const debouncedSearch = useCallback((keyword: string) => {
|
||||
if (searchTimeoutRef.current) {
|
||||
clearTimeout(searchTimeoutRef.current);
|
||||
}
|
||||
|
||||
searchTimeoutRef.current = setTimeout(() => {
|
||||
if (keyword.trim()) {
|
||||
handleSearch({keywords: keyword.trim()});
|
||||
} else {
|
||||
// 如果搜索关键词为空，清除keywords参数
|
||||
const newSearchParams = { ...searchParams };
|
||||
delete newSearchParams.keywords;
|
||||
setSearchParams(newSearchParams);
|
||||
reload(newSearchParams).then();
|
||||
}
|
||||
}, 500); // 500ms防抖延迟
|
||||
}, [searchParams]);
|
||||
|
||||
// 处理搜索
|
||||
const handleSearch = (where: ShopOrderParam) => {
|
||||
// 合并搜索参数，保留当前的statusFilter
|
||||
const newSearchParams = {
|
||||
...searchParams, // 保留当前的所有参数（包括statusFilter）
|
||||
...where // 应用新的搜索条件
|
||||
};
|
||||
setSearchParams(newSearchParams)
|
||||
reload(newSearchParams).then()
|
||||
}
|
||||
useEffect(() => {
|
||||
// 获取状态栏高度
|
||||
Taro.getSystemInfo({
|
||||
success: (res) => {
|
||||
setStatusBarHeight(res.statusBarHeight ?? 0)
|
||||
},
|
||||
})
|
||||
// 设置导航栏标题
|
||||
Taro.setNavigationBarTitle({
|
||||
title: '我的订单'
|
||||
});
|
||||
|
||||
Taro.setNavigationBarColor({
|
||||
backgroundColor: '#ffffff',
|
||||
frontColor: '#000000',
|
||||
});
|
||||
|
||||
reload().then()
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<View className="bg-gray-50 min-h-screen">
|
||||
<View style={{height: `${statusBarHeight || 0}px`, backgroundColor: '#ffffff'}}></View>
|
||||
<NavBar
|
||||
fixed={true}
|
||||
style={{marginTop: `${statusBarHeight || 0}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">
|
||||
<Filter
|
||||
size={18}
|
||||
className="text-gray-600"
|
||||
onClick={() => setShowSearch(!showSearch)}
|
||||
/>
|
||||
<span className="ml-2 text-sm text-gray-600">筛选</span>
|
||||
</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={(value) => {
|
||||
setSearchKeyword(value);
|
||||
debouncedSearch(value); // 使用防抖搜索
|
||||
}}
|
||||
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>
|
||||
</Space>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/*订单列表*/}
|
||||
<OrderList
|
||||
onReload={() => reload(searchParams)}
|
||||
searchParams={searchParams}
|
||||
showSearch={showSearch}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default Order;
|
||||
Reference in New Issue
Block a user