赵忠林
46761bdacd
- 新增优惠券领取中心页面，包含热门优惠券轮播、优惠券列表、筛选功能等 - 实现优惠券数据加载、搜索、下拉刷新、加载更多等功能 - 添加优惠券领取逻辑，支持用户领取优惠券 - 优化邀请小程序码生成和分享功能 -调整首页和用户订单组件的样式
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;
|