142 lines
5.0 KiB
TypeScript
142 lines
5.0 KiB
TypeScript
import { View, Text, Button, Image } from '@tarojs/components'
|
|
import Taro, { useRouter, useLoad } from '@tarojs/taro'
|
|
import { useState } from 'react'
|
|
import { getOrder, prepayMiniprogram } from '../../api'
|
|
import './detail.scss'
|
|
|
|
export default function OrderDetail() {
|
|
const router = useRouter()
|
|
const { id } = router.params
|
|
const [order, setOrder] = useState<any>(null)
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
useLoad(async () => {
|
|
if (id) {
|
|
fetchOrder(Number(id))
|
|
}
|
|
})
|
|
|
|
const fetchOrder = async (orderId: number) => {
|
|
try {
|
|
const res = await getOrder(orderId)
|
|
setOrder(res)
|
|
} catch (e) {
|
|
console.error(e)
|
|
Taro.showToast({ title: '获取订单失败', icon: 'none' })
|
|
}
|
|
}
|
|
|
|
const handlePay = async () => {
|
|
if (!order) return
|
|
setLoading(true)
|
|
try {
|
|
const params = await prepayMiniprogram(order.id)
|
|
|
|
await Taro.requestPayment({
|
|
timeStamp: params.timeStamp,
|
|
nonceStr: params.nonceStr,
|
|
package: params.package,
|
|
signType: params.signType,
|
|
paySign: params.paySign
|
|
})
|
|
|
|
Taro.showToast({ title: '支付成功', icon: 'success' })
|
|
fetchOrder(order.id) // Refresh order status
|
|
|
|
} catch (err: any) {
|
|
console.error(err)
|
|
if (err.errMsg && err.errMsg.indexOf('cancel') > -1) {
|
|
Taro.showToast({ title: '取消支付', icon: 'none' })
|
|
} else {
|
|
Taro.showToast({ title: '支付失败', icon: 'none' })
|
|
}
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
if (!order) return <View className='page-container'><Text>Loading...</Text></View>
|
|
|
|
const isPending = order.status === 'pending'
|
|
const isPaid = order.status === 'paid'
|
|
|
|
return (
|
|
<View className='page-container'>
|
|
<View className='status-header'>
|
|
<Text className={`status-text ${order.status}`}>
|
|
{isPending ? '待支付' : isPaid ? '已支付' : order.status}
|
|
</Text>
|
|
<Text className='amount'>¥{order.total_price}</Text>
|
|
</View>
|
|
|
|
{/* Product Info */}
|
|
<View className='section-card'>
|
|
<View className='section-title'>商品信息</View>
|
|
<View className='info-row'>
|
|
<Text className='label'>商品名称</Text>
|
|
<Text className='value'>{order.config_name || order.course_title}</Text>
|
|
</View>
|
|
<View className='info-row'>
|
|
<Text className='label'>数量</Text>
|
|
<Text className='value'>x {order.quantity}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Shipping Info - Only show if available */}
|
|
{(order.customer_name || order.shipping_address) && (
|
|
<View className='section-card'>
|
|
<View className='section-title'>收货信息</View>
|
|
<View className='info-row'>
|
|
<Text className='label'>收货人</Text>
|
|
<Text className='value'>{order.customer_name}</Text>
|
|
</View>
|
|
<View className='info-row'>
|
|
<Text className='label'>联系电话</Text>
|
|
<Text className='value'>{order.phone_number}</Text>
|
|
</View>
|
|
{order.shipping_address && (
|
|
<View className='info-row'>
|
|
<Text className='label'>收货地址</Text>
|
|
<Text className='value'>{order.shipping_address}</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
)}
|
|
|
|
{/* Logistics Info - Only show if shipped */}
|
|
{(order.courier_name || order.tracking_number) && (
|
|
<View className='section-card'>
|
|
<View className='section-title'>物流信息</View>
|
|
<View className='info-row'>
|
|
<Text className='label'>快递公司</Text>
|
|
<Text className='value'>{order.courier_name || '-'}</Text>
|
|
</View>
|
|
<View className='info-row'>
|
|
<Text className='label'>运单号</Text>
|
|
<Text className='value'>{order.tracking_number || '-'}</Text>
|
|
</View>
|
|
</View>
|
|
)}
|
|
|
|
{/* Order Info */}
|
|
<View className='section-card'>
|
|
<View className='section-title'>订单信息</View>
|
|
<View className='info-row'>
|
|
<Text className='label'>订单编号</Text>
|
|
<Text className='value'>{order.wechat_trade_no || order.id}</Text>
|
|
</View>
|
|
<View className='info-row'>
|
|
<Text className='label'>下单时间</Text>
|
|
<Text className='value'>{order.created_at?.replace('T', ' ').substring(0, 19)}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{isPending && (
|
|
<View className='btn-area safe-area-bottom'>
|
|
<Button className='btn btn-primary' onClick={handlePay} loading={loading}>立即支付</Button>
|
|
</View>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|