赵忠林
939d7b3ec2
refactor(order): 优化退款流程和订单状态管理 - 移除Uploader组件并隐藏上传凭证功能 - 添加getShopOrder和listShopOrderGoods API导入 - 新增toMoneyNumber和formatMoney工具函数处理金额格式 - 实现markOrderClientRefund函数标记客户端退款状态 - 使用真实订单数据替代模拟数据加载订单商品信息 - 修复订单金额显示格式化问题 - 优化订单状态判断逻辑和颜色配置 - 简化申请退款流程，移除预更新订单状态步骤 - 修复商品数量变更处理逻辑 - 更新订单状态码：退款申请中改为客户端申请退款 ```
473 lines
14 KiB
TypeScript
473 lines
14 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
||
import Taro, { useRouter } from '@tarojs/taro'
|
||
import { View, Text, Image } from '@tarojs/components'
|
||
import {
|
||
Cell,
|
||
CellGroup,
|
||
Radio,
|
||
RadioGroup,
|
||
TextArea,
|
||
Button,
|
||
Loading,
|
||
InputNumber
|
||
} from '@nutui/nutui-react-taro'
|
||
import { applyAfterSale } from '@/api/afterSale'
|
||
import { getShopOrder, updateShopOrder } from '@/api/shop/shopOrder'
|
||
import { listShopOrderGoods } from '@/api/shop/shopOrderGoods'
|
||
import './index.scss'
|
||
|
||
// 订单商品信息
|
||
interface OrderGoods {
|
||
goodsId: string
|
||
goodsName: string
|
||
goodsImage: string
|
||
goodsPrice: number
|
||
goodsNum: number
|
||
skuInfo?: string
|
||
canRefundNum: number // 可退款数量
|
||
}
|
||
|
||
// 退款原因选项
|
||
const REFUND_REASONS = [
|
||
'不想要了',
|
||
'商品质量问题',
|
||
'商品与描述不符',
|
||
'收到商品破损',
|
||
'发错商品',
|
||
'商品缺件',
|
||
'其他原因'
|
||
]
|
||
|
||
// 退款申请信息
|
||
interface RefundApplication {
|
||
refundType: 'full' | 'partial' // 退款类型：全额退款 | 部分退款
|
||
refundReason: string // 退款原因
|
||
refundDescription: string // 退款说明
|
||
refundAmount: number // 退款金额
|
||
refundGoods: Array<{
|
||
goodsId: string
|
||
refundNum: number
|
||
}> // 退款商品
|
||
evidenceImages: string[] // 凭证图片
|
||
contactPhone?: string // 联系电话
|
||
isUrgent: boolean // 是否加急处理
|
||
}
|
||
|
||
const RefundPage: React.FC = () => {
|
||
const router = useRouter()
|
||
const { orderId, orderNo } = router.params
|
||
|
||
const [loading, setLoading] = useState(true)
|
||
const [submitting, setSubmitting] = useState(false)
|
||
const [markedClientRefund, setMarkedClientRefund] = useState(false)
|
||
const [orderGoods, setOrderGoods] = useState<OrderGoods[]>([])
|
||
const [orderAmount, setOrderAmount] = useState(0)
|
||
const [refundApp, setRefundApp] = useState<RefundApplication>({
|
||
refundType: 'full',
|
||
refundReason: '',
|
||
refundDescription: '',
|
||
refundAmount: 0,
|
||
refundGoods: [],
|
||
evidenceImages: [],
|
||
contactPhone: '',
|
||
isUrgent: false
|
||
})
|
||
|
||
const toMoneyNumber = (value: unknown, defaultValue: number = 0): number => {
|
||
if (typeof value === 'number') return Number.isFinite(value) ? value : defaultValue
|
||
if (typeof value === 'string') {
|
||
// Be tolerant of API strings like "¥12.34" or "1,234.56".
|
||
const cleaned = value.trim().replace(/,/g, '').replace(/[^\d.-]/g, '')
|
||
const n = Number.parseFloat(cleaned)
|
||
return Number.isFinite(n) ? n : defaultValue
|
||
}
|
||
return defaultValue
|
||
}
|
||
|
||
const formatMoney = (value: unknown): string => {
|
||
const n = toMoneyNumber(value, 0)
|
||
return n.toFixed(2)
|
||
}
|
||
|
||
const markOrderClientRefund = async () => {
|
||
if (markedClientRefund) return
|
||
if (!orderId) return
|
||
const orderIdNum = Number.parseInt(String(orderId), 10)
|
||
if (!Number.isFinite(orderIdNum)) return
|
||
|
||
try {
|
||
await updateShopOrder({
|
||
orderId: orderIdNum,
|
||
orderStatus: 7 // 客户端申请退款
|
||
})
|
||
setMarkedClientRefund(true)
|
||
} catch (e) {
|
||
console.error('更新订单状态为客户端申请退款失败:', e)
|
||
// 不阻塞用户填写表单；提交时仍会再次尝试更新一次
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (orderId) {
|
||
loadOrderInfo()
|
||
}
|
||
}, [orderId])
|
||
|
||
// 加载订单信息
|
||
const loadOrderInfo = async () => {
|
||
try {
|
||
setLoading(true)
|
||
|
||
if (!orderId) {
|
||
throw new Error('缺少订单ID')
|
||
}
|
||
|
||
const orderIdNum = Number.parseInt(String(orderId), 10)
|
||
if (!Number.isFinite(orderIdNum)) {
|
||
throw new Error('订单ID不合法')
|
||
}
|
||
|
||
// 以订单实付金额为准（避免商品单价合计与优惠/运费等不一致）
|
||
const order = await getShopOrder(orderIdNum)
|
||
const payAmount = toMoneyNumber(order?.payPrice ?? order?.totalPrice, 0)
|
||
|
||
// 商品信息加载失败时，不阻塞退款申请（全额退款不依赖商品明细）
|
||
let mappedGoods: OrderGoods[] = []
|
||
try {
|
||
const goods = (await listShopOrderGoods({ orderId: orderIdNum })) || []
|
||
mappedGoods = goods.map((g, idx) => {
|
||
const goodsNum = Number(g.totalNum ?? 0) || 0
|
||
return {
|
||
goodsId: String(g.goodsId ?? idx),
|
||
goodsName: g.goodsName || '订单商品',
|
||
goodsImage: g.image || '/default-goods.png',
|
||
goodsPrice: toMoneyNumber(g.price, 0),
|
||
goodsNum,
|
||
canRefundNum: goodsNum,
|
||
skuInfo: g.spec
|
||
}
|
||
})
|
||
} catch (e) {
|
||
console.warn('加载订单商品失败（不阻塞退款申请）:', e)
|
||
}
|
||
|
||
setOrderGoods(mappedGoods)
|
||
setOrderAmount(payAmount)
|
||
|
||
// 初始化退款申请信息：默认全额退款
|
||
setRefundApp(prev => ({
|
||
...prev,
|
||
refundType: 'full',
|
||
refundAmount: payAmount,
|
||
refundGoods: mappedGoods.map(g => ({
|
||
goodsId: g.goodsId,
|
||
refundNum: g.goodsNum
|
||
})),
|
||
evidenceImages: []
|
||
}))
|
||
|
||
} catch (error) {
|
||
console.error('加载订单信息失败:', error)
|
||
Taro.showToast({
|
||
title: '加载失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
// 更新退款申请信息
|
||
const updateRefundApp = (field: keyof RefundApplication, value: any) => {
|
||
setRefundApp(prev => ({
|
||
...prev,
|
||
[field]: value
|
||
}))
|
||
}
|
||
|
||
// 切换退款类型
|
||
// const handleRefundTypeChange = (type: 'full' | 'partial') => {
|
||
// updateRefundApp('refundType', type)
|
||
//
|
||
// if (type === 'full') {
|
||
// // 全额退款
|
||
// updateRefundApp('refundAmount', orderAmount)
|
||
// updateRefundApp('refundGoods', orderGoods.map(goods => ({
|
||
// goodsId: goods.goodsId,
|
||
// refundNum: goods.goodsNum
|
||
// })))
|
||
// } else {
|
||
// // 部分退款
|
||
// updateRefundApp('refundAmount', 0)
|
||
// updateRefundApp('refundGoods', orderGoods.map(goods => ({
|
||
// goodsId: goods.goodsId,
|
||
// refundNum: 0
|
||
// })))
|
||
// }
|
||
// }
|
||
|
||
// 更新商品退款数量
|
||
const updateGoodsRefundNum = (goodsId: string, refundNum: number) => {
|
||
const newRefundGoods = refundApp.refundGoods.map(item =>
|
||
item.goodsId === goodsId ? { ...item, refundNum } : item
|
||
)
|
||
updateRefundApp('refundGoods', newRefundGoods)
|
||
|
||
// 重新计算退款金额
|
||
const newRefundAmount = newRefundGoods.reduce((sum, item) => {
|
||
const goods = orderGoods.find(g => g.goodsId === item.goodsId)
|
||
return sum + (goods ? goods.goodsPrice * item.refundNum : 0)
|
||
}, 0)
|
||
updateRefundApp('refundAmount', newRefundAmount)
|
||
}
|
||
|
||
// 提交退款申请
|
||
const submitRefund = async () => {
|
||
try {
|
||
// 验证必填信息
|
||
if (!refundApp.refundReason) {
|
||
Taro.showToast({
|
||
title: '请选择退款原因',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (refundApp.refundAmount <= 0) {
|
||
Taro.showToast({
|
||
title: '退款金额必须大于0',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (refundApp.refundType === 'partial') {
|
||
const hasRefundGoods = refundApp.refundGoods.some(item => item.refundNum > 0)
|
||
if (!hasRefundGoods) {
|
||
Taro.showToast({
|
||
title: '请选择要退款的商品',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
}
|
||
|
||
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,
|
||
...(refundApp.refundGoods.some(item => item.refundNum > 0)
|
||
? {
|
||
goodsItems: refundApp.refundGoods
|
||
.filter(item => item.refundNum > 0)
|
||
.map(item => ({
|
||
goodsId: item.goodsId,
|
||
quantity: item.refundNum
|
||
}))
|
||
}
|
||
: {})
|
||
}
|
||
|
||
// 调用API提交退款申请
|
||
const result = await applyAfterSale(params)
|
||
|
||
if (result.success) {
|
||
// 更新订单状态为"客户端申请退款"
|
||
if (orderId) {
|
||
try {
|
||
await updateShopOrder({
|
||
orderId: parseInt(orderId),
|
||
orderStatus: 7 // 客户端申请退款
|
||
})
|
||
setMarkedClientRefund(true)
|
||
} catch (updateError) {
|
||
console.error('更新订单状态失败:', updateError)
|
||
// 即使更新订单状态失败，也继续执行后续操作
|
||
}
|
||
}
|
||
|
||
Taro.showToast({
|
||
title: '退款申请提交成功',
|
||
icon: 'success'
|
||
})
|
||
|
||
// 延迟返回上一页
|
||
setTimeout(() => {
|
||
Taro.navigateBack()
|
||
}, 1500)
|
||
} else {
|
||
throw new Error(result.message || '提交失败')
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('提交退款申请失败:', error)
|
||
Taro.showToast({
|
||
title: error instanceof Error ? error.message : '提交失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
} finally {
|
||
setSubmitting(false)
|
||
}
|
||
}
|
||
|
||
if (loading) {
|
||
return (
|
||
<View className="refund-page">
|
||
<View className="loading-container">
|
||
<Loading type="spinner" />
|
||
<Text className="loading-text">正在加载订单信息...</Text>
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<View className="refund-page">
|
||
{/* 订单信息 */}
|
||
<View className="order-info">
|
||
<Text className="order-no">订单号：{orderNo}</Text>
|
||
<Text className="order-amount">订单金额：¥{formatMoney(orderAmount)}</Text>
|
||
</View>
|
||
|
||
{/* 退款类型选择 */}
|
||
{/*<CellGroup title="退款类型">*/}
|
||
{/* <RadioGroup */}
|
||
{/* value={refundApp.refundType}*/}
|
||
{/* onChange={(value) => handleRefundTypeChange(value as 'full' | 'partial')}*/}
|
||
{/* >*/}
|
||
{/* <Cell>*/}
|
||
{/* <Radio value="full">全额退款</Radio>*/}
|
||
{/* </Cell>*/}
|
||
{/* <Cell>*/}
|
||
{/* <Radio value="partial">部分退款</Radio>*/}
|
||
{/* </Cell>*/}
|
||
{/* </RadioGroup>*/}
|
||
{/*</CellGroup>*/}
|
||
|
||
{/* 商品列表 */}
|
||
{refundApp.refundType === 'partial' && (
|
||
<View className="goods-section">
|
||
<View className="section-title">选择退款商品</View>
|
||
{orderGoods.map(goods => {
|
||
const refundGoods = refundApp.refundGoods.find(item => item.goodsId === goods.goodsId)
|
||
const refundNum = refundGoods?.refundNum || 0
|
||
|
||
return (
|
||
<View key={goods.goodsId} className="goods-item">
|
||
<View className="goods-info">
|
||
<Image
|
||
className="goods-image"
|
||
src={goods.goodsImage}
|
||
mode="aspectFill"
|
||
/>
|
||
<View className="goods-detail">
|
||
<Text className="goods-name">{goods.goodsName}</Text>
|
||
{goods.skuInfo && (
|
||
<Text className="goods-sku">{goods.skuInfo}</Text>
|
||
)}
|
||
<Text className="goods-price">¥{goods.goodsPrice}</Text>
|
||
</View>
|
||
</View>
|
||
<View className="refund-control">
|
||
<Text className="control-label">退款数量</Text>
|
||
<InputNumber
|
||
value={refundNum}
|
||
min={0}
|
||
max={goods.canRefundNum}
|
||
onChange={(value) => updateGoodsRefundNum(goods.goodsId, Number(value) || 0)}
|
||
/>
|
||
<Text className="max-num">最多{goods.canRefundNum}件</Text>
|
||
</View>
|
||
</View>
|
||
)
|
||
})}
|
||
</View>
|
||
)}
|
||
|
||
{/* 退款金额 */}
|
||
<CellGroup title="退款金额">
|
||
<Cell>
|
||
<Text className="refund-amount">¥{formatMoney(refundApp.refundAmount)}</Text>
|
||
</Cell>
|
||
</CellGroup>
|
||
|
||
{/* 退款原因 */}
|
||
<CellGroup title="退款原因">
|
||
<RadioGroup
|
||
value={refundApp.refundReason}
|
||
onChange={(value) => {
|
||
updateRefundApp('refundReason', value)
|
||
void markOrderClientRefund()
|
||
}}
|
||
>
|
||
{REFUND_REASONS.map(reason => (
|
||
<Cell key={reason} className="reason-cell">
|
||
<Radio value={reason}>{reason}</Radio>
|
||
</Cell>
|
||
))}
|
||
</RadioGroup>
|
||
</CellGroup>
|
||
|
||
{/* 退款说明 */}
|
||
<View className="description-section">
|
||
<View className="section-title">退款说明</View>
|
||
<TextArea
|
||
placeholder="请详细说明退款原因..."
|
||
value={refundApp.refundDescription}
|
||
onChange={(value) => updateRefundApp('refundDescription', value)}
|
||
maxLength={500}
|
||
showCount
|
||
rows={4}
|
||
autoHeight
|
||
/>
|
||
</View>
|
||
|
||
{/* 凭证图片：当前上传链路不可用，先隐藏（保留数据结构，后续可恢复） */}
|
||
{/*<View className="evidence-section">*/}
|
||
{/* <View className="section-title">上传凭证（可选）</View>*/}
|
||
{/* <Uploader*/}
|
||
{/* value={refundApp.evidenceImages.map(url => ({ url }))}*/}
|
||
{/* onChange={handleImageUpload}*/}
|
||
{/* multiple*/}
|
||
{/* maxCount={6}*/}
|
||
{/* previewType="picture"*/}
|
||
{/* deletable*/}
|
||
{/* />*/}
|
||
{/*</View>*/}
|
||
|
||
{/* 其他选项 */}
|
||
{/*<CellGroup>*/}
|
||
{/* <Cell className="option-cell">*/}
|
||
{/* <Checkbox*/}
|
||
{/* checked={refundApp.isUrgent}*/}
|
||
{/* onChange={(checked) => updateRefundApp('isUrgent', checked)}*/}
|
||
{/* >*/}
|
||
{/* 加急处理（可能产生额外费用）*/}
|
||
{/* </Checkbox>*/}
|
||
{/* </Cell>*/}
|
||
{/*</CellGroup>*/}
|
||
|
||
{/* 提交按钮 */}
|
||
<View className="submit-section">
|
||
<Button
|
||
type="primary"
|
||
block
|
||
loading={submitting}
|
||
onClick={submitRefund}
|
||
>
|
||
{submitting ? '提交中...' : '提交退款申请'}
|
||
</Button>
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
export default RefundPage
|