developer/template-10584
1
0
Fork 0
forked from gxwebsoft/mp-10550
Code Pull Requests Activity

修复已知问题

Browse Source
This commit is contained in:
赵忠林
2025-08-05 21:40:08 +08:00
parent 80ca721826
commit 27505c1c64
8 changed files with 317 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config/env.ts
View File

@@ -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',
},

2
src/api/cms/cmsModel/model/index.ts
View File

@@ -1,4 +1,4 @@
import type { PageParam } from '@/api';
import type { PageParam } from '@/api/index';
/**
* 模型

1
src/api/shop/shopOrder/model/index.ts
View File

@@ -221,4 +221,5 @@ export interface ShopOrderParam extends PageParam {
isInvoice?: boolean;
userId?: number;
keywords?: string;
deliveryStatus?: number;
}

1
src/app.config.ts
View File

@@ -3,6 +3,7 @@ export default defineAppConfig({
'pages/index/index',
'pages/order/order',
'pages/cart/cart',
// 'pages/find/find',
'pages/user/user'
],
"subpackages": [

185
src/pages/order/components/OrderList.tsx
View File

@@ -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<OrderWithGoods[]>([])
const [page, setPage] = useState(1)
const [hasMore, setHasMore] = useState(true)
const [tapIndex, setTapIndex] = useState<string | number>('0')
const [tapIndex, setTapIndex] = useState<string | number>(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 (
<>
<Tabs
align={'left'}
className={'fixed left-0'}
style={{ top: '44px'}}
tabStyle={{ backgroundColor: '#ffffff'}}
style={{
top: '44px',
zIndex: 998,
borderBottom: '1px solid #e5e5e5'
}}
tabStyle={{
backgroundColor: '#ffffff',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
}}
value={tapIndex}
onChange={(paneKey) => {
console.log('Tab切换到:', paneKey, '对应状态:', tabs[paneKey]?.title);
setTapIndex(paneKey)
}}
>
{
tabs?.map((item, index) => {
return <TabPane key={index} title={item.title}></TabPane>
return (
<TabPane
key={index}
title={loading && tapIndex === index ? `${item.title}...` : item.title}
></TabPane>
)
})
}
</Tabs>
<div style={InfiniteUlStyle} id="scroll">
<div style={getInfiniteUlStyle(props.showSearch)} id="scroll">
{/* 筛选状态提示 */}
{tapIndex !== 0 && (
<View className="filter-tip" style={{
padding: '8px 16px',
backgroundColor: '#f0f8ff',
borderLeft: '3px solid #007bff',
margin: '8px 16px',
borderRadius: '4px',
fontSize: '12px',
color: '#666'
}}>
当前筛选: {tabs[Number(tapIndex)]?.title}
{totalCount >= 0 && ` (${totalCount}条)`}
</View>
)}
<InfiniteLoading
target="scroll"
hasMore={hasMore}
@@ -299,9 +402,9 @@ function OrderList(props: OrderListProps) {
{/* 操作按钮 */}
<Space className={'btn flex justify-end'}>
{/* 待付款状态：显示取消订单和立即支付 */}
{(!item.payStatus || item.payStatus === false) && item.orderStatus !== 2 && (
{(!item.payStatus) && item.orderStatus !== 2 && (
<Space>
<Button size={'small'} onClick={(e) => {e.stopPropagation(); cancelOrder(item)}}>取消订单</Button>
<Button size={'small'} onClick={(e) => {e.stopPropagation(); cancelOrder(item)}}>删除订单</Button>
<Button size={'small'} type="primary" onClick={(e) => {e.stopPropagation(); console.log('立即支付')}}>立即支付</Button>
</Space>
)}

68
src/pages/order/order.scss
View File

@@ -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);
}
}

118
src/pages/order/order.tsx
View File

@@ -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<number>()
const [list, setList] = useState<ShopOrder[]>([])
const [searchParams, setSearchParams] = useState<ShopOrderParam>({})
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() {
<>
<div className={'flex justify-between items-center w-full'}>
<Space>
<Search size={18} className={'mx-1'}/>
{/*<Filter size={18} className={'mx-1'}/>*/}
<Search
size={18}
className={'mx-1'}
onClick={() => setShowSearch(!showSearch)}
/>
<Filter
size={18}
className={'mx-1'}
onClick={() => setShowSearch(!showSearch)}
/>
</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>
{/* 搜索组件 */}
{showSearch && (
<View
className="search-container bg-white p-3 shadow-sm"
style={{
position: 'fixed',
top: `${(statusBarHeight || 0) + 44}px`, // 导航栏高度通常是44px
left: 0,
right: 0,
zIndex: 999,
borderBottom: '1px solid #e5e5e5'
}}
>
<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: 'calc(100vh - 150px)',
height: showSearch ? 'calc(100vh - 200px)' : 'calc(100vh - 150px)',
marginTop: showSearch ? '60px' : '0px'
}}>
<Empty
style={{
@@ -75,7 +154,12 @@ function Order() {
{/*订单列表*/}
{
list.length > 0 && (
<OrderList data={list} onReload={reload}/>
<OrderList
data={list}
onReload={() => reload(searchParams)}
searchParams={searchParams}
showSearch={showSearch}
/>
)
}
</>

54
src/pages/order/test-order.tsx
View File

@@ -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 (
<div style={{ padding: '20px' }}>
<h2>订单功能测试</h2>
<Space direction="vertical">
<Button type="primary" onClick={createTestOrder}>
创建测试订单
</Button>
<Button onClick={() => Taro.navigateTo({ url: '/pages/order/order' })}>
查看订单列表
</Button>
</Space>
</div>
);
};
export default TestOrder;