238 lines
11 KiB
JavaScript
238 lines
11 KiB
JavaScript
import AddOutlined from "@mui/icons-material/AddOutlined";
|
|
import SaveOutlined from "@mui/icons-material/SaveOutlined";
|
|
import Drawer from "@mui/material/Drawer";
|
|
import MenuItem from "@mui/material/MenuItem";
|
|
import TextField from "@mui/material/TextField";
|
|
import { AdminSwitch } from "@/shared/ui/AdminSwitch.jsx";
|
|
import { Button } from "@/shared/ui/Button.jsx";
|
|
import { RewardTierEditorTable } from "@/shared/ui/RewardTierEditorTable.jsx";
|
|
import styles from "@/features/invite-activity-reward/invite-activity-reward.module.css";
|
|
|
|
const rewardTypeOptions = [
|
|
["recharge", "累计充值"],
|
|
["valid_invite", "Valid Users"],
|
|
];
|
|
|
|
export function InviteActivityRewardConfigDrawer({
|
|
abilities,
|
|
configLoading,
|
|
configSaving,
|
|
form,
|
|
onClose,
|
|
onSubmit,
|
|
open,
|
|
setForm,
|
|
}) {
|
|
const disabled = !abilities.canUpdate || configLoading || configSaving;
|
|
|
|
const addTier = () => {
|
|
setForm((current) => ({
|
|
...current,
|
|
tiers: [
|
|
...(current.tiers || []),
|
|
{
|
|
tierId: 0,
|
|
rewardType: "recharge",
|
|
tierCode: `invite_reward_${Date.now()}_${(current.tiers || []).length + 1}`,
|
|
tierName: "",
|
|
thresholdCoinAmount: "",
|
|
thresholdValidInviteCount: "",
|
|
rewardCoinAmount: "",
|
|
status: "active",
|
|
sortOrder: String((current.tiers || []).length),
|
|
},
|
|
],
|
|
}));
|
|
};
|
|
|
|
const updateTier = (index, patch) => {
|
|
setForm((current) => ({
|
|
...current,
|
|
tiers: (current.tiers || []).map((tier, tierIndex) => (tierIndex === index ? { ...tier, ...patch } : tier)),
|
|
}));
|
|
};
|
|
|
|
const removeTier = (index) => {
|
|
setForm((current) => ({
|
|
...current,
|
|
tiers: (current.tiers || []).filter((_, tierIndex) => tierIndex !== index),
|
|
}));
|
|
};
|
|
|
|
return (
|
|
<Drawer anchor="right" open={open} onClose={configSaving ? undefined : onClose}>
|
|
<form className="form-drawer form-drawer--activity-config" onSubmit={onSubmit}>
|
|
<h2>邀请活动配置</h2>
|
|
<div className="form-drawer__content">
|
|
<section className="form-drawer__section">
|
|
<div className="form-drawer__section-title">活动状态</div>
|
|
<AdminSwitch
|
|
checked={form.enabled}
|
|
checkedLabel="开启"
|
|
disabled={disabled}
|
|
label="邀请活动状态"
|
|
uncheckedLabel="关闭"
|
|
onChange={(event) => setForm((current) => ({ ...current, enabled: event.target.checked }))}
|
|
/>
|
|
</section>
|
|
<section className="form-drawer__section">
|
|
<div className="form-drawer__section-title">每邀请一人奖励</div>
|
|
<div className={styles.inlineFields}>
|
|
<TextField
|
|
disabled={disabled}
|
|
inputProps={{ min: 0, step: 1 }}
|
|
label="邀请人获得金币"
|
|
placeholder="0"
|
|
type="number"
|
|
value={form.perInviteInviterRewardCoinAmount || ""}
|
|
onChange={(event) =>
|
|
setForm((current) => ({
|
|
...current,
|
|
perInviteInviterRewardCoinAmount: event.target.value,
|
|
}))
|
|
}
|
|
/>
|
|
<TextField
|
|
disabled={disabled}
|
|
inputProps={{ min: 0, step: 1 }}
|
|
label="被邀请人获得金币"
|
|
placeholder="0"
|
|
type="number"
|
|
value={form.perInviteInviteeRewardCoinAmount || ""}
|
|
onChange={(event) =>
|
|
setForm((current) => ({
|
|
...current,
|
|
perInviteInviteeRewardCoinAmount: event.target.value,
|
|
}))
|
|
}
|
|
/>
|
|
</div>
|
|
</section>
|
|
<section className="form-drawer__section">
|
|
<div className={styles.drawerSectionTitle}>
|
|
<span>奖励档位</span>
|
|
<Button
|
|
disabled={disabled}
|
|
startIcon={<AddOutlined fontSize="small" />}
|
|
type="button"
|
|
onClick={addTier}
|
|
>
|
|
添加档位
|
|
</Button>
|
|
</div>
|
|
<RewardTierEditorTable
|
|
columns={[
|
|
{
|
|
key: "tier",
|
|
label: "档位",
|
|
render: (_tier, index) => (
|
|
<span className="reward-tier-editor-table__index">档位 {index + 1}</span>
|
|
),
|
|
},
|
|
{
|
|
key: "rewardType",
|
|
label: "类型",
|
|
render: (tier, index) => (
|
|
<TextField
|
|
select
|
|
disabled={disabled}
|
|
value={tier.rewardType || "recharge"}
|
|
onChange={(event) => updateTier(index, { rewardType: event.target.value })}
|
|
>
|
|
{rewardTypeOptions.map(([value, label]) => (
|
|
<MenuItem key={value} value={value}>
|
|
{label}
|
|
</MenuItem>
|
|
))}
|
|
</TextField>
|
|
),
|
|
},
|
|
{
|
|
key: "threshold",
|
|
label: "门槛",
|
|
render: (tier, index) => {
|
|
const isRecharge = (tier.rewardType || "recharge") === "recharge";
|
|
return (
|
|
<TextField
|
|
disabled={disabled}
|
|
inputProps={{ min: 1, step: 1 }}
|
|
placeholder={isRecharge ? "80000" : "1"}
|
|
type="number"
|
|
value={
|
|
isRecharge
|
|
? tier.thresholdCoinAmount
|
|
: tier.thresholdValidInviteCount
|
|
}
|
|
onChange={(event) =>
|
|
updateTier(
|
|
index,
|
|
isRecharge
|
|
? { thresholdCoinAmount: event.target.value }
|
|
: { thresholdValidInviteCount: event.target.value },
|
|
)
|
|
}
|
|
/>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
key: "rewardCoinAmount",
|
|
label: "奖励金币",
|
|
render: (tier, index) => (
|
|
<TextField
|
|
disabled={disabled}
|
|
inputProps={{ min: 1, step: 1 }}
|
|
placeholder="1000"
|
|
type="number"
|
|
value={tier.rewardCoinAmount}
|
|
onChange={(event) =>
|
|
updateTier(index, { rewardCoinAmount: event.target.value })
|
|
}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
key: "status",
|
|
label: "状态",
|
|
render: (tier, index) => (
|
|
<AdminSwitch
|
|
checked={tier.status !== "inactive"}
|
|
checkedLabel="启用"
|
|
disabled={disabled}
|
|
label={`档位 ${index + 1} 状态`}
|
|
uncheckedLabel="停用"
|
|
onChange={(event) =>
|
|
updateTier(index, {
|
|
status: event.target.checked ? "active" : "inactive",
|
|
})
|
|
}
|
|
/>
|
|
),
|
|
},
|
|
]}
|
|
disabled={disabled}
|
|
emptyText="暂无档位"
|
|
gridTemplateColumns="72px minmax(130px, 0.7fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr) 120px 52px"
|
|
rows={form.tiers || []}
|
|
onRemoveTier={removeTier}
|
|
/>
|
|
</section>
|
|
</div>
|
|
<div className="form-drawer__actions">
|
|
<Button disabled={configSaving} type="button" onClick={onClose}>
|
|
取消
|
|
</Button>
|
|
<Button
|
|
disabled={disabled}
|
|
startIcon={<SaveOutlined fontSize="small" />}
|
|
type="submit"
|
|
variant="primary"
|
|
>
|
|
保存
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Drawer>
|
|
);
|
|
}
|