+
+ 首页 },
+ { title: 我的订单 },
+ { title: order.order_no },
+ ]}
+ />
+ } onClick={() => navigate('/orders')}>
+ 返回订单
+
+
+
+
+
+ {order.order_no}
+
+ {order.title}
+
+
+ {status.label}
+
+ 交接：{handoff.label}
+
+
+ 结算：{settlement.label}
+
+
+
+
+ 订单金额
+ {formatMoney(order.display_amount_cent)}
+ 押金 {formatMoney(order.deposit_amount_cent)}
+
+
+
+
+
+
+
+ {formatText(order.listing_no)}
+
+ {formatText(order.login_platform)}
+
+ {formatText(order.server_region)}
+
+ {order.estimated_duration_hours
+ ? `${order.estimated_duration_hours} 小时`
+ : '—'}
+
+
+
+
+
+
+
+ {formatMoney(order.rent_amount_cent)}
+
+
+ {formatMoney(order.owner_rent_amount_cent)}
+
+
+ {formatMoney(order.platform_fee_cent)}
+
+
+ {formatMoney(order.deposit_amount_cent)}
+
+ {order.deposit_waived_amount_cent > 0 ? (
+
+ {formatMoney(order.deposit_waived_amount_cent)}
+
+ ) : null}
+ {order.refund_amount_cent > 0 ? (
+
+ {formatMoney(order.refund_amount_cent)}
+
+ ) : null}
+
+
+
+
+
+
+ {formatDateTime(order.created_at)}
+
+
+ {formatDateTime(order.payment_deadline_at)}
+
+
+ {formatDateTime(order.rented_at)}
+
+
+ {formatDateTime(order.estimated_end_at)}
+
+
+
+
+ {checkout ? (
+
+
+
+
+ {checkoutStatusMeta(checkout.status).label}
+
+
+
+ {checkout.round_count} / {checkout.max_rounds}
+ {checkout.turn ? ` · ${checkout.turn === 'owner' ? '号主处理' : '租客处理'}` : ''}
+
+
+ {formatMoney(checkout.consumable_amount_cent)}
+
+
+ {checkout.coin_consumed_m} M
+
+
+ {formatMoney(checkout.other_amount_cent)}
+
+
+ {formatMoney(checkout.deposit_deduct_amount_cent)}
+
+
+ {formatMoney(checkout.renter_refund_amount_cent)}
+
+
+ {formatMoney(checkout.owner_income_amount_cent)}
+
+ {checkout.shortfall_cent > 0 ? (
+
+
+ {formatMoney(checkout.shortfall_cent)}
+
+
+ ) : null}
+ {checkout.content ? (
+
+ {checkout.content}
+
+ ) : null}
+
+
+ ) : null}
+
+ {order.active_dispute ? (
+
+
+
+ #{order.active_dispute.id}
+
+
+ {formatText(order.active_dispute.status)}
+
+
+ {formatText(order.active_dispute.type)}
+
+
+ {order.active_dispute.initiator_type === 'admin' ? '平台' : '交易方'}
+
+
+
+ ) : null}
+
+
+ {records.length === 0 ? (
+
+ ) : (
+
+ {records.map(record => (
+
+
+ {handoffRecordTypeMap[record.type] ?? record.type}
+ {formatDateTime(record.created_at)}
+
+
{record.content}
+
+ {record.confirmed_by_renter_at ? (
+ 租客已确认
+ ) : null}
+ {record.confirmed_by_owner_at ? (
+ 号主已确认
+ ) : null}
+
+
+ ))}
+
+ {
+ await Promise.all([query.refetch(), handoffQuery.refetch()])
+ await queryClient.invalidateQueries({ queryKey: ['pc-my-orders'] })
+ await queryClient.invalidateQueries({ queryKey: ['my-orders'] })
+ }}
+ />
+
+
+
+
+
+ {row.title}
+
+ {roleLabel(row.role)}
+ {row.listing_no}
+
+
+ ),
+ },
+ {
+ title: '商品',
+ key: 'listing',
+ width: 220,
+ render: (_, row) => (
+
+ {formatText(row.server_region)}
+ {formatText(row.login_platform)}
+
+ {row.rental_days ? `${row.rental_days} 天` : '按账号规则'}
+
+
+ ),
+ },
+ {
+ title: '金额',
+ key: 'amount',
+ width: 180,
+ align: 'right',
+ render: (_, row) => (
+
+ {formatMoney(row.display_amount_cent)}
+ 押金 {formatMoney(row.deposit_amount_cent)}
+ {row.deposit_waived_amount_cent > 0 ? (
+ 减免 {formatMoney(row.deposit_waived_amount_cent)}
+ ) : null}
+
+ ),
+ },
+ {
+ title: '状态',
+ key: 'status',
+ width: 190,
+ render: (_, row) => (
+
+ {orderStatusMeta(row.status).label}
+
+ {handoffStatusMeta(row.handoff_status).label}
+
+
+ ),
+ },
+ {
+ title: '时间',
+ key: 'time',
+ width: 190,
+ render: (_, row) => (
+
+ 下单 {formatDateTime(row.created_at)}
+ 支付截止 {formatDateTime(row.payment_deadline_at)}
+
+ ),
+ },
+ {
+ title: '',
+ key: 'actions',
+ width: 90,
+ fixed: 'right',
+ render: (_, row) => (
+
+ ),
+ },
+ ]
+}
+
+export function OrderListPage() {
+ const navigate = useNavigate()
+ const token = useSessionStore(state => state.token)
+ const hydrated = useSessionStore(state => state.hydrated)
+ const [status, setStatus] = useState('')
+ const [page, setPage] = useState(1)
+
+ const { data, isPending, isFetching, isError, error, refetch } = useQuery({
+ queryKey: ['pc-my-orders', status, page],
+ queryFn: () => fetchMyOrders(page, PAGE_SIZE, status),
+ placeholderData: keepPreviousData,
+ enabled: Boolean(token),
+ })
+
+ const columns = buildColumns(id => navigate(`/orders/${id}`))
+ const errorText = error instanceof Error ? error.message : '请稍后重试或重新登录。'
+
+ if (!hydrated) {
+ return (
+
+
+
+ )
+ }
+
+ if (!token) {
+ return (
+
+
+
+ 登录后查看我的订单
+
+ 订单、押金、交接与结账记录只对交易双方可见。
+
+
+
+
+ )
+ }
+
+ return (
+
+
+
+ {isError ? (
+
void refetch()}>
+ 重试
+
+ }
+ />
+ ) : null}
+
+
+
+ rowKey="id"
+ columns={columns}
+ dataSource={data?.items ?? []}
+ loading={isPending || isFetching}
+ scroll={{ x: 'max-content' }}
+ pagination={{
+ current: data?.page ?? page,
+ pageSize: data?.page_size ?? PAGE_SIZE,
+ total: data?.total ?? 0,
+ showSizeChanger: false,
+ showTotal: (count, range) => `第 ${range[0]}-${range[1]} 条 / 共 ${count} 条`,
+ onChange: next => setPage(next),
+ }}
+ locale={{
+ emptyText: (
+
+ ),
+ }}
+ />
+
+