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()
|
||||||
|
}
|
||||||
@@ -34,6 +34,10 @@ export default defineAppConfig({
|
|||||||
"root": "user",
|
"root": "user",
|
||||||
"pages": [
|
"pages": [
|
||||||
"order/order",
|
"order/order",
|
||||||
|
"order/logistics/index",
|
||||||
|
"order/evaluate/index",
|
||||||
|
"order/refund/index",
|
||||||
|
"order/progress/index",
|
||||||
"company/company",
|
"company/company",
|
||||||
"profile/profile",
|
"profile/profile",
|
||||||
"setting/setting",
|
"setting/setting",
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import {ShopOrderGoods} from "@/api/shop/shopOrderGoods/model";
|
|||||||
import {copyText} from "@/utils/common";
|
import {copyText} from "@/utils/common";
|
||||||
import PaymentCountdown from "@/components/PaymentCountdown";
|
import PaymentCountdown from "@/components/PaymentCountdown";
|
||||||
import {PaymentType} from "@/utils/payment";
|
import {PaymentType} from "@/utils/payment";
|
||||||
|
import {goTo, switchTab} from "@/utils/navigation";
|
||||||
|
|
||||||
// 判断订单是否支付已过期
|
// 判断订单是否支付已过期
|
||||||
const isPaymentExpired = (createTime: string, timeoutHours: number = 24): boolean => {
|
const isPaymentExpired = (createTime: string, timeoutHours: number = 24): boolean => {
|
||||||
@@ -314,6 +315,66 @@ function OrderList(props: OrderListProps) {
|
|||||||
setOrderToConfirmReceive(null);
|
setOrderToConfirmReceive(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 申请退款 (待发货状态)
|
||||||
|
const applyRefund = (order: ShopOrder) => {
|
||||||
|
// 跳转到退款申请页面
|
||||||
|
Taro.navigateTo({
|
||||||
|
url: `/user/order/refund/index?orderId=${order.orderId}&orderNo=${order.orderNo}`
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 查看物流 (待收货状态)
|
||||||
|
const viewLogistics = (order: ShopOrder) => {
|
||||||
|
// 跳转到物流查询页面
|
||||||
|
Taro.navigateTo({
|
||||||
|
url: `/user/order/logistics/index?orderId=${order.orderId}&orderNo=${order.orderNo}&expressNo=${order.transactionId || ''}&expressCompany=SF`
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 再次购买 (已完成状态)
|
||||||
|
const buyAgain = (order: ShopOrder) => {
|
||||||
|
console.log('再次购买:', order);
|
||||||
|
goTo(`/shop/orderConfirm/index?goodsId=${order.orderGoods[0].goodsId}`)
|
||||||
|
// Taro.showToast({
|
||||||
|
// title: '再次购买功能开发中',
|
||||||
|
// icon: 'none'
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 评价商品 (已完成状态)
|
||||||
|
const evaluateGoods = (order: ShopOrder) => {
|
||||||
|
// 跳转到评价页面
|
||||||
|
Taro.navigateTo({
|
||||||
|
url: `/user/order/evaluate/index?orderId=${order.orderId}&orderNo=${order.orderNo}`
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 查看进度 (退款/售后状态)
|
||||||
|
const viewProgress = (order: ShopOrder) => {
|
||||||
|
// 根据订单状态确定售后类型
|
||||||
|
let afterSaleType = 'refund' // 默认退款
|
||||||
|
|
||||||
|
if (order.orderStatus === 4) {
|
||||||
|
afterSaleType = 'refund' // 退款申请中
|
||||||
|
} else if (order.orderStatus === 7) {
|
||||||
|
afterSaleType = 'return' // 退货申请中
|
||||||
|
}
|
||||||
|
|
||||||
|
// 跳转到售后进度页面
|
||||||
|
Taro.navigateTo({
|
||||||
|
url: `/user/order/progress/index?orderId=${order.orderId}&orderNo=${order.orderNo}&type=${afterSaleType}`
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 撤销申请 (退款/售后状态)
|
||||||
|
const cancelApplication = (order: ShopOrder) => {
|
||||||
|
console.log('撤销申请:', order);
|
||||||
|
Taro.showToast({
|
||||||
|
title: '撤销申请功能开发中',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// 取消订单
|
// 取消订单
|
||||||
const cancelOrder = (order: ShopOrder) => {
|
const cancelOrder = (order: ShopOrder) => {
|
||||||
setOrderToCancel(order);
|
setOrderToCancel(order);
|
||||||
@@ -393,7 +454,7 @@ function OrderList(props: OrderListProps) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
Taro.showLoading({ title: '发起支付...' });
|
Taro.showLoading({title: '发起支付...'});
|
||||||
|
|
||||||
// 构建商品数据
|
// 构建商品数据
|
||||||
const goodsItems = order.orderGoods?.map(goods => ({
|
const goodsItems = order.orderGoods?.map(goods => ({
|
||||||
@@ -446,7 +507,7 @@ function OrderList(props: OrderListProps) {
|
|||||||
|
|
||||||
// 跳转到订单页面
|
// 跳转到订单页面
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
Taro.navigateTo({ url: '/user/order/order' });
|
Taro.navigateTo({url: '/user/order/order'});
|
||||||
}, 2000);
|
}, 2000);
|
||||||
|
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
@@ -473,7 +534,6 @@ function OrderList(props: OrderListProps) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
void reload(true); // 首次加载或tab切换时重置页码
|
void reload(true); // 首次加载或tab切换时重置页码
|
||||||
}, [tapIndex]); // 只监听tapIndex变化，避免reload依赖循环
|
}, [tapIndex]); // 只监听tapIndex变化，避免reload依赖循环
|
||||||
@@ -676,21 +736,64 @@ function OrderList(props: OrderListProps) {
|
|||||||
}}>立即支付</Button>
|
}}>立即支付</Button>
|
||||||
</Space>
|
</Space>
|
||||||
)}
|
)}
|
||||||
{/* 待收货状态：显示确认收货 */}
|
|
||||||
{item.deliveryStatus === 20 && (
|
{/* 待发货状态：显示申请退款 */}
|
||||||
|
{item.payStatus && item.deliveryStatus === 10 && item.orderStatus !== 2 && item.orderStatus !== 4 && (
|
||||||
|
<Button size={'small'} onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
applyRefund(item);
|
||||||
|
}}>申请退款</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 待收货状态：显示查看物流和确认收货 */}
|
||||||
|
{item.deliveryStatus === 20 && item.orderStatus !== 2 && (
|
||||||
|
<Space>
|
||||||
|
<Button size={'small'} onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
viewLogistics(item);
|
||||||
|
}}>查看物流</Button>
|
||||||
<Button size={'small'} type="primary" onClick={(e) => {
|
<Button size={'small'} type="primary" onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
confirmReceive(item);
|
confirmReceive(item);
|
||||||
}}>确认收货</Button>
|
}}>确认收货</Button>
|
||||||
|
</Space>
|
||||||
)}
|
)}
|
||||||
{/* 已完成状态：显示申请退款 */}
|
|
||||||
|
{/* 已完成状态：显示再次购买、评价商品、申请退款 */}
|
||||||
{item.orderStatus === 1 && (
|
{item.orderStatus === 1 && (
|
||||||
|
<Space>
|
||||||
<Button size={'small'} onClick={(e) => {
|
<Button size={'small'} onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
console.log('申请退款')
|
buyAgain(item);
|
||||||
|
}}>再次购买</Button>
|
||||||
|
<Button size={'small'} onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
evaluateGoods(item);
|
||||||
|
}}>评价商品</Button>
|
||||||
|
<Button size={'small'} onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
applyRefund(item);
|
||||||
}}>申请退款</Button>
|
}}>申请退款</Button>
|
||||||
|
</Space>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 退款/售后状态：显示查看进度和撤销申请 */}
|
||||||
|
{(item.orderStatus === 4 || item.orderStatus === 7) && (
|
||||||
|
<Space>
|
||||||
|
<Button size={'small'} onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
viewProgress(item);
|
||||||
|
}}>查看进度</Button>
|
||||||
|
</Space>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 退款成功状态：显示再次购买 */}
|
||||||
|
{item.orderStatus === 6 && (
|
||||||
|
<Button size={'small'} type="primary" onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
buyAgain(item);
|
||||||
|
}}>再次购买</Button>
|
||||||
)}
|
)}
|
||||||
{/* 退款相关状态的按钮可以在这里添加 */}
|
|
||||||
</Space>
|
</Space>
|
||||||
</Space>
|
</Space>
|
||||||
</Cell>
|
</Cell>
|
||||||
|
|||||||
3
src/user/order/evaluate/index.config.ts
Normal file
3
src/user/order/evaluate/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export default definePageConfig({
|
||||||
|
navigationBarTitleText: ''
|
||||||
|
})
|
||||||
191
src/user/order/evaluate/index.scss
Normal file
191
src/user/order/evaluate/index.scss
Normal file
@@ -0,0 +1,191 @@
|
|||||||
|
.evaluate-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
|
||||||
|
.loading-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 50vh;
|
||||||
|
|
||||||
|
.loading-text {
|
||||||
|
margin-top: 16px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-info {
|
||||||
|
background: white;
|
||||||
|
padding: 16px 20px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.order-no {
|
||||||
|
display: block;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-tip {
|
||||||
|
display: block;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-list {
|
||||||
|
.goods-item {
|
||||||
|
background: white;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.goods-info {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
|
||||||
|
.goods-image {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-right: 12px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-detail {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.goods-name {
|
||||||
|
display: block;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.4;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-sku {
|
||||||
|
display: block;
|
||||||
|
color: #999;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-price {
|
||||||
|
display: block;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #ff6b35;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating-section {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.rating-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.rating-label {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating-text {
|
||||||
|
color: #ff6b35;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.content-label {
|
||||||
|
display: block;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-section {
|
||||||
|
.image-label {
|
||||||
|
display: block;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-section {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: white;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NutUI 组件样式覆盖 */
|
||||||
|
.evaluate-page {
|
||||||
|
.nut-rate {
|
||||||
|
.nut-rate-item {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nut-textarea {
|
||||||
|
border: 1px solid #e8e8e8;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
background: #fafafa;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: #1890ff;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nut-uploader {
|
||||||
|
.nut-uploader-slot {
|
||||||
|
border: 2px dashed #e8e8e8;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fafafa;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #1890ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nut-uploader-preview {
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 适配不同屏幕尺寸 */
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
.evaluate-page {
|
||||||
|
.goods-list {
|
||||||
|
.goods-item {
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.goods-info {
|
||||||
|
.goods-image {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
304
src/user/order/evaluate/index.tsx
Normal file
304
src/user/order/evaluate/index.tsx
Normal file
@@ -0,0 +1,304 @@
|
|||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import Taro, { useRouter } from '@tarojs/taro'
|
||||||
|
import { View, Text, Image } from '@tarojs/components'
|
||||||
|
import {
|
||||||
|
Rate,
|
||||||
|
TextArea,
|
||||||
|
Button,
|
||||||
|
Uploader,
|
||||||
|
Loading,
|
||||||
|
Empty
|
||||||
|
} from '@nutui/nutui-react-taro'
|
||||||
|
import './index.scss'
|
||||||
|
|
||||||
|
// 订单商品信息
|
||||||
|
interface OrderGoods {
|
||||||
|
goodsId: string
|
||||||
|
goodsName: string
|
||||||
|
goodsImage: string
|
||||||
|
goodsPrice: number
|
||||||
|
goodsNum: number
|
||||||
|
skuInfo?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// 评价信息
|
||||||
|
interface EvaluateInfo {
|
||||||
|
goodsId: string
|
||||||
|
rating: number // 评分 1-5
|
||||||
|
content: string // 评价内容
|
||||||
|
images: string[] // 评价图片
|
||||||
|
isAnonymous: boolean // 是否匿名
|
||||||
|
}
|
||||||
|
|
||||||
|
const EvaluatePage: React.FC = () => {
|
||||||
|
const router = useRouter()
|
||||||
|
const { orderId, orderNo } = router.params
|
||||||
|
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [submitting, setSubmitting] = useState(false)
|
||||||
|
const [orderGoods, setOrderGoods] = useState<OrderGoods[]>([])
|
||||||
|
const [evaluates, setEvaluates] = useState<Map<string, EvaluateInfo>>(new Map())
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (orderId) {
|
||||||
|
loadOrderGoods()
|
||||||
|
}
|
||||||
|
}, [orderId])
|
||||||
|
|
||||||
|
// 加载订单商品信息
|
||||||
|
const loadOrderGoods = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true)
|
||||||
|
|
||||||
|
// 模拟API调用 - 实际项目中替换为真实API
|
||||||
|
const mockOrderGoods: OrderGoods[] = [
|
||||||
|
{
|
||||||
|
goodsId: '1',
|
||||||
|
goodsName: 'iPhone 15 Pro Max 256GB 深空黑色',
|
||||||
|
goodsImage: 'https://via.placeholder.com/100x100',
|
||||||
|
goodsPrice: 9999,
|
||||||
|
goodsNum: 1,
|
||||||
|
skuInfo: '颜色：深空黑色，容量：256GB'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
goodsId: '2',
|
||||||
|
goodsName: 'AirPods Pro 第三代',
|
||||||
|
goodsImage: 'https://via.placeholder.com/100x100',
|
||||||
|
goodsPrice: 1999,
|
||||||
|
goodsNum: 1,
|
||||||
|
skuInfo: '颜色：白色'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// 模拟网络延迟
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||||
|
|
||||||
|
setOrderGoods(mockOrderGoods)
|
||||||
|
|
||||||
|
// 初始化评价信息
|
||||||
|
const initialEvaluates = new Map<string, EvaluateInfo>()
|
||||||
|
mockOrderGoods.forEach(goods => {
|
||||||
|
initialEvaluates.set(goods.goodsId, {
|
||||||
|
goodsId: goods.goodsId,
|
||||||
|
rating: 5,
|
||||||
|
content: '',
|
||||||
|
images: [],
|
||||||
|
isAnonymous: false
|
||||||
|
})
|
||||||
|
})
|
||||||
|
setEvaluates(initialEvaluates)
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载订单商品失败:', error)
|
||||||
|
Taro.showToast({
|
||||||
|
title: '加载失败，请重试',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新评价信息
|
||||||
|
const updateEvaluate = (goodsId: string, field: keyof EvaluateInfo, value: any) => {
|
||||||
|
setEvaluates(prev => {
|
||||||
|
const newEvaluates = new Map(prev)
|
||||||
|
const evaluate = newEvaluates.get(goodsId)
|
||||||
|
if (evaluate) {
|
||||||
|
newEvaluates.set(goodsId, {
|
||||||
|
...evaluate,
|
||||||
|
[field]: value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return newEvaluates
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理图片上传
|
||||||
|
const handleImageUpload = async (goodsId: string, files: any) => {
|
||||||
|
try {
|
||||||
|
// 模拟图片上传
|
||||||
|
const uploadedImages: string[] = []
|
||||||
|
|
||||||
|
for (const file of files) {
|
||||||
|
if (file.url) {
|
||||||
|
uploadedImages.push(file.url)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateEvaluate(goodsId, 'images', uploadedImages)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('图片上传失败:', error)
|
||||||
|
Taro.showToast({
|
||||||
|
title: '图片上传失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交评价
|
||||||
|
const submitEvaluate = async () => {
|
||||||
|
try {
|
||||||
|
// 验证评价内容
|
||||||
|
const evaluateList = Array.from(evaluates.values())
|
||||||
|
const invalidEvaluate = evaluateList.find(evaluate =>
|
||||||
|
evaluate.rating < 1 || evaluate.rating > 5
|
||||||
|
)
|
||||||
|
|
||||||
|
if (invalidEvaluate) {
|
||||||
|
Taro.showToast({
|
||||||
|
title: '请为所有商品评分',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setSubmitting(true)
|
||||||
|
|
||||||
|
// 模拟API调用
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 2000))
|
||||||
|
|
||||||
|
Taro.showToast({
|
||||||
|
title: '评价提交成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 延迟返回上一页
|
||||||
|
setTimeout(() => {
|
||||||
|
Taro.navigateBack()
|
||||||
|
}, 1500)
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('提交评价失败:', error)
|
||||||
|
Taro.showToast({
|
||||||
|
title: '提交失败，请重试',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
setSubmitting(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取评分文字描述
|
||||||
|
const getRatingText = (rating: number) => {
|
||||||
|
const texts = ['', '很差', '一般', '满意', '很好', '非常满意']
|
||||||
|
return texts[rating] || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<View className="evaluate-page">
|
||||||
|
<View className="loading-container">
|
||||||
|
<Loading type="spinner" />
|
||||||
|
<Text className="loading-text">正在加载商品信息...</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (orderGoods.length === 0) {
|
||||||
|
return (
|
||||||
|
<View className="evaluate-page">
|
||||||
|
<Empty
|
||||||
|
description="暂无商品信息"
|
||||||
|
imageSize={80}
|
||||||
|
>
|
||||||
|
<Button type="primary" size="small" onClick={() => Taro.navigateBack()}>
|
||||||
|
返回
|
||||||
|
</Button>
|
||||||
|
</Empty>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View className="evaluate-page">
|
||||||
|
{/* 订单信息 */}
|
||||||
|
<View className="order-info">
|
||||||
|
<Text className="order-no">订单号：{orderNo}</Text>
|
||||||
|
<Text className="order-tip">请为以下商品进行评价</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 商品评价列表 */}
|
||||||
|
<View className="goods-list">
|
||||||
|
{orderGoods.map(goods => {
|
||||||
|
const evaluate = evaluates.get(goods.goodsId)
|
||||||
|
if (!evaluate) return null
|
||||||
|
|
||||||
|
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="rating-section">
|
||||||
|
<View className="rating-header">
|
||||||
|
<Text className="rating-label">商品评分</Text>
|
||||||
|
<Text className="rating-text">{getRatingText(evaluate.rating)}</Text>
|
||||||
|
</View>
|
||||||
|
<Rate
|
||||||
|
value={evaluate.rating}
|
||||||
|
onChange={(value) => updateEvaluate(goods.goodsId, 'rating', value)}
|
||||||
|
allowHalf={false}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 评价内容 */}
|
||||||
|
<View className="content-section">
|
||||||
|
<Text className="content-label">评价内容</Text>
|
||||||
|
<TextArea
|
||||||
|
placeholder="请描述您对商品的使用感受..."
|
||||||
|
value={evaluate.content}
|
||||||
|
onChange={(value) => updateEvaluate(goods.goodsId, 'content', value)}
|
||||||
|
maxLength={500}
|
||||||
|
showCount
|
||||||
|
rows={6}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 图片上传 */}
|
||||||
|
<View className="image-section">
|
||||||
|
<Text className="image-label">上传图片（可选）</Text>
|
||||||
|
<Uploader
|
||||||
|
value={evaluate.images.map(url => ({ url }))}
|
||||||
|
onChange={(files) => handleImageUpload(goods.goodsId, files)}
|
||||||
|
multiple
|
||||||
|
maxCount={6}
|
||||||
|
previewType="picture"
|
||||||
|
deletable
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 提交按钮 */}
|
||||||
|
<View className="submit-section">
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
block
|
||||||
|
loading={submitting}
|
||||||
|
onClick={submitEvaluate}
|
||||||
|
>
|
||||||
|
{submitting ? '提交中...' : '提交评价'}
|
||||||
|
</Button>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EvaluatePage
|
||||||
3
src/user/order/logistics/index.config.ts
Normal file
3
src/user/order/logistics/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export default definePageConfig({
|
||||||
|
navigationBarTitleText: '查看物流'
|
||||||
|
})
|
||||||
186
src/user/order/logistics/index.scss
Normal file
186
src/user/order/logistics/index.scss
Normal file
@@ -0,0 +1,186 @@
|
|||||||
|
.logistics-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
|
||||||
|
.loading-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 50vh;
|
||||||
|
|
||||||
|
.loading-text {
|
||||||
|
margin-top: 16px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logistics-header {
|
||||||
|
background: white;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 12px;
|
||||||
|
|
||||||
|
.express-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
|
||||||
|
.company-name {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.express-no {
|
||||||
|
color: #666;
|
||||||
|
background: #f5f5f5;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-info {
|
||||||
|
.status {
|
||||||
|
display: block;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #1890ff;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location {
|
||||||
|
display: block;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.estimated-time {
|
||||||
|
display: block;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logistics-track {
|
||||||
|
background: white;
|
||||||
|
margin: 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.track-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
|
||||||
|
.track-title {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-list {
|
||||||
|
padding: 0 20px;
|
||||||
|
|
||||||
|
.track-item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
padding: 16px 0;
|
||||||
|
border-left: 2px solid #e8e8e8;
|
||||||
|
margin-left: 8px;
|
||||||
|
|
||||||
|
&.current {
|
||||||
|
border-left-color: #1890ff;
|
||||||
|
|
||||||
|
.track-dot {
|
||||||
|
background: #1890ff;
|
||||||
|
border-color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-status {
|
||||||
|
color: #1890ff;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-left-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-dot {
|
||||||
|
position: absolute;
|
||||||
|
left: -6px;
|
||||||
|
top: 20px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #e8e8e8;
|
||||||
|
border: 2px solid #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-content {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 20px;
|
||||||
|
|
||||||
|
.track-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
|
||||||
|
.track-status {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-time {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-location {
|
||||||
|
display: block;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-description {
|
||||||
|
display: block;
|
||||||
|
color: #999;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logistics-footer {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: white;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 适配不同屏幕尺寸 */
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
.logistics-page {
|
||||||
|
.logistics-header {
|
||||||
|
margin: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logistics-track {
|
||||||
|
margin: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
229
src/user/order/logistics/index.tsx
Normal file
229
src/user/order/logistics/index.tsx
Normal file
@@ -0,0 +1,229 @@
|
|||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import Taro, { useRouter } from '@tarojs/taro'
|
||||||
|
import { View, Text } from '@tarojs/components'
|
||||||
|
import { Loading, Empty, Button } from '@nutui/nutui-react-taro'
|
||||||
|
import './index.scss'
|
||||||
|
|
||||||
|
// 物流信息接口
|
||||||
|
interface LogisticsInfo {
|
||||||
|
expressCompany: string // 快递公司
|
||||||
|
expressNo: string // 快递单号
|
||||||
|
status: string // 物流状态
|
||||||
|
updateTime: string // 更新时间
|
||||||
|
estimatedTime?: string // 预计送达时间
|
||||||
|
currentLocation?: string // 当前位置
|
||||||
|
}
|
||||||
|
|
||||||
|
// 物流跟踪记录
|
||||||
|
interface LogisticsTrack {
|
||||||
|
time: string
|
||||||
|
location: string
|
||||||
|
status: string
|
||||||
|
description: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// 支持的快递公司
|
||||||
|
const EXPRESS_COMPANIES = {
|
||||||
|
'SF': '顺丰速运',
|
||||||
|
'YTO': '圆通速递',
|
||||||
|
'ZTO': '中通快递',
|
||||||
|
'STO': '申通快递',
|
||||||
|
'YD': '韵达速递',
|
||||||
|
'HTKY': '百世快递',
|
||||||
|
'JD': '京东物流',
|
||||||
|
'EMS': '中国邮政'
|
||||||
|
}
|
||||||
|
|
||||||
|
const LogisticsPage: React.FC = () => {
|
||||||
|
const router = useRouter()
|
||||||
|
const { orderId, expressNo, expressCompany } = router.params
|
||||||
|
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [logisticsInfo, setLogisticsInfo] = useState<LogisticsInfo | null>(null)
|
||||||
|
const [trackList, setTrackList] = useState<LogisticsTrack[]>([])
|
||||||
|
const [error, setError] = useState<string>('')
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (orderId) {
|
||||||
|
loadLogisticsInfo()
|
||||||
|
}
|
||||||
|
}, [orderId])
|
||||||
|
|
||||||
|
// 加载物流信息
|
||||||
|
const loadLogisticsInfo = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true)
|
||||||
|
setError('')
|
||||||
|
|
||||||
|
// 模拟API调用 - 实际项目中替换为真实API
|
||||||
|
const mockLogisticsInfo: LogisticsInfo = {
|
||||||
|
expressCompany: expressCompany || 'SF',
|
||||||
|
expressNo: expressNo || 'SF1234567890',
|
||||||
|
status: '运输中',
|
||||||
|
updateTime: new Date().toISOString(),
|
||||||
|
estimatedTime: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
|
||||||
|
currentLocation: '北京市朝阳区'
|
||||||
|
}
|
||||||
|
|
||||||
|
const mockTrackList: LogisticsTrack[] = [
|
||||||
|
{
|
||||||
|
time: new Date().toISOString(),
|
||||||
|
location: '北京市朝阳区',
|
||||||
|
status: '运输中',
|
||||||
|
description: '快件正在运输途中，请耐心等待'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
|
||||||
|
location: '北京转运中心',
|
||||||
|
status: '已发出',
|
||||||
|
description: '快件已从北京转运中心发出'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: new Date(Date.now() - 6 * 60 * 60 * 1000).toISOString(),
|
||||||
|
location: '北京转运中心',
|
||||||
|
status: '已到达',
|
||||||
|
description: '快件已到达北京转运中心'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
|
||||||
|
location: '上海市浦东新区',
|
||||||
|
status: '已发货',
|
||||||
|
description: '商家已发货，快件已交给快递公司'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// 模拟网络延迟
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||||
|
|
||||||
|
setLogisticsInfo(mockLogisticsInfo)
|
||||||
|
setTrackList(mockTrackList)
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载物流信息失败:', error)
|
||||||
|
setError('加载物流信息失败，请重试')
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 刷新物流信息
|
||||||
|
const refreshLogistics = () => {
|
||||||
|
loadLogisticsInfo()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 联系客服
|
||||||
|
const contactService = () => {
|
||||||
|
Taro.showModal({
|
||||||
|
title: '联系客服',
|
||||||
|
content: '客服电话：400-123-4567\n工作时间：9:00-18:00',
|
||||||
|
showCancel: false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化时间
|
||||||
|
const formatTime = (timeStr: string) => {
|
||||||
|
const date = new Date(timeStr)
|
||||||
|
return `${date.getMonth() + 1}-${date.getDate()} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<View className="logistics-page">
|
||||||
|
<View className="loading-container">
|
||||||
|
<Loading type="spinner" />
|
||||||
|
<Text className="loading-text">正在查询物流信息...</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<View className="logistics-page">
|
||||||
|
<Empty
|
||||||
|
description={error}
|
||||||
|
imageSize={80}
|
||||||
|
>
|
||||||
|
<Button type="primary" size="small" onClick={refreshLogistics}>
|
||||||
|
重新加载
|
||||||
|
</Button>
|
||||||
|
</Empty>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!logisticsInfo) {
|
||||||
|
return (
|
||||||
|
<View className="logistics-page">
|
||||||
|
<Empty
|
||||||
|
description="暂无物流信息"
|
||||||
|
imageSize={80}
|
||||||
|
>
|
||||||
|
<Button type="primary" size="small" onClick={() => Taro.navigateBack()}>
|
||||||
|
返回
|
||||||
|
</Button>
|
||||||
|
</Empty>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View className="logistics-page">
|
||||||
|
{/* 物流基本信息 */}
|
||||||
|
<View className="logistics-header">
|
||||||
|
<View className="express-info">
|
||||||
|
<Text className="company-name">
|
||||||
|
{EXPRESS_COMPANIES[logisticsInfo.expressCompany] || logisticsInfo.expressCompany}
|
||||||
|
</Text>
|
||||||
|
<Text className="express-no">{logisticsInfo.expressNo}</Text>
|
||||||
|
</View>
|
||||||
|
<View className="status-info">
|
||||||
|
<Text className="status">{logisticsInfo.status}</Text>
|
||||||
|
{logisticsInfo.currentLocation && (
|
||||||
|
<Text className="location">当前位置：{logisticsInfo.currentLocation}</Text>
|
||||||
|
)}
|
||||||
|
{logisticsInfo.estimatedTime && (
|
||||||
|
<Text className="estimated-time">
|
||||||
|
预计送达：{formatTime(logisticsInfo.estimatedTime)}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 物流跟踪 */}
|
||||||
|
<View className="logistics-track">
|
||||||
|
<View className="track-header">
|
||||||
|
<Text className="track-title">物流跟踪</Text>
|
||||||
|
<Button size="small" fill="outline" onClick={refreshLogistics}>
|
||||||
|
刷新
|
||||||
|
</Button>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className="track-list">
|
||||||
|
{trackList.map((track, index) => (
|
||||||
|
<View key={index} className={`track-item ${index === 0 ? 'current' : ''}`}>
|
||||||
|
<View className="track-dot" />
|
||||||
|
<View className="track-content">
|
||||||
|
<View className="track-info">
|
||||||
|
<Text className="track-status">{track.status}</Text>
|
||||||
|
<Text className="track-time">{formatTime(track.time)}</Text>
|
||||||
|
</View>
|
||||||
|
<Text className="track-location">{track.location}</Text>
|
||||||
|
<Text className="track-description">{track.description}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 底部操作 */}
|
||||||
|
<View className="logistics-footer">
|
||||||
|
<Button block onClick={contactService}>
|
||||||
|
联系客服
|
||||||
|
</Button>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LogisticsPage
|
||||||
3
src/user/order/progress/index.config.ts
Normal file
3
src/user/order/progress/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export default definePageConfig({
|
||||||
|
navigationBarTitleText: '查看进度'
|
||||||
|
})
|
||||||
292
src/user/order/progress/index.scss
Normal file
292
src/user/order/progress/index.scss
Normal file
@@ -0,0 +1,292 @@
|
|||||||
|
.progress-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
|
||||||
|
.loading-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 50vh;
|
||||||
|
|
||||||
|
.loading-text {
|
||||||
|
margin-top: 16px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.after-sale-header {
|
||||||
|
background: white;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.header-top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.type-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
.type-text {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tag {
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-info {
|
||||||
|
.order-no,
|
||||||
|
.apply-time,
|
||||||
|
.amount {
|
||||||
|
display: block;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount {
|
||||||
|
color: #ff6b35;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-timeline {
|
||||||
|
background: white;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.timeline-header {
|
||||||
|
padding: 16px 20px 0;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
|
||||||
|
.timeline-title {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-list {
|
||||||
|
padding: 0 20px;
|
||||||
|
|
||||||
|
.timeline-item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
padding: 16px 0;
|
||||||
|
border-left: 2px solid #e8e8e8;
|
||||||
|
margin-left: 8px;
|
||||||
|
|
||||||
|
&.current {
|
||||||
|
border-left-color: #1890ff;
|
||||||
|
|
||||||
|
.timeline-dot {
|
||||||
|
background: #1890ff;
|
||||||
|
border-color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-status {
|
||||||
|
color: #1890ff;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-left-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-dot {
|
||||||
|
position: absolute;
|
||||||
|
left: -6px;
|
||||||
|
top: 20px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #e8e8e8;
|
||||||
|
border: 2px solid #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-content {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 20px;
|
||||||
|
|
||||||
|
.timeline-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
|
||||||
|
.timeline-status {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-time {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-description {
|
||||||
|
display: block;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.4;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-operator {
|
||||||
|
display: block;
|
||||||
|
color: #999;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-remark {
|
||||||
|
display: block;
|
||||||
|
color: #1890ff;
|
||||||
|
background: #f0f8ff;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.evidence-section {
|
||||||
|
background: white;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
padding: 16px 20px;
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.image-item {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid #e8e8e8;
|
||||||
|
|
||||||
|
.evidence-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-footer {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: white;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
.footer-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
.nut-button {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NutUI 组件样式覆盖 */
|
||||||
|
.progress-page {
|
||||||
|
.nut-cell-group {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.nut-cell-group__title {
|
||||||
|
padding: 12px 20px 6px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nut-cell {
|
||||||
|
padding: 12px 20px;
|
||||||
|
|
||||||
|
.nut-cell__title {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nut-cell__value {
|
||||||
|
color: #666;
|
||||||
|
text-align: right;
|
||||||
|
word-break: break-all;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nut-tag {
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 适配不同屏幕尺寸 */
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
.progress-page {
|
||||||
|
.after-sale-header {
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.header-top {
|
||||||
|
.type-status {
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.type-text {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-timeline {
|
||||||
|
.timeline-list {
|
||||||
|
padding: 0 16px;
|
||||||
|
|
||||||
|
.timeline-item {
|
||||||
|
.timeline-content {
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.evidence-section {
|
||||||
|
padding: 12px 16px;
|
||||||
|
|
||||||
|
.image-list {
|
||||||
|
.image-item {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
388
src/user/order/progress/index.tsx
Normal file
388
src/user/order/progress/index.tsx
Normal file
@@ -0,0 +1,388 @@
|
|||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import Taro, { useRouter } from '@tarojs/taro'
|
||||||
|
import { View, Text } from '@tarojs/components'
|
||||||
|
import {
|
||||||
|
Cell,
|
||||||
|
CellGroup,
|
||||||
|
Loading,
|
||||||
|
Empty,
|
||||||
|
Button,
|
||||||
|
Steps,
|
||||||
|
Step,
|
||||||
|
Tag,
|
||||||
|
Divider
|
||||||
|
} from '@nutui/nutui-react-taro'
|
||||||
|
import './index.scss'
|
||||||
|
|
||||||
|
// 售后类型
|
||||||
|
type AfterSaleType = 'refund' | 'return' | 'exchange' | 'repair'
|
||||||
|
|
||||||
|
// 售后状态
|
||||||
|
type AfterSaleStatus =
|
||||||
|
| 'pending' // 待审核
|
||||||
|
| 'approved' // 已同意
|
||||||
|
| 'rejected' // 已拒绝
|
||||||
|
| 'processing' // 处理中
|
||||||
|
| 'completed' // 已完成
|
||||||
|
| 'cancelled' // 已取消
|
||||||
|
|
||||||
|
// 售后进度记录
|
||||||
|
interface ProgressRecord {
|
||||||
|
id: string
|
||||||
|
time: string
|
||||||
|
status: string
|
||||||
|
description: string
|
||||||
|
operator?: string
|
||||||
|
remark?: string
|
||||||
|
images?: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 售后详情
|
||||||
|
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[]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 售后类型映射
|
||||||
|
const AFTER_SALE_TYPE_MAP = {
|
||||||
|
'refund': '退款',
|
||||||
|
'return': '退货',
|
||||||
|
'exchange': '换货',
|
||||||
|
'repair': '维修'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 售后状态映射
|
||||||
|
const AFTER_SALE_STATUS_MAP = {
|
||||||
|
'pending': '待审核',
|
||||||
|
'approved': '已同意',
|
||||||
|
'rejected': '已拒绝',
|
||||||
|
'processing': '处理中',
|
||||||
|
'completed': '已完成',
|
||||||
|
'cancelled': '已取消'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 状态颜色映射
|
||||||
|
const STATUS_COLOR_MAP = {
|
||||||
|
'pending': '#faad14',
|
||||||
|
'approved': '#52c41a',
|
||||||
|
'rejected': '#ff4d4f',
|
||||||
|
'processing': '#1890ff',
|
||||||
|
'completed': '#52c41a',
|
||||||
|
'cancelled': '#999'
|
||||||
|
}
|
||||||
|
|
||||||
|
const AfterSaleProgressPage: React.FC = () => {
|
||||||
|
const router = useRouter()
|
||||||
|
const { orderId, orderNo, type = 'refund' } = router.params
|
||||||
|
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [afterSaleDetail, setAfterSaleDetail] = useState<AfterSaleDetail | null>(null)
|
||||||
|
const [error, setError] = useState<string>('')
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (orderId) {
|
||||||
|
loadAfterSaleDetail()
|
||||||
|
}
|
||||||
|
}, [orderId])
|
||||||
|
|
||||||
|
// 加载售后详情
|
||||||
|
const loadAfterSaleDetail = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true)
|
||||||
|
setError('')
|
||||||
|
|
||||||
|
// 模拟API调用 - 实际项目中替换为真实API
|
||||||
|
const mockAfterSaleDetail: AfterSaleDetail = {
|
||||||
|
id: 'AS' + Date.now(),
|
||||||
|
orderId: orderId || '',
|
||||||
|
orderNo: orderNo || '',
|
||||||
|
type: type as AfterSaleType,
|
||||||
|
status: 'processing',
|
||||||
|
reason: '商品质量问题',
|
||||||
|
description: '收到的商品有明显瑕疵，希望申请退款',
|
||||||
|
amount: 9999,
|
||||||
|
applyTime: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
|
||||||
|
processTime: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
|
||||||
|
contactPhone: '138****5678',
|
||||||
|
evidenceImages: [
|
||||||
|
'https://via.placeholder.com/200x200',
|
||||||
|
'https://via.placeholder.com/200x200'
|
||||||
|
],
|
||||||
|
progressRecords: [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
time: new Date().toISOString(),
|
||||||
|
status: '处理中',
|
||||||
|
description: '客服正在处理您的申请，请耐心等待',
|
||||||
|
operator: '客服小王',
|
||||||
|
remark: '预计1-2个工作日内完成处理'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
time: new Date(Date.now() - 4 * 60 * 60 * 1000).toISOString(),
|
||||||
|
status: '已审核',
|
||||||
|
description: '您的申请已通过审核，正在安排处理',
|
||||||
|
operator: '审核员张三'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
time: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
|
||||||
|
status: '已受理',
|
||||||
|
description: '我们已收到您的申请，正在进行审核',
|
||||||
|
operator: '系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4',
|
||||||
|
time: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
|
||||||
|
status: '已提交',
|
||||||
|
description: '您已成功提交售后申请',
|
||||||
|
operator: '用户'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 模拟网络延迟
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||||
|
|
||||||
|
setAfterSaleDetail(mockAfterSaleDetail)
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载售后详情失败:', error)
|
||||||
|
setError('加载售后详情失败，请重试')
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 刷新进度
|
||||||
|
const refreshProgress = () => {
|
||||||
|
loadAfterSaleDetail()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 撤销申请
|
||||||
|
const cancelApplication = async () => {
|
||||||
|
try {
|
||||||
|
const result = await Taro.showModal({
|
||||||
|
title: '撤销申请',
|
||||||
|
content: '确定要撤销售后申请吗？撤销后无法恢复',
|
||||||
|
confirmText: '确定撤销',
|
||||||
|
cancelText: '取消'
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!result.confirm) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
Taro.showLoading({
|
||||||
|
title: '撤销中...'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 模拟API调用
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 1500))
|
||||||
|
|
||||||
|
Taro.hideLoading()
|
||||||
|
|
||||||
|
Taro.showToast({
|
||||||
|
title: '撤销成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 延迟返回上一页
|
||||||
|
setTimeout(() => {
|
||||||
|
Taro.navigateBack()
|
||||||
|
}, 1500)
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
Taro.hideLoading()
|
||||||
|
console.error('撤销申请失败:', error)
|
||||||
|
Taro.showToast({
|
||||||
|
title: '撤销失败，请重试',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 联系客服
|
||||||
|
const contactService = () => {
|
||||||
|
Taro.showModal({
|
||||||
|
title: '联系客服',
|
||||||
|
content: '客服电话：400-123-4567\n工作时间：9:00-18:00\n\n您也可以通过在线客服获得帮助',
|
||||||
|
showCancel: false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化时间
|
||||||
|
const formatTime = (timeStr: string) => {
|
||||||
|
const date = new Date(timeStr)
|
||||||
|
return `${date.getMonth() + 1}-${date.getDate()} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化完整时间
|
||||||
|
const formatFullTime = (timeStr: string) => {
|
||||||
|
const date = new Date(timeStr)
|
||||||
|
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<View className="progress-page">
|
||||||
|
<View className="loading-container">
|
||||||
|
<Loading type="spinner" />
|
||||||
|
<Text className="loading-text">正在加载售后进度...</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<View className="progress-page">
|
||||||
|
<Empty
|
||||||
|
description={error}
|
||||||
|
imageSize={80}
|
||||||
|
>
|
||||||
|
<Button type="primary" size="small" onClick={refreshProgress}>
|
||||||
|
重新加载
|
||||||
|
</Button>
|
||||||
|
</Empty>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!afterSaleDetail) {
|
||||||
|
return (
|
||||||
|
<View className="progress-page">
|
||||||
|
<Empty
|
||||||
|
description="暂无售后信息"
|
||||||
|
imageSize={80}
|
||||||
|
>
|
||||||
|
<Button type="primary" size="small" onClick={() => Taro.navigateBack()}>
|
||||||
|
返回
|
||||||
|
</Button>
|
||||||
|
</Empty>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View className="progress-page">
|
||||||
|
{/* 售后基本信息 */}
|
||||||
|
<View className="after-sale-header">
|
||||||
|
<View className="header-top">
|
||||||
|
<View className="type-status">
|
||||||
|
<Text className="type-text">
|
||||||
|
{AFTER_SALE_TYPE_MAP[afterSaleDetail.type]}申请
|
||||||
|
</Text>
|
||||||
|
<Tag
|
||||||
|
color={STATUS_COLOR_MAP[afterSaleDetail.status]}
|
||||||
|
className="status-tag"
|
||||||
|
>
|
||||||
|
{AFTER_SALE_STATUS_MAP[afterSaleDetail.status]}
|
||||||
|
</Tag>
|
||||||
|
</View>
|
||||||
|
<Button size="small" fill="outline" onClick={refreshProgress}>
|
||||||
|
刷新
|
||||||
|
</Button>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className="header-info">
|
||||||
|
<Text className="order-no">订单号：{afterSaleDetail.orderNo}</Text>
|
||||||
|
<Text className="apply-time">
|
||||||
|
申请时间：{formatFullTime(afterSaleDetail.applyTime)}
|
||||||
|
</Text>
|
||||||
|
<Text className="amount">申请金额：¥{afterSaleDetail.amount}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 进度时间线 */}
|
||||||
|
<View className="progress-timeline">
|
||||||
|
<View className="timeline-header">
|
||||||
|
<Text className="timeline-title">处理进度</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className="timeline-list">
|
||||||
|
{afterSaleDetail.progressRecords.map((record, index) => (
|
||||||
|
<View key={record.id} className={`timeline-item ${index === 0 ? 'current' : ''}`}>
|
||||||
|
<View className="timeline-dot" />
|
||||||
|
<View className="timeline-content">
|
||||||
|
<View className="timeline-info">
|
||||||
|
<Text className="timeline-status">{record.status}</Text>
|
||||||
|
<Text className="timeline-time">{formatTime(record.time)}</Text>
|
||||||
|
</View>
|
||||||
|
<Text className="timeline-description">{record.description}</Text>
|
||||||
|
{record.operator && (
|
||||||
|
<Text className="timeline-operator">操作人：{record.operator}</Text>
|
||||||
|
)}
|
||||||
|
{record.remark && (
|
||||||
|
<Text className="timeline-remark">{record.remark}</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 申请详情 */}
|
||||||
|
<CellGroup title="申请详情">
|
||||||
|
<Cell title="申请原因" value={afterSaleDetail.reason} />
|
||||||
|
<Cell title="问题描述" value={afterSaleDetail.description} />
|
||||||
|
{afterSaleDetail.contactPhone && (
|
||||||
|
<Cell title="联系电话" value={afterSaleDetail.contactPhone} />
|
||||||
|
)}
|
||||||
|
</CellGroup>
|
||||||
|
|
||||||
|
{/* 凭证图片 */}
|
||||||
|
{afterSaleDetail.evidenceImages.length > 0 && (
|
||||||
|
<View className="evidence-section">
|
||||||
|
<View className="section-title">凭证图片</View>
|
||||||
|
<View className="image-list">
|
||||||
|
{afterSaleDetail.evidenceImages.map((image, index) => (
|
||||||
|
<View key={index} className="image-item">
|
||||||
|
<image
|
||||||
|
src={image}
|
||||||
|
mode="aspectFill"
|
||||||
|
className="evidence-image"
|
||||||
|
onClick={() => {
|
||||||
|
Taro.previewImage({
|
||||||
|
urls: afterSaleDetail.evidenceImages,
|
||||||
|
current: image
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 底部操作 */}
|
||||||
|
<View className="progress-footer">
|
||||||
|
<View className="footer-buttons">
|
||||||
|
<Button onClick={contactService}>
|
||||||
|
联系客服
|
||||||
|
</Button>
|
||||||
|
{(afterSaleDetail.status === 'pending' || afterSaleDetail.status === 'approved') && (
|
||||||
|
<Button type="primary" onClick={cancelApplication}>
|
||||||
|
撤销申请
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AfterSaleProgressPage
|
||||||
3
src/user/order/refund/index.config.ts
Normal file
3
src/user/order/refund/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export default definePageConfig({
|
||||||
|
navigationBarTitleText: '申请退款'
|
||||||
|
})
|
||||||
244
src/user/order/refund/index.scss
Normal file
244
src/user/order/refund/index.scss
Normal file
@@ -0,0 +1,244 @@
|
|||||||
|
.refund-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
|
||||||
|
.loading-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 50vh;
|
||||||
|
|
||||||
|
.loading-text {
|
||||||
|
margin-top: 16px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-info {
|
||||||
|
background: white;
|
||||||
|
padding: 16px 20px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.order-no {
|
||||||
|
display: block;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-amount {
|
||||||
|
display: block;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #ff6b35;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-section {
|
||||||
|
background: white;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
padding: 16px 20px 0;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-item {
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-info {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.goods-image {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 6px;
|
||||||
|
margin-right: 12px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-detail {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.goods-name {
|
||||||
|
display: block;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.4;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-sku {
|
||||||
|
display: block;
|
||||||
|
color: #999;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-price {
|
||||||
|
display: block;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #ff6b35;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-control {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.control-label {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.max-num {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-section,
|
||||||
|
.evidence-section {
|
||||||
|
background: white;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding: 12px 20px;
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-amount {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #ff6b35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-section {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: white;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NutUI 组件样式覆盖 */
|
||||||
|
.refund-page {
|
||||||
|
.nut-cell-group {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
.nut-cell-group__title {
|
||||||
|
padding: 12px 20px 6px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nut-cell {
|
||||||
|
padding: 6px 20px;
|
||||||
|
min-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 退款原因选项特殊样式
|
||||||
|
.reason-cell {
|
||||||
|
padding: 4px 20px !important;
|
||||||
|
min-height: 36px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 其他选项样式
|
||||||
|
.option-cell {
|
||||||
|
padding: 8px 20px !important;
|
||||||
|
min-height: 44px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nut-radio {
|
||||||
|
.nut-radio__label {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nut-checkbox {
|
||||||
|
.nut-checkbox__label {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nut-textarea {
|
||||||
|
border: 1px solid #e8e8e8;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
background: #fafafa;
|
||||||
|
min-height: 80px;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: #1890ff;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nut-uploader {
|
||||||
|
.nut-uploader-slot {
|
||||||
|
border: 2px dashed #e8e8e8;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fafafa;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #1890ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nut-uploader-preview {
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nut-inputnumber {
|
||||||
|
.nut-inputnumber-input {
|
||||||
|
width: 60px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 适配不同屏幕尺寸 */
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
.refund-page {
|
||||||
|
.goods-section {
|
||||||
|
.goods-item {
|
||||||
|
padding: 12px 16px;
|
||||||
|
|
||||||
|
.goods-info {
|
||||||
|
.goods-image {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-control {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-section,
|
||||||
|
.evidence-section {
|
||||||
|
padding: 12px 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
423
src/user/order/refund/index.tsx
Normal file
423
src/user/order/refund/index.tsx
Normal file
@@ -0,0 +1,423 @@
|
|||||||
|
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,
|
||||||
|
Uploader,
|
||||||
|
Loading,
|
||||||
|
Empty,
|
||||||
|
InputNumber
|
||||||
|
} from '@nutui/nutui-react-taro'
|
||||||
|
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 [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
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (orderId) {
|
||||||
|
loadOrderInfo()
|
||||||
|
}
|
||||||
|
}, [orderId])
|
||||||
|
|
||||||
|
// 加载订单信息
|
||||||
|
const loadOrderInfo = async () => {
|
||||||
|
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 totalAmount = mockOrderGoods.reduce((sum, goods) =>
|
||||||
|
sum + goods.goodsPrice * goods.goodsNum, 0
|
||||||
|
)
|
||||||
|
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||||
|
|
||||||
|
setOrderGoods(mockOrderGoods)
|
||||||
|
setOrderAmount(totalAmount)
|
||||||
|
|
||||||
|
// 初始化退款申请信息
|
||||||
|
setRefundApp(prev => ({
|
||||||
|
...prev,
|
||||||
|
refundAmount: totalAmount,
|
||||||
|
refundGoods: mockOrderGoods.map(goods => ({
|
||||||
|
goodsId: goods.goodsId,
|
||||||
|
refundNum: goods.goodsNum
|
||||||
|
}))
|
||||||
|
}))
|
||||||
|
|
||||||
|
} 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 handleImageUpload = async (files: any) => {
|
||||||
|
try {
|
||||||
|
const uploadedImages: string[] = []
|
||||||
|
|
||||||
|
for (const file of files) {
|
||||||
|
if (file.url) {
|
||||||
|
uploadedImages.push(file.url)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateRefundApp('evidenceImages', uploadedImages)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('图片上传失败:', error)
|
||||||
|
Taro.showToast({
|
||||||
|
title: '图片上传失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交退款申请
|
||||||
|
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)
|
||||||
|
|
||||||
|
// 模拟API调用
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 2000))
|
||||||
|
|
||||||
|
Taro.showToast({
|
||||||
|
title: '退款申请提交成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 延迟返回上一页
|
||||||
|
setTimeout(() => {
|
||||||
|
Taro.navigateBack()
|
||||||
|
}, 1500)
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('提交退款申请失败:', error)
|
||||||
|
Taro.showToast({
|
||||||
|
title: '提交失败，请重试',
|
||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (orderGoods.length === 0) {
|
||||||
|
return (
|
||||||
|
<View className="refund-page">
|
||||||
|
<Empty
|
||||||
|
description="暂无订单信息"
|
||||||
|
imageSize={80}
|
||||||
|
>
|
||||||
|
<Button type="primary" size="small" onClick={() => Taro.navigateBack()}>
|
||||||
|
返回
|
||||||
|
</Button>
|
||||||
|
</Empty>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View className="refund-page">
|
||||||
|
{/* 订单信息 */}
|
||||||
|
<View className="order-info">
|
||||||
|
<Text className="order-no">订单号：{orderNo}</Text>
|
||||||
|
<Text className="order-amount">订单金额：¥{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, value)}
|
||||||
|
/>
|
||||||
|
<Text className="max-num">最多{goods.canRefundNum}件</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 退款金额 */}
|
||||||
|
<CellGroup title="退款金额">
|
||||||
|
<Cell>
|
||||||
|
<Text className="refund-amount">¥{refundApp.refundAmount}</Text>
|
||||||
|
</Cell>
|
||||||
|
</CellGroup>
|
||||||
|
|
||||||
|
{/* 退款原因 */}
|
||||||
|
<CellGroup title="退款原因">
|
||||||
|
<RadioGroup
|
||||||
|
value={refundApp.refundReason}
|
||||||
|
onChange={(value) => updateRefundApp('refundReason', value)}
|
||||||
|
>
|
||||||
|
{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
|
||||||
Reference in New Issue
Block a user