138 lines
4.1 KiB
TypeScript
138 lines
4.1 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { useRouter } from "next/navigation"
|
|
import { ChevronLeft, Settings } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { toast } from "@/components/ui/use-toast"
|
|
import { StepIndicator } from "@/app/components/ui-templates/step-indicator"
|
|
import { BasicSettings } from "./steps/BasicSettings"
|
|
import { FriendRequestSettings } from "./steps/FriendRequestSettings"
|
|
import { MessageSettings } from "./steps/MessageSettings"
|
|
import { api, ApiResponse } from "@/lib/api"
|
|
|
|
// 步骤定义 - 只保留三个步骤
|
|
const steps = [
|
|
{ id: 1, title: "步骤一", subtitle: "基础设置" },
|
|
{ id: 2, title: "步骤二", subtitle: "好友申请设置" },
|
|
{ id: 3, title: "步骤三", subtitle: "消息设置" },
|
|
]
|
|
|
|
export default function NewPlan() {
|
|
const router = useRouter()
|
|
const [currentStep, setCurrentStep] = useState(1)
|
|
const [formData, setFormData] = useState({
|
|
planName: "",
|
|
scenario: "",
|
|
posters: [],
|
|
device: "",
|
|
remarkType: "phone",
|
|
greeting: "你好，请通过",
|
|
addInterval: 1,
|
|
startTime: "09:00",
|
|
endTime: "18:00",
|
|
enabled: true,
|
|
})
|
|
|
|
// 场景数据
|
|
const [scenes, setScenes] = useState<any[]>([])
|
|
const [loadingScenes, setLoadingScenes] = useState(true)
|
|
|
|
useEffect(() => {
|
|
api.get<ApiResponse>("/v1/plan/scenes")
|
|
.then(res => {
|
|
if (res.code === 200 && Array.isArray(res.data)) {
|
|
setScenes(res.data)
|
|
setFormData(prev => ({ ...prev, scenario: prev.scenario || (res.data[0]?.id || "") }))
|
|
}
|
|
})
|
|
.finally(() => setLoadingScenes(false))
|
|
}, [])
|
|
|
|
// 更新表单数据
|
|
const onChange = (data: any) => {
|
|
setFormData((prev) => ({ ...prev, ...data }))
|
|
}
|
|
|
|
// 处理保存
|
|
const handleSave = async () => {
|
|
try {
|
|
// 这里应该是实际的API调用
|
|
await new Promise((resolve) => setTimeout(resolve, 1000))
|
|
|
|
toast({
|
|
title: "创建成功",
|
|
description: "获客计划已创建",
|
|
})
|
|
// router.push("/plans")
|
|
router.push("/scenarios")
|
|
} catch (error) {
|
|
toast({
|
|
title: "创建失败",
|
|
description: "创建计划失败，请重试",
|
|
variant: "destructive",
|
|
})
|
|
}
|
|
}
|
|
|
|
// 下一步
|
|
const handleNext = () => {
|
|
if (currentStep === steps.length) {
|
|
handleSave()
|
|
} else {
|
|
setCurrentStep((prev) => prev + 1)
|
|
}
|
|
}
|
|
|
|
// 上一步
|
|
const handlePrev = () => {
|
|
setCurrentStep((prev) => Math.max(prev - 1, 1))
|
|
}
|
|
|
|
// 渲染当前步骤内容
|
|
const renderStepContent = () => {
|
|
switch (currentStep) {
|
|
case 1:
|
|
return <BasicSettings formData={formData} onChange={onChange} onNext={handleNext} scenarios={scenes} />
|
|
case 2:
|
|
return <FriendRequestSettings formData={formData} onChange={onChange} onNext={handleNext} onPrev={handlePrev} />
|
|
case 3:
|
|
return <MessageSettings formData={formData} onChange={onChange} onNext={handleSave} onPrev={handlePrev} />
|
|
default:
|
|
return null
|
|
}
|
|
}
|
|
|
|
if (loadingScenes) {
|
|
return <div className="flex justify-center items-center h-40">加载中...</div>
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<div className="max-w-[390px] mx-auto bg-white min-h-screen flex flex-col">
|
|
<header className="sticky top-0 z-10 bg-white border-b">
|
|
<div className="flex items-center justify-between h-14 px-4">
|
|
<div className="flex items-center">
|
|
<Button variant="ghost" size="icon" onClick={() => router.push("/plans")}>
|
|
<ChevronLeft className="h-5 w-5" />
|
|
</Button>
|
|
<h1 className="ml-2 text-lg font-medium">新建获客计划</h1>
|
|
</div>
|
|
<Button variant="ghost" size="icon">
|
|
<Settings className="h-5 w-5" />
|
|
</Button>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="flex-1 flex flex-col">
|
|
<div className="px-4 py-6">
|
|
<StepIndicator steps={steps} currentStep={currentStep} />
|
|
</div>
|
|
|
|
<div className="flex-1 px-4 pb-20">{renderStepContent()}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|