124 lines
5.2 KiB
JavaScript
124 lines
5.2 KiB
JavaScript
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";
|
|
|
|
const rewardTypeOptions = [
|
|
["coin", "金币"],
|
|
["resource_group", "资源组"],
|
|
];
|
|
|
|
export function RegistrationRewardConfigDrawer({
|
|
abilities,
|
|
configLoading,
|
|
configSaving,
|
|
form,
|
|
onClose,
|
|
onSubmit,
|
|
open,
|
|
resourceGroups,
|
|
setForm,
|
|
}) {
|
|
const disabled = !abilities.canUpdate || configLoading || configSaving;
|
|
|
|
return (
|
|
<Drawer anchor="right" open={open} onClose={configSaving ? undefined : onClose}>
|
|
<form className="form-drawer" onSubmit={onSubmit}>
|
|
<h2>注册奖励配置</h2>
|
|
<section className="form-drawer__section">
|
|
<div className="form-drawer__section-title">发放状态</div>
|
|
<div className="form-drawer__grid">
|
|
<AdminSwitch
|
|
checked={form.enabled}
|
|
checkedLabel="开启"
|
|
disabled={disabled}
|
|
label="注册奖励状态"
|
|
uncheckedLabel="关闭"
|
|
onChange={(event) =>
|
|
setForm((current) => ({ ...current, enabled: event.target.checked }))
|
|
}
|
|
/>
|
|
<TextField
|
|
disabled={disabled}
|
|
inputProps={{ min: 0 }}
|
|
label="每日限制份数"
|
|
type="number"
|
|
value={form.dailyLimit}
|
|
onChange={(event) =>
|
|
setForm((current) => ({ ...current, dailyLimit: event.target.value }))
|
|
}
|
|
/>
|
|
</div>
|
|
</section>
|
|
<section className="form-drawer__section">
|
|
<div className="form-drawer__section-title">奖励内容</div>
|
|
<div className="form-drawer__grid">
|
|
<TextField
|
|
select
|
|
disabled={disabled}
|
|
label="奖励类型"
|
|
value={form.rewardType}
|
|
onChange={(event) =>
|
|
setForm((current) => ({ ...current, rewardType: event.target.value }))
|
|
}
|
|
>
|
|
{rewardTypeOptions.map(([value, label]) => (
|
|
<MenuItem key={value} value={value}>
|
|
{label}
|
|
</MenuItem>
|
|
))}
|
|
</TextField>
|
|
{form.rewardType === "resource_group" ? (
|
|
<TextField
|
|
select
|
|
disabled={disabled}
|
|
label="资源组"
|
|
value={form.resourceGroupId}
|
|
onChange={(event) =>
|
|
setForm((current) => ({
|
|
...current,
|
|
resourceGroupId: event.target.value,
|
|
}))
|
|
}
|
|
>
|
|
<MenuItem value="">请选择资源组</MenuItem>
|
|
{resourceGroups.map((group) => (
|
|
<MenuItem key={group.groupId} value={String(group.groupId)}>
|
|
{group.name || group.groupCode || group.groupId}
|
|
</MenuItem>
|
|
))}
|
|
</TextField>
|
|
) : (
|
|
<TextField
|
|
disabled={disabled}
|
|
inputProps={{ min: 1 }}
|
|
label="金币数量"
|
|
type="number"
|
|
value={form.coinAmount}
|
|
onChange={(event) =>
|
|
setForm((current) => ({ ...current, coinAmount: event.target.value }))
|
|
}
|
|
/>
|
|
)}
|
|
</div>
|
|
</section>
|
|
<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>
|
|
);
|
|
}
|