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

refactor(order): 优化订单商品数据显示逻辑

Browse Source 
- 将订单模型中的 orderGoods 类型从 OrderGoods 改为 ShopOrderGoods
- 移除 OrderWithGoods 接口定义和 normalizeOrderGoodsList 函数
- 直接使用订单分页接口返回的 orderGoods 字段渲染商品信息
- 添加 utils/orderGoods.ts 工具函数处理订单商品数据标准化
- 在骑手端订单页面实现商品名称汇总显示功能
- 优化再次购买和支付功能中的商品数据获取逻辑
This commit is contained in:
赵忠林
2026-02-01 12:21:55 +08:00
parent dea40268fe
commit 945bf9af8d
4 changed files with 71 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import type { PageParam } from '@/api/index';
import {OrderGoods} from "@/api/system/orderGoods/model";
import type { ShopOrderGoods } from '@/api/shop/shopOrderGoods/model';
/**
* 订单
@@ -156,7 +156,7 @@ export interface ShopOrder {
// 是否已收到赠品
hasTakeGift?: string;
// 订单商品项
orderGoods?: OrderGoods[];
orderGoods?: ShopOrderGoods[];
}
/**

12
src/rider/orders/index.tsx
View File

@@ -241,6 +241,14 @@ export default function RiderOrders() {
const flow2Done = o.deliveryStatus === 20 || o.deliveryStatus === 30
const flow3Done = !!o.sendEndTime
const flow4Done = o.orderStatus === 1
// 直接使用订单分页接口返回的 orderGoods
const goodsList = o.orderGoods || []
const goodsNameList = goodsList
.map(g => g?.goodsName || (g as any)?.goodsTitle || (g as any)?.title || (g as any)?.name)
.filter(Boolean) as string[]
const goodsSummary = goodsNameList.length
? `${goodsNameList.slice(0, 3).join('、')}${goodsList.length > 3 ? ` 等${goodsList.length}件` : ''}`
: (o.title || '-')
const autoConfirmAt = o.sendEndTime
? dayjs(o.sendEndTime).add(AUTO_CONFIRM_RECEIVE_HOURS_FALLBACK, 'hour')
@@ -278,6 +286,10 @@ export default function RiderOrders() {
<Text className="text-gray-500 ml-3">数量：</Text>
<Text>{o.totalNum ?? '-'}</Text>
</View>
<View className="text-sm text-gray-700 mt-1">
<Text className="text-gray-500">商品：</Text>
<Text>{goodsSummary}</Text>
</View>
{o.sendEndTime && (
<View className="text-sm text-gray-700 mt-1">
<Text className="text-gray-500">送达时间：</Text>

80
src/user/order/components/OrderList.tsx
View File

@@ -7,7 +7,6 @@ import dayjs from "dayjs";
import {pageShopOrder, updateShopOrder, createOrder} 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";
import PaymentCountdown from "@/components/PaymentCountdown";
import {PaymentType} from "@/utils/payment";
@@ -78,36 +77,6 @@ const tabs = [
}
]
// 扩展订单接口，包含商品信息
interface OrderWithGoods extends ShopOrder {
// 避免与 ShopOrder.orderGoods (OrderGoods[]) 冲突：这里使用单独字段保存接口返回的商品明细
orderGoodsList?: ShopOrderGoods[];
}
// 后端订单分页接口通常已返回 orderGoods（订单商品明细）。
// 这里把各种可能的字段名做一次归一化，避免再为每个订单额外请求一次“订单商品”接口。
const normalizeOrderGoodsList = (order: any): ShopOrderGoods[] => {
const raw =
order?.orderGoods ||
order?.orderGoodsList ||
order?.goodsList ||
order?.goods ||
[];
if (!Array.isArray(raw)) return [];
return raw.map((g: any) => ({
...g,
goodsId: g?.goodsId ?? g?.itemId ?? g?.goods_id,
skuId: g?.skuId ?? g?.sku_id,
// 当接口只返回了最小字段时，用订单标题兜底，避免列表出现空白商品名
goodsName: g?.goodsName ?? g?.goodsTitle ?? g?.title ?? g?.name ?? order?.title ?? '商品',
image: g?.image ?? g?.goodsImage ?? g?.cover ?? g?.pic,
spec: g?.spec ?? g?.specInfo ?? g?.spec_name,
totalNum: g?.totalNum ?? g?.quantity ?? g?.num ?? g?.count,
price: g?.price ?? g?.payPrice ?? g?.goodsPrice ?? g?.unitPrice
}));
};
interface OrderListProps {
onReload?: () => void;
searchParams?: ShopOrderParam;
@@ -122,7 +91,7 @@ interface OrderListProps {
}
function OrderList(props: OrderListProps) {
const [list, setList] = useState<OrderWithGoods[]>([])
const [list, setList] = useState<ShopOrder[]>([])
const pageRef = useRef(1)
const [hasMore, setHasMore] = useState(true)
const [payingOrderId, setPayingOrderId] = useState<number | null>(null)
@@ -254,20 +223,17 @@ function OrderList(props: OrderListProps) {
const res = await pageShopOrder(searchConditions);
if (res?.list && res?.list.length > 0) {
// 订单分页接口已返回 orderGoods：直接读取并归一化，避免 N+1 请求导致列表加载慢
const ordersWithGoods: OrderWithGoods[] = res.list.map((order: any) => ({
...order,
orderGoodsList: normalizeOrderGoodsList(order)
}));
// 订单分页接口已返回 orderGoods：列表直接使用该字段
const incoming = res.list as ShopOrder[];
// 使用函数式更新避免依赖 list
setList(prevList => {
const newList = resetPage ? ordersWithGoods : (prevList || []).concat(ordersWithGoods);
const newList = resetPage ? incoming : (prevList || []).concat(incoming);
return newList;
});
// 正确判断是否还有更多数据
const hasMoreData = res.list.length >= 10; // 假设每页10条数据
const hasMoreData = incoming.length >= 10; // 假设每页10条数据
setHasMore(hasMoreData);
} else {
setList(prevList => resetPage ? [] : prevList);
@@ -377,9 +343,9 @@ function OrderList(props: OrderListProps) {
};
// 再次购买 (已完成状态)
const buyAgain = (order: OrderWithGoods) => {
const buyAgain = (order: ShopOrder) => {
console.log('再次购买:', order);
const goodsId = order.orderGoodsList?.[0]?.goodsId
const goodsId = order.orderGoods?.[0]?.goodsId
if (!goodsId) {
Taro.showToast({
title: '订单商品信息缺失',
@@ -437,7 +403,7 @@ function OrderList(props: OrderListProps) {
};
// 立即支付
const payOrder = async (order: OrderWithGoods) => {
const payOrder = async (order: ShopOrder) => {
try {
if (!order.orderId || !order.orderNo) {
Taro.showToast({
@@ -480,8 +446,8 @@ function OrderList(props: OrderListProps) {
Taro.showLoading({title: '发起支付...'});
// 构建商品数据：优先使用列表已加载的商品信息；缺失时再补拉一次，避免goodsItems为空导致后端拒绝/再次支付失败
let orderGoods = order.orderGoodsList || [];
// 构建商品数据：优先使用订单分页接口返回的 orderGoods；缺失时再补拉一次，避免goodsItems为空导致后端拒绝/再次支付失败
let orderGoods = order.orderGoods || [];
if (!orderGoods.length) {
try {
orderGoods = (await listShopOrderGoods({orderId: order.orderId})) || [];
@@ -492,13 +458,13 @@ function OrderList(props: OrderListProps) {
}
const goodsItems = orderGoods
.filter(g => !!g.goodsId)
.filter(g => !!(g as any).goodsId || !!(g as any).itemId)
.map(goods => ({
goodsId: goods.goodsId as number,
quantity: goods.totalNum || 1,
goodsId: (goods.goodsId ?? (goods as any).itemId) as number,
quantity: ((goods as any).quantity ?? goods.totalNum ?? 1) as number,
// 若后端按SKU计算价格/库存，补齐SKU/规格信息更安全
skuId: (goods as any).skuId,
specInfo: (goods as any).spec || (goods as any).specInfo
skuId: (goods as any).skuId ?? (goods as any).sku_id,
specInfo: (goods as any).specInfo ?? (goods as any).spec
}));
if (!goodsItems.length) {
@@ -753,8 +719,8 @@ function OrderList(props: OrderListProps) {
{/* 商品信息 */}
<View className={'goods-info'}>
{item.orderGoodsList && item.orderGoodsList.length > 0 ? (
item.orderGoodsList.map((goods, goodsIndex) => (
{item.orderGoods && item.orderGoods.length > 0 ? (
item.orderGoods.map((goods, goodsIndex) => (
<View key={goodsIndex} className={'flex items-center mb-2'}>
<Image
src={goods.image || '/default-goods.png'}
@@ -764,11 +730,15 @@ function OrderList(props: OrderListProps) {
className={'rounded'}
/>
<View className={'ml-2 flex flex-col flex-1'}>
<Text className={'text-sm font-bold'}>{goods.goodsName}</Text>
{goods.spec && <Text className={'text-gray-500 text-xs'}>规格：{goods.spec}</Text>}
<Text className={'text-gray-500 text-xs'}>数量：{goods.totalNum}</Text>
<Text className={'text-sm font-bold'}>
{goods.goodsName || (goods as any).goodsTitle || (goods as any).title || item.title || '订单商品'}
</Text>
{(goods.spec || (goods as any).specInfo) && (
<Text className={'text-gray-500 text-xs'}>规格：{goods.spec || (goods as any).specInfo}</Text>
)}
<Text className={'text-gray-500 text-xs'}>数量：{(goods as any).quantity ?? goods.totalNum}</Text>
</View>
<Text className={'text-sm'}>￥{goods.price}</Text>
<Text className={'text-sm'}>￥{goods.price || (goods as any).payPrice}</Text>
</View>
))
) : (

32
src/utils/orderGoods.ts Normal file
View File

@@ -0,0 +1,32 @@
import type { ShopOrderGoods } from '@/api/shop/shopOrderGoods/model';
/**
* Normalize order goods data returned by the order/page API.
*
* In practice different backends may return different field names (orderGoods/orderGoodsList/goodsList...),
* and the item fields can also differ (goodsName/title/name, totalNum/quantity, etc.).
*
* We normalize them to ShopOrderGoods so list pages can render without doing N+1 requests per order.
*/
export const normalizeOrderGoodsList = (order: any): ShopOrderGoods[] => {
const raw =
order?.orderGoods ||
order?.orderGoodsList ||
order?.goodsList ||
order?.goods ||
[];
if (!Array.isArray(raw)) return [];
return raw.map((g: any) => ({
...g,
goodsId: g?.goodsId ?? g?.itemId ?? g?.goods_id,
skuId: g?.skuId ?? g?.sku_id,
// When the API returns minimal fields, fall back to order title to avoid blank names.
goodsName: g?.goodsName ?? g?.goodsTitle ?? g?.title ?? g?.name ?? order?.title ?? '商品',
image: g?.image ?? g?.goodsImage ?? g?.cover ?? g?.pic,
spec: g?.spec ?? g?.specInfo ?? g?.spec_name,
totalNum: g?.totalNum ?? g?.quantity ?? g?.num ?? g?.count,
price: g?.price ?? g?.payPrice ?? g?.goodsPrice ?? g?.unitPrice
}));
};