diff --git a/config/env.ts b/config/env.ts index f2afab4..cdc046e 100644 --- a/config/env.ts +++ b/config/env.ts @@ -2,7 +2,7 @@ export const ENV_CONFIG = { // 开发环境 development: { - API_BASE_URL: 'https://cms-api.websoft.top/api', + API_BASE_URL: 'http://127.0.0.1:9200/api', APP_NAME: '时里院子市集', DEBUG: 'true', }, diff --git a/src/api/cms/cmsModel/model/index.ts b/src/api/cms/cmsModel/model/index.ts index 80daad0..4c1c7f7 100644 --- a/src/api/cms/cmsModel/model/index.ts +++ b/src/api/cms/cmsModel/model/index.ts @@ -1,4 +1,4 @@ -import type { PageParam } from '@/api'; +import type { PageParam } from '@/api/index'; /** * 模型 diff --git a/src/api/shop/shopOrder/model/index.ts b/src/api/shop/shopOrder/model/index.ts index 2c58b82..91403ee 100644 --- a/src/api/shop/shopOrder/model/index.ts +++ b/src/api/shop/shopOrder/model/index.ts @@ -221,4 +221,5 @@ export interface ShopOrderParam extends PageParam { isInvoice?: boolean; userId?: number; keywords?: string; + deliveryStatus?: number; } diff --git a/src/app.config.ts b/src/app.config.ts index c26bc01..ce4ddaa 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -3,6 +3,7 @@ export default defineAppConfig({ 'pages/index/index', 'pages/order/order', 'pages/cart/cart', + // 'pages/find/find', 'pages/user/user' ], "subpackages": [ diff --git a/src/pages/order/components/OrderList.tsx b/src/pages/order/components/OrderList.tsx index 52e383b..b596696 100644 --- a/src/pages/order/components/OrderList.tsx +++ b/src/pages/order/components/OrderList.tsx @@ -1,53 +1,60 @@ import {Avatar, Cell, Space, Tabs, Button, TabPane, Image} from '@nutui/nutui-react-taro' import {useEffect, useState, CSSProperties} from "react"; +import {View} from '@tarojs/components' import Taro from '@tarojs/taro'; import {InfiniteLoading} from '@nutui/nutui-react-taro' import dayjs from "dayjs"; -import {pageShopOrder, updateShopOrder} from "@/api/shop/shopOrder"; -import {ShopOrder} from "@/api/shop/shopOrder/model"; +import {pageShopOrder, removeShopOrder, updateShopOrder} from "@/api/shop/shopOrder"; +import {ShopOrder, ShopOrderParam} from "@/api/shop/shopOrder/model"; import {listShopOrderGoods} from "@/api/shop/shopOrderGoods"; import {ShopOrderGoods} from "@/api/shop/shopOrderGoods/model"; import {copyText} from "@/utils/common"; -const InfiniteUlStyle: CSSProperties = { - marginTop: '44px', - height: '82vh', +const getInfiniteUlStyle = (showSearch: boolean = false): CSSProperties => ({ + marginTop: showSearch ? '65px' : '44px', // 如果显示搜索框，增加更多的上边距 + height: showSearch ? '75vh' : '82vh', // 相应调整高度 width: '100%', padding: '0', overflowY: 'auto', overflowX: 'hidden', boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)', -} +}) const tabs = [ { index: 0, key: '全部', - title: '全部' + title: '全部', + description: '所有订单' }, { index: 1, key: '待付款', - title: '待付款' + title: '待付款', + description: '等待付款的订单' }, { index: 2, key: '待发货', - title: '待发货' + title: '待发货', + description: '已付款待发货的订单' }, { index: 3, key: '待收货', - title: '待收货' + title: '待收货', + description: '已发货待收货的订单' }, { index: 4, - key: '已收货', - title: '已收货' + key: '已完成', + title: '已完成', + description: '已完成的订单' }, { index: 5, - key: '已完成', - title: '已完成' + key: '已取消', + title: '已取消', + description: '已取消/退款的订单' } ] @@ -59,13 +66,17 @@ interface OrderWithGoods extends ShopOrder { interface OrderListProps { data: ShopOrder[]; onReload?: () => void; + searchParams?: ShopOrderParam; + showSearch?: boolean; } function OrderList(props: OrderListProps) { const [list, setList] = useState([]) const [page, setPage] = useState(1) const [hasMore, setHasMore] = useState(true) - const [tapIndex, setTapIndex] = useState('0') + const [tapIndex, setTapIndex] = useState(0) + const [loading, setLoading] = useState(false) + const [totalCount, setTotalCount] = useState(0) // 获取订单状态文本 const getOrderStatusText = (order: ShopOrder) => { @@ -79,7 +90,7 @@ function OrderList(props: OrderListProps) { if (order.orderStatus === 7) return '客户端申请退款'; // 检查支付状态 (payStatus为boolean类型，false/0表示未付款，true/1表示已付款) - if (!order.payStatus || order.payStatus === false) return '待付款'; + if (!order.payStatus) return '待付款'; // 已付款后检查发货状态 if (order.deliveryStatus === 10) return '待发货'; @@ -93,39 +104,92 @@ function OrderList(props: OrderListProps) { return '未知状态'; }; + // 检查订单是否为已取消状态 + const isCancelledOrder = (order: ShopOrder) => { + // 已取消的订单状态：2已取消，3取消中，4退款申请中，6退款成功，7客户端申请退款 + const cancelledStatuses = [2, 3, 4, 6, 7]; + return cancelledStatuses.includes(order.orderStatus || 0); + }; + + // 根据tab筛选订单，排除已取消的订单 + const filterOrdersByTab = (orders: OrderWithGoods[], tabIndex: number) => { + const indexStr = String(tabIndex); + + return orders.filter(order => { + switch (indexStr) { + case '1': // 待付款 + // 未付款且未取消的订单 + return !order.payStatus && !isCancelledOrder(order); + case '2': // 待发货 + // 已付款但未发货且未取消的订单 + return order.payStatus && order.deliveryStatus === 10 && !isCancelledOrder(order); + case '3': // 待收货 + // 已发货且未取消的订单 + return order.deliveryStatus === 20 && !isCancelledOrder(order); + case '4': // 已完成 + // 已完成的订单 + return order.orderStatus === 1; + case '5': // 已取消 + // 只显示已取消的订单 + return isCancelledOrder(order); + case '0': // 全部 + default: + return true; // 显示所有订单，包括已取消的 + } + }); + }; + const getOrderStatusParams = (index: string | number) => { - let params: { payStatus?: boolean | number; deliveryStatus?: number; orderStatus?: number; userId?: number } = {}; + let params: ShopOrderParam = {}; // 添加用户ID过滤 params.userId = Taro.getStorageSync('UserId'); - switch (index) { + // 将数字索引转换为字符串进行匹配 + const indexStr = String(index); + + switch (indexStr) { case '1': // 待付款 - params.payStatus = false; // 或者 0，取决于后端接口期望的类型 + params.payStatus = 0; // 0表示未付款 break; case '2': // 待发货 - params.payStatus = true; // 或者 1 - params.deliveryStatus = 10; + params.payStatus = 1; // 1表示已付款 + params.deliveryStatus = 10; // 10表示未发货 break; case '3': // 待收货 - params.deliveryStatus = 20; + params.deliveryStatus = 20; // 20表示已发货 break; - case '4': // 已收货 - params.deliveryStatus = 30; + case '4': // 已完成 + params.orderStatus = 1; // 1表示已完成 break; - case '5': // 已完成 - params.orderStatus = 1; + case '5': // 已取消 + // 对于已取消的订单，我们获取所有数据然后在前端筛选 + // 因为取消状态有多种：2已取消，3取消中，4退款申请中，6退款成功，7客户端申请退款 break; case '0': // 全部 default: + // 全部订单，不添加额外的筛选条件 break; } + + console.log(`Tab ${indexStr} (${tabs[Number(index)]?.title}) 筛选参数:`, params); return params; }; const reload = async (resetPage = false) => { + setLoading(true); const currentPage = resetPage ? 1 : page; - const params = getOrderStatusParams(tapIndex); - pageShopOrder({ page: currentPage, ...params }).then(async res => { + const statusParams = getOrderStatusParams(tapIndex); + const searchConditions = { + page: currentPage, + ...statusParams, + ...props.searchParams + }; + console.log('订单筛选条件:', { + tapIndex, + statusParams, + searchConditions + }); + pageShopOrder(searchConditions).then(async res => { let newList: OrderWithGoods[] | undefined = []; if (res?.list && res?.list.length > 0) { // 为每个订单获取商品信息 @@ -147,7 +211,11 @@ function OrderList(props: OrderListProps) { }) ); - newList = resetPage ? ordersWithGoods : list?.concat(ordersWithGoods); + // 合并数据 + const combinedList = resetPage ? ordersWithGoods : list?.concat(ordersWithGoods); + + // 根据当前tab筛选订单，排除已取消的订单 + newList = filterOrdersByTab(combinedList, Number(tapIndex)); setHasMore(true); } else { newList = []; @@ -155,6 +223,11 @@ function OrderList(props: OrderListProps) { } setList(newList || []); setPage(currentPage); + setTotalCount(res?.count || 0); + setLoading(false); + }).catch(error => { + console.error('加载订单失败:', error); + setLoading(false); }); }; @@ -186,14 +259,11 @@ function OrderList(props: OrderListProps) { // 取消订单 const cancelOrder = async (order: ShopOrder) => { try { - await updateShopOrder({ - ...order, - orderStatus: 2 // 已取消 - }); + await removeShopOrder(order.orderId); Taro.showToast({ - title: '订单已取消', + title: '订单已删除', }); - reload(true); // 重新加载列表 + reload(true).then(); // 重新加载列表 props.onReload?.(); // 通知父组件刷新 } catch (error) { console.error('取消订单失败:', error); @@ -207,25 +277,58 @@ function OrderList(props: OrderListProps) { reload(true); // 首次加载或tab切换时重置页码 }, [tapIndex]); // 监听tapIndex变化 + useEffect(() => { + reload(true); // 搜索参数变化时重置页码 + }, [props.searchParams]); // 监听搜索参数变化 + return ( <> { + console.log('Tab切换到:', paneKey, '对应状态:', tabs[paneKey]?.title); setTapIndex(paneKey) }} > { tabs?.map((item, index) => { - return + return ( + + ) }) } -
+
+ {/* 筛选状态提示 */} + {tapIndex !== 0 && ( + + 当前筛选: {tabs[Number(tapIndex)]?.title} + {totalCount >= 0 && ` (${totalCount}条)`} + + )} + {/* 待付款状态：显示取消订单和立即支付 */} - {(!item.payStatus || item.payStatus === false) && item.orderStatus !== 2 && ( + {(!item.payStatus) && item.orderStatus !== 2 && ( - + )} diff --git a/src/pages/order/order.scss b/src/pages/order/order.scss index 8cc23a8..07a1ee5 100644 --- a/src/pages/order/order.scss +++ b/src/pages/order/order.scss @@ -2,3 +2,71 @@ page { background: linear-gradient(to bottom, #f3f3f3, #f9fafb); background-size: 100%; } + +.search-container { + transition: all 0.3s ease; + + .nut-input { + background-color: #f8f9fa !important; + border: 1px solid #e5e5e5 !important; + border-radius: 4px !important; + + &:focus { + border-color: #007bff !important; + box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important; + } + } + + .nut-button { + border-radius: 4px !important; + + &--primary { + background: linear-gradient(135deg, #007bff, #0056b3) !important; + border: none !important; + } + + &--small { + padding: 6px 12px !important; + font-size: 12px !important; + } + } +} + +// Tabs样式优化 +.nut-tabs { + .nut-tabs__titles { + background: #ffffff !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; + + .nut-tabs__titles-item { + font-size: 14px !important; + font-weight: 500 !important; + + &--active { + color: #007bff !important; + font-weight: 600 !important; + } + } + + .nut-tabs__line { + background: #007bff !important; + height: 3px !important; + } + } +} + +// 筛选提示样式 +.filter-tip { + animation: slideDown 0.3s ease; +} + +@keyframes slideDown { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} diff --git a/src/pages/order/order.tsx b/src/pages/order/order.tsx index 5a69f59..1e7a112 100644 --- a/src/pages/order/order.tsx +++ b/src/pages/order/order.tsx @@ -1,25 +1,44 @@ -import {useState} from "react"; // 添加 useCallback 引入 +import {useState} from "react"; 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 {NavBar, 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 {ShopOrder} from "@/api/shop/shopOrder/model"; +// 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 [statusBarHeight, setStatusBarHeight] = useState() const [list, setList] = useState([]) + const [searchParams, setSearchParams] = useState({}) + const [showSearch, setShowSearch] = useState(false) + const [searchKeyword, setSearchKeyword] = useState('') - - const reload = async () => { - const orders = await pageShopOrder({userId: Taro.getStorageSync('UserId')}) + 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.getSystemInfo({ success: (res) => { @@ -27,7 +46,7 @@ function Order() { }, }) reload().then() - }); // 新增: 添加滚动事件监听 + }); return ( <> @@ -39,25 +58,85 @@ function Order() { <>
- - {/**/} + setShowSearch(!showSearch)} + /> + setShowSearch(!showSearch)} + />
- {/**/} - {/*
*/} - {/* */} - {/*
筛选
*/} - {/*
*/} } > 我的订单 + + {/* 搜索组件 */} + {showSearch && ( + + + + { + if (searchKeyword.trim()) { + handleSearch({ keywords: searchKeyword.trim() }); + } + }} + style={{ + padding: '8px 12px', + border: '1px solid #e5e5e5', + borderRadius: '4px', + backgroundColor: '#f8f9fa' + }} + /> + + + + + + + + )} {/*暂无订单*/} {list.length == 0 && (
0 && ( - + reload(searchParams)} + searchParams={searchParams} + showSearch={showSearch} + /> ) } diff --git a/src/pages/order/test-order.tsx b/src/pages/order/test-order.tsx deleted file mode 100644 index b437d84..0000000 --- a/src/pages/order/test-order.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import { Button, Space, Toast } from '@nutui/nutui-react-taro'; -import Taro from '@tarojs/taro'; -import { createOrder } from '@/api/shop/shopOrder'; -import { OrderCreateRequest } from '@/api/shop/shopOrder/model'; - -const TestOrder = () => { - // 创建测试订单 - const createTestOrder = async () => { - try { - const orderData: OrderCreateRequest = { - goodsItems: [ - { - goodsId: 1, - quantity: 2, - skuId: 1, - specInfo: '红色 L码' - } - ], - payType: 1, // 微信支付 - deliveryType: 0, // 快递 - comments: '测试订单' - }; - - const result = await createOrder(orderData); - console.log('订单创建成功:', result); - Toast.show('测试订单创建成功'); - - // 跳转到订单列表 - setTimeout(() => { - Taro.navigateTo({ url: '/pages/order/order' }); - }, 1000); - } catch (error) { - console.error('创建订单失败:', error); - Toast.show('创建订单失败'); - } - }; - - return ( -
-

订单功能测试

- - - - -
- ); -}; - -export default TestOrder;