forked from gxwebsoft/mp-10550
feat(order): 添加订单退款功能并优化退款流程
- 在 shopOrder API 中新增 refundShopOrder 接口导入 - 实现订单详情页的退款申请功能,添加确认弹窗和加载提示 - 将退款逻辑从 afterSale 接口迁移到统一的 refundShopOrder 接口 - 优化退款页面数据获取,支持从订单详情或商品明细接口获取商品信息 - 添加退款金额验证和订单ID格式校验 - 实现乐观更新本地状态以提升用户体验 - 统一各页面的退款流程和状态码处理 - 添加退款按钮状态控制,避免重复提交
This commit is contained in:
@@ -8,7 +8,8 @@ import {
|
||||
updateShopOrder,
|
||||
createOrder,
|
||||
getShopOrder,
|
||||
prepayShopOrder
|
||||
prepayShopOrder,
|
||||
refundShopOrder
|
||||
} from "@/api/shop/shopOrder";
|
||||
import {OrderCreateRequest, ShopOrder, ShopOrderParam} from "@/api/shop/shopOrder/model";
|
||||
import {listShopOrderGoods} from "@/api/shop/shopOrderGoods";
|
||||
@@ -330,28 +331,53 @@ function OrderList(props: OrderListProps) {
|
||||
|
||||
// 申请退款 (待发货状态)
|
||||
const applyRefund = async (order: ShopOrder) => {
|
||||
if (!order?.orderId) {
|
||||
Taro.showToast({ title: '订单信息错误', icon: 'none' })
|
||||
return
|
||||
}
|
||||
try {
|
||||
// 更新订单状态为"退款申请中"
|
||||
await updateShopOrder({
|
||||
const confirm = await Taro.showModal({
|
||||
title: '申请退款',
|
||||
content: '确认要申请退款吗?',
|
||||
confirmText: '确认',
|
||||
cancelText: '取消'
|
||||
})
|
||||
if (!confirm?.confirm) return
|
||||
|
||||
Taro.showLoading({ title: '提交中...' })
|
||||
|
||||
// 退款相关操作使用退款接口:PUT /api/shop/shop-order/refund
|
||||
await refundShopOrder({
|
||||
orderId: order.orderId,
|
||||
orderStatus: 4 // 退款申请中
|
||||
// Best-effort: pass refund amount when available; backend may ignore and calculate by orderId.
|
||||
refundMoney: order.payPrice || order.totalPrice,
|
||||
// Backend requires orderStatus to determine refund flow (client applying).
|
||||
orderStatus: 7
|
||||
});
|
||||
|
||||
// 更新本地状态
|
||||
Taro.showToast({ title: '退款申请已提交', icon: 'success' })
|
||||
|
||||
// 乐观更新本地状态,提升反馈速度
|
||||
setList(prev => prev.map(item =>
|
||||
item.orderId === order.orderId ? {...item, orderStatus: 4} : item
|
||||
));
|
||||
item.orderId === order.orderId ? { ...item, orderStatus: 7 } : item
|
||||
))
|
||||
|
||||
// 刷新列表以服务端为准
|
||||
void reload(true)
|
||||
props.onReload?.()
|
||||
|
||||
// 跳转到退款申请页面
|
||||
Taro.navigateTo({
|
||||
url: `/user/order/refund/index?orderId=${order.orderId}&orderNo=${order.orderNo}`
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('更新订单状态失败:', error);
|
||||
console.error('申请退款失败:', error);
|
||||
Taro.showToast({
|
||||
title: '操作失败,请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
} finally {
|
||||
try {
|
||||
Taro.hideLoading()
|
||||
} catch (_e) {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -839,7 +865,7 @@ function OrderList(props: OrderListProps) {
|
||||
)}
|
||||
|
||||
{/* 待发货状态:显示申请退款 */}
|
||||
{item.payStatus && isWithinRefundWindow(item.payTime, 60) && item.deliveryStatus === 10 && item.orderStatus !== 2 && item.orderStatus !== 4 && !isOrderCompleted(item) && (
|
||||
{item.payStatus && isWithinRefundWindow(item.payTime, 60) && item.deliveryStatus === 10 && item.orderStatus !== 2 && item.orderStatus !== 4 && item.orderStatus !== 7 && !isOrderCompleted(item) && (
|
||||
<Button size={'small'} onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
applyRefund(item);
|
||||
|
||||
@@ -13,8 +13,8 @@ import {
|
||||
Empty,
|
||||
InputNumber
|
||||
} from '@nutui/nutui-react-taro'
|
||||
import { applyAfterSale } from '@/api/afterSale'
|
||||
import { updateShopOrder } from '@/api/shop/shopOrder'
|
||||
import { getShopOrder, refundShopOrder } from '@/api/shop/shopOrder'
|
||||
import { listShopOrderGoods } from '@/api/shop/shopOrderGoods'
|
||||
import './index.scss'
|
||||
|
||||
// 订单商品信息
|
||||
@@ -84,42 +84,48 @@ const RefundPage: React.FC = () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
|
||||
// 模拟API调用
|
||||
const mockOrderGoods: OrderGoods[] = [
|
||||
{
|
||||
goodsId: '1',
|
||||
goodsName: 'iPhone 15 Pro Max 256GB 深空黑色',
|
||||
goodsImage: 'https://via.placeholder.com/100x100',
|
||||
goodsPrice: 9999,
|
||||
goodsNum: 1,
|
||||
canRefundNum: 1,
|
||||
skuInfo: '颜色:深空黑色,容量:256GB'
|
||||
},
|
||||
{
|
||||
goodsId: '2',
|
||||
goodsName: 'AirPods Pro 第三代',
|
||||
goodsImage: 'https://via.placeholder.com/100x100',
|
||||
goodsPrice: 1999,
|
||||
goodsNum: 2,
|
||||
canRefundNum: 2,
|
||||
skuInfo: '颜色:白色'
|
||||
const numericOrderId = Number(orderId)
|
||||
if (!Number.isFinite(numericOrderId) || numericOrderId <= 0) {
|
||||
setOrderGoods([])
|
||||
setOrderAmount(0)
|
||||
return
|
||||
}
|
||||
|
||||
const order = await getShopOrder(numericOrderId)
|
||||
|
||||
// 优先使用订单详情自带的 orderGoods;缺失时补拉一次商品明细
|
||||
const rawGoods = (order?.orderGoods && order.orderGoods.length)
|
||||
? order.orderGoods
|
||||
: (await listShopOrderGoods({ orderId: numericOrderId })) || []
|
||||
|
||||
const goods: OrderGoods[] = (rawGoods || []).map((g: any) => {
|
||||
const qty = Number(g?.totalNum ?? g?.quantity ?? 1)
|
||||
const price = Number(g?.price ?? 0)
|
||||
return {
|
||||
goodsId: String(g?.goodsId ?? g?.itemId ?? ''),
|
||||
goodsName: String(g?.goodsName || g?.goodsTitle || g?.title || ''),
|
||||
goodsImage: String(g?.image || ''),
|
||||
goodsPrice: Number.isFinite(price) ? price : 0,
|
||||
goodsNum: Number.isFinite(qty) && qty > 0 ? qty : 1,
|
||||
canRefundNum: Number.isFinite(qty) && qty > 0 ? qty : 1,
|
||||
skuInfo: g?.spec ? String(g.spec) : (g?.specInfo ? String(g.specInfo) : undefined)
|
||||
}
|
||||
]
|
||||
}).filter(g => !!g.goodsId)
|
||||
|
||||
const totalAmount = mockOrderGoods.reduce((sum, goods) =>
|
||||
sum + goods.goodsPrice * goods.goodsNum, 0
|
||||
)
|
||||
// 优先使用订单的实付金额;兜底按商品合计
|
||||
const amountFromOrder = Number(order?.payPrice ?? order?.totalPrice ?? 0)
|
||||
const totalAmount = (Number.isFinite(amountFromOrder) && amountFromOrder > 0)
|
||||
? amountFromOrder
|
||||
: goods.reduce((sum, g) => sum + g.goodsPrice * g.goodsNum, 0)
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
|
||||
setOrderGoods(mockOrderGoods)
|
||||
setOrderGoods(goods)
|
||||
setOrderAmount(totalAmount)
|
||||
|
||||
// 初始化退款申请信息
|
||||
setRefundApp(prev => ({
|
||||
...prev,
|
||||
refundAmount: totalAmount,
|
||||
refundGoods: mockOrderGoods.map(goods => ({
|
||||
refundGoods: goods.map(goods => ({
|
||||
goodsId: goods.goodsId,
|
||||
refundNum: goods.goodsNum
|
||||
}))
|
||||
@@ -234,50 +240,20 @@ const RefundPage: React.FC = () => {
|
||||
|
||||
setSubmitting(true)
|
||||
|
||||
// 构造请求参数
|
||||
const params = {
|
||||
orderId: orderId || '',
|
||||
type: 'refund' as const,
|
||||
reason: refundApp.refundReason,
|
||||
description: refundApp.refundDescription,
|
||||
amount: refundApp.refundAmount,
|
||||
contactPhone: refundApp.contactPhone,
|
||||
evidenceImages: refundApp.evidenceImages,
|
||||
goodsItems: refundApp.refundGoods.filter(item => item.refundNum > 0).map(item => ({
|
||||
goodsId: item.goodsId,
|
||||
quantity: item.refundNum
|
||||
}))
|
||||
const numericOrderId = Number(orderId)
|
||||
if (!Number.isFinite(numericOrderId) || numericOrderId <= 0) {
|
||||
throw new Error('订单信息错误')
|
||||
}
|
||||
|
||||
// 调用API提交退款申请
|
||||
const result = await applyAfterSale(params)
|
||||
|
||||
if (result.success) {
|
||||
// 更新订单状态为"退款申请中"
|
||||
if (orderId) {
|
||||
try {
|
||||
await updateShopOrder({
|
||||
orderId: parseInt(orderId),
|
||||
orderStatus: 4 // 退款申请中
|
||||
})
|
||||
} catch (updateError) {
|
||||
console.error('更新订单状态失败:', updateError)
|
||||
// 即使更新订单状态失败,也继续执行后续操作
|
||||
}
|
||||
}
|
||||
// 退款相关操作使用退款接口:PUT /api/shop/shop-order/refund
|
||||
await refundShopOrder({
|
||||
orderId: numericOrderId,
|
||||
refundMoney: String(refundApp.refundAmount),
|
||||
orderStatus: 7
|
||||
})
|
||||
|
||||
Taro.showToast({
|
||||
title: '退款申请提交成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 延迟返回上一页
|
||||
setTimeout(() => {
|
||||
Taro.navigateBack()
|
||||
}, 1500)
|
||||
} else {
|
||||
throw new Error(result.message || '提交失败')
|
||||
}
|
||||
Taro.showToast({ title: '退款申请提交成功', icon: 'success' })
|
||||
setTimeout(() => Taro.navigateBack(), 1200)
|
||||
|
||||
} catch (error) {
|
||||
console.error('提交退款申请失败:', error)
|
||||
@@ -316,6 +292,9 @@ const RefundPage: React.FC = () => {
|
||||
)
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
// @ts-ignore
|
||||
// @ts-ignore
|
||||
return (
|
||||
<View className="refund-page">
|
||||
{/* 订单信息 */}
|
||||
@@ -369,7 +348,7 @@ const RefundPage: React.FC = () => {
|
||||
value={refundNum}
|
||||
min={0}
|
||||
max={goods.canRefundNum}
|
||||
onChange={(value) => updateGoodsRefundNum(goods.goodsId, value)}
|
||||
onChange={(value) => updateGoodsRefundNum(goods.goodsId, Number(value))}
|
||||
/>
|
||||
<Text className="max-num">最多{goods.canRefundNum}件</Text>
|
||||
</View>
|
||||
@@ -418,6 +397,7 @@ const RefundPage: React.FC = () => {
|
||||
<View className="evidence-section">
|
||||
<View className="section-title">上传凭证(可选)</View>
|
||||
<Uploader
|
||||
// @ts-ignore
|
||||
value={refundApp.evidenceImages.map(url => ({ url }))}
|
||||
onChange={handleImageUpload}
|
||||
multiple
|
||||
@@ -454,4 +434,4 @@ const RefundPage: React.FC = () => {
|
||||
)
|
||||
}
|
||||
|
||||
export default RefundPage
|
||||
export default RefundPage
|
||||
|
||||
Reference in New Issue
Block a user