feat(order): 在待发货订单列表增加关闭订单功能

- 在 OrderCard 组件中新增 onCloseOrder 可选回调属性
- 待发货且未取消的订单显示“关闭订单”按钮
- 点击按钮阻止事件冒泡,避免触发卡片跳转
- 列表页实现 handleCloseOrder,弹窗确认后调用 updateShopOrder
- 关闭订单后显示成功提示并刷新当前列表数据
- 复用订单详情页取消订单的状态更新逻辑,保持一致性
This commit is contained in:
2026-07-14 22:25:33 +08:00
parent dfbcbcf615
commit f878ea146e
3 changed files with 69 additions and 5 deletions

View File

@@ -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<OrderCardProps> = ({ order, onClick }) => {
const OrderCard: React.FC<OrderCardProps> = ({ order, onClick, onCloseOrder }) => {
const handleClick = () => {
if (onClick) {
onClick()
@@ -46,8 +47,16 @@ const OrderCard: React.FC<OrderCardProps> = ({ 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<OrderCardProps> = ({ order, onClick }) => {
</View>
)}
{/* 底部:日期 + 金额汇总 */}
{/* 底部:日期 + 金额汇总 + 操作按钮 */}
<View className='flex justify-between items-center pt-2 border-t border-gray-50'>
<Text className='text-xs text-gray-500'>
{order.createTime?.slice(0, 10)}
@@ -140,6 +149,18 @@ const OrderCard: React.FC<OrderCardProps> = ({ order, onClick }) => {
<Price price={order.payPrice || order.totalPrice || '0'} size='small' />
</View>
</View>
{/* 操作按钮区 */}
{showCloseButton && onCloseOrder && (
<View className='flex justify-end mt-3 pt-2 border-t border-gray-50'>
<View
className='px-3 py-1 rounded-full border border-gray-300'
onClick={handleClose}
>
<Text className='text-xs text-gray-600'></Text>
</View>
</View>
)}
</View>
)
}