422 lines
16 KiB
TypeScript
422 lines
16 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { Alert, Button, Card, Empty, Input, Select, Space, Spin, Tag } from 'antd';
|
|
import { SearchOutlined } from '@ant-design/icons';
|
|
import { PointsMallAPI, PointsMallCategory, PointsMallOverview, PointsMallProduct, PointsMallProductsResponse } from '../api';
|
|
|
|
type SortKey = 'popular' | 'price_asc' | 'price_desc' | 'newest';
|
|
|
|
const MOCK_OVERVIEW: PointsMallOverview = {
|
|
me: { points: 1280, level: 'Lv.2' },
|
|
categories: [
|
|
{ id: 'all', name: '全部', sort: 0 },
|
|
{ id: 'digital', name: '虚拟权益', sort: 1 },
|
|
{ id: 'tool', name: '工具周边', sort: 2 },
|
|
{ id: 'gift', name: '礼品卡券', sort: 3 },
|
|
{ id: 'limited', name: '限时活动', sort: 4 }
|
|
],
|
|
announcements: [
|
|
{ id: 'a1', title: '公告：积分规则升级中', content: '本期暂不开放兑换，页面仅用于 UI 预览。', linkUrl: '' }
|
|
],
|
|
banners: [
|
|
{ id: 'b1', title: '限时上新', subtitle: 'Up to 25% Off', imageUrl: '', linkUrl: '' }
|
|
],
|
|
promoEntries: [
|
|
{ id: 'p1', title: '促销活动', subtitle: '本周精选', linkUrl: '' },
|
|
{ id: 'p2', title: '积分任务', subtitle: '快速涨积分', linkUrl: '' }
|
|
]
|
|
};
|
|
|
|
const MOCK_PRODUCTS: PointsMallProduct[] = Array.from({ length: 12 }).map((_, i) => ({
|
|
id: String(i + 1),
|
|
categoryId: i % 2 === 0 ? 'digital' : 'tool',
|
|
name: `商品 ${i + 1}`,
|
|
subtitle: '这里是商品简短描述',
|
|
coverUrl: '',
|
|
pointsPrice: 199 + i * 10,
|
|
stock: 99,
|
|
sold: 12 + i,
|
|
tags: i % 3 === 0 ? ['限时'] : i % 3 === 1 ? ['热卖'] : []
|
|
}));
|
|
|
|
export default function PointsMallPage() {
|
|
const [overviewLoading, setOverviewLoading] = useState(false);
|
|
const [productsLoading, setProductsLoading] = useState(false);
|
|
const [overview, setOverview] = useState<PointsMallOverview | null>(null);
|
|
const [categories, setCategories] = useState<PointsMallCategory[]>([]);
|
|
|
|
const [categoryId, setCategoryId] = useState<string>('all');
|
|
const [q, setQ] = useState('');
|
|
const [sort, setSort] = useState<SortKey>('popular');
|
|
const [page, setPage] = useState(1);
|
|
const [pageSize, setPageSize] = useState(24);
|
|
const [productsRes, setProductsRes] = useState<PointsMallProductsResponse | null>(null);
|
|
|
|
const loadOverview = async () => {
|
|
setOverviewLoading(true);
|
|
try {
|
|
const data = await PointsMallAPI.overview();
|
|
setOverview(data);
|
|
setCategories(data.categories || []);
|
|
if (!data.categories?.some((c) => c.id === categoryId) && data.categories?.[0]?.id) {
|
|
setCategoryId(data.categories[0].id);
|
|
}
|
|
} catch {
|
|
setOverview(MOCK_OVERVIEW);
|
|
setCategories(MOCK_OVERVIEW.categories);
|
|
} finally {
|
|
setOverviewLoading(false);
|
|
}
|
|
};
|
|
|
|
const loadProducts = async () => {
|
|
setProductsLoading(true);
|
|
try {
|
|
const res = await PointsMallAPI.products({
|
|
categoryId: categoryId === 'all' ? undefined : categoryId,
|
|
q,
|
|
sort,
|
|
page,
|
|
pageSize
|
|
});
|
|
setProductsRes(res);
|
|
} catch {
|
|
const filtered = MOCK_PRODUCTS.filter((p) => (categoryId === 'all' ? true : p.categoryId === categoryId))
|
|
.filter((p) => (q ? (p.name + p.subtitle).toLowerCase().includes(q.toLowerCase()) : true));
|
|
setProductsRes({
|
|
page,
|
|
pageSize,
|
|
total: filtered.length,
|
|
items: filtered.slice((page - 1) * pageSize, page * pageSize)
|
|
});
|
|
} finally {
|
|
setProductsLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadOverview();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
loadProducts();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [categoryId, q, sort, page, pageSize]);
|
|
|
|
const announcement = overview?.announcements?.[0];
|
|
const banner = overview?.banners?.[0];
|
|
const promoEntries = overview?.promoEntries || [];
|
|
|
|
const products = productsRes?.items || [];
|
|
const total = productsRes?.total || 0;
|
|
|
|
const sortOptions = useMemo(
|
|
() => [
|
|
{ value: 'popular', label: '热度优先' },
|
|
{ value: 'newest', label: '最新上架' },
|
|
{ value: 'price_asc', label: '积分从低到高' },
|
|
{ value: 'price_desc', label: '积分从高到低' }
|
|
],
|
|
[]
|
|
);
|
|
|
|
return (
|
|
<div className="page-container" style={{ maxWidth: 1400 }}>
|
|
<div
|
|
style={{
|
|
borderRadius: 24,
|
|
padding: '30px 30px 22px',
|
|
background:
|
|
'linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(236,253,245,0.92) 44%, rgba(239,246,255,0.96) 100%)',
|
|
border: '1px solid rgba(8, 145, 178, 0.12)',
|
|
boxShadow: '0 20px 48px rgba(15, 23, 42, 0.06)',
|
|
marginBottom: 18
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap' }}>
|
|
<div style={{ maxWidth: 720 }}>
|
|
<h1 className="page-title" style={{ marginBottom: 10 }}>积分商城</h1>
|
|
<div className="page-subtitle" style={{ marginTop: 0, fontSize: 15, lineHeight: 1.75 }}>
|
|
使用积分兑换权益、工具和活动礼包。后续会接入库存、订单与积分流水。
|
|
</div>
|
|
</div>
|
|
<div
|
|
style={{
|
|
minWidth: 280,
|
|
borderRadius: 18,
|
|
padding: '14px 16px',
|
|
background: 'rgba(255,255,255,0.72)',
|
|
border: '1px solid rgba(255,255,255,0.7)'
|
|
}}
|
|
>
|
|
{overviewLoading ? (
|
|
<Spin />
|
|
) : (
|
|
<div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
|
|
<div>
|
|
<div style={{ fontSize: 12.5, color: 'var(--color-text-secondary)', marginBottom: 6 }}>
|
|
我的积分
|
|
</div>
|
|
<div style={{ fontSize: 28, fontWeight: 800, color: 'var(--color-text)' }}>
|
|
{Number(overview?.me?.points || 0).toLocaleString()}
|
|
</div>
|
|
</div>
|
|
<Tag bordered={false} style={{ margin: 0, borderRadius: 999, background: 'var(--color-brand-soft)', color: 'var(--color-brand)' }}>
|
|
{String(overview?.me?.level || 'Lv.0')}
|
|
</Tag>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Card
|
|
bodyStyle={{ padding: 16 }}
|
|
style={{
|
|
borderRadius: 18,
|
|
boxShadow: '0 12px 28px rgba(15, 23, 42, 0.045)',
|
|
marginBottom: 14
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
<span style={{ fontSize: 13, color: 'var(--color-text-secondary)', fontWeight: 600 }}>
|
|
商品分类
|
|
</span>
|
|
{categories.map((c) => (
|
|
<Button
|
|
key={c.id}
|
|
size="small"
|
|
type={c.id === categoryId ? 'primary' : 'default'}
|
|
style={{ borderRadius: 999 }}
|
|
onClick={() => {
|
|
setPage(1);
|
|
setCategoryId(c.id);
|
|
}}
|
|
>
|
|
{c.name}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
|
|
{!!announcement && (
|
|
<Alert
|
|
type="info"
|
|
showIcon
|
|
message={
|
|
<span style={{ fontWeight: 600 }}>
|
|
{announcement.title}
|
|
</span>
|
|
}
|
|
description={announcement.content}
|
|
style={{ borderRadius: 18, marginBottom: 14 }}
|
|
/>
|
|
)}
|
|
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.55fr) minmax(0, 1fr)', gap: 14, marginBottom: 16 }}>
|
|
<div
|
|
style={{
|
|
borderRadius: 22,
|
|
padding: 22,
|
|
border: '1px solid rgba(236, 72, 153, 0.22)',
|
|
background: 'linear-gradient(135deg, rgba(236, 72, 153, 0.16) 0%, rgba(59, 130, 246, 0.16) 60%, rgba(34, 197, 94, 0.12) 100%)',
|
|
boxShadow: '0 12px 30px rgba(15, 23, 42, 0.05)',
|
|
minHeight: 176,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between'
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
|
|
<div>
|
|
<div style={{ fontSize: 22, fontWeight: 800, color: 'var(--color-text)', marginBottom: 4 }}>
|
|
{banner?.title || '本期活动'}
|
|
</div>
|
|
<div style={{ fontSize: 14, color: 'var(--color-text-secondary)' }}>
|
|
{banner?.subtitle || 'Up to 25% Off'}
|
|
</div>
|
|
</div>
|
|
<Button type="primary" style={{ borderRadius: 12, height: 40, fontWeight: 600 }}>
|
|
查看活动
|
|
</Button>
|
|
</div>
|
|
<div style={{ fontSize: 12.5, color: 'var(--color-text-tertiary)' }}>
|
|
banner 图片与跳转链接由后端配置
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: 'grid', gridTemplateRows: 'repeat(2, minmax(0, 1fr))', gap: 14 }}>
|
|
{promoEntries.slice(0, 2).map((p) => (
|
|
<div
|
|
key={p.id}
|
|
style={{
|
|
borderRadius: 22,
|
|
padding: 18,
|
|
border: '1px solid var(--color-border)',
|
|
background: 'linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(252,252,253,1) 100%)',
|
|
boxShadow: '0 10px 28px rgba(15, 23, 42, 0.04)',
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
gap: 12,
|
|
alignItems: 'center'
|
|
}}
|
|
>
|
|
<div style={{ minWidth: 0 }}>
|
|
<div style={{ fontSize: 16, fontWeight: 800, color: 'var(--color-text)', marginBottom: 4 }}>
|
|
{p.title}
|
|
</div>
|
|
<div style={{ fontSize: 12.5, color: 'var(--color-text-secondary)' }}>
|
|
{p.subtitle}
|
|
</div>
|
|
</div>
|
|
<Button size="small" style={{ borderRadius: 999 }}>进入</Button>
|
|
</div>
|
|
))}
|
|
{promoEntries.length < 2 && (
|
|
<div
|
|
style={{
|
|
borderRadius: 22,
|
|
padding: 18,
|
|
border: '1px dashed var(--color-border)',
|
|
background: 'var(--color-surface)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: 'var(--color-text-tertiary)'
|
|
}}
|
|
>
|
|
促销入口由后端配置
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<Card style={{ borderRadius: 22, boxShadow: '0 12px 28px rgba(15, 23, 42, 0.045)' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap', marginBottom: 14 }}>
|
|
<Space size={10} wrap>
|
|
<Input
|
|
value={q}
|
|
onChange={(e) => {
|
|
setPage(1);
|
|
setQ(e.target.value);
|
|
}}
|
|
prefix={<SearchOutlined />}
|
|
placeholder="搜索商品"
|
|
allowClear
|
|
style={{ width: 260, borderRadius: 12 }}
|
|
/>
|
|
<Select
|
|
value={sort}
|
|
style={{ width: 160 }}
|
|
onChange={(v) => {
|
|
setPage(1);
|
|
setSort(v);
|
|
}}
|
|
options={sortOptions}
|
|
/>
|
|
<Select
|
|
value={pageSize}
|
|
style={{ width: 140 }}
|
|
onChange={(v) => {
|
|
setPage(1);
|
|
setPageSize(v);
|
|
}}
|
|
options={[
|
|
{ value: 12, label: '每页 12' },
|
|
{ value: 24, label: '每页 24' },
|
|
{ value: 48, label: '每页 48' }
|
|
]}
|
|
/>
|
|
</Space>
|
|
<div style={{ fontSize: 12.5, color: 'var(--color-text-secondary)' }}>
|
|
共 {total.toLocaleString()} 件商品
|
|
</div>
|
|
</div>
|
|
|
|
{productsLoading ? (
|
|
<Spin style={{ marginTop: 40, display: 'block' }} />
|
|
) : products.length === 0 ? (
|
|
<Empty description="暂无商品" style={{ marginTop: 60 }} />
|
|
) : (
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 14 }}>
|
|
{products.map((p) => (
|
|
<div
|
|
key={p.id}
|
|
style={{
|
|
borderRadius: 20,
|
|
border: '1px solid rgba(148, 163, 184, 0.14)',
|
|
background: 'linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(252,252,253,1) 100%)',
|
|
boxShadow: '0 10px 28px rgba(15, 23, 42, 0.045)',
|
|
overflow: 'hidden',
|
|
display: 'flex',
|
|
flexDirection: 'column'
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
height: 156,
|
|
background: 'linear-gradient(135deg, rgba(8,145,178,0.12) 0%, rgba(59,130,246,0.10) 55%, rgba(34,197,94,0.10) 100%)'
|
|
}}
|
|
/>
|
|
<div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'flex-start' }}>
|
|
<div style={{ minWidth: 0 }}>
|
|
<div style={{ fontSize: 15, fontWeight: 800, color: 'var(--color-text)', marginBottom: 4, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
|
{p.name}
|
|
</div>
|
|
<div style={{ fontSize: 12.5, color: 'var(--color-text-secondary)', lineHeight: 1.5, minHeight: 36 }}>
|
|
{p.subtitle}
|
|
</div>
|
|
</div>
|
|
{p.tags?.length ? (
|
|
<Tag bordered={false} style={{ margin: 0, borderRadius: 999, background: 'var(--color-warning-soft)', color: 'var(--color-warning)' }}>
|
|
{p.tags[0]}
|
|
</Tag>
|
|
) : null}
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 10 }}>
|
|
<div>
|
|
<span style={{ fontSize: 18, fontWeight: 900, color: 'var(--color-text)' }}>
|
|
{Number(p.pointsPrice).toLocaleString()}
|
|
</span>
|
|
<span style={{ marginLeft: 6, fontSize: 12.5, color: 'var(--color-text-secondary)' }}>积分</span>
|
|
</div>
|
|
<Button type="primary" style={{ borderRadius: 12, height: 34, fontWeight: 700 }}>
|
|
兑换
|
|
</Button>
|
|
</div>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, fontSize: 12, color: 'var(--color-text-tertiary)' }}>
|
|
<span>库存 {p.stock}</span>
|
|
<span>已兑 {p.sold}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{!!productsRes && (
|
|
<div style={{ display: 'flex', justifyContent: 'center', marginTop: 18 }}>
|
|
<Space size={10}>
|
|
<Button disabled={page <= 1} onClick={() => setPage((v) => Math.max(1, v - 1))} style={{ borderRadius: 10 }}>
|
|
上一页
|
|
</Button>
|
|
<Tag bordered={false} style={{ margin: 0, borderRadius: 999, background: 'var(--color-surface-2)', color: 'var(--color-text-secondary)' }}>
|
|
第 {page} 页
|
|
</Tag>
|
|
<Button
|
|
disabled={page * pageSize >= total}
|
|
onClick={() => setPage((v) => v + 1)}
|
|
style={{ borderRadius: 10 }}
|
|
>
|
|
下一页
|
|
</Button>
|
|
</Space>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|