存客宝 React
This commit is contained in:
柳清爽
193
Cunkebao/app/workspace/group-push/[id]/edit/page.tsx
Normal file
193
Cunkebao/app/workspace/group-push/[id]/edit/page.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { StepIndicator } from "../../components/step-indicator"
|
||||
import { MessageEditor } from "../../components/message-editor"
|
||||
import { FriendSelector } from "../../components/friend-selector"
|
||||
import { ArrowLeft, ArrowRight, Check, Loader2 } from "lucide-react"
|
||||
import { useToast } from "@/components/ui/use-toast"
|
||||
|
||||
const steps = ["推送信息", "选择好友"]
|
||||
|
||||
// 模拟数据
|
||||
const mockPushTasks = {
|
||||
"1": {
|
||||
id: "1",
|
||||
name: "618活动推广消息",
|
||||
content: {
|
||||
text: "618年中大促，全场商品5折起！限时抢购，先到先得！",
|
||||
images: ["/placeholder.svg?height=200&width=200"],
|
||||
video: null,
|
||||
link: "https://example.com/618",
|
||||
},
|
||||
selectedFriends: ["1", "3", "5"],
|
||||
pushTime: "2025-06-18 10:00:00",
|
||||
progress: 100,
|
||||
status: "已完成",
|
||||
},
|
||||
"2": {
|
||||
id: "2",
|
||||
name: "新品上市通知",
|
||||
content: {
|
||||
text: "我们的新产品已经上市，快来体验吧！",
|
||||
images: [],
|
||||
video: "/placeholder.svg?height=400&width=400",
|
||||
link: null,
|
||||
},
|
||||
selectedFriends: ["2", "4", "6", "8"],
|
||||
pushTime: "2025-03-25 09:30:00",
|
||||
progress: 75,
|
||||
status: "进行中",
|
||||
},
|
||||
}
|
||||
|
||||
export default function EditPushPage({ params }: { params: { id: string } }) {
|
||||
const router = useRouter()
|
||||
const { toast } = useToast()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [currentStep, setCurrentStep] = useState(0)
|
||||
const [taskName, setTaskName] = useState("")
|
||||
const [messageContent, setMessageContent] = useState({
|
||||
text: "",
|
||||
images: [],
|
||||
video: null,
|
||||
link: null,
|
||||
})
|
||||
const [selectedFriends, setSelectedFriends] = useState<string[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
// 模拟加载数据
|
||||
setTimeout(() => {
|
||||
const task = mockPushTasks[params.id as keyof typeof mockPushTasks]
|
||||
if (task) {
|
||||
setTaskName(task.name)
|
||||
setMessageContent(task.content)
|
||||
setSelectedFriends(task.selectedFriends)
|
||||
}
|
||||
setLoading(false)
|
||||
}, 500)
|
||||
}, [params.id])
|
||||
|
||||
const handleNext = () => {
|
||||
if (currentStep === 0) {
|
||||
// 验证第一步
|
||||
if (!taskName.trim()) {
|
||||
toast({
|
||||
title: "请输入任务名称",
|
||||
variant: "destructive",
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (!messageContent.text && messageContent.images.length === 0 && !messageContent.video && !messageContent.link) {
|
||||
toast({
|
||||
title: "请添加至少一种消息内容",
|
||||
variant: "destructive",
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
setCurrentStep((prev) => prev + 1)
|
||||
}
|
||||
|
||||
const handlePrevious = () => {
|
||||
setCurrentStep((prev) => prev - 1)
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (selectedFriends.length === 0) {
|
||||
toast({
|
||||
title: "请选择至少一个好友",
|
||||
variant: "destructive",
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 模拟提交
|
||||
toast({
|
||||
title: "推送任务更新成功",
|
||||
description: `已更新推送任务 "${taskName}"`,
|
||||
})
|
||||
|
||||
// 跳转回列表页
|
||||
router.push("/workspace/group-push")
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="container mx-auto py-6 flex justify-center items-center min-h-[60vh]">
|
||||
<div className="flex flex-col items-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
|
||||
<p className="mt-2 text-gray-500">加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-6">
|
||||
{/* 顶部导航栏 */}
|
||||
<div className="flex items-center justify-between mb-6 relative">
|
||||
<Button variant="ghost" size="icon" onClick={() => router.push("/workspace/group-push")} className="mr-auto">
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<h1 className="text-2xl font-bold absolute left-1/2 transform -translate-x-1/2">编辑推送</h1>
|
||||
<div className="w-10"></div> {/* 占位元素，保持标题居中 */}
|
||||
</div>
|
||||
|
||||
<StepIndicator currentStep={currentStep} steps={steps} />
|
||||
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
{currentStep === 0 ? (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<Label htmlFor="task-name">任务名称</Label>
|
||||
<Input
|
||||
id="task-name"
|
||||
placeholder="请输入任务名称"
|
||||
value={taskName}
|
||||
onChange={(e) => setTaskName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>消息内容</Label>
|
||||
<MessageEditor onMessageChange={setMessageContent} defaultValues={messageContent} />
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={handleNext}>
|
||||
下一步
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<FriendSelector onSelectionChange={setSelectedFriends} defaultSelectedFriendIds={selectedFriends} />
|
||||
|
||||
<div className="flex justify-between">
|
||||
<Button variant="outline" onClick={handlePrevious}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={handleSubmit}>
|
||||
<Check className="mr-2 h-4 w-4" />
|
||||
确认
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user