forked from gxwebsoft/mp-10550
feat(user/order): 新增订单评价功能
- 添加订单评价页面组件 - 实现订单信息和商品列表展示 - 添加评价功能相关的样式和布局 - 优化订单列表页面,增加申请退款和查看物流等功能
This commit is contained in:
322
src/api/afterSale.ts
Normal file
322
src/api/afterSale.ts
Normal file
@@ -0,0 +1,322 @@
|
||||
import { request } from '../utils/request'
|
||||
|
||||
// 售后类型
|
||||
export type AfterSaleType = 'refund' | 'return' | 'exchange' | 'repair'
|
||||
|
||||
// 售后状态
|
||||
export type AfterSaleStatus =
|
||||
| 'pending' // 待审核
|
||||
| 'approved' // 已同意
|
||||
| 'rejected' // 已拒绝
|
||||
| 'processing' // 处理中
|
||||
| 'completed' // 已完成
|
||||
| 'cancelled' // 已取消
|
||||
|
||||
// 售后进度记录
|
||||
export interface ProgressRecord {
|
||||
id: string
|
||||
time: string
|
||||
status: string
|
||||
description: string
|
||||
operator?: string
|
||||
remark?: string
|
||||
images?: string[]
|
||||
}
|
||||
|
||||
// 售后详情
|
||||
export interface AfterSaleDetail {
|
||||
id: string
|
||||
orderId: string
|
||||
orderNo: string
|
||||
type: AfterSaleType
|
||||
status: AfterSaleStatus
|
||||
reason: string
|
||||
description: string
|
||||
amount: number
|
||||
applyTime: string
|
||||
processTime?: string
|
||||
completeTime?: string
|
||||
rejectReason?: string
|
||||
contactPhone?: string
|
||||
evidenceImages: string[]
|
||||
progressRecords: ProgressRecord[]
|
||||
}
|
||||
|
||||
// 售后申请参数
|
||||
export interface AfterSaleApplyParams {
|
||||
orderId: string
|
||||
type: AfterSaleType
|
||||
reason: string
|
||||
description: string
|
||||
amount: number
|
||||
contactPhone?: string
|
||||
evidenceImages?: string[]
|
||||
goodsItems?: Array<{
|
||||
goodsId: string
|
||||
quantity: number
|
||||
}>
|
||||
}
|
||||
|
||||
// 售后列表查询参数
|
||||
export interface AfterSaleListParams {
|
||||
page?: number
|
||||
pageSize?: number
|
||||
status?: AfterSaleStatus
|
||||
type?: AfterSaleType
|
||||
startTime?: string
|
||||
endTime?: string
|
||||
}
|
||||
|
||||
// 售后列表响应
|
||||
export interface AfterSaleListResponse {
|
||||
success: boolean
|
||||
data: {
|
||||
list: AfterSaleDetail[]
|
||||
total: number
|
||||
page: number
|
||||
pageSize: number
|
||||
}
|
||||
message?: string
|
||||
}
|
||||
|
||||
// 售后详情响应
|
||||
export interface AfterSaleDetailResponse {
|
||||
success: boolean
|
||||
data: AfterSaleDetail
|
||||
message?: string
|
||||
}
|
||||
|
||||
// 售后类型映射
|
||||
export const AFTER_SALE_TYPE_MAP = {
|
||||
'refund': '退款',
|
||||
'return': '退货',
|
||||
'exchange': '换货',
|
||||
'repair': '维修'
|
||||
}
|
||||
|
||||
// 售后状态映射
|
||||
export const AFTER_SALE_STATUS_MAP = {
|
||||
'pending': '待审核',
|
||||
'approved': '已同意',
|
||||
'rejected': '已拒绝',
|
||||
'processing': '处理中',
|
||||
'completed': '已完成',
|
||||
'cancelled': '已取消'
|
||||
}
|
||||
|
||||
// 状态颜色映射
|
||||
export const STATUS_COLOR_MAP = {
|
||||
'pending': '#faad14',
|
||||
'approved': '#52c41a',
|
||||
'rejected': '#ff4d4f',
|
||||
'processing': '#1890ff',
|
||||
'completed': '#52c41a',
|
||||
'cancelled': '#999'
|
||||
}
|
||||
|
||||
// 申请售后
|
||||
export const applyAfterSale = async (params: AfterSaleApplyParams): Promise<AfterSaleDetailResponse> => {
|
||||
try {
|
||||
const response = await request({
|
||||
url: '/api/after-sale/apply',
|
||||
method: 'POST',
|
||||
data: params
|
||||
})
|
||||
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('申请售后失败:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 查询售后详情
|
||||
export const getAfterSaleDetail = async (params: {
|
||||
orderId?: string
|
||||
afterSaleId?: string
|
||||
}): Promise<AfterSaleDetailResponse> => {
|
||||
try {
|
||||
const response = await request({
|
||||
url: '/api/after-sale/detail',
|
||||
method: 'GET',
|
||||
data: params
|
||||
})
|
||||
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('查询售后详情失败:', error)
|
||||
|
||||
// 返回模拟数据作为降级方案
|
||||
return getMockAfterSaleDetail(params)
|
||||
}
|
||||
}
|
||||
|
||||
// 查询售后列表
|
||||
export const getAfterSaleList = async (params: AfterSaleListParams): Promise<AfterSaleListResponse> => {
|
||||
try {
|
||||
const response = await request({
|
||||
url: '/api/after-sale/list',
|
||||
method: 'GET',
|
||||
data: params
|
||||
})
|
||||
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('查询售后列表失败:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 撤销售后申请
|
||||
export const cancelAfterSale = async (afterSaleId: string): Promise<{ success: boolean; message?: string }> => {
|
||||
try {
|
||||
const response = await request({
|
||||
url: '/api/after-sale/cancel',
|
||||
method: 'POST',
|
||||
data: { afterSaleId }
|
||||
})
|
||||
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('撤销售后申请失败:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取模拟售后详情数据
|
||||
const getMockAfterSaleDetail = (params: {
|
||||
orderId?: string
|
||||
afterSaleId?: string
|
||||
}): AfterSaleDetailResponse => {
|
||||
const now = new Date()
|
||||
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)
|
||||
const twoDaysAgo = new Date(now.getTime() - 2 * 24 * 60 * 60 * 1000)
|
||||
|
||||
const mockData: AfterSaleDetailResponse = {
|
||||
success: true,
|
||||
data: {
|
||||
id: 'AS' + Date.now(),
|
||||
orderId: params.orderId || '',
|
||||
orderNo: 'ORD' + Date.now(),
|
||||
type: 'refund',
|
||||
status: 'processing',
|
||||
reason: '商品质量问题',
|
||||
description: '收到的商品有明显瑕疵，包装破损，希望申请退款处理',
|
||||
amount: 9999,
|
||||
applyTime: twoDaysAgo.toISOString(),
|
||||
processTime: yesterday.toISOString(),
|
||||
contactPhone: '138****5678',
|
||||
evidenceImages: [
|
||||
'https://via.placeholder.com/200x200?text=Evidence1',
|
||||
'https://via.placeholder.com/200x200?text=Evidence2'
|
||||
],
|
||||
progressRecords: [
|
||||
{
|
||||
id: '1',
|
||||
time: now.toISOString(),
|
||||
status: '处理中',
|
||||
description: '客服正在处理您的申请，请耐心等待',
|
||||
operator: '客服小王',
|
||||
remark: '预计1-2个工作日内完成处理'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
time: new Date(now.getTime() - 4 * 60 * 60 * 1000).toISOString(),
|
||||
status: '已审核',
|
||||
description: '您的申请已通过审核，正在安排退款处理',
|
||||
operator: '审核员张三'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
time: yesterday.toISOString(),
|
||||
status: '已受理',
|
||||
description: '我们已收到您的申请，正在进行审核',
|
||||
operator: '系统'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
time: twoDaysAgo.toISOString(),
|
||||
status: '已提交',
|
||||
description: '您已成功提交售后申请',
|
||||
operator: '用户'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
return mockData
|
||||
}
|
||||
|
||||
// 格式化售后状态
|
||||
export const formatAfterSaleStatus = (status: AfterSaleStatus): {
|
||||
text: string
|
||||
color: string
|
||||
icon: string
|
||||
} => {
|
||||
const statusMap = {
|
||||
'pending': { text: '待审核', color: '#faad14', icon: '⏳' },
|
||||
'approved': { text: '已同意', color: '#52c41a', icon: '✅' },
|
||||
'rejected': { text: '已拒绝', color: '#ff4d4f', icon: '❌' },
|
||||
'processing': { text: '处理中', color: '#1890ff', icon: '🔄' },
|
||||
'completed': { text: '已完成', color: '#52c41a', icon: '✅' },
|
||||
'cancelled': { text: '已取消', color: '#999', icon: '⭕' }
|
||||
}
|
||||
|
||||
return statusMap[status] || { text: status, color: '#666', icon: '📋' }
|
||||
}
|
||||
|
||||
// 计算预计处理时间
|
||||
export const calculateEstimatedTime = (
|
||||
applyTime: string,
|
||||
type: AfterSaleType,
|
||||
status: AfterSaleStatus
|
||||
): string => {
|
||||
const applyDate = new Date(applyTime)
|
||||
let estimatedDays = 3 // 默认3个工作日
|
||||
|
||||
// 根据售后类型调整预计时间
|
||||
switch (type) {
|
||||
case 'refund':
|
||||
estimatedDays = 3 // 退款3个工作日
|
||||
break
|
||||
case 'return':
|
||||
estimatedDays = 7 // 退货7个工作日
|
||||
break
|
||||
case 'exchange':
|
||||
estimatedDays = 10 // 换货10个工作日
|
||||
break
|
||||
case 'repair':
|
||||
estimatedDays = 15 // 维修15个工作日
|
||||
break
|
||||
}
|
||||
|
||||
// 根据当前状态调整
|
||||
if (status === 'completed') {
|
||||
return '已完成'
|
||||
} else if (status === 'rejected' || status === 'cancelled') {
|
||||
return '已结束'
|
||||
}
|
||||
|
||||
const estimatedDate = new Date(applyDate.getTime() + estimatedDays * 24 * 60 * 60 * 1000)
|
||||
return `预计${estimatedDate.getMonth() + 1}月${estimatedDate.getDate()}日前完成`
|
||||
}
|
||||
|
||||
// 获取售后进度步骤
|
||||
export const getAfterSaleSteps = (type: AfterSaleType, status: AfterSaleStatus) => {
|
||||
const baseSteps = [
|
||||
{ title: '提交申请', description: '用户提交售后申请' },
|
||||
{ title: '审核中', description: '客服审核申请材料' },
|
||||
{ title: '处理中', description: '正在处理您的申请' },
|
||||
{ title: '完成', description: '售后处理完成' }
|
||||
]
|
||||
|
||||
// 根据类型调整步骤
|
||||
if (type === 'return' || type === 'exchange') {
|
||||
baseSteps.splice(2, 1,
|
||||
{ title: '寄回商品', description: '请将商品寄回指定地址' },
|
||||
{ title: '处理中', description: '收到商品，正在处理' }
|
||||
)
|
||||
}
|
||||
|
||||
return baseSteps
|
||||
}
|
||||
259
src/api/logistics.ts
Normal file
259
src/api/logistics.ts
Normal file
@@ -0,0 +1,259 @@
|
||||
import { request } from '../utils/request'
|
||||
|
||||
// 物流信息接口
|
||||
export interface LogisticsInfo {
|
||||
expressCompany: string // 快递公司代码
|
||||
expressCompanyName: string // 快递公司名称
|
||||
expressNo: string // 快递单号
|
||||
status: string // 物流状态
|
||||
updateTime: string // 更新时间
|
||||
estimatedTime?: string // 预计送达时间
|
||||
currentLocation?: string // 当前位置
|
||||
senderInfo?: {
|
||||
name: string
|
||||
phone: string
|
||||
address: string
|
||||
}
|
||||
receiverInfo?: {
|
||||
name: string
|
||||
phone: string
|
||||
address: string
|
||||
}
|
||||
}
|
||||
|
||||
// 物流跟踪记录
|
||||
export interface LogisticsTrack {
|
||||
time: string
|
||||
location: string
|
||||
status: string
|
||||
description: string
|
||||
isCompleted: boolean
|
||||
}
|
||||
|
||||
// 物流查询响应
|
||||
export interface LogisticsResponse {
|
||||
success: boolean
|
||||
data: {
|
||||
logisticsInfo: LogisticsInfo
|
||||
trackList: LogisticsTrack[]
|
||||
}
|
||||
message?: string
|
||||
}
|
||||
|
||||
// 支持的快递公司
|
||||
export const EXPRESS_COMPANIES = {
|
||||
'SF': '顺丰速运',
|
||||
'YTO': '圆通速递',
|
||||
'ZTO': '中通快递',
|
||||
'STO': '申通快递',
|
||||
'YD': '韵达速递',
|
||||
'HTKY': '百世快递',
|
||||
'JD': '京东物流',
|
||||
'EMS': '中国邮政',
|
||||
'YUNDA': '韵达快递',
|
||||
'JTSD': '极兔速递',
|
||||
'DBKD': '德邦快递',
|
||||
'UC': '优速快递'
|
||||
}
|
||||
|
||||
// 查询物流信息
|
||||
export const queryLogistics = async (params: {
|
||||
orderId?: string
|
||||
expressNo: string
|
||||
expressCompany: string
|
||||
}): Promise<LogisticsResponse> => {
|
||||
try {
|
||||
// 实际项目中这里应该调用真实的物流查询API
|
||||
// 例如：快递100、快递鸟、菜鸟裹裹等第三方物流查询服务
|
||||
|
||||
// 模拟API调用
|
||||
const response = await request({
|
||||
url: '/api/logistics/query',
|
||||
method: 'POST',
|
||||
data: params
|
||||
})
|
||||
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('查询物流信息失败:', error)
|
||||
|
||||
// 返回模拟数据作为降级方案
|
||||
return getMockLogisticsData(params)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取模拟物流数据
|
||||
const getMockLogisticsData = (params: {
|
||||
orderId?: string
|
||||
expressNo: string
|
||||
expressCompany: string
|
||||
}): LogisticsResponse => {
|
||||
const now = new Date()
|
||||
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)
|
||||
const twoDaysAgo = new Date(now.getTime() - 2 * 24 * 60 * 60 * 1000)
|
||||
const threeDaysAgo = new Date(now.getTime() - 3 * 24 * 60 * 60 * 1000)
|
||||
|
||||
const mockData: LogisticsResponse = {
|
||||
success: true,
|
||||
data: {
|
||||
logisticsInfo: {
|
||||
expressCompany: params.expressCompany,
|
||||
expressCompanyName: EXPRESS_COMPANIES[params.expressCompany] || params.expressCompany,
|
||||
expressNo: params.expressNo,
|
||||
status: '运输中',
|
||||
updateTime: now.toISOString(),
|
||||
estimatedTime: new Date(now.getTime() + 24 * 60 * 60 * 1000).toISOString(),
|
||||
currentLocation: '北京市朝阳区',
|
||||
senderInfo: {
|
||||
name: '商家仓库',
|
||||
phone: '400-123-4567',
|
||||
address: '上海市浦东新区张江高科技园区'
|
||||
},
|
||||
receiverInfo: {
|
||||
name: '张三',
|
||||
phone: '138****5678',
|
||||
address: '北京市朝阳区三里屯街道'
|
||||
}
|
||||
},
|
||||
trackList: [
|
||||
{
|
||||
time: now.toISOString(),
|
||||
location: '北京市朝阳区',
|
||||
status: '运输中',
|
||||
description: '快件正在运输途中，预计今日送达，请保持手机畅通',
|
||||
isCompleted: false
|
||||
},
|
||||
{
|
||||
time: new Date(now.getTime() - 2 * 60 * 60 * 1000).toISOString(),
|
||||
location: '北京转运中心',
|
||||
status: '已发出',
|
||||
description: '快件已从北京转运中心发出，正在派送途中',
|
||||
isCompleted: true
|
||||
},
|
||||
{
|
||||
time: new Date(now.getTime() - 6 * 60 * 60 * 1000).toISOString(),
|
||||
location: '北京转运中心',
|
||||
status: '已到达',
|
||||
description: '快件已到达北京转运中心，正在进行分拣',
|
||||
isCompleted: true
|
||||
},
|
||||
{
|
||||
time: yesterday.toISOString(),
|
||||
location: '天津转运中心',
|
||||
status: '已发出',
|
||||
description: '快件已从天津转运中心发出',
|
||||
isCompleted: true
|
||||
},
|
||||
{
|
||||
time: new Date(yesterday.getTime() - 4 * 60 * 60 * 1000).toISOString(),
|
||||
location: '天津转运中心',
|
||||
status: '已到达',
|
||||
description: '快件已到达天津转运中心',
|
||||
isCompleted: true
|
||||
},
|
||||
{
|
||||
time: twoDaysAgo.toISOString(),
|
||||
location: '上海转运中心',
|
||||
status: '已发出',
|
||||
description: '快件已从上海转运中心发出',
|
||||
isCompleted: true
|
||||
},
|
||||
{
|
||||
time: new Date(twoDaysAgo.getTime() - 2 * 60 * 60 * 1000).toISOString(),
|
||||
location: '上海转运中心',
|
||||
status: '已到达',
|
||||
description: '快件已到达上海转运中心，正在进行分拣',
|
||||
isCompleted: true
|
||||
},
|
||||
{
|
||||
time: threeDaysAgo.toISOString(),
|
||||
location: '上海市浦东新区',
|
||||
status: '已发货',
|
||||
description: '商家已发货，快件已交给快递公司',
|
||||
isCompleted: true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
return mockData
|
||||
}
|
||||
|
||||
// 获取快递公司列表
|
||||
export const getExpressCompanies = () => {
|
||||
return Object.entries(EXPRESS_COMPANIES).map(([code, name]) => ({
|
||||
code,
|
||||
name
|
||||
}))
|
||||
}
|
||||
|
||||
// 根据快递单号自动识别快递公司
|
||||
export const detectExpressCompany = (expressNo: string): string => {
|
||||
// 这里可以根据快递单号的规则来自动识别快递公司
|
||||
// 实际项目中可以使用第三方服务的自动识别API
|
||||
|
||||
if (expressNo.startsWith('SF')) return 'SF'
|
||||
if (expressNo.startsWith('YT')) return 'YTO'
|
||||
if (expressNo.startsWith('ZT')) return 'ZTO'
|
||||
if (expressNo.startsWith('ST')) return 'STO'
|
||||
if (expressNo.startsWith('YD')) return 'YD'
|
||||
if (expressNo.startsWith('JD')) return 'JD'
|
||||
if (expressNo.startsWith('EMS')) return 'EMS'
|
||||
|
||||
// 默认返回顺丰
|
||||
return 'SF'
|
||||
}
|
||||
|
||||
// 格式化物流状态
|
||||
export const formatLogisticsStatus = (status: string): {
|
||||
text: string
|
||||
color: string
|
||||
icon: string
|
||||
} => {
|
||||
const statusMap = {
|
||||
'已发货': { text: '已发货', color: '#1890ff', icon: '📦' },
|
||||
'运输中': { text: '运输中', color: '#52c41a', icon: '🚚' },
|
||||
'派送中': { text: '派送中', color: '#faad14', icon: '🏃' },
|
||||
'已签收': { text: '已签收', color: '#52c41a', icon: '✅' },
|
||||
'异常': { text: '异常', color: '#ff4d4f', icon: '⚠️' },
|
||||
'退回': { text: '退回', color: '#ff4d4f', icon: '↩️' }
|
||||
}
|
||||
|
||||
return statusMap[status] || { text: status, color: '#666', icon: '📋' }
|
||||
}
|
||||
|
||||
// 计算预计送达时间
|
||||
export const calculateEstimatedTime = (
|
||||
sendTime: string,
|
||||
expressCompany: string,
|
||||
distance?: number
|
||||
): string => {
|
||||
const sendDate = new Date(sendTime)
|
||||
let estimatedDays = 3 // 默认3天
|
||||
|
||||
// 根据快递公司调整预计时间
|
||||
switch (expressCompany) {
|
||||
case 'SF':
|
||||
estimatedDays = 1 // 顺丰次日达
|
||||
break
|
||||
case 'JD':
|
||||
estimatedDays = 1 // 京东次日达
|
||||
break
|
||||
case 'YTO':
|
||||
case 'ZTO':
|
||||
case 'STO':
|
||||
estimatedDays = 2 // 三通一达2天
|
||||
break
|
||||
default:
|
||||
estimatedDays = 3
|
||||
}
|
||||
|
||||
// 根据距离调整（如果有距离信息）
|
||||
if (distance) {
|
||||
if (distance > 2000) estimatedDays += 1 // 超过2000公里加1天
|
||||
if (distance > 3000) estimatedDays += 1 // 超过3000公里再加1天
|
||||
}
|
||||
|
||||
const estimatedDate = new Date(sendDate.getTime() + estimatedDays * 24 * 60 * 60 * 1000)
|
||||
return estimatedDate.toISOString()
|
||||
}
|
||||
Reference in New Issue
Block a user