n

2026-02-12 23:57:06 +08:00
parent d8506c383c
commit 11d6f7699f
7 changed files with 296 additions and 45 deletions
--- a/miniprogram/src/pages/order/detail.tsx
+++ b/miniprogram/src/pages/order/detail.tsx
@@ -0,0 +1,141 @@
+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>
+  )
+}