Ver Fonte

♻️ refactor(order): improve order status display logic

- 重构订单和支付状态获取逻辑,增加安全处理函数
- 为parseGoodsDetail函数参数增加undefined类型支持
- 提取getPayStatusInfo和getOrderStatusInfo函数统一处理状态信息
- 修复状态映射可能出现的未定义问题,增加默认"未知状态"处理
- 优化状态显示的className拼接方式,提高代码可读性
yourname há 1 mês atrás
pai
commit
2e21310169
1 ficheiros alterados com 20 adições e 5 exclusões
  1. 20 5
      mini/src/components/order/OrderCard/index.tsx

+ 20 - 5
mini/src/components/order/OrderCard/index.tsx

@@ -15,7 +15,7 @@ interface OrderCardProps {
 
 
 export default function OrderCard({ order, orderStatusMap, payStatusMap, onViewDetail }: OrderCardProps) {
 export default function OrderCard({ order, orderStatusMap, payStatusMap, onViewDetail }: OrderCardProps) {
   // 解析商品详情
   // 解析商品详情
-  const parseGoodsDetail = (goodsDetail: string | null) => {
+  const parseGoodsDetail = (goodsDetail: string | null | undefined) => {
     try {
     try {
       return goodsDetail ? JSON.parse(goodsDetail) : []
       return goodsDetail ? JSON.parse(goodsDetail) : []
     } catch {
     } catch {
@@ -32,6 +32,21 @@ export default function OrderCard({ order, orderStatusMap, payStatusMap, onViewD
   const goods = parseGoodsDetail(order.goodsDetail)
   const goods = parseGoodsDetail(order.goodsDetail)
   const totalQuantity = getOrderItemCount(order)
   const totalQuantity = getOrderItemCount(order)
 
 
+  // 安全获取支付状态信息
+  const getPayStatusInfo = (payState: number) => {
+    const status = payStatusMap[payState.toString()]
+    return status || { text: '未知状态', color: 'text-gray-500', bgColor: 'bg-gray-100' }
+  }
+
+  // 安全获取订单状态信息
+  const getOrderStatusInfo = (state: number) => {
+    const status = orderStatusMap[state.toString()]
+    return status || { text: '未知状态', color: 'text-gray-500', bgColor: 'bg-gray-100' }
+  }
+
+  const payStatusInfo = getPayStatusInfo(order.payState)
+  const orderStatusInfo = getOrderStatusInfo(order.state)
+
   return (
   return (
     <View className="bg-white rounded-lg shadow-sm mb-4 overflow-hidden">
     <View className="bg-white rounded-lg shadow-sm mb-4 overflow-hidden">
       {/* 订单头部 */}
       {/* 订单头部 */}
@@ -40,9 +55,9 @@ export default function OrderCard({ order, orderStatusMap, payStatusMap, onViewD
           <Text className="text-sm text-gray-600">订单号: {order.orderNo}</Text>
           <Text className="text-sm text-gray-600">订单号: {order.orderNo}</Text>
         </View>
         </View>
         <View
         <View
-          className={`px-2 py-1 rounded-full text-xs font-medium ${payStatusMap[order.payState as keyof typeof payStatusMap].bgColor} ${payStatusMap[order.payState as keyof typeof payStatusMap].color}`}
+          className={`px-2 py-1 rounded-full text-xs font-medium ${payStatusInfo.bgColor} ${payStatusInfo.color}`}
         >
         >
-          {payStatusMap[order.payState as keyof typeof payStatusMap].text}
+          {payStatusInfo.text}
         </View>
         </View>
       </View>
       </View>
 
 
@@ -85,9 +100,9 @@ export default function OrderCard({ order, orderStatusMap, payStatusMap, onViewD
             </Text>
             </Text>
           </View>
           </View>
           <View
           <View
-            className={`px-2 py-1 rounded-full text-xs font-medium ${orderStatusMap[order.state as keyof typeof orderStatusMap].bgColor} ${orderStatusMap[order.state as keyof typeof orderStatusMap].color}`}
+            className={`px-2 py-1 rounded-full text-xs font-medium ${orderStatusInfo.bgColor} ${orderStatusInfo.color}`}
           >
           >
-            {orderStatusMap[order.state as keyof typeof orderStatusMap].text}
+            {orderStatusInfo.text}
           </View>
           </View>
         </View>
         </View>