|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import React from 'react'; |
|
|
import { Tag, Button, Space, Popover, Dropdown } from '@douyinfe/semi-ui'; |
|
|
import { IconMore } from '@douyinfe/semi-icons'; |
|
|
import { renderQuota, timestamp2string } from '../../../helpers'; |
|
|
import { |
|
|
REDEMPTION_STATUS, |
|
|
REDEMPTION_STATUS_MAP, |
|
|
REDEMPTION_ACTIONS, |
|
|
} from '../../../constants/redemption.constants'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export const isExpired = (record) => { |
|
|
return ( |
|
|
record.status === REDEMPTION_STATUS.UNUSED && |
|
|
record.expired_time !== 0 && |
|
|
record.expired_time < Math.floor(Date.now() / 1000) |
|
|
); |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const renderTimestamp = (timestamp) => { |
|
|
return <>{timestamp2string(timestamp)}</>; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const renderStatus = (status, record, t) => { |
|
|
if (isExpired(record)) { |
|
|
return ( |
|
|
<Tag color='orange' shape='circle'> |
|
|
{t('已过期')} |
|
|
</Tag> |
|
|
); |
|
|
} |
|
|
|
|
|
const statusConfig = REDEMPTION_STATUS_MAP[status]; |
|
|
if (statusConfig) { |
|
|
return ( |
|
|
<Tag color={statusConfig.color} shape='circle'> |
|
|
{t(statusConfig.text)} |
|
|
</Tag> |
|
|
); |
|
|
} |
|
|
|
|
|
return ( |
|
|
<Tag color='black' shape='circle'> |
|
|
{t('未知状态')} |
|
|
</Tag> |
|
|
); |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export const getRedemptionsColumns = ({ |
|
|
t, |
|
|
manageRedemption, |
|
|
copyText, |
|
|
setEditingRedemption, |
|
|
setShowEdit, |
|
|
refresh, |
|
|
redemptions, |
|
|
activePage, |
|
|
showDeleteRedemptionModal, |
|
|
}) => { |
|
|
return [ |
|
|
{ |
|
|
title: t('ID'), |
|
|
dataIndex: 'id', |
|
|
}, |
|
|
{ |
|
|
title: t('名称'), |
|
|
dataIndex: 'name', |
|
|
}, |
|
|
{ |
|
|
title: t('状态'), |
|
|
dataIndex: 'status', |
|
|
key: 'status', |
|
|
render: (text, record) => { |
|
|
return <div>{renderStatus(text, record, t)}</div>; |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
title: t('额度'), |
|
|
dataIndex: 'quota', |
|
|
render: (text) => { |
|
|
return ( |
|
|
<div> |
|
|
<Tag color='grey' shape='circle'> |
|
|
{renderQuota(parseInt(text))} |
|
|
</Tag> |
|
|
</div> |
|
|
); |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
title: t('创建时间'), |
|
|
dataIndex: 'created_time', |
|
|
render: (text) => { |
|
|
return <div>{renderTimestamp(text)}</div>; |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
title: t('过期时间'), |
|
|
dataIndex: 'expired_time', |
|
|
render: (text) => { |
|
|
return <div>{text === 0 ? t('永不过期') : renderTimestamp(text)}</div>; |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
title: t('兑换人ID'), |
|
|
dataIndex: 'used_user_id', |
|
|
render: (text) => { |
|
|
return <div>{text === 0 ? t('无') : text}</div>; |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
title: '', |
|
|
dataIndex: 'operate', |
|
|
fixed: 'right', |
|
|
width: 205, |
|
|
render: (text, record) => { |
|
|
|
|
|
const moreMenuItems = [ |
|
|
{ |
|
|
node: 'item', |
|
|
name: t('删除'), |
|
|
type: 'danger', |
|
|
onClick: () => { |
|
|
showDeleteRedemptionModal(record); |
|
|
}, |
|
|
}, |
|
|
]; |
|
|
|
|
|
if (record.status === REDEMPTION_STATUS.UNUSED && !isExpired(record)) { |
|
|
moreMenuItems.push({ |
|
|
node: 'item', |
|
|
name: t('禁用'), |
|
|
type: 'warning', |
|
|
onClick: () => { |
|
|
manageRedemption(record.id, REDEMPTION_ACTIONS.DISABLE, record); |
|
|
}, |
|
|
}); |
|
|
} else if (!isExpired(record)) { |
|
|
moreMenuItems.push({ |
|
|
node: 'item', |
|
|
name: t('启用'), |
|
|
type: 'secondary', |
|
|
onClick: () => { |
|
|
manageRedemption(record.id, REDEMPTION_ACTIONS.ENABLE, record); |
|
|
}, |
|
|
disabled: record.status === REDEMPTION_STATUS.USED, |
|
|
}); |
|
|
} |
|
|
|
|
|
return ( |
|
|
<Space> |
|
|
<Popover |
|
|
content={record.key} |
|
|
style={{ padding: 20 }} |
|
|
position='top' |
|
|
> |
|
|
<Button type='tertiary' size='small'> |
|
|
{t('查看')} |
|
|
</Button> |
|
|
</Popover> |
|
|
<Button |
|
|
size='small' |
|
|
onClick={async () => { |
|
|
await copyText(record.key); |
|
|
}} |
|
|
> |
|
|
{t('复制')} |
|
|
</Button> |
|
|
<Button |
|
|
type='tertiary' |
|
|
size='small' |
|
|
onClick={() => { |
|
|
setEditingRedemption(record); |
|
|
setShowEdit(true); |
|
|
}} |
|
|
disabled={record.status !== REDEMPTION_STATUS.UNUSED} |
|
|
> |
|
|
{t('编辑')} |
|
|
</Button> |
|
|
<Dropdown |
|
|
trigger='click' |
|
|
position='bottomRight' |
|
|
menu={moreMenuItems} |
|
|
> |
|
|
<Button type='tertiary' size='small' icon={<IconMore />} /> |
|
|
</Dropdown> |
|
|
</Space> |
|
|
); |
|
|
}, |
|
|
}, |
|
|
]; |
|
|
}; |
|
|
|