69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {
|
|
INVOICE_KIND_LABELS,
|
|
INVOICE_STATUS_LABELS,
|
|
INVOICE_TITLE_TYPE_LABELS,
|
|
type InvoiceDto,
|
|
} from '@dukang/shared-types';
|
|
import SubPageHeader from '../components/SubPageHeader';
|
|
import { request } from '../lib/api';
|
|
|
|
export default function InvoiceListPage() {
|
|
const navigate = useNavigate();
|
|
const [items, setItems] = useState<InvoiceDto[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
request<{ items: InvoiceDto[] }>('USER_H5', '/trade/invoices?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('/invoices/apply')}>
|
|
申请发票
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="after-sale-order-list">
|
|
{items.map((inv) => (
|
|
<div key={inv.id} className="after-sale-order-item after-sale-ticket-card">
|
|
<div className="after-sale-ticket-head">
|
|
<span>
|
|
{INVOICE_TITLE_TYPE_LABELS[inv.titleType]} · {INVOICE_KIND_LABELS[inv.invoiceKind]}
|
|
</span>
|
|
<span className="after-sale-ticket-status">
|
|
{INVOICE_STATUS_LABELS[inv.status]}
|
|
</span>
|
|
</div>
|
|
<p className="after-sale-order-no">{inv.titleName}</p>
|
|
<p className="after-sale-order-meta">
|
|
{inv.invoiceNo} · 订单 {inv.orderNo ?? inv.orderId}
|
|
</p>
|
|
{inv.status === 'ISSUED' && inv.fileUrl ? (
|
|
<a className="after-sale-file-link" href={inv.fileUrl} target="_blank" rel="noreferrer">
|
|
查看/下载发票
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
))}
|
|
<button type="button" className="after-sale-primary" onClick={() => navigate('/invoices/apply')}>
|
|
申请发票
|
|
</button>
|
|
</div>
|
|
)}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|