forked from gxwebsoft/mp-10550
修复已知问题
This commit is contained in:
47
src/pages/order/components/OrderSearch.scss
Normal file
47
src/pages/order/components/OrderSearch.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
.order-search {
|
||||
.search-bar {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.filter-popup {
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 修复Radio按钮样式
|
||||
.nut-radio {
|
||||
&.nut-radio--button {
|
||||
margin: 2px;
|
||||
|
||||
.nut-radio__label {
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 修复Input样式
|
||||
.nut-input {
|
||||
&.bg-transparent {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
&.border-none {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
266
src/pages/order/components/OrderSearch.tsx
Normal file
266
src/pages/order/components/OrderSearch.tsx
Normal file
@@ -0,0 +1,266 @@
|
||||
import React, { useState } from 'react';
|
||||
import { View } from '@tarojs/components';
|
||||
import {
|
||||
Input,
|
||||
Button,
|
||||
Popup,
|
||||
Cell,
|
||||
CellGroup,
|
||||
Radio,
|
||||
Space,
|
||||
DatePicker,
|
||||
Picker
|
||||
} from '@nutui/nutui-react-taro';
|
||||
import { Search, Filter, Close } from '@nutui/icons-react-taro';
|
||||
import { ShopOrderParam } from '@/api/shop/shopOrder/model';
|
||||
import dayjs from 'dayjs';
|
||||
import './OrderSearch.scss';
|
||||
|
||||
interface OrderSearchProps {
|
||||
onSearch: (params: ShopOrderParam) => void;
|
||||
onReset: () => void;
|
||||
}
|
||||
|
||||
// 订单状态选项
|
||||
const orderStatusOptions = [
|
||||
{ text: '全部', value: '' },
|
||||
{ text: '未使用', value: 0 },
|
||||
{ text: '已完成', value: 1 },
|
||||
{ text: '已取消', value: 2 },
|
||||
{ text: '取消中', value: 3 },
|
||||
{ text: '退款申请中', value: 4 },
|
||||
{ text: '退款被拒绝', value: 5 },
|
||||
{ text: '退款成功', value: 6 },
|
||||
{ text: '客户端申请退款', value: 7 }
|
||||
];
|
||||
|
||||
// 支付状态选项
|
||||
const payStatusOptions = [
|
||||
{ text: '全部', value: '' },
|
||||
{ text: '未付款', value: 0 },
|
||||
{ text: '已付款', value: 1 }
|
||||
];
|
||||
|
||||
// 支付方式选项
|
||||
const payTypeOptions = [
|
||||
{ text: '全部', value: '' },
|
||||
{ text: '余额支付', value: 0 },
|
||||
{ text: '微信支付', value: 1 },
|
||||
{ text: '会员卡支付', value: 2 },
|
||||
{ text: '支付宝', value: 3 },
|
||||
{ text: '现金', value: 4 },
|
||||
{ text: 'POS机', value: 5 }
|
||||
];
|
||||
|
||||
const OrderSearch: React.FC<OrderSearchProps> = ({ onSearch, onReset }) => {
|
||||
const [showFilter, setShowFilter] = useState(false);
|
||||
const [searchParams, setSearchParams] = useState<ShopOrderParam>({
|
||||
keywords: '',
|
||||
orderNo: '',
|
||||
phone: '',
|
||||
orderStatus: undefined,
|
||||
payStatus: undefined,
|
||||
payType: undefined
|
||||
});
|
||||
|
||||
// 搜索关键词
|
||||
const handleKeywordSearch = () => {
|
||||
if (!searchParams.keywords?.trim()) {
|
||||
return;
|
||||
}
|
||||
onSearch({ keywords: searchParams.keywords.trim() });
|
||||
};
|
||||
|
||||
// 重置搜索条件
|
||||
const handleReset = () => {
|
||||
setSearchParams({
|
||||
keywords: '',
|
||||
orderNo: '',
|
||||
phone: '',
|
||||
orderStatus: undefined,
|
||||
payStatus: undefined,
|
||||
payType: undefined
|
||||
});
|
||||
onReset();
|
||||
};
|
||||
|
||||
// 应用筛选条件
|
||||
const handleFilter = () => {
|
||||
const filterParams: ShopOrderParam = {};
|
||||
|
||||
if (searchParams.orderNo?.trim()) {
|
||||
filterParams.orderNo = searchParams.orderNo.trim();
|
||||
}
|
||||
if (searchParams.phone?.trim()) {
|
||||
filterParams.phone = searchParams.phone.trim();
|
||||
}
|
||||
if (searchParams.orderStatus !== undefined && searchParams.orderStatus !== '') {
|
||||
filterParams.orderStatus = Number(searchParams.orderStatus);
|
||||
}
|
||||
if (searchParams.payStatus !== undefined && searchParams.payStatus !== '') {
|
||||
filterParams.payStatus = Number(searchParams.payStatus);
|
||||
}
|
||||
if (searchParams.payType !== undefined && searchParams.payType !== '') {
|
||||
filterParams.payType = Number(searchParams.payType);
|
||||
}
|
||||
|
||||
onSearch(filterParams);
|
||||
setShowFilter(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="order-search">
|
||||
{/* 搜索栏 */}
|
||||
<View className="search-bar flex items-center p-3 bg-white">
|
||||
<View className="flex-1 flex items-center bg-gray-100 rounded-full px-3 py-2">
|
||||
<Search size={16} className="text-gray-400 mr-2" />
|
||||
<Input
|
||||
placeholder="搜索订单号、商品名称"
|
||||
value={searchParams.keywords}
|
||||
onChange={(value) => setSearchParams(prev => ({ ...prev, keywords: value }))}
|
||||
onConfirm={handleKeywordSearch}
|
||||
className="flex-1 bg-transparent border-none"
|
||||
style={{ padding: 0 }}
|
||||
/>
|
||||
</View>
|
||||
<Button
|
||||
type="primary"
|
||||
size={'large'}
|
||||
className="ml-2"
|
||||
onClick={handleKeywordSearch}
|
||||
>
|
||||
搜索
|
||||
</Button>
|
||||
<View
|
||||
className="ml-2 p-2 flex items-center justify-center"
|
||||
onClick={() => setShowFilter(true)}
|
||||
>
|
||||
<Filter size={18} className="text-gray-600" />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 筛选弹窗 */}
|
||||
<Popup
|
||||
visible={showFilter}
|
||||
position="right"
|
||||
onClose={() => setShowFilter(false)}
|
||||
style={{ width: '80%', height: '100%' }}
|
||||
>
|
||||
<View className="filter-popup h-full flex flex-col">
|
||||
{/* 头部 */}
|
||||
<View className="flex items-center justify-between p-4 border-b">
|
||||
<View className="text-lg font-medium">筛选条件</View>
|
||||
<Close size={20} onClick={() => setShowFilter(false)} />
|
||||
</View>
|
||||
|
||||
{/* 筛选内容 */}
|
||||
<View className="flex-1 overflow-y-auto">
|
||||
<CellGroup>
|
||||
{/* 订单号 */}
|
||||
<Cell>
|
||||
<View className="w-full">
|
||||
<View className="text-sm text-gray-600 mb-2">订单号</View>
|
||||
<Input
|
||||
placeholder="请输入订单号"
|
||||
value={searchParams.orderNo}
|
||||
onChange={(value) => setSearchParams(prev => ({ ...prev, orderNo: value }))}
|
||||
/>
|
||||
</View>
|
||||
</Cell>
|
||||
|
||||
{/* 手机号 */}
|
||||
<Cell>
|
||||
<View className="w-full">
|
||||
<View className="text-sm text-gray-600 mb-2">手机号</View>
|
||||
<Input
|
||||
placeholder="请输入手机号"
|
||||
value={searchParams.phone}
|
||||
onChange={(value) => setSearchParams(prev => ({ ...prev, phone: value }))}
|
||||
/>
|
||||
</View>
|
||||
</Cell>
|
||||
|
||||
{/* 订单状态 */}
|
||||
<Cell>
|
||||
<View className="w-full">
|
||||
<View className="text-sm text-gray-600 mb-2">订单状态</View>
|
||||
<Radio.Group
|
||||
value={searchParams.orderStatus}
|
||||
onChange={(value) => setSearchParams(prev => ({ ...prev, orderStatus: value }))}
|
||||
>
|
||||
<View className="grid grid-cols-2 gap-2">
|
||||
{orderStatusOptions.map((option) => (
|
||||
<Radio key={option.value} value={option.value} shape="button">
|
||||
{option.text}
|
||||
</Radio>
|
||||
))}
|
||||
</View>
|
||||
</Radio.Group>
|
||||
</View>
|
||||
</Cell>
|
||||
|
||||
{/* 支付状态 */}
|
||||
<Cell>
|
||||
<View className="w-full">
|
||||
<View className="text-sm text-gray-600 mb-2">支付状态</View>
|
||||
<Radio.Group
|
||||
value={searchParams.payStatus}
|
||||
onChange={(value) => setSearchParams(prev => ({ ...prev, payStatus: value }))}
|
||||
>
|
||||
<View className="flex flex-wrap gap-2">
|
||||
{payStatusOptions.map((option) => (
|
||||
<Radio key={option.value} value={option.value} shape="button">
|
||||
{option.text}
|
||||
</Radio>
|
||||
))}
|
||||
</View>
|
||||
</Radio.Group>
|
||||
</View>
|
||||
</Cell>
|
||||
|
||||
{/* 支付方式 */}
|
||||
<Cell>
|
||||
<View className="w-full">
|
||||
<View className="text-sm text-gray-600 mb-2">支付方式</View>
|
||||
<Radio.Group
|
||||
value={searchParams.payType}
|
||||
onChange={(value) => setSearchParams(prev => ({ ...prev, payType: value }))}
|
||||
>
|
||||
<View className="grid grid-cols-2 gap-2">
|
||||
{payTypeOptions.map((option) => (
|
||||
<Radio key={option.value} value={option.value} shape="button">
|
||||
{option.text}
|
||||
</Radio>
|
||||
))}
|
||||
</View>
|
||||
</Radio.Group>
|
||||
</View>
|
||||
</Cell>
|
||||
</CellGroup>
|
||||
</View>
|
||||
|
||||
{/* 底部按钮 */}
|
||||
<View className="p-4 border-t">
|
||||
<Space className="w-full">
|
||||
<Button
|
||||
className="flex-1"
|
||||
onClick={handleReset}
|
||||
>
|
||||
重置
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
className="flex-1"
|
||||
onClick={handleFilter}
|
||||
>
|
||||
确定
|
||||
</Button>
|
||||
</Space>
|
||||
</View>
|
||||
</View>
|
||||
</Popup>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrderSearch;
|
||||
Reference in New Issue
Block a user