88 lines
3.5 KiB
JavaScript
88 lines
3.5 KiB
JavaScript
import EditOutlined from "@mui/icons-material/EditOutlined";
|
|
import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
|
|
import { Button } from "@/shared/ui/Button.jsx";
|
|
import styles from "@/features/invite-activity-reward/invite-activity-reward.module.css";
|
|
|
|
export function InviteActivityRewardConfigSummary({ canUpdate, config, configLoading, onEdit, onRefresh }) {
|
|
const tiers = config?.tiers || [];
|
|
const activeTiers = tiers.filter((tier) => tier.status === "active");
|
|
const rechargeTiers = activeTiers.filter((tier) => tier.rewardType === "recharge");
|
|
const validInviteTiers = activeTiers.filter((tier) => tier.rewardType === "valid_invite");
|
|
|
|
return (
|
|
<div className={styles.summaryPanel}>
|
|
<div className={styles.summaryItems}>
|
|
<SummaryItem label="状态">
|
|
<span
|
|
className={[
|
|
styles.statusBadge,
|
|
config?.enabled ? styles.statusActive : styles.statusInactive,
|
|
].join(" ")}
|
|
>
|
|
{config?.enabled ? "启用" : "停用"}
|
|
</span>
|
|
</SummaryItem>
|
|
<SummaryItem label="累计充值档位">
|
|
{thresholdSummary(rechargeTiers, "thresholdCoinAmount", "金币")}
|
|
</SummaryItem>
|
|
<SummaryItem label="Valid Users Tiers">
|
|
{thresholdSummary(validInviteTiers, "thresholdValidInviteCount", "people")}
|
|
</SummaryItem>
|
|
<SummaryItem label="邀请人即时奖励">
|
|
{coinSummary(config?.perInviteInviterRewardCoinAmount)}
|
|
</SummaryItem>
|
|
<SummaryItem label="被邀请人即时奖励">
|
|
{coinSummary(config?.perInviteInviteeRewardCoinAmount)}
|
|
</SummaryItem>
|
|
<SummaryItem label="奖励">{thresholdSummary(activeTiers, "rewardCoinAmount", "金币")}</SummaryItem>
|
|
</div>
|
|
<div className={styles.summaryActions}>
|
|
<Button disabled={configLoading} startIcon={<RefreshOutlined fontSize="small" />} onClick={onRefresh}>
|
|
刷新
|
|
</Button>
|
|
{canUpdate ? (
|
|
<Button
|
|
disabled={configLoading}
|
|
startIcon={<EditOutlined fontSize="small" />}
|
|
variant="primary"
|
|
onClick={onEdit}
|
|
>
|
|
编辑配置
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SummaryItem({ children, label }) {
|
|
return (
|
|
<div className={styles.summaryItem}>
|
|
<span className={styles.summaryLabel}>{label}</span>
|
|
<span className={styles.summaryValue}>{children}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function thresholdSummary(tiers, field, unit) {
|
|
if (!tiers.length) {
|
|
return "-";
|
|
}
|
|
const values = tiers.map((tier) => Number(tier[field] || 0)).filter((value) => value > 0);
|
|
if (!values.length) {
|
|
return "-";
|
|
}
|
|
const min = Math.min(...values);
|
|
const max = Math.max(...values);
|
|
return min === max ? `${formatNumber(min)} ${unit}` : `${formatNumber(min)} - ${formatNumber(max)} ${unit}`;
|
|
}
|
|
|
|
function coinSummary(value) {
|
|
const amount = Number(value || 0);
|
|
return amount > 0 ? `${formatNumber(amount)} 金币` : "-";
|
|
}
|
|
|
|
function formatNumber(value) {
|
|
return new Intl.NumberFormat("zh-CN").format(Number(value || 0));
|
|
}
|