赵忠林
ec252beb4b
- 创建 .editorconfig 文件统一代码风格配置 - 配置 .eslintrc 使用 taro/react 规则集 - 完善 .gitignore 忽略编译产物和敏感文件 - 添加 admin/article/add 页面实现文章管理功能 - 添加 dealer/apply/add 页面实现经销商申请功能 - 添加 dealer/bank/add 页面实现银行卡管理功能 - 添加 dealer/customer/add 页面实现客户管理功能 - 添加 user/address/add 页面实现用户地址管理功能 - 添加 user/chat/message/add 页面实现消息功能 - 添加 user/gift/add 页面实现礼品管理功能 - 配置各页面导航栏标题和样式 - 实现表单验证和数据提交功能 - 集成图片上传和头像选择功能 - 添加日期选择和数据校验逻辑 - 实现编辑和新增模式切换 - 集成用户权限和角色管理功能
83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
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 = 1,
|
||
showSeconds = false,
|
||
className = '',
|
||
onExpired,
|
||
mode = 'badge'
|
||
}) => {
|
||
const timeLeft = usePaymentCountdown(createTime, payStatus, realTime, timeoutHours);
|
||
|
||
// 如果已支付或没有创建时间，不显示倒计时
|
||
if (payStatus || !createTime) {
|
||
return null;
|
||
}
|
||
|
||
// 如果已过期，触发回调并显示过期状态
|
||
if (timeLeft.isExpired) {
|
||
onExpired?.();
|
||
return (
|
||
<Text className={`payment-countdown-text expired ${className}`}>
|
||
支付已过期
|
||
</Text>
|
||
);
|
||
}
|
||
|
||
// 判断紧急程度
|
||
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;
|