+
+ {t.category || '综合'}
+ {MODE[t.mode] || '抢单'}
+ {t.exclusive && 独占}
+
+ {t.title}
+ {t.description}
+ {t.tags && {String(t.tags).split(',').filter(Boolean).map((x) => {x})}
}
+
+ {money(t.budget_min, t.budget_max)}
+ {t.deadline && {t.deadline}}
+ {t.delivery_days ? {t.delivery_days} 天交付 : null}
+ {t.headcount ? {t.headcount} 人 : null}
+
+
+
+ {t.task_code}
+
+
+ );
+}
+
+export default function Tasks() {
+ const [authed, setAuthed] = React.useState(isAuthed());
+ const [tab, setTab] = React.useState('pending');
+ const [pending, setPending] = React.useState([]);
+ const [mine, setMine] = React.useState([]);
+ const [load, setLoad] = React.useState({ pending: false, mine: false });
+ const [err, setErr] = React.useState('');
+ const [busyId, setBusyId] = React.useState('');
+
+ const refresh = async (which) => {
+ setLoad((l) => ({ ...l, [which]: true }));
+ setErr('');
+ try {
+ if (which === 'pending') {
+ const r = await listTasks();
+ setPending(r.ok ? r.items : []);
+ if (!r.ok) setErr(r.status === 403 ? '需以 OPC 端登录后查看任务广场。' : r.status === 401 ? '请先登录。' : '暂时无法加载任务广场。');
+ } else {
+ const r = await myTasks();
+ setMine(r.ok ? r.items : []);
+ if (!r.ok) setErr(r.status === 403 ? '需以 OPC 端登录后查看我的接单。' : '暂时无法加载。');
+ }
+ } finally {
+ setLoad((l) => ({ ...l, [which]: false }));
+ }
+ };
+
+ React.useEffect(() => { if (authed) refresh('pending'); }, [authed]);
+
+ const onGrab = async (t) => {
+ setBusyId(t.id); setErr('');
+ const r = await grabTask(t.id);
+ setBusyId('');
+ if (r.ok) { refresh('pending'); refresh('mine'); }
+ else setErr(r.error || '抢单失败');
+ };
+
+ if (!authed) {
+ return (
+