feat(user): 新增收货地址管理及售后申请页面
- 新增地址类型定义，增强前端地址数据结构 - 新增地址编辑页面，支持地址智能识别和定位选点功能 - 地址编辑支持省市区选择及默认地址设置 - 新增地址列表页面，支持地址展示、删除、编辑和选择功能 - 实现售后申请页面，支持选择售后类型和退款原因 - 售后申请支持商品选择、退款金额计算和凭证上传 - 新增售后详情页面，支持售后状态展示及申请取消 - 优化页面加载和用户交互体验，增加错误提示和权限处理
This commit is contained in:
242
src_bak/pages/booking/detail/index.tsx
Normal file
242
src_bak/pages/booking/detail/index.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text, ScrollView } from '@tarojs/components'
|
||||
import Taro, { useRouter } from '@tarojs/taro'
|
||||
import { getShopBooking, cancelShopBooking } from '@/api/shop/shopBooking'
|
||||
import type { ShopBooking, BookingStatus } from '@/api/shop/shopBooking/model'
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '预约详情',
|
||||
})
|
||||
|
||||
const BookingDetailPage: React.FC = () => {
|
||||
const router = useRouter()
|
||||
const [order, setOrder] = useState<ShopBooking | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [cancelling, setCancelling] = useState(false)
|
||||
|
||||
// 获取预约详情
|
||||
const loadBookingDetail = async () => {
|
||||
const id = router.params.id
|
||||
if (!id) {
|
||||
Taro.showToast({ title: '参数错误', icon: 'none' })
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const data = await getShopBooking(id)
|
||||
setOrder(data)
|
||||
} catch (e: any) {
|
||||
console.error('获取预约详情失败:', e)
|
||||
Taro.showToast({ title: e.message || '获取详情失败', icon: 'none' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadBookingDetail()
|
||||
}, [])
|
||||
|
||||
// 获取状态标签
|
||||
const getStatusInfo = (status: BookingStatus | undefined) => {
|
||||
const map: Record<BookingStatus, { label: string; color: string; bg: string }> = {
|
||||
'pending': { label: '待服务', color: 'text-orange-500', bg: 'bg-orange-50' },
|
||||
'confirmed': { label: '已确认', color: 'text-blue-500', bg: 'bg-blue-50' },
|
||||
'in_progress': { label: '进行中', color: 'text-blue-500', bg: 'bg-blue-50' },
|
||||
'completed': { label: '已完成', color: 'text-green-500', bg: 'bg-green-50' },
|
||||
'cancelled': { label: '已取消', color: 'text-gray-400', bg: 'bg-gray-100' },
|
||||
'rescheduled': { label: '已改签', color: 'text-purple-500', bg: 'bg-purple-50' },
|
||||
}
|
||||
return map[status as BookingStatus] || { label: '未知', color: 'text-gray-400', bg: 'bg-gray-100' }
|
||||
}
|
||||
|
||||
// 取消预约
|
||||
const handleCancel = () => {
|
||||
if (!order?.id) return
|
||||
|
||||
Taro.showModal({
|
||||
title: '确认取消',
|
||||
content: '确定取消该预约吗？\n\n取消后将无法恢复。',
|
||||
confirmColor: '#0e932e',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
try {
|
||||
setCancelling(true)
|
||||
await cancelShopBooking(order.id)
|
||||
Taro.showToast({ title: '已取消', icon: 'success' })
|
||||
// 重新加载详情
|
||||
setTimeout(() => loadBookingDetail(), 1500)
|
||||
} catch (e: any) {
|
||||
console.error('取消预约失败:', e)
|
||||
Taro.showToast({ title: e.message || '取消失败', icon: 'none' })
|
||||
} finally {
|
||||
setCancelling(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 改签预约
|
||||
const handleReschedule = () => {
|
||||
if (order?.id) {
|
||||
Taro.navigateTo({ url: `/pages/booking/reschedule/index?id=${order.id}` })
|
||||
}
|
||||
}
|
||||
|
||||
// 返回列表
|
||||
const handleBackToList = () => {
|
||||
Taro.navigateBack()
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50 flex items-center justify-center'>
|
||||
<Text className='text-gray-400'>加载中...</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
if (!order) {
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50 flex items-center justify-center'>
|
||||
<View className='text-center'>
|
||||
<Text className='text-gray-400 block mb-4'>暂无数据</Text>
|
||||
<View
|
||||
className='inline-block bg-orange-500 text-white px-4 py-2 rounded-full'
|
||||
onClick={handleBackToList}
|
||||
>
|
||||
<Text className='text-sm'>返回列表</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const statusInfo = getStatusInfo(order.status)
|
||||
|
||||
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, #0e932e, #2eb872)' }}>
|
||||
<View className='flex items-center gap-2'>
|
||||
<Text className='text-2xl'>📅</Text>
|
||||
<View>
|
||||
<Text className='text-xl font-bold block mb-1'>{statusInfo.label}</Text>
|
||||
<Text className='text-xs opacity-80 block'>预约编号：{order.bookingNo}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 预约信息 */}
|
||||
<View className='bg-white mx-3 mt-3 rounded-xl p-4 shadow-sm'>
|
||||
<Text className='text-base 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'>{order.serviceName || '预约服务'}</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'>{order.bookingDate || '-'}</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'>{order.bookingTime || '-'}</Text>
|
||||
</View>
|
||||
{order.price > 0 && (
|
||||
<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'>¥{order.price}</Text>
|
||||
</View>
|
||||
)}
|
||||
<View className='flex justify-between py-2'>
|
||||
<Text className='text-sm text-gray-500'>预约备注</Text>
|
||||
<Text className='text-sm text-gray-800'>{order.remark || '无'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 联系人信息 */}
|
||||
{(order.contactName || order.contactPhone) && (
|
||||
<View className='bg-white mx-3 mt-3 rounded-xl p-4 shadow-sm'>
|
||||
<Text className='text-base font-medium text-gray-800 mb-3 block'>联系人</Text>
|
||||
{order.contactName && (
|
||||
<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'>{order.contactName}</Text>
|
||||
</View>
|
||||
)}
|
||||
{order.contactPhone && (
|
||||
<View className='flex justify-between py-2'>
|
||||
<Text className='text-sm text-gray-500'>电话</Text>
|
||||
<Text
|
||||
className='text-sm text-blue-500'
|
||||
onClick={() => Taro.makePhoneCall({ phoneNumber: order.contactPhone })}
|
||||
>
|
||||
{order.contactPhone} 📞</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 门店信息 */}
|
||||
<View className='bg-white mx-3 mt-3 rounded-xl p-4 shadow-sm'>
|
||||
<Text className='text-base font-medium text-gray-800 mb-3 block'>门店信息</Text>
|
||||
|
||||
<View className='flex items-center gap-2 mb-2'>
|
||||
<Text className='text-lg'>🏪</Text>
|
||||
<Text className='text-sm font-medium text-gray-800'>{order.storeName || '门店'}</Text>
|
||||
</View>
|
||||
{order.storePhone && (
|
||||
<View className='flex items-center gap-2 mb-2'>
|
||||
<Text className='text-sm text-gray-400'>📞</Text>
|
||||
<Text
|
||||
className='text-sm text-blue-500'
|
||||
onClick={() => Taro.makePhoneCall({ phoneNumber: order.storePhone })}
|
||||
>
|
||||
{order.storePhone}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
{order.address && (
|
||||
<View className='flex items-start gap-2 mb-2'>
|
||||
<Text className='text-sm text-gray-400'>📍</Text>
|
||||
<Text className='text-sm text-gray-600 flex-1'>{order.address}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 创建时间 */}
|
||||
{order.createTime && (
|
||||
<View className='mx-3 mt-3 mb-4'>
|
||||
<Text className='text-xs text-gray-400'>预约时间：{order.createTime}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 操作按钮 - 仅待服务状态显示 */}
|
||||
{order.status === 'pending' && (
|
||||
<View className='p-3 gap-3 mx-3'>
|
||||
<View
|
||||
className='text-center py-3 rounded-full border border-red-500 bg-white mb-3'
|
||||
onClick={handleCancel}
|
||||
>
|
||||
<Text className='text-red-500 font-medium'>{cancelling ? '取消中...' : '取消预约'}</Text>
|
||||
</View>
|
||||
<View
|
||||
className='text-center py-3 rounded-full bg-green-500'
|
||||
onClick={handleReschedule}
|
||||
>
|
||||
<Text className='text-white font-medium'>改签预约</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className='h-6' />
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default BookingDetailPage
|
||||
Reference in New Issue
Block a user