From f878ea146e99312e91814133f8b0357abdc6e226 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Tue, 14 Jul 2026 22:25:33 +0800 Subject: [PATCH] =?UTF-8?q?feat(order):=20=E5=9C=A8=E5=BE=85=E5=8F=91?= =?UTF-8?q?=E8=B4=A7=E8=AE=A2=E5=8D=95=E5=88=97=E8=A1=A8=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E5=85=B3=E9=97=AD=E8=AE=A2=E5=8D=95=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 OrderCard 组件中新增 onCloseOrder 可选回调属性 - 待发货且未取消的订单显示“关闭订单”按钮 - 点击按钮阻止事件冒泡，避免触发卡片跳转 - 列表页实现 handleCloseOrder，弹窗确认后调用 updateShopOrder - 关闭订单后显示成功提示并刷新当前列表数据 - 复用订单详情页取消订单的状态更新逻辑，保持一致性 --- .workbuddy/memory/2026-07-14.md | 18 +++++++++++++ src/components/common/OrderCard/index.tsx | 25 ++++++++++++++++-- src/pages/order/list.tsx | 31 ++++++++++++++++++++--- 3 files changed, 69 insertions(+), 5 deletions(-) diff --git a/.workbuddy/memory/2026-07-14.md b/.workbuddy/memory/2026-07-14.md index aef5500..960047d 100644 --- a/.workbuddy/memory/2026-07-14.md +++ b/.workbuddy/memory/2026-07-14.md @@ -303,3 +303,21 @@ adapter `/list` 接口忽略分页，一次返回全部收藏；前端 `listShop ### 修改 - **`src/pages/user/address-edit.tsx`**：识别区布局从 `relative` + `absolute` 叠加改为 flex 纵向布局——Textarea 在上，识别按钮 `flex justify-end mt-2` 在下方右对齐。去掉 `relative` class，按钮不再叠加在 Textarea 上。 + +## 订单列表页待发货增加关闭订单功能（2026-07-14） + +### 需求 +`pages/order/list` 待发货状态的订单卡片需要支持客户关闭订单。 + +### 实现 +1. **`src/components/common/OrderCard/index.tsx`**： + - 新增可选 prop `onCloseOrder?: (order: ShopOrder) => void` + - 当 `deliveryStatus === 10`（未发货）且订单未取消/未取消中时，在卡片底部显示「关闭订单」按钮 + - 点击按钮阻止事件冒泡，避免触发卡片跳转详情 +2. **`src/pages/order/list.tsx`**： + - 导入 `updateShopOrder` 和 `OrderStatus` + - 实现 `handleCloseOrder`：弹窗确认后调用 `updateShopOrder({ ...order, orderStatus: OrderStatus.Cancelled })`，成功后 toast 并刷新当前 tab + - 给 `OrderCard` 传入 `onCloseOrder` 回调 + +### 说明 +复用订单详情页已有的取消订单逻辑（通过 `updateShopOrder` 将 `orderStatus` 改为 2）。 diff --git a/src/components/common/OrderCard/index.tsx b/src/components/common/OrderCard/index.tsx index e9a1565..cdc92c4 100644 --- a/src/components/common/OrderCard/index.tsx +++ b/src/components/common/OrderCard/index.tsx @@ -8,6 +8,7 @@ import { getCompressedImageUrl } from '@/utils/image' interface OrderCardProps { order: ShopOrder onClick?: () => void + onCloseOrder?: (order: ShopOrder) => void } /** 综合 payStatus + deliveryStatus + orderStatus + payType 计算列表卡片状态文案 */ @@ -37,7 +38,7 @@ const getCardStatus = (order: ShopOrder): { text: string; color: string } => { return { text: '已付款', color: '#0e932e' } } -const OrderCard: React.FC = ({ order, onClick }) => { +const OrderCard: React.FC = ({ order, onClick, onCloseOrder }) => { const handleClick = () => { if (onClick) { onClick() @@ -46,8 +47,16 @@ const OrderCard: React.FC = ({ order, onClick }) => { Taro.navigateTo({ url: `/pages/order/detail?id=${order.orderId}` }) } + const handleClose = (e: any) => { + e?.stopPropagation?.() + onCloseOrder?.(order) + } + const { text: statusText, color: statusColor } = getCardStatus(order) + // 待发货状态（deliveryStatus=10 未发货）才显示关闭订单按钮 + const showCloseButton = order.deliveryStatus === 10 && order.orderStatus !== 2 && order.orderStatus !== 3 + // 获取首个商品图片作为封面，或显示默认占位 const coverImage = order.orderGoods?.[0]?.image || '' const hasGoods = (order.orderGoods?.length || 0) > 0 @@ -127,7 +136,7 @@ const OrderCard: React.FC = ({ order, onClick }) => { )} - {/* 底部：日期 + 金额汇总 */} + {/* 底部：日期 + 金额汇总 + 操作按钮 */} {order.createTime?.slice(0, 10)} @@ -140,6 +149,18 @@ const OrderCard: React.FC = ({ order, onClick }) => { + + {/* 操作按钮区 */} + {showCloseButton && onCloseOrder && ( + + + 关闭订单 + + + )} ) } diff --git a/src/pages/order/list.tsx b/src/pages/order/list.tsx index 2db97b3..1c6777c 100644 --- a/src/pages/order/list.tsx +++ b/src/pages/order/list.tsx @@ -1,10 +1,10 @@ import React, { useState, useEffect, useCallback, useRef } from 'react' import { View, Text, ScrollView } from '@tarojs/components' import Taro from '@tarojs/taro' -import { pageShopOrder } from '@/api/shop/shopOrder' +import { pageShopOrder, updateShopOrder } from '@/api/shop/shopOrder' import type { ShopOrder, ShopOrderParam } from '@/api/shop/shopOrder/model' import { useUser } from '@/hooks/useUser' -import { OrderListStatus, OrderListTabText } from '@/types/order' +import { OrderListStatus, OrderListTabText, OrderStatus } from '@/types/order' import OrderCard from '@/components/common/OrderCard' import EmptyState from '@/components/common/EmptyState' import LoadMore from '@/components/common/LoadMore' @@ -147,6 +147,27 @@ const OrderListPage: React.FC = () => { } } + /** 关闭订单（待发货状态下允许客户取消） */ + const handleCloseOrder = (order: ShopOrder) => { + Taro.showModal({ + title: '确认关闭订单', + content: '关闭后订单将取消，是否确认？', + confirmColor: '#ee0a24', + success: async (res) => { + if (res.confirm && order?.orderId) { + try { + await updateShopOrder({ ...order, orderStatus: OrderStatus.Cancelled }) + Taro.showToast({ title: '订单已关闭', icon: 'success' }) + // 刷新当前 tab + loadOrders(tabIndex, 1) + } catch (err: any) { + Taro.showToast({ title: err?.message || '关闭失败', icon: 'none' }) + } + } + } + }) + } + const handleTabChange = (index: number) => { if (index !== tabIndex) { setTabIndex(index) @@ -209,7 +230,11 @@ const OrderListPage: React.FC = () => { {tabStates[idx].orders.length > 0 ? ( tabStates[idx].orders.map(order => ( - + )) ) : tabStates[idx].initialized && !tabStates[idx].loading ? (