Files
users/components/acquisition/PlanSettingsDialog.tsx
v0 2408d50cb0 refactor: overhaul UI for streamlined user experience
Redesign navigation, home overview, user portrait, and valuation pages
with improved functionality and responsive design.

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
2025-07-18 13:47:12 +00:00

153 lines
5.6 KiB
TypeScript

"use client"
import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { toast } from "@/components/ui/use-toast"
import { Copy, QrCode } from "lucide-react"
interface PlanSettingsDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
planId: string
}
export function PlanSettingsDialog({ open, onOpenChange, planId }: PlanSettingsDialogProps) {
const [rewardType, setRewardType] = useState<"disabled" | "onSubmit" | "onApprove">("onSubmit")
const [rewardAmount, setRewardAmount] = useState("5.00")
const [selectedWorker, setSelectedWorker] = useState("")
// 生成订单填写链接
const orderFormUrl =
typeof window !== "undefined" ? `${window.location.origin}/orders/submit/${planId}` : `/orders/submit/${planId}`
const handleCopyLink = (url: string) => {
if (typeof navigator !== "undefined") {
navigator.clipboard.writeText(url)
toast({
title: "链接已复制",
description: "已将链接复制到剪贴板",
})
}
}
const handleSave = () => {
// 这里添加保存设置的逻辑
toast({
title: "设置已保存",
description: "获客计划设置已更新",
})
onOpenChange(false)
}
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle></DialogTitle>
</DialogHeader>
<div className="space-y-6">
<div className="space-y-4">
<Label></Label>
<RadioGroup value={rewardType} onValueChange={(value: any) => setRewardType(value)}>
<div className="flex items-center space-x-2">
<RadioGroupItem value="disabled" id="disabled" />
<Label htmlFor="disabled"></Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="onSubmit" id="onSubmit" />
<Label htmlFor="onSubmit"></Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="onApprove" id="onApprove" />
<Label htmlFor="onApprove"></Label>
</div>
</RadioGroup>
</div>
<div className="space-y-2">
<Label></Label>
<div className="flex items-center space-x-2">
<Button
variant="outline"
size="icon"
onClick={() => setRewardAmount((prev) => (Number(prev) - 1).toFixed(2))}
>
-
</Button>
<Input
type="number"
value={rewardAmount}
onChange={(e) => setRewardAmount(e.target.value)}
className="w-24 text-center"
step="0.01"
/>
<Button
variant="outline"
size="icon"
onClick={() => setRewardAmount((prev) => (Number(prev) + 1).toFixed(2))}
>
+
</Button>
<span className="text-gray-500"></span>
</div>
</div>
<div className="space-y-2">
<Label></Label>
<div className="flex space-x-2">
<Select value={selectedWorker} onValueChange={setSelectedWorker}>
<SelectTrigger className="flex-1">
<SelectValue placeholder="请选择" />
</SelectTrigger>
<SelectContent>
<SelectItem value="worker1"></SelectItem>
<SelectItem value="worker2"></SelectItem>
<SelectItem value="worker3"></SelectItem>
<SelectItem value="worker4"></SelectItem>
<SelectItem value="worker5"></SelectItem>
</SelectContent>
</Select>
<Button variant="outline"></Button>
</div>
</div>
<div className="space-y-2">
<Label>Web入口</Label>
<div className="flex items-center space-x-2">
<Input value={orderFormUrl} readOnly />
<Button variant="outline" size="icon" onClick={() => handleCopyLink(orderFormUrl)}>
<Copy className="h-4 w-4" />
</Button>
</div>
</div>
<div className="space-y-2">
<Label></Label>
<div className="flex flex-col items-center p-4 border rounded-md">
<QrCode className="w-32 h-32 text-gray-400 mb-2" />
<p className="text-sm text-gray-500 text-center">访</p>
<Button variant="outline" size="sm" className="mt-2" onClick={() => handleCopyLink(orderFormUrl)}>
<Copy className="h-4 w-4 mr-2" />
</Button>
</div>
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)}>
</Button>
<Button onClick={handleSave}></Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}