feat(order): 添加支付倒计时组件并优化订单相关功能

- 新增 PaymentCountdown 组件用于显示支付倒计时 - 实现 usePaymentCountdown Hook 以支持倒计时逻辑 - 添加 useOrderStats Hook 用于获取订单统计信息 - 在订单列表和详情页面集成支付倒计时功能 - 优化订单状态显示和相关操作逻辑
2025-08-19 13:15:12 +08:00
parent fb8387d09d
commit 6db0b5e03f
8 changed files with 833 additions and 50 deletions
--- a/src/components/PaymentCountdown.tsx
+++ b/src/components/PaymentCountdown.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import { View, Text } from '@tarojs/components';
+import { 
+  usePaymentCountdown, 
+  formatCountdownText, 
+  isUrgentCountdown, 
+  isCriticalCountdown 
+} from '@/hooks/usePaymentCountdown';
+import './PaymentCountdown.scss';
+
+export interface PaymentCountdownProps {
+  /** 订单创建时间 */
+  createTime?: string;
+  /** 支付状态 */
+  payStatus?: boolean;
+  /** 是否实时更新（详情页用true，列表页用false） */
+  realTime?: boolean;
+  /** 超时小时数，默认24小时 */
+  timeoutHours?: number;
+  /** 是否显示秒数 */
+  showSeconds?: boolean;
+  /** 自定义样式类名 */
+  className?: string;
+  /** 过期回调 */
+  onExpired?: () => void;
+  /** 显示模式：badge(徽章模式) | text(纯文本模式) */
+  mode?: 'badge' | 'text';
+}
+
+const PaymentCountdown: React.FC<PaymentCountdownProps> = ({
+  createTime,
+  payStatus = false,
+  realTime = false,
+  timeoutHours = 24,
+  showSeconds = false,
+  className = '',
+  onExpired,
+  mode = 'badge'
+}) => {
+  const timeLeft = usePaymentCountdown(createTime, payStatus, realTime, timeoutHours);
+
+  // 如果已支付或没有创建时间，不显示倒计时
+  if (payStatus || !createTime) {
+    return null;
+  }
+
+  // 如果已过期，触发回调并显示过期状态
+  if (timeLeft.isExpired) {
+    onExpired?.();
+    if (mode === 'text') {
+      return (
+        <Text className={`payment-countdown-text expired ${className}`}>
+          支付已过期
+        </Text>
+      );
+    }
+    return (
+      <View className={`payment-countdown-badge expired ${className}`}>
+        <Text className="countdown-text">支付已过期</Text>
+      </View>
+    );
+  }
+
+  // 判断紧急程度
+  const isUrgent = isUrgentCountdown(timeLeft);
+  const isCritical = isCriticalCountdown(timeLeft);
+  
+  // 格式化倒计时文本
+  const countdownText = formatCountdownText(timeLeft, showSeconds);
+  const fullText = `等待付款 ${countdownText}`;
+
+  // 纯文本模式
+  if (mode === 'text') {
+    return (
+      <Text className={`payment-countdown-text ${isUrgent ? 'urgent' : ''} ${isCritical ? 'critical' : ''} ${className}`}>
+        {fullText}
+      </Text>
+    );
+  }
+
+  // 徽章模式
+  return (
+    <View className={`payment-countdown-badge ${isUrgent ? 'urgent' : ''} ${isCritical ? 'critical' : ''} ${className}`}>
+      <Text className="countdown-text">{fullText}</Text>
+    </View>
+  );
+};
+
+export default PaymentCountdown;