feat(miniprogram): 随访详情页截止日期倒计时 + 状态色增强
- 添加截止日期倒计时(还剩 X 天 / 今天截止 / 已过期 X 天) - 紧急倒计时(≤3天/已过期)使用红色警告样式 - 状态标签增加颜色区分:已完成(绿)/已过期(红)/待完成(黄)
This commit is contained in:
@@ -42,6 +42,29 @@
|
|||||||
.detail-value {
|
.detail-value {
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
|
|
||||||
|
&.status-completed { color: $acc; }
|
||||||
|
&.status-overdue { color: $dan; }
|
||||||
|
&.status-pending { color: $wrn; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown {
|
||||||
|
margin-top: 12px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: $wrn-l;
|
||||||
|
border-radius: $r-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown-urgent {
|
||||||
|
background: $dan-l;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown-text {
|
||||||
|
font-size: 24px;
|
||||||
|
color: $wrn;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
.countdown-urgent & { color: $dan; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-desc {
|
.detail-desc {
|
||||||
|
|||||||
@@ -60,6 +60,24 @@ export default function FollowUpDetail() {
|
|||||||
return '待完成';
|
return '待完成';
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getStatusClass = (status: string) => {
|
||||||
|
if (status === 'completed') return 'status-completed';
|
||||||
|
if (status === 'overdue') return 'status-overdue';
|
||||||
|
return 'status-pending';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getCountdown = (dueDate: string, status: string) => {
|
||||||
|
if (status === 'completed') return null;
|
||||||
|
const now = new Date();
|
||||||
|
const due = new Date(dueDate);
|
||||||
|
const diffMs = due.getTime() - now.getTime();
|
||||||
|
const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
|
||||||
|
if (diffDays < 0) return { text: `已过期 ${Math.abs(diffDays)} 天`, urgent: true };
|
||||||
|
if (diffDays === 0) return { text: '今天截止', urgent: true };
|
||||||
|
if (diffDays <= 3) return { text: `还剩 ${diffDays} 天`, urgent: true };
|
||||||
|
return { text: `还剩 ${diffDays} 天`, urgent: false };
|
||||||
|
};
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<View className='detail-page'>
|
<View className='detail-page'>
|
||||||
@@ -84,12 +102,22 @@ export default function FollowUpDetail() {
|
|||||||
<Text className='detail-title'>{task.task_type}</Text>
|
<Text className='detail-title'>{task.task_type}</Text>
|
||||||
<View className='detail-row'>
|
<View className='detail-row'>
|
||||||
<Text className='detail-label'>状态</Text>
|
<Text className='detail-label'>状态</Text>
|
||||||
<Text className='detail-value'>{getStatusLabel(task.status)}</Text>
|
<Text className={`detail-value ${getStatusClass(task.status)}`}>
|
||||||
|
{getStatusLabel(task.status)}
|
||||||
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
<View className='detail-row'>
|
<View className='detail-row'>
|
||||||
<Text className='detail-label'>截止日期</Text>
|
<Text className='detail-label'>截止日期</Text>
|
||||||
<Text className='detail-value'>{task.due_date}</Text>
|
<Text className='detail-value'>{task.due_date}</Text>
|
||||||
</View>
|
</View>
|
||||||
|
{(() => {
|
||||||
|
const cd = getCountdown(task.due_date, task.status);
|
||||||
|
return cd ? (
|
||||||
|
<View className={`countdown ${cd.urgent ? 'countdown-urgent' : ''}`}>
|
||||||
|
<Text className='countdown-text'>{cd.text}</Text>
|
||||||
|
</View>
|
||||||
|
) : null;
|
||||||
|
})()}
|
||||||
{task.description && (
|
{task.description && (
|
||||||
<View className='detail-desc'>
|
<View className='detail-desc'>
|
||||||
<Text className='detail-desc-text'>{task.description}</Text>
|
<Text className='detail-desc-text'>{task.description}</Text>
|
||||||
|
|||||||
Reference in New Issue
Block a user