plan pages

Cunkebao/app/scenarios/phone/new/components/RedPacketSettings.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+
+interface RedPacketSettingsProps {
+  settings: {
+    enabled: boolean
+    amount: number
+    pool: number
+  }
+  onChange: (settings: any) => void
+}
+
+export function RedPacketSettings({ settings, onChange }: RedPacketSettingsProps) {
+  const handleToggle = (value: boolean) => {
+    onChange({
+      ...settings,
+      enabled: value,
+    })
+  }
+
+  const handleAmountChange = (value: number) => {
+    onChange({
+      ...settings,
+      amount: value,
+    })
+  }
+
+  const handlePoolChange = (value: number) => {
+    onChange({
+      ...settings,
+      pool: value,
+    })
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <Label htmlFor="redpacket">启用红包奖励</Label>
+          <p className="text-xs text-gray-500">加好友成功后自动发红包</p>
+        </div>
+        <Switch id="redpacket" checked={settings.enabled} onCheckedChange={handleToggle} />
+      </div>
+
+      {settings.enabled && (
+        <div className="space-y-3">
+          <div>
+            <Label htmlFor="amount" className="text-sm">
+              单个红包金额（元）
+            </Label>
+            <Input
+              id="amount"
+              type="number"
+              value={settings.amount}
+              onChange={(e) => handleAmountChange(Number(e.target.value))}
+              min="0.01"
+              step="0.01"
+              className="mt-1"
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="pool" className="text-sm">
+              红包池总额（元）
+            </Label>
+            <Input
+              id="pool"
+              type="number"
+              value={settings.pool}
+              onChange={(e) => handlePoolChange(Number(e.target.value))}
+              min="0"
+              className="mt-1"
+            />
+            <p className="text-xs text-gray-500 mt-1">剩余可发：{Math.floor(settings.pool / settings.amount)} 个红包</p>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}