feat(tasks): 大屏任务卡展示增强 —— 接单方式/截止/交付时限/人数/独占/发包方
- taskData.js normalizeTask 加 mode/modeLabel/deadline/deliveryDays/headcount/exclusive/publisherName。 - TaskDisplay.jsx 卡片增 接单方式+预算、截止/交付时限/独占|人数 徽标、发包方。 - task-display.css 加 task-meta 行样式。 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -93,11 +93,19 @@ function TaskCard({ task }) {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="task-budget">预算 {task.budgetLabel}</div>
|
<div className="task-budget">预算 {task.budgetLabel} · {task.modeLabel}</div>
|
||||||
|
|
||||||
|
<div className="task-meta-row">
|
||||||
|
{task.deadline && <span className="task-meta-item">接单截止 {task.deadline}</span>}
|
||||||
|
{task.deliveryDays > 0 && <span className="task-meta-item">交付时限 {task.deliveryDays} 天</span>}
|
||||||
|
{task.exclusive
|
||||||
|
? <span className="task-meta-item">独占接单</span>
|
||||||
|
: task.headcount > 0 ? <span className="task-meta-item">限 {task.headcount} 人</span> : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="task-foot">
|
<div className="task-foot">
|
||||||
<div className="task-meta">
|
<div className="task-meta">
|
||||||
<span className="task-id-label">任务ID</span>
|
<span className="task-id-label">任务ID · {task.publisherName ? `${task.publisherName} 发包` : '园区发包'}</span>
|
||||||
<span className="task-id">{task.task_code || task.id}</span>
|
<span className="task-id">{task.task_code || task.id}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="task-qr">
|
<div className="task-qr">
|
||||||
|
|||||||
@@ -80,6 +80,12 @@
|
|||||||
|
|
||||||
.task-budget { font-size: 15px; font-weight: 700; color: var(--bd-blue, #2f6bff); }
|
.task-budget { font-size: 15px; font-weight: 700; color: var(--bd-blue, #2f6bff); }
|
||||||
|
|
||||||
|
.task-meta-row { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||||
|
.task-meta-item {
|
||||||
|
font-size: 11px; padding: 2px 8px; border-radius: 6px;
|
||||||
|
background: rgba(29, 44, 68, 0.05); color: var(--bd-sub, #7d8fa9);
|
||||||
|
}
|
||||||
|
|
||||||
.task-foot {
|
.task-foot {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
|
display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
|
||||||
|
|||||||
@@ -18,6 +18,13 @@ function normalizeTask(raw, idx) {
|
|||||||
budgetMin: Number(t.budget_min) || 0,
|
budgetMin: Number(t.budget_min) || 0,
|
||||||
budgetMax: Number(t.budget_max) || 0,
|
budgetMax: Number(t.budget_max) || 0,
|
||||||
budgetLabel: fmtBudget(t.budget_min, t.budget_max),
|
budgetLabel: fmtBudget(t.budget_min, t.budget_max),
|
||||||
|
mode: t.mode || 'grab',
|
||||||
|
modeLabel: MODE_LABEL[t.mode] || '抢单',
|
||||||
|
deadline: t.deadline || '',
|
||||||
|
deliveryDays: Number(t.delivery_days) || 0,
|
||||||
|
headcount: Number(t.headcount) || 0,
|
||||||
|
exclusive: !!t.exclusive,
|
||||||
|
publisherName: t.publisher_name || '',
|
||||||
status: t.status || 'published',
|
status: t.status || 'published',
|
||||||
claimed: t.status === 'claimed' || t.status === 'doing' || !!t.claimed_by,
|
claimed: t.status === 'claimed' || t.status === 'doing' || !!t.claimed_by,
|
||||||
claimedBy: t.claimed_by || '',
|
claimedBy: t.claimed_by || '',
|
||||||
@@ -26,6 +33,10 @@ function normalizeTask(raw, idx) {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const MODE_LABEL = {
|
||||||
|
grab: '抢单', bid: '竞标', assign: '指派', recommend: '推荐',
|
||||||
|
};
|
||||||
|
|
||||||
function fmtBudget(min, max) {
|
function fmtBudget(min, max) {
|
||||||
const n = Number(min) || 0, x = Number(max) || 0;
|
const n = Number(min) || 0, x = Number(max) || 0;
|
||||||
if (!n && !x) return '面议';
|
if (!n && !x) return '面议';
|
||||||
|
|||||||
Reference in New Issue
Block a user