97 lines
3.2 KiB
TypeScript
97 lines
3.2 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { View, Text, ScrollView } from '@tarojs/components';
|
|
import Taro, { useDidShow } from '@tarojs/taro';
|
|
import HqHeader from '../../components/HqHeader';
|
|
import { request, type Paginated } from '../../lib/api';
|
|
import { useHqSession } from '../../lib/session';
|
|
import { ORDER_STATUS_LABELS, badgeClass, fmtMoney, fmtTime } from '../../lib/constants';
|
|
|
|
type OrderRow = {
|
|
id: string;
|
|
orderNo: string;
|
|
status: string;
|
|
deliveryType?: string;
|
|
payAmount: number | string;
|
|
receiverName?: string;
|
|
receiverPhone?: string;
|
|
createdAt: string;
|
|
};
|
|
|
|
const TABS = [
|
|
{ key: '', label: '全部' },
|
|
{ key: 'PENDING_PAY', label: '待付款' },
|
|
{ key: 'PENDING_SHIP', label: '待发货' },
|
|
{ key: 'SHIPPING', label: '配送中' },
|
|
{ key: 'COMPLETED', label: '已完成' },
|
|
{ key: 'REFUNDING', label: '退款中' },
|
|
];
|
|
|
|
export default function OrdersPage() {
|
|
useHqSession();
|
|
const [status, setStatus] = useState('');
|
|
const [rows, setRows] = useState<OrderRow[]>([]);
|
|
const [total, setTotal] = useState(0);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
function load() {
|
|
setLoading(true);
|
|
const qs = new URLSearchParams({ pageSize: '50' });
|
|
if (status) qs.set('status', status);
|
|
request<Paginated<OrderRow>>(`/admin/orders?${qs.toString()}`)
|
|
.then((d) => {
|
|
setRows(d.items);
|
|
setTotal(d.total);
|
|
})
|
|
.catch(() => setRows([]))
|
|
.finally(() => setLoading(false));
|
|
}
|
|
|
|
useEffect(load, [status]);
|
|
useDidShow(load);
|
|
|
|
return (
|
|
<View className="hq-page">
|
|
<HqHeader title="订单中心" back />
|
|
|
|
<ScrollView scrollX enhanced showScrollbar={false} className="hq-tabs">
|
|
{TABS.map((t) => (
|
|
<View
|
|
key={t.key}
|
|
className={`hq-tab${status === t.key ? ' hq-tab--active' : ''}`}
|
|
onClick={() => setStatus(t.key)}
|
|
>
|
|
<Text>{t.label}</Text>
|
|
</View>
|
|
))}
|
|
</ScrollView>
|
|
|
|
<Text className="hq-section-title">
|
|
<Text>订单列表</Text>
|
|
<Text className="hq-muted" style="font-size:12px;font-weight:400">共 {total} 单</Text>
|
|
</Text>
|
|
|
|
{loading && <View className="hq-empty">加载中…</View>}
|
|
{!loading && rows.length === 0 && <View className="hq-empty">暂无订单</View>}
|
|
|
|
{rows.map((o) => (
|
|
<View
|
|
key={o.id}
|
|
className="hq-card"
|
|
style="margin-top:8px;margin-bottom:0"
|
|
onClick={() => Taro.navigateTo({ url: `/pages/orders/detail?id=${o.id}` })}
|
|
>
|
|
<View className="hq-row">
|
|
<Text style="font-size:13px;color:var(--hq-muted)">{o.orderNo}</Text>
|
|
<Text className={`hq-badge ${badgeClass(o.status)}`}>{ORDER_STATUS_LABELS[o.status] || o.status}</Text>
|
|
</View>
|
|
<View className="hq-row" style="margin-top:10px">
|
|
<Text style="font-size:14px">{o.receiverName || '—'} · {o.receiverPhone || ''}</Text>
|
|
<Text style="font-size:16px;font-weight:700;color:var(--hq-red)">¥{fmtMoney(o.payAmount)}</Text>
|
|
</View>
|
|
<Text className="hq-muted" style="font-size:11px;display:block;margin-top:6px">{fmtTime(o.createdAt)}</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
);
|
|
}
|