77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
import { useState } from 'react'
|
|
import { Button, Card, ErrorBlock, Image, NavBar, Skeleton, Tag } from 'antd-mobile'
|
|
import { useNavigate } from 'react-router-dom'
|
|
|
|
import { useCrashCategories, useCrashProducts } from '@/features/crash/api'
|
|
import { formatMoney } from '@/shared/utils/format'
|
|
|
|
export function MobileCrashListPage() {
|
|
const navigate = useNavigate()
|
|
const [categoryId, setCategoryId] = useState<number | undefined>()
|
|
const categoriesQuery = useCrashCategories()
|
|
const productsQuery = useCrashProducts({ category_id: categoryId, page: 1, page_size: 30 })
|
|
const items = productsQuery.data?.items ?? []
|
|
|
|
return (
|
|
<div className="mobile-wallet">
|
|
<NavBar
|
|
onBack={() => navigate('/m')}
|
|
right={
|
|
<Button size="mini" fill="none" onClick={() => navigate('/m/crash/orders')}>
|
|
我的订单
|
|
</Button>
|
|
}
|
|
>
|
|
摸红商城
|
|
</NavBar>
|
|
|
|
<div style={{ display: 'flex', gap: 8, overflowX: 'auto', padding: '4px 0 8px' }}>
|
|
<Tag
|
|
color={categoryId ? 'default' : 'primary'}
|
|
onClick={() => setCategoryId(undefined)}
|
|
>
|
|
全部
|
|
</Tag>
|
|
{(categoriesQuery.data ?? []).map(item => (
|
|
<Tag
|
|
key={item.id}
|
|
color={categoryId === item.id ? 'primary' : 'default'}
|
|
onClick={() => setCategoryId(item.id)}
|
|
>
|
|
{item.name}
|
|
</Tag>
|
|
))}
|
|
</div>
|
|
|
|
{productsQuery.isPending ? (
|
|
<Card>
|
|
<Skeleton.Paragraph lineCount={4} animated />
|
|
</Card>
|
|
) : items.length === 0 ? (
|
|
<ErrorBlock status="empty" title="暂无商品" />
|
|
) : (
|
|
<div style={{ display: 'grid', gap: 10 }}>
|
|
{items.map(item => (
|
|
<Card key={item.id} onClick={() => navigate(`/m/crash/${item.id}`)}>
|
|
<div style={{ display: 'flex', gap: 12 }}>
|
|
{item.cover_url ? (
|
|
<Image src={item.cover_url} width={78} height={78} fit="cover" style={{ borderRadius: 8 }} />
|
|
) : null}
|
|
<div className="admin-stack" style={{ flex: 1, gap: 4 }}>
|
|
<strong>{item.title}</strong>
|
|
<div className="mobile-wallet__sub">
|
|
{formatMoney(item.price_cent)} · {item.category_name || '未分类'}
|
|
</div>
|
|
<Tag color={item.stock < 0 ? 'success' : 'primary'}>
|
|
{item.stock < 0 ? '不限量' : `库存 ${item.stock}`}
|
|
</Tag>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|