feat(user): 新增收货地址管理及售后申请页面
- 新增地址类型定义，增强前端地址数据结构 - 新增地址编辑页面，支持地址智能识别和定位选点功能 - 地址编辑支持省市区选择及默认地址设置 - 新增地址列表页面，支持地址展示、删除、编辑和选择功能 - 实现售后申请页面，支持选择售后类型和退款原因 - 售后申请支持商品选择、退款金额计算和凭证上传 - 新增售后详情页面，支持售后状态展示及申请取消 - 优化页面加载和用户交互体验，增加错误提示和权限处理
This commit is contained in:
3
src_bak/pages/after-sale/apply/index.config.ts
Normal file
3
src_bak/pages/after-sale/apply/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '申请售后',
|
||||
}
|
||||
251
src_bak/pages/after-sale/apply/index.tsx
Normal file
251
src_bak/pages/after-sale/apply/index.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
import React, { useState } from 'react'
|
||||
import { View, Text, Textarea, ScrollView, Radio, RadioGroup, Checkbox, Input } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { applyAfterSale } from '@/api/shop/shopAfterSale'
|
||||
import type { AfterSaleType } from '@/api/shop/shopAfterSale'
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '申请售后',
|
||||
})
|
||||
|
||||
const AfterSaleApplyPage: React.FC = () => {
|
||||
const params = Taro.getCurrentInstance().router?.params || {}
|
||||
const orderId = params.orderId || ''
|
||||
const [orderGoods, setOrderGoods] = useState<Array<{ id: number; name: string; price: number; num: number; checked: boolean }>>([])
|
||||
const [saleType, setSaleType] = useState(1) // 1:退款, 2:退货退款, 3:换货
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [reason, setReason] = useState('')
|
||||
const [amount, setAmount] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const [images, setImages] = useState<string[]>([])
|
||||
|
||||
// 退款原因选项
|
||||
const refundReasons = ['商品质量问题', '商品与描述不符', '商品破损/缺陷', '物流问题', '其他']
|
||||
const returnReasons = ['商品质量问题', '商品与描述不符', '商品破损/缺陷', '尺码/颜色不合适', '不喜欢/不想要', '其他']
|
||||
const exchangeReasons = ['商品质量问题', '商品与描述不符', '商品破损/缺陷', '尺码/颜色不合适', '其他']
|
||||
|
||||
// 获取当前原因列表
|
||||
const getCurrentReasons = () => {
|
||||
if (saleType === 1) return refundReasons
|
||||
if (saleType === 2) return returnReasons
|
||||
return exchangeReasons
|
||||
}
|
||||
|
||||
// 处理商品选择
|
||||
const handleGoodsCheck = (id: number) => {
|
||||
setOrderGoods(prev =>
|
||||
prev.map(g => g.id === id ? { ...g, checked: !g.checked } : g)
|
||||
)
|
||||
}
|
||||
|
||||
// 选择图片
|
||||
const handleChooseImage = () => {
|
||||
if (images.length >= 6) {
|
||||
Taro.showToast({ title: '最多上传6张图片', icon: 'none' })
|
||||
return
|
||||
}
|
||||
Taro.chooseImage({
|
||||
count: 6 - images.length,
|
||||
success: (res) => {
|
||||
setImages(prev => [...prev, ...res.tempFilePaths])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 删除图片
|
||||
const handleDeleteImage = (index: number) => {
|
||||
setImages(prev => prev.filter((_, i) => i !== index))
|
||||
}
|
||||
|
||||
// 提交申请
|
||||
const handleSubmit = () => {
|
||||
const checkedGoods = orderGoods.filter(g => g.checked)
|
||||
if (!reason) {
|
||||
Taro.showToast({ title: '请选择原因', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (saleType === 1 && !amount) {
|
||||
Taro.showToast({ title: '请输入退款金额', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
const typeMap: Record<number, AfterSaleType> = {
|
||||
1: 'refund',
|
||||
2: 'return',
|
||||
3: 'exchange',
|
||||
}
|
||||
|
||||
Taro.showModal({
|
||||
title: '确认提交',
|
||||
content: '确定提交售后申请吗？',
|
||||
confirmColor: '#0e932e',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
setSubmitting(true)
|
||||
Taro.showLoading({ title: '提交中...' })
|
||||
try {
|
||||
await applyAfterSale({
|
||||
orderId,
|
||||
type: typeMap[saleType],
|
||||
reason,
|
||||
description,
|
||||
amount: saleType === 1 ? Number(amount) : undefined,
|
||||
evidenceImages: images,
|
||||
goodsItems: checkedGoods.map(g => ({ goodsId: String(g.id), quantity: g.num })),
|
||||
})
|
||||
Taro.hideLoading()
|
||||
Taro.showToast({ title: '提交成功', icon: 'success' })
|
||||
setTimeout(() => Taro.navigateBack(), 1500)
|
||||
} catch (err: any) {
|
||||
Taro.hideLoading()
|
||||
Taro.showToast({ title: err.message || '提交失败', icon: 'none' })
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='bg-gray-50 flex flex-col' style={{ minHeight: '100vh' }}>
|
||||
<ScrollView scrollY className='flex-1'>
|
||||
{/* 订单商品 */}
|
||||
<View className='bg-white mx-3 mt-3 rounded-xl p-4'>
|
||||
<Text className='text-sm font-medium text-gray-800 mb-3 block'>选择商品</Text>
|
||||
{orderGoods.map(goods => (
|
||||
<View
|
||||
key={goods.id}
|
||||
className='flex items-center gap-3 py-2 border-b border-gray-50'
|
||||
onClick={() => handleGoodsCheck(goods.id)}
|
||||
>
|
||||
<Checkbox checked={goods.checked} color='#0e932e' />
|
||||
<View className='w-12 h-12 bg-gray-100 rounded flex items-center justify-center flex-shrink-0'>
|
||||
<Text className='text-xl'>🛍️</Text>
|
||||
</View>
|
||||
<View className='flex-1'>
|
||||
<Text className='text-sm text-gray-700 block'>{goods.name}</Text>
|
||||
<Text className='text-xs text-gray-400 mt-1 block'>¥{goods.price} × {goods.num}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* 售后类型 */}
|
||||
<View className='bg-white mx-3 mt-3 rounded-xl p-4'>
|
||||
<Text className='text-sm font-medium text-gray-800 mb-3 block'>售后类型</Text>
|
||||
<RadioGroup onChange={(e) => setSaleType(parseInt(e.detail.value))}>
|
||||
<View className='flex flex-col gap-2'>
|
||||
<View className='flex items-center gap-2'>
|
||||
<Radio value='1' checked={saleType === 1} color='#0e932e' />
|
||||
<Text className='text-sm text-gray-700'>仅退款</Text>
|
||||
</View>
|
||||
<View className='flex items-center gap-2'>
|
||||
<Radio value='2' checked={saleType === 2} color='#0e932e' />
|
||||
<Text className='text-sm text-gray-700'>退货退款</Text>
|
||||
</View>
|
||||
<View className='flex items-center gap-2'>
|
||||
<Radio value='3' checked={saleType === 3} color='#0e932e' />
|
||||
<Text className='text-sm text-gray-700'>换货</Text>
|
||||
</View>
|
||||
</View>
|
||||
</RadioGroup>
|
||||
</View>
|
||||
|
||||
{/* 退款金额 */}
|
||||
{saleType === 1 && (
|
||||
<View className='bg-white mx-3 mt-3 rounded-xl p-4'>
|
||||
<Text className='text-sm font-medium text-gray-800 mb-3 block'>退款金额</Text>
|
||||
<View className='flex items-center bg-gray-50 rounded-lg px-3 py-2'>
|
||||
<Text className='text-gray-500 mr-1'>¥</Text>
|
||||
<Input
|
||||
type='digit'
|
||||
value={amount}
|
||||
onInput={(e) => setAmount(e.detail.value)}
|
||||
placeholder='请输入退款金额'
|
||||
className='flex-1'
|
||||
/>
|
||||
</View>
|
||||
<Text className='text-xs text-gray-400 mt-2 block'>最多可退 ¥134.00</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 售后原因 */}
|
||||
<View className='bg-white mx-3 mt-3 rounded-xl p-4'>
|
||||
<Text className='text-sm font-medium text-gray-800 mb-3 block'>售后原因</Text>
|
||||
<View className='flex flex-col gap-2'>
|
||||
{getCurrentReasons().map((r, index) => (
|
||||
<View
|
||||
key={index}
|
||||
className={`p-2 rounded-lg border ${
|
||||
reason === r ? 'border-orange-500 bg-orange-50' : 'border-gray-200'
|
||||
}`}
|
||||
onClick={() => setReason(r)}
|
||||
>
|
||||
<Text className={`text-sm ${reason === r ? 'text-orange-500' : 'text-gray-700'}`}>
|
||||
{r}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 问题描述 */}
|
||||
<View className='bg-white mx-3 mt-3 rounded-xl p-4'>
|
||||
<Text className='text-sm font-medium text-gray-800 mb-3 block'>问题描述</Text>
|
||||
<Textarea
|
||||
value={description}
|
||||
onInput={(e) => setDescription(e.detail.value)}
|
||||
placeholder='请详细描述您的问题（选填）'
|
||||
className='w-full min-h-20 p-2 bg-gray-50 rounded-lg text-sm'
|
||||
maxlength={500}
|
||||
/>
|
||||
<Text className='text-xs text-gray-400 mt-1 block text-right'>{description.length}/500</Text>
|
||||
</View>
|
||||
|
||||
{/* 上传凭证 */}
|
||||
<View className='bg-white mx-3 mt-3 rounded-xl p-4 mb-3'>
|
||||
<Text className='text-sm font-medium text-gray-800 mb-3 block'>上传凭证（选填）</Text>
|
||||
<View className='flex flex-wrap gap-2'>
|
||||
{images.map((img, index) => (
|
||||
<View key={index} className='relative'>
|
||||
<View className='w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center'>
|
||||
<Text className='text-2xl'>🖼️</Text>
|
||||
</View>
|
||||
<View
|
||||
className='absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center'
|
||||
onClick={() => handleDeleteImage(index)}
|
||||
>
|
||||
<Text className='text-xs text-white'>×</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
{images.length < 6 && (
|
||||
<View
|
||||
className='w-16 h-16 bg-gray-50 rounded-lg flex items-center justify-center border-2 border-dashed border-gray-300'
|
||||
onClick={handleChooseImage}
|
||||
>
|
||||
<Text className='text-2xl text-gray-400'>+</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className='h-4' />
|
||||
</ScrollView>
|
||||
|
||||
{/* 提交按钮 */}
|
||||
<View className='bg-white p-3 shadow-lg' style={{ paddingBottom: '20px' }}>
|
||||
<View
|
||||
className='text-center py-3 rounded-full text-white font-bold'
|
||||
style={{ background: submitting ? '#ccc' : 'linear-gradient(to right, #f97316, #ef4444)' }}
|
||||
onClick={submitting ? undefined : handleSubmit}
|
||||
>
|
||||
<Text className='text-white font-bold'>{submitting ? '提交中...' : '提交申请'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default AfterSaleApplyPage
|
||||
3
src_bak/pages/after-sale/list/index.config.ts
Normal file
3
src_bak/pages/after-sale/list/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '售后记录',
|
||||
}
|
||||
180
src_bak/pages/after-sale/list/index.tsx
Normal file
180
src_bak/pages/after-sale/list/index.tsx
Normal file
@@ -0,0 +1,180 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text, ScrollView } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { pageAfterSaleList, cancelAfterSale } from '@/api/shop/shopAfterSale'
|
||||
import type { AfterSaleDetail, AfterSaleStatus } from '@/api/shop/shopAfterSale'
|
||||
import { formatAfterSaleStatus } from '@/api/shop/shopAfterSale'
|
||||
import EmptyState from '@/components/common/EmptyState'
|
||||
import LoadMore from '@/components/common/LoadMore'
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '售后记录',
|
||||
})
|
||||
|
||||
const AfterSaleListPage: React.FC = () => {
|
||||
const [sales, setSales] = useState<AfterSaleDetail[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [finished, setFinished] = useState(false)
|
||||
const [page, setPage] = useState(1)
|
||||
|
||||
useEffect(() => {
|
||||
loadList(1)
|
||||
}, [])
|
||||
|
||||
const loadList = async (p: number) => {
|
||||
if (loading) return
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
const res = await pageAfterSaleList({
|
||||
page: p,
|
||||
pageSize: 10,
|
||||
})
|
||||
|
||||
const newList = res?.list || []
|
||||
if (p === 1) {
|
||||
setSales(newList)
|
||||
} else {
|
||||
setSales(prev => [...prev, ...newList])
|
||||
}
|
||||
setFinished(newList.length < 10)
|
||||
setPage(p)
|
||||
} catch (err) {
|
||||
console.error('加载售后记录失败', err)
|
||||
Taro.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleLoadMore = () => {
|
||||
if (!finished && !loading) {
|
||||
loadList(page + 1)
|
||||
}
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
const handleDetail = (id: string) => {
|
||||
Taro.navigateTo({ url: `/pages/after-sale/progress/index?id=${id}` })
|
||||
}
|
||||
|
||||
// 取消售后
|
||||
const handleCancel = async (id: string) => {
|
||||
Taro.showModal({
|
||||
title: '提示',
|
||||
content: '确定取消售后申请吗？',
|
||||
confirmColor: '#0e932e',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
try {
|
||||
await cancelAfterSale(id)
|
||||
Taro.showToast({ title: '已取消', icon: 'success' })
|
||||
// 重新加载列表
|
||||
setSales([])
|
||||
setPage(1)
|
||||
setFinished(false)
|
||||
loadList(1)
|
||||
} catch (err) {
|
||||
console.error('取消售后失败', err)
|
||||
Taro.showToast({ title: '取消失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 售后类型文字
|
||||
const getTypeText = (type: string) => {
|
||||
const map: Record<string, string> = {
|
||||
refund: '仅退款',
|
||||
return: '退货退款',
|
||||
exchange: '换货',
|
||||
repair: '维修',
|
||||
}
|
||||
return map[type] || type
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50 flex flex-col'>
|
||||
<ScrollView scrollY className='flex-1' onScrollToLower={handleLoadMore}>
|
||||
{sales.length === 0 ? (
|
||||
<View className='text-center py-16'>
|
||||
<Text className='text-4xl mb-3 block'>📋</Text>
|
||||
<Text className='text-sm text-gray-400 mb-3 block'>暂无售后记录</Text>
|
||||
<View
|
||||
className='inline-block bg-blue-500 text-white px-4 py-2 rounded-full'
|
||||
onClick={() => Taro.navigateTo({ url: '/pages/order/list' })}
|
||||
>
|
||||
<Text className='text-sm'>去申请售后</Text>
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
<View className='p-3'>
|
||||
{sales.map(sale => {
|
||||
const statusInfo = formatAfterSaleStatus(sale.status)
|
||||
return (
|
||||
<View key={sale.id} className='bg-white rounded-xl p-4 mb-3 shadow-sm'>
|
||||
{/* 顶部信息 */}
|
||||
<View className='flex justify-between items-center mb-3'>
|
||||
<View className='flex items-center gap-2'>
|
||||
<Text className='text-xs text-gray-500'>{sale.id}</Text>
|
||||
<View className='bg-gray-100 px-2 py-1 rounded'>
|
||||
<Text className='text-xs text-gray-600'>{getTypeText(sale.type)}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text className={`text-sm font-medium ${statusInfo.color}`}>
|
||||
{statusInfo.text}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 商品信息 */}
|
||||
<View className='flex items-center gap-2 mb-3'>
|
||||
<View className='w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0'>
|
||||
<Text className='text-2xl'>🛍️</Text>
|
||||
</View>
|
||||
<View className='flex-1'>
|
||||
<Text className='text-sm text-gray-700 block'>{sale.goodsName}</Text>
|
||||
{sale.type === 'refund' && (
|
||||
<Text className='text-xs text-red-500 mt-1 block'>退款金额：¥{sale.amount}</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 时间 */}
|
||||
<Text className='text-xs text-gray-400 mb-3 block'>
|
||||
申请时间：{sale.applyTime}
|
||||
</Text>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<View className='flex justify-end gap-2 pt-2 border-t border-gray-50'>
|
||||
{sale.status === 'processing' && (
|
||||
<View
|
||||
className='px-3 py-1 rounded-full border border-red-500'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleCancel(sale.id)
|
||||
}}
|
||||
>
|
||||
<Text className='text-xs text-red-500'>取消申请</Text>
|
||||
</View>
|
||||
)}
|
||||
<View
|
||||
className='px-3 py-1 rounded-full bg-blue-500'
|
||||
onClick={() => handleDetail(sale.id)}
|
||||
>
|
||||
<Text className='text-xs text-white'>查看进度</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
)}
|
||||
<LoadMore loading={loading} finished={finished} />
|
||||
<View className='h-6' />
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default AfterSaleListPage
|
||||
3
src_bak/pages/after-sale/progress/index.config.ts
Normal file
3
src_bak/pages/after-sale/progress/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '售后进度',
|
||||
}
|
||||
175
src_bak/pages/after-sale/progress/index.tsx
Normal file
175
src_bak/pages/after-sale/progress/index.tsx
Normal file
@@ -0,0 +1,175 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text, ScrollView } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { getAfterSaleDetail, cancelAfterSale, formatAfterSaleStatus } from '@/api/shop/shopAfterSale'
|
||||
import type { AfterSaleDetail } from '@/api/shop/shopAfterSale'
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '售后进度',
|
||||
})
|
||||
|
||||
const AfterSaleProgressPage: React.FC = () => {
|
||||
const { id } = Taro.getCurrentInstance().router?.params || {}
|
||||
const [saleInfo, setSaleInfo] = useState<AfterSaleDetail | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
fetchDetail(id)
|
||||
}
|
||||
}, [id])
|
||||
|
||||
const fetchDetail = async (saleId: string) => {
|
||||
try {
|
||||
const data = await getAfterSaleDetail(saleId)
|
||||
setSaleInfo(data)
|
||||
} catch (err: any) {
|
||||
Taro.showToast({ title: err.message || '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 取消售后
|
||||
const handleCancel = () => {
|
||||
if (!saleInfo) return
|
||||
Taro.showModal({
|
||||
title: '提示',
|
||||
content: '确定取消售后申请吗？',
|
||||
confirmColor: '#0e932e',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
try {
|
||||
await cancelAfterSale(saleInfo.id)
|
||||
Taro.showToast({ title: '已取消', icon: 'success' })
|
||||
fetchDetail(saleInfo.id)
|
||||
} catch (err: any) {
|
||||
Taro.showToast({ title: err.message || '取消失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50 flex items-center justify-center'>
|
||||
<Text className='text-sm text-gray-400'>加载中...</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
if (!saleInfo) {
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50 flex items-center justify-center'>
|
||||
<Text className='text-sm text-gray-400'>暂无数据</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const statusInfo = formatAfterSaleStatus(saleInfo.status)
|
||||
|
||||
// 售后类型名称
|
||||
const getTypeLabel = (type: string) => {
|
||||
const map: Record<string, string> = { refund: '仅退款', return: '退货退款', exchange: '换货', repair: '维修' }
|
||||
return map[type] || type
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50 flex flex-col'>
|
||||
<ScrollView scrollY className='flex-1'>
|
||||
{/* 状态卡片 */}
|
||||
<View className='p-4 text-white' style={{ background: 'linear-gradient(to right, #60a5fa, #22d3ee)' }}>
|
||||
<Text className='text-2xl font-bold block mb-2'>{statusInfo.text}</Text>
|
||||
<Text className='text-sm opacity-80 block mb-1'>售后编号：{saleInfo.id}</Text>
|
||||
<Text className='text-sm opacity-80 block'>申请时间：{saleInfo.applyTime}</Text>
|
||||
</View>
|
||||
|
||||
{/* 售后信息 */}
|
||||
<View className='bg-white mx-3 rounded-xl p-4 relative z-10 shadow-sm' style={{ marginTop: '-12px' }}>
|
||||
<Text className='text-sm font-medium text-gray-800 mb-3 block'>售后信息</Text>
|
||||
|
||||
<View className='flex justify-between py-2 border-b border-gray-50'>
|
||||
<Text className='text-sm text-gray-500'>售后类型</Text>
|
||||
<Text className='text-sm text-gray-800'>{getTypeLabel(saleInfo.type)}</Text>
|
||||
</View>
|
||||
<View className='flex justify-between py-2 border-b border-gray-50'>
|
||||
<Text className='text-sm text-gray-500'>售后原因</Text>
|
||||
<Text className='text-sm text-gray-800'>{saleInfo.reason}</Text>
|
||||
</View>
|
||||
{saleInfo.type === 'refund' && (
|
||||
<View className='flex justify-between py-2 border-b border-gray-50'>
|
||||
<Text className='text-sm text-gray-500'>退款金额</Text>
|
||||
<Text className='text-sm text-red-500 font-bold'>¥{saleInfo.amount}</Text>
|
||||
</View>
|
||||
)}
|
||||
{saleInfo.rejectReason && (
|
||||
<View className='flex justify-between py-2 border-b border-gray-50'>
|
||||
<Text className='text-sm text-gray-500'>拒绝原因</Text>
|
||||
<Text className='text-sm text-red-500 flex-1 text-right'>{saleInfo.rejectReason}</Text>
|
||||
</View>
|
||||
)}
|
||||
<View className='flex justify-between py-2'>
|
||||
<Text className='text-sm text-gray-500'>关联订单</Text>
|
||||
<View className='flex items-center gap-1' onClick={() => Taro.navigateTo({ url: `/pages/order/detail?id=${saleInfo.orderId}` })}>
|
||||
<Text className='text-sm text-blue-500'>{saleInfo.orderNo || saleInfo.orderId}</Text>
|
||||
<Text className='text-gray-400 text-xs'>→</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 进度步骤 */}
|
||||
{saleInfo.progressRecords && saleInfo.progressRecords.length > 0 && (
|
||||
<View className='bg-white mx-3 mt-3 rounded-xl p-4'>
|
||||
<Text className='text-sm font-medium text-gray-800 mb-3 block'>处理进度</Text>
|
||||
{saleInfo.progressRecords.map((record, index) => (
|
||||
<View key={record.id} className={`flex mb-3 ${index === saleInfo.progressRecords.length - 1 ? 'mb-0' : ''}`}>
|
||||
<View className='flex flex-col items-center mr-3'>
|
||||
<View className='w-3 h-3 rounded-full mt-1 bg-green-500' />
|
||||
{index < saleInfo.progressRecords.length - 1 && (
|
||||
<View className='w-px flex-1 bg-green-500' />
|
||||
)}
|
||||
</View>
|
||||
<View className='flex-1 pb-3'>
|
||||
<Text className='text-sm font-medium text-gray-800 block'>{record.status}</Text>
|
||||
<Text className='text-xs text-gray-500 mt-0 block'>{record.description}</Text>
|
||||
{record.remark && <Text className='text-xs text-gray-400 mt-1 block'>{record.remark}</Text>}
|
||||
<Text className='text-xs text-gray-400 mt-1 block'>{record.time}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 商品信息 */}
|
||||
{saleInfo.goodsName && (
|
||||
<View className='bg-white mx-3 mt-3 rounded-xl p-4'>
|
||||
<Text className='text-sm font-medium text-gray-800 mb-3 block'>商品信息</Text>
|
||||
<View className='flex items-center gap-2'>
|
||||
<View className='w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0'>
|
||||
<Text className='text-2xl'>🛍️</Text>
|
||||
</View>
|
||||
<Text className='text-sm text-gray-700 flex-1'>{saleInfo.goodsName}</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 操作按钮 */}
|
||||
{saleInfo.status === 'pending' && (
|
||||
<View className='p-3'>
|
||||
<View
|
||||
className='text-center py-3 rounded-full border border-red-500'
|
||||
onClick={handleCancel}
|
||||
>
|
||||
<Text className='text-sm text-red-500'>取消申请</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className='h-6' />
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default AfterSaleProgressPage
|
||||
Reference in New Issue
Block a user