- react中，使用antd的Tabs标签页组件，tabs中的代码在页面不显示
- tabkey === 0或1时，后面的组件都没有显示。
const { TabPane } = Tabs;
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
const storeType = {
0: 'B2B 批发店铺',
1: 'B2C 零售店铺',
};
export default function StoreSelect() {
const navigate = useNavigate();
const { t } = useTranslation();
const [tabkey, setTabKey] = useState(0);
const [storeList, setStoreList] = useState([]);
const activeList = storeList.filter((a) => a.status == 0);
const DeactivateList = storeList.filter((a) => a.status == 1);
useEffect(() => {
fetchGetShopList().then((res) => {
setStoreList(res);
});
}, [tabkey]);
const onBack = () => {
navigate('/');
};
const handleSetTab = (e, newValue) => {
console.log('handleSetTab', e);
setValue(newValue);
};
const handleTab = (item) => {
setTabKey(+item);
};
const tabItems = [
{
key: '0',
label:'活跃',
},
{
key: '1',
label:'停用',
},
];
return (
<>
{!storeList && (
<Progress
strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }}
className={styles.pros}
/>
)}
<Row className={styles.root}>
<Col span={10} className={styles.container}>
<div className={styles.paper}>
<div className={styles.logo}>
<img src={logo} width={200} height={42} alt="" />
</div>
<div className={styles.header}>
<Typography.Title level={3} style={{ fontWeight: 500 }}>
<Button
shape="circle"
type="text"
className={styles.iconButton}
icon={<ArrowLeftOutlined />}
onClick={onBack}
/>
{t('store.title')}
</Typography.Title>
<Button
size="large"
type="primary"
onClick={() => navigate('/create-store-type')}
>
{t('store.shop')}
</Button>
</div>
{storeList.length < 1 ? (
<Alert
type="info"
message="您暂无店铺"
description="如需，请点击创建其他店铺"
showIcon
style={{
marginTop: '20px',
height: '150px',
padding: '30px 0 0 20px',
}}
/>
) : (
<Tabs
activeKey={'' + tabkey}
items={tabItems}
onTabClick={(e) => handleTab(e)}
size="large"
>
{tabkey === 0 && (
<div>
{storeList === null ? (
<div className={styles.loading}>
<Spin indicator={antIcon} />
</div>
) : storeList ? (
<>
<List>
{activeList.map((item) => {
const p: any = {};
if (item.status == 0 && item.shopDomain) {
p.href =
'http://' +
item.shopDomain +
'/admin/auth/login';
}
<List.Item key={item.sid} className={styles.item}>
<div className={styles.title}>
<div
style={{
fontSize: 23,
color: '#757575',
marginRight: 25,
}}
>
<BankOutlined />
</div>
<div className={styles.listBody}>
<Card
title={
<Typography.Title
level={4}
style={{ fontWeight: 500 }}
>
{item?.name}
</Typography.Title>
}
>
<div className={styles.sub}>
{item?.shopType == 1 && (
<Chip
label={t('erp.administrator')}
size="small"
variant="outlined"
className={styles.chip}
/>
)}
{storeType[item?.shopType]}
</div>
<div style={{ color: '#008060' }}>
{item?.shopDomain}
</div>
</Card>
</div>
</div>
<Button>
<span
style={{
fontSize: '14px',
margin: '0 10px 0 0',
}}
>
{item.status == 1
? t('erp.under-review')
: ''}
</span>
{item.status == 1 ? <></> : <RightOutlined />}
</Button>
</List.Item>
})}
</List>
</>
) : (
<Alert type="error" showIcon description={t('erp.tip2')}>
{/* {t('erp.tip2')} */}
</Alert>
)}
</div>
)}
{tabkey === 1 && (
<div>
{storeList === null ? (
<div className={styles.loading}>
<Spin indicator={antIcon} />
</div>
) : storeList ? (
<>
<List>
{DeactivateList.map((item) => {
const p: any = {};
if (item.status == 0 && item.shopDomain) {
p.href = 'http://' + item.shopDomain;
}
<List.Item key={item.sid} className={styles.item}>
<div className={styles.title}>
<div
style={{
fontSize: 23,
color: '#757575',
marginRight: 25,
}}
>
<BankOutlined />
</div>
<div className={styles.listBody}>
<Card
title={
<Typography.Title
level={4}
style={{ fontWeight: 500 }}
>
{item?.contacts}
</Typography.Title>
}
>
<div className={styles.sub}>
{item?.shopType == 1 && (
<Chip
label={t('erp.administrator')}
size="small"
variant="outlined"
className={styles.chip}
/>
)}
{storeType[item?.shopType]}
</div>
<div style={{ color: '#008060' }}>
{item?.shopDomain}
</div>
</Card>
</div>
</div>
<Button>
<span
style={{
fontSize: '14px',
margin: '0 10px 0 0',
}}
>
{item.status == 0
? t('erp.under-review')
: ''}
</span>
{item.status == 0 ? <></> : <RightOutlined />}
</Button>
</List.Item>
})}
</List>
</>
) : (
<Alert
type="error"
showIcon
description={t('erp.tip2')}
></Alert>
)}
</div>
)}
{/* </> */}
</Tabs>
)}
</div>
</Col>
<Col span={14} className="bg-image" />
</Row>
</>
);
}
