74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { TICKET_TYPE_LABELS, type TicketTypeDto } from '@dukang/shared-types';
|
|
import SubPageHeader from '../components/SubPageHeader';
|
|
import { request } from '../lib/api';
|
|
import { usePageView } from '../lib/usePageView';
|
|
|
|
type TicketRow = {
|
|
id: string;
|
|
ticketNo: string;
|
|
ticketType: TicketTypeDto;
|
|
status: string;
|
|
orderNo?: string;
|
|
remark?: string;
|
|
createdAt: string;
|
|
};
|
|
|
|
const STATUS_LABEL: Record<string, string> = {
|
|
PENDING: '待处理',
|
|
OPEN: '处理中',
|
|
RESOLVED: '已完成',
|
|
REJECTED: '已驳回',
|
|
CLOSED: '已关闭',
|
|
};
|
|
|
|
export default function AfterSaleListPage() {
|
|
usePageView('after_sale_list_view');
|
|
const navigate = useNavigate();
|
|
const [items, setItems] = useState<TicketRow[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
request<{ items: TicketRow[] }>('USER_H5', '/trade/after-sale-tickets?pageSize=50')
|
|
.then((res) => setItems(res.items ?? []))
|
|
.catch(() => setItems([]))
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
return (
|
|
<div className="after-sale-page">
|
|
<SubPageHeader title="我的售后" onBack={() => navigate(-1)} />
|
|
<main className="after-sale-body">
|
|
{loading ? (
|
|
<p className="after-sale-empty">加载中…</p>
|
|
) : items.length === 0 ? (
|
|
<div className="after-sale-empty-box">
|
|
<p className="after-sale-empty">暂无售后工单</p>
|
|
<button type="button" className="after-sale-primary" onClick={() => navigate('/after-sale')}>
|
|
申请售后
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="after-sale-order-list">
|
|
{items.map((t) => (
|
|
<div key={t.id} className="after-sale-order-item after-sale-ticket-card">
|
|
<div className="after-sale-ticket-head">
|
|
<span>{TICKET_TYPE_LABELS[t.ticketType] ?? t.ticketType}</span>
|
|
<span className="after-sale-ticket-status">{STATUS_LABEL[t.status] ?? t.status}</span>
|
|
</div>
|
|
<p className="after-sale-order-no">{t.ticketNo}</p>
|
|
<p className="after-sale-order-meta">订单 {t.orderNo ?? '—'} · {new Date(t.createdAt).toLocaleString()}</p>
|
|
{t.remark ? <p className="after-sale-order-meta">{t.remark}</p> : null}
|
|
</div>
|
|
))}
|
|
<button type="button" className="after-sale-primary" onClick={() => navigate('/after-sale')}>
|
|
新建售后
|
|
</button>
|
|
</div>
|
|
)}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|