feat(miniprogram): 随访详情页截止日期倒计时 + 状态色增强
Some checks failed
CI / rust-check (push) Has been cancelled
CI / rust-test (push) Has been cancelled
CI / frontend-build (push) Has been cancelled
CI / security-audit (push) Has been cancelled

- 添加截止日期倒计时(还剩 X 天 / 今天截止 / 已过期 X 天)
- 紧急倒计时(≤3天/已过期)使用红色警告样式
- 状态标签增加颜色区分:已完成(绿)/已过期(红)/待完成(黄)
This commit is contained in:
iven
2026-04-24 12:48:53 +08:00
parent 0fe4cab593
commit 3a333535ea
2 changed files with 52 additions and 1 deletions

View File

@@ -42,6 +42,29 @@
.detail-value {
font-size: 26px;
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 {

View File

@@ -60,6 +60,24 @@ export default function FollowUpDetail() {
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) {
return (
<View className='detail-page'>
@@ -84,12 +102,22 @@ export default function FollowUpDetail() {
<Text className='detail-title'>{task.task_type}</Text>
<View className='detail-row'>
<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 className='detail-row'>
<Text className='detail-label'></Text>
<Text className='detail-value'>{task.due_date}</Text>
</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 && (
<View className='detail-desc'>
<Text className='detail-desc-text'>{task.description}</Text>