1119 lines
38 KiB
JavaScript
1119 lines
38 KiB
JavaScript
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||
import {
|
||
Check,
|
||
ClipboardCheck,
|
||
Copy,
|
||
ImagePlus,
|
||
ListChecks,
|
||
LogOut,
|
||
MessageCircle,
|
||
PackageCheck,
|
||
ShieldCheck,
|
||
Trash2,
|
||
} from "lucide-react";
|
||
import { isValidTaobaoId, normalizeTaobaoId, TAOBAO_ID_HINT } from "./taobaoId.js";
|
||
import { formatDateTime } from "./time.js";
|
||
|
||
const SESSION_KEY = "ask_user_taobao_session_v2";
|
||
const LEGACY_SESSION_KEYS = ["ask_user_taobao_session", "ask_user_session"];
|
||
const EXHAUSTED_MESSAGE = "本次任务已被领取完，请关注下一个任务！";
|
||
const COMPLETED_TASK_MESSAGE = "本次提问任务已全部完成，可查看历史状态";
|
||
const INVALID_TASK_MESSAGE = "提问任务链接无效、未发布或已结束";
|
||
const fileKey = (file) => `${file.name}-${file.size}-${file.lastModified}`;
|
||
const accountName = (session) =>
|
||
session?.taobao_id || session?.account || session?.user_id || "";
|
||
|
||
function getTaskNo() {
|
||
const segments = window.location.pathname.split("/").filter(Boolean);
|
||
return segments[1] || "latest";
|
||
}
|
||
|
||
function isInvalidTaskError(message = "") {
|
||
return message.includes("提问任务链接无效") || message.includes("提问任务不存在");
|
||
}
|
||
|
||
function isExpiredAssignmentError(message = "") {
|
||
return message.includes("提问任务已失效") || message.includes("任务已失效");
|
||
}
|
||
|
||
function formatCountdown(seconds) {
|
||
const safe = Math.max(0, Number(seconds) || 0);
|
||
const minutes = Math.floor(safe / 60).toString().padStart(2, "0");
|
||
const remainder = Math.floor(safe % 60).toString().padStart(2, "0");
|
||
return `${minutes}:${remainder}`;
|
||
}
|
||
|
||
function parseServerDate(value) {
|
||
if (!value) return null;
|
||
const text = String(value);
|
||
// API datetime values are stored as UTC but older responses omit the
|
||
// timezone suffix. Explicitly mark those values as UTC before parsing in
|
||
// the browser, otherwise China Standard Time makes them appear eight hours
|
||
// older and the countdown expires immediately.
|
||
return new Date(/[zZ]|[+-]\d{2}:?\d{2}$/.test(text) ? text : `${text}Z`);
|
||
}
|
||
|
||
function AssignmentCountdown({ expiresAt, onExpired }) {
|
||
const [remaining, setRemaining] = useState(() =>
|
||
expiresAt ? Math.max(0, (parseServerDate(expiresAt)?.getTime() - Date.now()) / 1000) : 0,
|
||
);
|
||
const expiredRef = useRef(false);
|
||
const onExpiredRef = useRef(onExpired);
|
||
useEffect(() => {
|
||
onExpiredRef.current = onExpired;
|
||
}, [onExpired]);
|
||
useEffect(() => {
|
||
if (!expiresAt) return undefined;
|
||
expiredRef.current = false;
|
||
const update = () => {
|
||
const next = Math.max(0, (parseServerDate(expiresAt)?.getTime() - Date.now()) / 1000);
|
||
setRemaining(next);
|
||
if (next <= 0 && !expiredRef.current) {
|
||
expiredRef.current = true;
|
||
onExpiredRef.current?.();
|
||
}
|
||
};
|
||
update();
|
||
const timer = window.setInterval(update, 1000);
|
||
return () => window.clearInterval(timer);
|
||
}, [expiresAt]);
|
||
if (!expiresAt) return null;
|
||
return <span className={`ask-assignment-countdown ${remaining <= 10 ? "urgent" : ""}`}>剩余 {formatCountdown(remaining)}</span>;
|
||
}
|
||
|
||
function TaobaoLogin({ api, onLogin }) {
|
||
const [taobaoId, setTaobaoId] = useState("");
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState("");
|
||
|
||
async function submit(event) {
|
||
event.preventDefault();
|
||
const account = normalizeTaobaoId(taobaoId);
|
||
if (!isValidTaobaoId(account)) {
|
||
setError(TAOBAO_ID_HINT);
|
||
return;
|
||
}
|
||
setBusy(true);
|
||
setError("");
|
||
try {
|
||
const result = await api("/api/ask/auth/taobao-login", {
|
||
method: "POST",
|
||
body: JSON.stringify({ taobao_id: account }),
|
||
});
|
||
localStorage.setItem(SESSION_KEY, JSON.stringify(result.data));
|
||
onLogin(result.data);
|
||
} catch (requestError) {
|
||
setError(requestError.message);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<main className="ask-user-shell">
|
||
<section className="ask-user-app ask-login-app">
|
||
<header className="ask-user-topbar">
|
||
<span>
|
||
<ShieldCheck size={14} />
|
||
淘宝问答运营官方承接通道
|
||
</span>
|
||
<em>官方认证</em>
|
||
</header>
|
||
<form className="ask-user-login" onSubmit={submit}>
|
||
<span className="ask-login-icon">
|
||
<MessageCircle size={28} />
|
||
</span>
|
||
<h1>淘宝账号登录</h1>
|
||
<p>输入淘宝ID即可领取提问任务</p>
|
||
<label>
|
||
淘宝ID
|
||
<input
|
||
autoFocus
|
||
maxLength="64"
|
||
value={taobaoId}
|
||
onChange={(event) => setTaobaoId(event.target.value.slice(0, 64))}
|
||
inputMode="text"
|
||
lang="zh-CN"
|
||
autoCapitalize="none"
|
||
autoCorrect="off"
|
||
placeholder="例如：tb1008611 或 淘宝用户"
|
||
/>
|
||
<small className="user-login-notice">为了运营更好地核对信息，请填写真实的淘宝ID；支持中文、字母和数字</small>
|
||
</label>
|
||
{error && <div className="ask-user-error">{error}</div>}
|
||
<button disabled={busy}>
|
||
{busy ? "登录中…" : "登录并领取提问任务"}
|
||
</button>
|
||
</form>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
function TaskExhausted({ session, onLogout }) {
|
||
return (
|
||
<main className="ask-user-shell">
|
||
<section className="ask-user-app ask-exhausted-app">
|
||
<header className="ask-user-topbar">
|
||
<span>
|
||
<ShieldCheck size={14} />
|
||
淘宝问答运营官方承接通道
|
||
</span>
|
||
<em>官方认证</em>
|
||
</header>
|
||
<section className="ask-exhausted-card">
|
||
<span className="ask-exhausted-icon">
|
||
<PackageCheck size={34} />
|
||
</span>
|
||
<em>任务已领完</em>
|
||
<h1>本次任务已被领取完</h1>
|
||
<p>当前链接中的问题已全部分配给其他用户，请关注下一个任务！</p>
|
||
<small>
|
||
当前淘宝ID：{accountName(session)}
|
||
</small>
|
||
<button type="button" onClick={onLogout}>
|
||
更换登录账号
|
||
</button>
|
||
</section>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
function InvalidTask({ message, onReload }) {
|
||
return (
|
||
<main className="ask-user-shell">
|
||
<section className="ask-user-app ask-invalid-app">
|
||
<header className="ask-user-topbar">
|
||
<span><ShieldCheck size={14} /> 淘宝问答运营官方承接通道</span>
|
||
<em>官方认证</em>
|
||
</header>
|
||
<section className="ask-invalid-card">
|
||
<span className="ask-invalid-icon"><ShieldCheck size={34} /></span>
|
||
<em>任务链接不可用</em>
|
||
<h1>暂时无法读取任务</h1>
|
||
<p>{message || INVALID_TASK_MESSAGE}。请向运营确认是否已成功发布，并重新打开最新任务链接。</p>
|
||
<button type="button" onClick={onReload}>重新读取任务</button>
|
||
</section>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
function CompletedTask({ session, onOpenHistory, busy, error }) {
|
||
return (
|
||
<main className="ask-user-shell">
|
||
<section className="ask-user-app ask-invalid-app">
|
||
<header className="ask-user-topbar">
|
||
<span><ShieldCheck size={14} /> 淘宝问答运营官方承接通道</span>
|
||
<em>官方认证</em>
|
||
</header>
|
||
<section className="ask-invalid-card ask-completed-card">
|
||
<span className="ask-invalid-icon"><PackageCheck size={34} /></span>
|
||
<em>任务已完成</em>
|
||
<h1>本次提问任务已全部完成</h1>
|
||
<p>当前任务的所有问题均已完成，您可以前往历史状态查看自己提交过的任务和审核进度。</p>
|
||
<small>当前淘宝ID：{accountName(session)}</small>
|
||
{error && <div className="ask-user-error">{error}</div>}
|
||
<button type="button" onClick={onOpenHistory} disabled={busy}>
|
||
{busy ? "正在读取历史…" : "查看历史状态"}
|
||
</button>
|
||
</section>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
function ExpiredAssignment({ session, onReload }) {
|
||
return (
|
||
<main className="ask-user-shell">
|
||
<section className="ask-user-app ask-invalid-app">
|
||
<header className="ask-user-topbar">
|
||
<span><ShieldCheck size={14} /> 淘宝问答运营官方承接通道</span>
|
||
<em>官方认证</em>
|
||
</header>
|
||
<section className="ask-invalid-card ask-expired-card">
|
||
<span className="ask-invalid-icon"><PackageCheck size={34} /></span>
|
||
<em>任务已失效</em>
|
||
<h1>本次任务已超时</h1>
|
||
<p>当前分配的问题已自动释放，请点击刷新重新分配任务。</p>
|
||
<small>当前淘宝ID：{accountName(session)}</small>
|
||
<button type="button" onClick={onReload}>刷新重新分配</button>
|
||
</section>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
function Header({
|
||
session,
|
||
assignment,
|
||
onLogout,
|
||
step,
|
||
view,
|
||
onOpenHistory,
|
||
onOpenClaim,
|
||
}) {
|
||
return (
|
||
<>
|
||
<header className="ask-user-topbar">
|
||
<span>
|
||
<ShieldCheck size={14} />
|
||
淘宝问答运营官方承接通道
|
||
</span>
|
||
<em>官方认证</em>
|
||
</header>
|
||
<section className="ask-user-profile">
|
||
<div className="ask-user-avatar">问</div>
|
||
<div>
|
||
<strong>问大家提问用户</strong>
|
||
<i>淘宝账号已登录</i>
|
||
<small>
|
||
淘宝ID：{accountName(session)}
|
||
</small>
|
||
</div>
|
||
<button title="退出登录" onClick={onLogout}>
|
||
<LogOut size={16} />
|
||
</button>
|
||
</section>
|
||
<nav className="ask-user-tabs">
|
||
<button
|
||
className={`ask-tab-button ${view === "claim" ? "active" : ""}`}
|
||
onClick={onOpenClaim}
|
||
>
|
||
<ClipboardCheck size={16} />
|
||
任务认领 <b>{assignment?.questions.length || 0}</b>
|
||
</button>
|
||
<button
|
||
className={`ask-tab-button ${view === "status" ? "active" : ""}`}
|
||
onClick={onOpenHistory}
|
||
>
|
||
<ListChecks size={16} />
|
||
任务状态 <b>{step === 1 ? "待选择" : "进行中"}</b>
|
||
</button>
|
||
</nav>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function SelectQuestions({
|
||
assignment,
|
||
selected,
|
||
setSelected,
|
||
onConfirm,
|
||
busy,
|
||
onExpired,
|
||
expired = false,
|
||
onRefresh,
|
||
}) {
|
||
const isSubmitted = ["待审核", "已通过"].includes(assignment.status);
|
||
const isUsed = (item) => item.used || (isSubmitted && item.selected);
|
||
const usedCount = assignment.used_count ?? assignment.questions.filter(isUsed).length;
|
||
const remainingCount = assignment.remaining_count ?? Math.max(assignment.questions.length - usedCount, 0);
|
||
const selectableQuestions = assignment.questions.filter((item) => !isUsed(item));
|
||
const allSelected = selectableQuestions.length > 0 && selectableQuestions.every((item) =>
|
||
selected.includes(item.id),
|
||
);
|
||
function toggle(id) {
|
||
if (expired || isUsed(assignment.questions.find((item) => item.id === id))) return;
|
||
setSelected((current) =>
|
||
current.includes(id)
|
||
? current.filter((value) => value !== id)
|
||
: [...current, id],
|
||
);
|
||
}
|
||
return (
|
||
<>
|
||
<section className="ask-user-task-id">
|
||
<span>
|
||
<ShieldCheck size={16} />
|
||
任务ID
|
||
</span>
|
||
<code>{assignment.task_id}</code>
|
||
<button
|
||
onClick={() => navigator.clipboard?.writeText(assignment.task_id)}
|
||
>
|
||
<Copy size={14} />
|
||
复制
|
||
</button>
|
||
</section>
|
||
<section className="ask-claim-summary">
|
||
<div>
|
||
<strong>本任务认领进度</strong>
|
||
<span>每个链接最多认领 {assignment.questions.length} 条</span>
|
||
</div>
|
||
<b>
|
||
已认领 {usedCount} / {assignment.questions.length}
|
||
</b>
|
||
<div className="ask-claim-progress">
|
||
<i
|
||
style={{
|
||
width: `${assignment.questions.length ? (usedCount / assignment.questions.length) * 100 : 0}%`,
|
||
}}
|
||
/>
|
||
</div>
|
||
<small>
|
||
{remainingCount
|
||
? `还可继续选择 ${remainingCount} 条问题`
|
||
: "本任务认领额度已达上限"}
|
||
</small>
|
||
</section>
|
||
<section className="ask-question-section">
|
||
<header>
|
||
<strong>
|
||
<ListChecks size={17} />
|
||
请选择提问内容（共 {assignment.questions.length} 题）
|
||
</strong>
|
||
<button
|
||
disabled={expired}
|
||
onClick={() =>
|
||
setSelected(
|
||
allSelected
|
||
? selected.filter(
|
||
(id) =>
|
||
isUsed(assignment.questions.find((item) => item.id === id)),
|
||
)
|
||
: assignment.questions.map((item) => item.id),
|
||
)
|
||
}
|
||
>
|
||
{allSelected ? "取消全选" : "全选"}
|
||
</button>
|
||
</header>
|
||
<div className="ask-question-list">
|
||
{assignment.questions.map((item) => {
|
||
const active = selected.includes(item.id);
|
||
return (
|
||
<button
|
||
key={item.id}
|
||
className={`${active ? "active" : ""} ${isUsed(item) ? "used" : ""}`}
|
||
disabled={expired || isUsed(item)}
|
||
onClick={() => toggle(item.id)}
|
||
>
|
||
<i>{active && <Check size={16} />}</i>
|
||
<span>{item.question}</span>
|
||
{isUsed(item) && <em>已认领 / 已使用</em>}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</section>
|
||
{expired && (
|
||
<div className="ask-assignment-expired-notice" role="alert">
|
||
领取超时，问题已自动释放，请点击“刷新重新分配”获取新任务。
|
||
</div>
|
||
)}
|
||
<footer className="ask-user-sticky">
|
||
<span>
|
||
已选择 <b>{selected.length}</b> / {assignment.questions.length} 题
|
||
{!expired && <AssignmentCountdown expiresAt={assignment.expires_at} onExpired={onExpired} />}
|
||
</span>
|
||
<button disabled={busy || (!expired && !selected.length)} onClick={expired ? onRefresh : onConfirm}>
|
||
{busy ? "处理中…" : expired ? "刷新重新分配" : "确认"}
|
||
</button>
|
||
</footer>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function ConfirmStage({
|
||
assignment,
|
||
api,
|
||
session,
|
||
taskNo,
|
||
onSubmitted,
|
||
setError,
|
||
onExpired,
|
||
}) {
|
||
const selectedQuestions = assignment.questions.filter(
|
||
(item) => item.selected,
|
||
);
|
||
const [files, setFiles] = useState([]);
|
||
const [payeeName, setPayeeName] = useState("");
|
||
const [alipayAccount, setAlipayAccount] = useState("");
|
||
const [reviewOpen, setReviewOpen] = useState(false);
|
||
const [busy, setBusy] = useState(false);
|
||
const [copiedId, setCopiedId] = useState(null);
|
||
const inputRef = useRef(null);
|
||
const previews = useMemo(
|
||
() => files.map((file) => ({ file, url: URL.createObjectURL(file) })),
|
||
[files],
|
||
);
|
||
useEffect(
|
||
() => () => previews.forEach((item) => URL.revokeObjectURL(item.url)),
|
||
[previews],
|
||
);
|
||
function addFiles(list) {
|
||
const images = Array.from(list).filter((file) =>
|
||
/^image\/(jpeg|png|webp)$/.test(file.type),
|
||
);
|
||
setFiles((current) =>
|
||
[...current, ...images].filter(
|
||
(file, index, all) =>
|
||
all.findIndex((row) => fileKey(row) === fileKey(file)) === index,
|
||
),
|
||
);
|
||
}
|
||
async function copyQuestion(item) {
|
||
try {
|
||
await navigator.clipboard.writeText(item.question);
|
||
setCopiedId(item.id);
|
||
window.setTimeout(
|
||
() => setCopiedId((current) => (current === item.id ? null : current)),
|
||
1500,
|
||
);
|
||
} catch {
|
||
setCopiedId(null);
|
||
}
|
||
}
|
||
async function submit() {
|
||
setBusy(true);
|
||
setError("");
|
||
const body = new FormData();
|
||
body.append("token", session.token);
|
||
files.forEach((file) => body.append("files", file));
|
||
body.append("payee_name", payeeName);
|
||
body.append("alipay_account", alipayAccount.trim());
|
||
try {
|
||
const result = await api(
|
||
`/api/ask/tasks/${encodeURIComponent(taskNo)}/submission`,
|
||
{
|
||
method: "POST",
|
||
body,
|
||
},
|
||
);
|
||
setReviewOpen(false);
|
||
onSubmitted(result.data);
|
||
} catch (requestError) {
|
||
setReviewOpen(false);
|
||
if (isExpiredAssignmentError(requestError.message)) onExpired();
|
||
else setError(requestError.message);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="ask-confirm-body">
|
||
<section className="ask-product-card">
|
||
<header>
|
||
<ShieldCheck size={15} />
|
||
<strong>问大家核验商品</strong>
|
||
<code>{assignment.task_id}</code>
|
||
</header>
|
||
<div>
|
||
<span className="ask-product-placeholder">
|
||
<PackageCheck size={31} />
|
||
</span>
|
||
<div>
|
||
<small>官方任务商品</small>
|
||
<h2>{assignment.product_name}</h2>
|
||
</div>
|
||
</div>
|
||
{(assignment.product_link || assignment.product_qr) && (
|
||
<div className="ask-product-access">
|
||
{assignment.product_link && (
|
||
<footer>
|
||
<code title={assignment.product_link}>{assignment.product_link}</code>
|
||
<button
|
||
onClick={() => navigator.clipboard?.writeText(assignment.product_link)}
|
||
>
|
||
<Copy size={13} />
|
||
复制淘口令
|
||
</button>
|
||
</footer>
|
||
)}
|
||
{assignment.product_qr?.data_url && (
|
||
<figure className="ask-product-qr-card">
|
||
<img src={assignment.product_qr.data_url} alt="商品二维码" />
|
||
<figcaption>商品二维码</figcaption>
|
||
</figure>
|
||
)}
|
||
</div>
|
||
)}
|
||
</section>
|
||
<section className="ask-selected-card">
|
||
<header>
|
||
<strong>已选提问内容（共 {selectedQuestions.length} 题）</strong>
|
||
<span>请在淘宝提问对应内容</span>
|
||
</header>
|
||
{selectedQuestions.map((item, index) => (
|
||
<article key={item.id}>
|
||
<b>#{index + 1}</b>
|
||
<span>{item.question}</span>
|
||
<button onClick={() => copyQuestion(item)}>
|
||
{copiedId === item.id ? <Check size={13} /> : <Copy size={13} />}
|
||
{copiedId === item.id ? "已复制" : "复制"}
|
||
</button>
|
||
</article>
|
||
))}
|
||
</section>
|
||
<section className="ask-upload-card">
|
||
<header>
|
||
<div>
|
||
<b>1</b>
|
||
<strong>上传截图（支持多图上传）</strong>
|
||
<small>请上传淘宝“我的提问”记录截图凭证</small>
|
||
</div>
|
||
<button>查看范例</button>
|
||
</header>
|
||
<div className="ask-upload-summary">
|
||
<span>支持多图 · 可多次添加 · JPG/PNG/WEBP</span>
|
||
<b>已上传 {files.length} 张</b>
|
||
</div>
|
||
<div className="ask-upload-grid">
|
||
{previews.map(({ file, url }, index) => (
|
||
<figure key={fileKey(file)}>
|
||
<img src={url} alt={`提问截图${index + 1}`} />
|
||
<button
|
||
onClick={() =>
|
||
setFiles((current) =>
|
||
current.filter((row) => fileKey(row) !== fileKey(file)),
|
||
)
|
||
}
|
||
>
|
||
<Trash2 size={14} />
|
||
</button>
|
||
<figcaption>图 {index + 1}</figcaption>
|
||
</figure>
|
||
))}
|
||
<button
|
||
className="ask-upload-add"
|
||
onClick={() => inputRef.current?.click()}
|
||
>
|
||
<ImagePlus size={25} />
|
||
<strong>上传提问截图</strong>
|
||
<small>支持 JPG、PNG、WEBP</small>
|
||
</button>
|
||
</div>
|
||
<input
|
||
ref={inputRef}
|
||
hidden
|
||
multiple
|
||
type="file"
|
||
accept="image/jpeg,image/png,image/webp"
|
||
onChange={(event) => addFiles(event.target.files)}
|
||
/>
|
||
</section>
|
||
<div className="ask-upload-expiry-note">
|
||
<ShieldCheck size={14} />
|
||
<span>请在有效期内完成上传并提交<AssignmentCountdown expiresAt={assignment.expires_at} onExpired={onExpired} /></span>
|
||
</div>
|
||
<section className="ask-upload-card ask-payment-card">
|
||
<header>
|
||
<div>
|
||
<b>2</b>
|
||
<strong>填写收款信息</strong>
|
||
<small>请填写准确的支付宝账号及实名姓名</small>
|
||
</div>
|
||
</header>
|
||
<label>
|
||
支付宝账号（必填）
|
||
<input value={alipayAccount} maxLength={128} onChange={(event) => setAlipayAccount(event.target.value)} placeholder="请输入支付宝账号（手机号或邮箱）" />
|
||
</label>
|
||
<label>
|
||
收款人真实姓名（必填）
|
||
<input
|
||
value={payeeName}
|
||
maxLength={64}
|
||
onChange={(event) => setPayeeName(event.target.value)}
|
||
placeholder="请输入收款人姓名"
|
||
/>
|
||
</label>
|
||
</section>
|
||
<button
|
||
className="ask-submit-review"
|
||
disabled={!files.length || !alipayAccount.trim() || !payeeName.trim()}
|
||
onClick={() => setReviewOpen(true)}
|
||
>
|
||
下一步：核对并提交审核
|
||
</button>
|
||
{reviewOpen && (
|
||
<div className="ask-submit-backdrop">
|
||
<section className="ask-submit-modal">
|
||
<header>
|
||
<ShieldCheck size={24} />
|
||
<button onClick={() => setReviewOpen(false)}>×</button>
|
||
<h2>提交审核核对</h2>
|
||
<p>请确认凭证信息无误，提交后将锁定审核</p>
|
||
</header>
|
||
<div className="ask-submit-summary">
|
||
<p>
|
||
<span>任务编号（TaskID）</span>
|
||
<code>{assignment.task_id}</code>
|
||
</p>
|
||
<p>
|
||
<span>已完成问题</span>
|
||
<b>{selectedQuestions.length} 条（已认领）</b>
|
||
</p>
|
||
{selectedQuestions.map((item) => (
|
||
<article key={item.id}>{item.question}</article>
|
||
))}
|
||
<p>
|
||
<span>提问截图</span>
|
||
<b>已上传（{files.length}张）</b>
|
||
</p>
|
||
<p>
|
||
<span>支付宝收款信息</span>
|
||
<b>{payeeName} / {alipayAccount}</b>
|
||
</p>
|
||
</div>
|
||
<aside>
|
||
<strong>防作弊与审核锁定声明</strong>
|
||
<p>
|
||
点击提交后，任务状态将变更为“审核中”，凭证不可撤销修改；审核通常在
|
||
1～24 小时内完成。
|
||
</p>
|
||
</aside>
|
||
<footer>
|
||
<button onClick={() => setReviewOpen(false)}>返回修改</button>
|
||
<button className="confirm" disabled={busy} onClick={submit}>
|
||
{busy ? "提交中…" : "确认提交审核"}
|
||
</button>
|
||
</footer>
|
||
</section>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function AuditStatus({ assignment, reload, busy, onBackHome }) {
|
||
const pending = assignment.status === "待审核";
|
||
const paid = assignment.status === "已完成";
|
||
const passed = ["已通过", "已完成"].includes(assignment.status);
|
||
const review = assignment.latest_review;
|
||
return (
|
||
<div className="ask-audit-body">
|
||
<section
|
||
className={`ask-audit-card ${passed ? "passed" : assignment.status === "未通过" ? "rejected" : ""}`}
|
||
>
|
||
<span>
|
||
{passed ? "✓" : assignment.status === "未通过" ? "!" : "⌁"}
|
||
</span>
|
||
<em>{assignment.status}</em>
|
||
<h1>
|
||
{pending
|
||
? "任务正在审核，请耐心等待。"
|
||
: paid
|
||
? "返款已完成"
|
||
: passed
|
||
? "运营审核已通过"
|
||
: "运营审核未通过"}
|
||
</h1>
|
||
<p>
|
||
{pending
|
||
? "审核专员正在核验您的淘宝提问截图与发布有效性，核验通过后将自动更新状态。"
|
||
: paid
|
||
? "运营已完成返款，以下为返款支付凭证，请留意您的收款账户。"
|
||
: passed
|
||
? "您提交的提问凭证已经核验通过，本次任务审核完成。"
|
||
: "请根据运营反馈修改截图后重新提交审核。"}
|
||
</p>
|
||
<div>
|
||
<strong>提交记录凭据</strong>
|
||
<dl>
|
||
<dt>任务ID：</dt>
|
||
<dd>{assignment.task_id}</dd>
|
||
<dt>提交问题：</dt>
|
||
<dd>
|
||
{assignment.questions.filter((item) => item.selected).length} 条
|
||
</dd>
|
||
<dt>提交时间：</dt>
|
||
<dd>
|
||
{formatDateTime(assignment.updated_at)}
|
||
</dd>
|
||
<dt>锁定状态：</dt>
|
||
<dd>{pending ? "已锁定不可撤销" : assignment.status}</dd>
|
||
</dl>
|
||
</div>
|
||
{review && !review.approved && (
|
||
<aside>
|
||
<strong>审核未通过原因</strong>
|
||
<p>
|
||
{[review.reason_code, review.reason_text]
|
||
.filter(Boolean)
|
||
.join("：")}
|
||
</p>
|
||
</aside>
|
||
)}
|
||
<button onClick={reload} disabled={busy}>
|
||
{busy ? "刷新中…" : "刷新审核状态"}
|
||
</button>
|
||
<button className="ask-back-home" onClick={onBackHome}>
|
||
返回任务首页
|
||
</button>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function TaskStatusPage({ history, onView }) {
|
||
const [filter, setFilter] = useState("all");
|
||
const inProgress = history.filter((item) =>
|
||
["待选择", "进行中", "待审核"].includes(item.status),
|
||
).length;
|
||
const completed = history.filter((item) =>
|
||
["已通过", "已完成", "未通过"].includes(item.status),
|
||
).length;
|
||
const filtered = history.filter(
|
||
(item) =>
|
||
filter === "all" ||
|
||
(filter === "progress"
|
||
? ["待选择", "进行中", "待审核"].includes(item.status)
|
||
: ["已通过", "已完成", "未通过"].includes(item.status)),
|
||
);
|
||
return (
|
||
<div className="ask-status-page">
|
||
<div className="ask-history-tabs">
|
||
<button
|
||
className={filter === "all" ? "active" : ""}
|
||
onClick={() => setFilter("all")}
|
||
>
|
||
全部任务 <b>{history.length}</b>
|
||
</button>
|
||
<button
|
||
className={filter === "progress" ? "active" : ""}
|
||
onClick={() => setFilter("progress")}
|
||
>
|
||
进行中 <b>{inProgress}</b>
|
||
</button>
|
||
<button
|
||
className={filter === "done" ? "active" : ""}
|
||
onClick={() => setFilter("done")}
|
||
>
|
||
已完成 <b>{completed}</b>
|
||
</button>
|
||
<b>全部任务（{history.length}）</b>
|
||
<span>进行中 {inProgress}</span>
|
||
<span>已完成 {completed}</span>
|
||
</div>
|
||
{filtered.length === 0 ? (
|
||
<div className="ask-user-loading">暂无历史提交任务</div>
|
||
) : (
|
||
filtered.map((item) => (
|
||
<article
|
||
className={`ask-history-item ${item.status === "待审核" ? "pending" : ["已通过", "已完成"].includes(item.status) ? "done" : ""}`}
|
||
key={item.assignment_id}
|
||
>
|
||
<header>
|
||
<div>
|
||
<code>{item.task_id}</code>
|
||
<small>ID：{item.user_id}</small>
|
||
</div>
|
||
<em>{item.status}</em>
|
||
</header>
|
||
<h3>
|
||
{item.questions
|
||
.filter((question) => question.selected)
|
||
.map((question) => question.question)
|
||
.join("、") || "尚未选择问题"}
|
||
</h3>
|
||
<p>
|
||
认领问题{" "}
|
||
{item.questions.filter((question) => question.selected).length} 条
|
||
· 更新时间{" "}
|
||
{formatDateTime(item.updated_at)}
|
||
</p>
|
||
<footer>
|
||
<span>
|
||
{item.status === "待审核"
|
||
? "凭证已锁定，专员核验中"
|
||
: ["已通过", "已完成"].includes(item.status)
|
||
? item.status === "已完成" ? "任务已完成" : "审核已通过"
|
||
: item.status === "未通过"
|
||
? "需要重新提交"
|
||
: "等待选择问题"}
|
||
</span>
|
||
<button onClick={() => onView(item)}>查看进度</button>
|
||
</footer>
|
||
</article>
|
||
))
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function AskUserPortal({ api }) {
|
||
const taskNo = getTaskNo();
|
||
const [session, setSession] = useState(() => {
|
||
try {
|
||
LEGACY_SESSION_KEYS.forEach((key) => localStorage.removeItem(key));
|
||
return JSON.parse(localStorage.getItem(SESSION_KEY) || "null");
|
||
} catch {
|
||
return null;
|
||
}
|
||
});
|
||
const [assignment, setAssignment] = useState(null);
|
||
const [selected, setSelected] = useState([]);
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState("");
|
||
const [history, setHistory] = useState([]);
|
||
const [view, setView] = useState("claim");
|
||
const [notice, setNotice] = useState("");
|
||
const [claimEdit, setClaimEdit] = useState(false);
|
||
const [exhausted, setExhausted] = useState(false);
|
||
const [invalidTask, setInvalidTask] = useState("");
|
||
const [completedTask, setCompletedTask] = useState(false);
|
||
const [expiredAssignment, setExpiredAssignment] = useState(false);
|
||
const [selectionExpired, setSelectionExpired] = useState(false);
|
||
|
||
async function loadAssignment(silent = false, refresh = false) {
|
||
if (!session) return;
|
||
const previousAssignmentId = assignment?.assignment_id;
|
||
if (!silent) setBusy(true);
|
||
try {
|
||
const result = await api(
|
||
`/api/ask/tasks/${encodeURIComponent(taskNo)}?token=${encodeURIComponent(session.token)}${refresh ? "&refresh=true" : ""}`,
|
||
);
|
||
setAssignment(result.data);
|
||
setExhausted(false);
|
||
setInvalidTask("");
|
||
setCompletedTask(false);
|
||
setExpiredAssignment(false);
|
||
setSelectionExpired(false);
|
||
// Keep the current view. In particular, polling a pending review must
|
||
// not pull the user back to the audit screen after they chose to return
|
||
// to the claim page.
|
||
// Keep unsaved checkbox choices while a user is on the claim screen.
|
||
// If an expired reservation is refreshed, the fresh allocation is
|
||
// selected instead of restoring the stale checkbox choices.
|
||
if (!silent || result.data.assignment_id !== previousAssignmentId || assignment?.status !== "待选择") {
|
||
setSelected(
|
||
result.data.questions
|
||
// Questions already submitted for review are consumed and must not
|
||
// be counted as a new selection when the user returns to claim more.
|
||
.filter((item) => item.selected && !item.used)
|
||
.map((item) => item.id),
|
||
);
|
||
}
|
||
setError("");
|
||
} catch (requestError) {
|
||
if (requestError.message === EXHAUSTED_MESSAGE) {
|
||
setAssignment(null);
|
||
setExhausted(true);
|
||
setInvalidTask("");
|
||
setError("");
|
||
} else if (requestError.message === COMPLETED_TASK_MESSAGE) {
|
||
setAssignment(null);
|
||
setCompletedTask(true);
|
||
setInvalidTask("");
|
||
setError("");
|
||
} else if (isInvalidTaskError(requestError.message)) {
|
||
setAssignment(null);
|
||
setInvalidTask(requestError.message);
|
||
setError("");
|
||
} else if (isExpiredAssignmentError(requestError.message)) {
|
||
setAssignment(null);
|
||
setSelected([]);
|
||
setExpiredAssignment(true);
|
||
setError("");
|
||
} else if (requestError.message.includes("登录已失效")) {
|
||
logout();
|
||
} else {
|
||
setError(requestError.message);
|
||
}
|
||
} finally {
|
||
if (!silent) setBusy(false);
|
||
}
|
||
}
|
||
async function loadHistory() {
|
||
setBusy(true);
|
||
try {
|
||
const result = await api(
|
||
`/api/ask/me/assignments?token=${encodeURIComponent(session.token)}`,
|
||
);
|
||
setHistory(result.data);
|
||
setView("status");
|
||
setError("");
|
||
} catch (requestError) {
|
||
setError(requestError.message);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
useEffect(() => {
|
||
loadAssignment();
|
||
}, [session?.token, taskNo]);
|
||
useEffect(() => {
|
||
if (!assignment || assignment.status !== "待审核") return undefined;
|
||
const interval = 10000;
|
||
const timer = window.setInterval(() => loadAssignment(true), interval);
|
||
return () => window.clearInterval(timer);
|
||
}, [assignment?.status, session?.token, taskNo]);
|
||
|
||
const logout = () => {
|
||
localStorage.removeItem(SESSION_KEY);
|
||
LEGACY_SESSION_KEYS.forEach((key) => localStorage.removeItem(key));
|
||
setSession(null);
|
||
setAssignment(null);
|
||
setExhausted(false);
|
||
setInvalidTask("");
|
||
setCompletedTask(false);
|
||
setExpiredAssignment(false);
|
||
setSelectionExpired(false);
|
||
};
|
||
if (!session) return <TaobaoLogin api={api} onLogin={setSession} />;
|
||
if (exhausted)
|
||
return <TaskExhausted session={session} onLogout={logout} />;
|
||
if (completedTask && view !== "status" && !assignment)
|
||
return <CompletedTask session={session} onOpenHistory={loadHistory} busy={busy} error={error} />;
|
||
if (invalidTask)
|
||
return <InvalidTask message={invalidTask} onReload={() => loadAssignment()} />;
|
||
if (expiredAssignment)
|
||
return <ExpiredAssignment session={session} onReload={refreshAssignment} />;
|
||
async function releaseAssignment() {
|
||
try {
|
||
await api(`/api/ask/tasks/${encodeURIComponent(taskNo)}/release`, {
|
||
method: "POST",
|
||
body: JSON.stringify({ token: session.token }),
|
||
});
|
||
} catch {
|
||
// The server may already have released the reservation during its
|
||
// expiry sweep; a subsequent refresh remains safe in that case.
|
||
}
|
||
}
|
||
function expireSelection() {
|
||
if (selectionExpired) return;
|
||
void releaseAssignment();
|
||
setSelectionExpired(true);
|
||
setSelected([]);
|
||
setError("");
|
||
}
|
||
function expireUpload() {
|
||
if (expiredAssignment) return;
|
||
void releaseAssignment();
|
||
setExpiredAssignment(true);
|
||
setAssignment(null);
|
||
setSelected([]);
|
||
setError("");
|
||
}
|
||
async function refreshAssignment() {
|
||
await releaseAssignment();
|
||
setSelectionExpired(false);
|
||
setExpiredAssignment(false);
|
||
setAssignment(null);
|
||
await loadAssignment(false, true);
|
||
}
|
||
async function startNextSelection() {
|
||
setView("claim");
|
||
setSelected([]);
|
||
setNotice("");
|
||
await loadAssignment(false, true);
|
||
setClaimEdit(true);
|
||
}
|
||
async function confirm() {
|
||
if (!selected.length) return;
|
||
setBusy(true);
|
||
setError("");
|
||
try {
|
||
const result = await api(
|
||
`/api/ask/tasks/${encodeURIComponent(taskNo)}/selection`,
|
||
{
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
token: session.token,
|
||
question_ids: selected,
|
||
}),
|
||
},
|
||
);
|
||
setAssignment(result.data);
|
||
// Selection is complete; continue directly to the upload/submit stage.
|
||
setClaimEdit(false);
|
||
setSelected([]);
|
||
} catch (requestError) {
|
||
setError(requestError.message);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
const step = assignment?.status === "待选择" ? 1 : 2;
|
||
return (
|
||
<main className="ask-user-shell">
|
||
<section className="ask-user-app">
|
||
<Header
|
||
session={session}
|
||
assignment={assignment}
|
||
onLogout={logout}
|
||
step={step}
|
||
view={view}
|
||
onOpenHistory={loadHistory}
|
||
onOpenClaim={() => {
|
||
if (assignment && (assignment.remaining_count ?? 0) > 0 && ["已通过", "已完成"].includes(assignment.status)) {
|
||
void startNextSelection();
|
||
} else {
|
||
setView("claim");
|
||
setClaimEdit(false);
|
||
setNotice("");
|
||
}
|
||
}}
|
||
/>
|
||
{error && <div className="ask-user-error page">{error}</div>}
|
||
{notice && <div className="ask-user-notice">{notice}</div>}
|
||
{view === "status" ? (
|
||
<TaskStatusPage
|
||
history={history}
|
||
onView={(item) => {
|
||
setAssignment(item);
|
||
setSelected(
|
||
item.questions
|
||
.filter((question) => question.selected)
|
||
.map((question) => question.id),
|
||
);
|
||
setView("claim");
|
||
}}
|
||
/>
|
||
) : !assignment ? (
|
||
<div className="ask-user-loading">
|
||
{busy ? "正在随机分配问题…" : "暂时无法读取任务"}
|
||
</div>
|
||
) : claimEdit || assignment.status === "待选择" ? (
|
||
<SelectQuestions
|
||
assignment={assignment}
|
||
selected={selected}
|
||
setSelected={setSelected}
|
||
onConfirm={confirm}
|
||
busy={busy}
|
||
onExpired={expireSelection}
|
||
expired={selectionExpired}
|
||
onRefresh={refreshAssignment}
|
||
/>
|
||
) : ["待审核", "已通过", "已完成"].includes(assignment.status) ? (
|
||
<AuditStatus
|
||
assignment={assignment}
|
||
reload={() => loadAssignment()}
|
||
busy={busy}
|
||
onBackHome={() => {
|
||
const consumed = assignment.questions.filter(
|
||
(item) => item.used || (["待审核", "已通过"].includes(assignment.status) && item.selected),
|
||
);
|
||
const selectedCount = assignment.used_count ?? consumed.length;
|
||
// Start a fresh selection containing only the remaining items;
|
||
// consumed questions stay visibly locked in the list.
|
||
setSelected([]);
|
||
if (selectedCount >= assignment.questions.length) {
|
||
setView("status");
|
||
loadHistory();
|
||
setNotice("本次任务您的认领额度已达上限，请关注下一次任务");
|
||
} else {
|
||
void startNextSelection();
|
||
}
|
||
}}
|
||
/>
|
||
) : (
|
||
<ConfirmStage
|
||
assignment={assignment}
|
||
api={api}
|
||
session={session}
|
||
taskNo={taskNo}
|
||
onSubmitted={setAssignment}
|
||
setError={setError}
|
||
onExpired={expireUpload}
|
||
/>
|
||
)}
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|