赵忠林
eee4644d06
feat(registration): 优化经销商注册流程并增加地址定位功能 - 修改导航栏标题从“邀请注册”为“注册成为会员” - 修复重复提交问题并移除不必要的submitting状态 - 增加昵称和头像的必填验证提示 - 添加用户角色缺失时的默认角色写入机制 - 集成地图选点功能，支持经纬度获取和地址解析 - 实现微信地址导入功能，自动填充基本信息 - 增加定位权限检查和错误处理机制 - 添加.gitignore规则忽略备份文件夹src__bak - 移除已废弃的银行卡和客户管理页面代码 - 优化表单验证规则和错误提示信息 - 实现经销商注册成功后自动跳转到“我的”页面 - 添加用户信息缓存刷新机制确保角色信息同步 ```
92 lines
2.4 KiB
TypeScript
92 lines
2.4 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;
|
||
/** 订单过期时间（推荐直接传后端返回的 expirationTime） */
|
||
expirationTime?: 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,
|
||
expirationTime,
|
||
payStatus = false,
|
||
realTime = false,
|
||
timeoutHours = 24,
|
||
showSeconds = false,
|
||
className = '',
|
||
onExpired,
|
||
mode = 'badge'
|
||
}) => {
|
||
const timeLeft = usePaymentCountdown({
|
||
createTime,
|
||
expirationTime,
|
||
payStatus,
|
||
realTime,
|
||
timeoutHours
|
||
});
|
||
|
||
// 如果已支付或没有可计算的截止时间，不显示倒计时
|
||
if (payStatus || (!expirationTime && !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;
|