feat(user): 新增收货地址管理及售后申请页面
- 新增地址类型定义，增强前端地址数据结构 - 新增地址编辑页面，支持地址智能识别和定位选点功能 - 地址编辑支持省市区选择及默认地址设置 - 新增地址列表页面，支持地址展示、删除、编辑和选择功能 - 实现售后申请页面，支持选择售后类型和退款原因 - 售后申请支持商品选择、退款金额计算和凭证上传 - 新增售后详情页面，支持售后状态展示及申请取消 - 优化页面加载和用户交互体验，增加错误提示和权限处理
This commit is contained in:
257
src_bak/pages/order/after-sale-detail.tsx
Normal file
257
src_bak/pages/order/after-sale-detail.tsx
Normal file
@@ -0,0 +1,257 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text, Image, ScrollView } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { Button } from '@nutui/nutui-react-taro'
|
||||
import { getAfterSaleDetail, cancelAfterSale, formatAfterSaleStatus, AFTER_SALE_TYPE_MAP } from '@/api/shop/shopAfterSale'
|
||||
import type { AfterSaleDetail } from '@/api/shop/shopAfterSale'
|
||||
import Price from '@/components/common/Price'
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '售后详情',
|
||||
})
|
||||
|
||||
const AfterSaleDetailPage: React.FC = () => {
|
||||
const { id, orderId } = Taro.getCurrentInstance().router?.params || {}
|
||||
const [detail, setDetail] = useState<AfterSaleDetail | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [cancelling, setCancelling] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
loadDetail()
|
||||
}, [id, orderId])
|
||||
|
||||
const loadDetail = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await getAfterSaleDetail({ afterSaleId: id, orderId })
|
||||
if (res?.data) {
|
||||
setDetail(res.data)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载售后详情失败', err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 取消申请
|
||||
const handleCancel = () => {
|
||||
Taro.showModal({
|
||||
title: '确认取消',
|
||||
content: '确定要撤销售后申请吗？取消后不可恢复。',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
setCancelling(true)
|
||||
try {
|
||||
// await cancelAfterSale(id || '')
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
Taro.showToast({ title: '已取消申请', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
Taro.navigateBack()
|
||||
}, 1500)
|
||||
} catch (err) {
|
||||
Taro.showToast({ title: '取消失败', icon: 'none' })
|
||||
} finally {
|
||||
setCancelling(false)
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (time: string) => {
|
||||
if (!time) return ''
|
||||
const date = new Date(time)
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
if (!detail) {
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50 flex items-center justify-center'>
|
||||
<Text className='text-gray-400 text-sm'>{loading ? '加载中...' : '加载失败'}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const statusInfo = formatAfterSaleStatus(detail.status)
|
||||
const canCancel = ['pending'].includes(detail.status)
|
||||
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50 pb-20 flex flex-col'>
|
||||
<ScrollView scrollY className='flex-1'>
|
||||
{/* 状态头部 */}
|
||||
<View
|
||||
className='p-5 text-center'
|
||||
style={{ backgroundColor: statusInfo.color }}
|
||||
>
|
||||
<Text className='text-white text-xl font-medium block'>{statusInfo.text}</Text>
|
||||
{detail.status === 'processing' && (
|
||||
<Text className='text-white text-sm opacity-80 mt-1 block'>
|
||||
预计1-3个工作日内处理
|
||||
</Text>
|
||||
)}
|
||||
{detail.status === 'pending' && (
|
||||
<Text className='text-white text-sm opacity-80 mt-1 block'>
|
||||
等待商家审核中
|
||||
</Text>
|
||||
)}
|
||||
{detail.status === 'approved' && (
|
||||
<Text className='text-white text-sm opacity-80 mt-1 block'>
|
||||
商家已同意，请按提示操作
|
||||
</Text>
|
||||
)}
|
||||
{detail.status === 'completed' && (
|
||||
<Text className='text-white text-sm opacity-80 mt-1 block'>
|
||||
退款已原路返回
|
||||
</Text>
|
||||
)}
|
||||
{detail.status === 'rejected' && (
|
||||
<Text className='text-white text-sm opacity-80 mt-1 block'>
|
||||
{detail.rejectReason || '商家拒绝了您的申请'}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 进度时间线 */}
|
||||
<View className='bg-white mx-3 mt-3 p-4 rounded-xl'>
|
||||
<Text className='text-sm font-medium text-gray-800 mb-3 block'>处理进度</Text>
|
||||
<View className='relative'>
|
||||
{/* 竖线 */}
|
||||
<View className='absolute left-4 top-0 bottom-0 w-px bg-gray-200' />
|
||||
|
||||
{detail.progressRecords.map((record, idx) => (
|
||||
<View key={record.id} className={`relative flex gap-3 pb-4 ${idx === detail.progressRecords.length - 1 ? 'pb-0' : ''}`}>
|
||||
{/* 圆点 */}
|
||||
<View
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center z-10 ${
|
||||
idx === 0 ? 'bg-green-500' : 'bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
{idx === 0 ? (
|
||||
<Text className='text-white text-xs'>✓</Text>
|
||||
) : (
|
||||
<View className='w-2 h-2 rounded-full bg-gray-400' />
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 内容 */}
|
||||
<View className='flex-1 pt-1'>
|
||||
<View className='flex justify-between items-center'>
|
||||
<Text className={`text-sm font-medium ${
|
||||
idx === 0 ? 'text-gray-800' : 'text-gray-500'
|
||||
}`}>
|
||||
{record.status}
|
||||
</Text>
|
||||
<Text className='text-xs text-gray-400'>{formatTime(record.time)}</Text>
|
||||
</View>
|
||||
<Text className={`text-xs mt-1 ${idx === 0 ? 'text-gray-600' : 'text-gray-400'}`}>
|
||||
{record.description}
|
||||
</Text>
|
||||
{record.operator && (
|
||||
<Text className='text-xs text-gray-400 mt-1'>
|
||||
操作人: {record.operator}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 售后信息 */}
|
||||
<View className='bg-white mx-3 mt-3 p-4 rounded-xl'>
|
||||
<Text className='text-sm font-medium text-gray-800 mb-3 block'>售后信息</Text>
|
||||
<View className="flex flex-col" style={{ gap: '8px' }}>
|
||||
<View className='flex justify-between'>
|
||||
<Text className='text-sm text-gray-500'>售后类型</Text>
|
||||
<Text className='text-sm text-gray-800'>
|
||||
{AFTER_SALE_TYPE_MAP[detail.type] || detail.type}
|
||||
</Text>
|
||||
</View>
|
||||
<View className='flex justify-between'>
|
||||
<Text className='text-sm text-gray-500'>申请原因</Text>
|
||||
<Text className='text-sm text-gray-800'>{detail.reason}</Text>
|
||||
</View>
|
||||
{detail.description && (
|
||||
<View className='flex justify-between'>
|
||||
<Text className='text-sm text-gray-500'>补充说明</Text>
|
||||
<Text className='text-sm text-gray-800 max-w-50 text-right'>{detail.description}</Text>
|
||||
</View>
|
||||
)}
|
||||
<View className='flex justify-between'>
|
||||
<Text className='text-sm text-gray-500'>申请时间</Text>
|
||||
<Text className='text-sm text-gray-800'>{formatTime(detail.applyTime)}</Text>
|
||||
</View>
|
||||
{detail.contactPhone && (
|
||||
<View className='flex justify-between'>
|
||||
<Text className='text-sm text-gray-500'>联系电话</Text>
|
||||
<Text className='text-sm text-gray-800'>{detail.contactPhone}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 退款金额 */}
|
||||
<View className='bg-white mx-3 mt-3 p-4 rounded-xl'>
|
||||
<View className='flex justify-between items-center'>
|
||||
<Text className='text-sm font-medium text-gray-800'>退款金额</Text>
|
||||
<Text className='text-xl font-bold text-red-500'>
|
||||
{'\u00A5'}{detail.amount.toFixed(2)}
|
||||
</Text>
|
||||
</View>
|
||||
<Text className='text-xs text-gray-400 mt-2 block'>
|
||||
退款将原路返回，微信支付退款一般1-3个工作日到账
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 凭证图片 */}
|
||||
{detail.evidenceImages && detail.evidenceImages.length > 0 && (
|
||||
<View className='bg-white mx-3 mt-3 p-4 rounded-xl'>
|
||||
<Text className='text-sm font-medium text-gray-800 mb-3 block'>凭证图片</Text>
|
||||
<View className='flex gap-2 flex-wrap'>
|
||||
{detail.evidenceImages.map((url, idx) => (
|
||||
<Image
|
||||
key={idx}
|
||||
className='w-20 h-20 rounded-lg'
|
||||
src={url}
|
||||
mode='aspectFill'
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 订单信息 */}
|
||||
<View className='bg-white mx-3 mt-3 p-4 rounded-xl mb-4'>
|
||||
<View className='flex justify-between items-center mb-2'>
|
||||
<Text className='text-sm font-medium text-gray-800'>关联订单</Text>
|
||||
<View
|
||||
className='px-3 py-1 rounded-full bg-gray-50'
|
||||
onClick={() => Taro.navigateTo({ url: `/pages/order/detail?id=${detail.orderId}` })}
|
||||
>
|
||||
<Text className='text-xs text-gray-500'>查看订单 ›</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text className='text-sm text-gray-400'>订单号: {detail.orderNo}</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{/* 底部按钮 */}
|
||||
{canCancel && (
|
||||
<View className='bg-white border-t border-gray-100 p-3' style={{ paddingBottom: '20px' }}>
|
||||
<Button
|
||||
type='default'
|
||||
className='w-full rounded-full border-gray-200'
|
||||
loading={cancelling}
|
||||
onClick={handleCancel}
|
||||
>
|
||||
撤销售后申请
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default AfterSaleDetailPage
|
||||
Reference in New Issue
Block a user