46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Tabs } from 'antd';
|
|
import { useSearchParams } from 'react-router-dom';
|
|
import CreditRecordsPage from './CreditRecordsPage';
|
|
import OrderRecordsPage from './OrderRecordsPage';
|
|
|
|
const UserCenterPage: React.FC = () => {
|
|
const [searchParams] = useSearchParams();
|
|
const [activeTab, setActiveTab] = useState('credits');
|
|
|
|
useEffect(() => {
|
|
const tab = searchParams.get('tab') || 'credits';
|
|
if (tab === 'orders') {
|
|
setActiveTab('orders');
|
|
} else {
|
|
setActiveTab('credits');
|
|
}
|
|
}, [searchParams]);
|
|
|
|
const tabs = [
|
|
{
|
|
key: 'credits',
|
|
label: '积分明细',
|
|
},
|
|
{
|
|
key: 'orders',
|
|
label: '订单记录',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<Tabs
|
|
activeKey={activeTab}
|
|
onChange={setActiveTab}
|
|
items={tabs}
|
|
style={{ marginBottom: 24 }}
|
|
size="large"
|
|
/>
|
|
{activeTab === 'credits' && <CreditRecordsPage />}
|
|
{activeTab === 'orders' && <OrderRecordsPage />}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UserCenterPage; |