存客宝 React
This commit is contained in:
柳清爽
402
Cunkebao/app/scenarios/phone/edit/[id]/page.tsx
Normal file
402
Cunkebao/app/scenarios/phone/edit/[id]/page.tsx
Normal file
@@ -0,0 +1,402 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { ChevronLeft, Phone, MessageSquare, Settings, Users } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { toast } from "@/components/ui/use-toast"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
|
||||
export default function EditPhoneAcquisitionPlan({ params }: { params: { id: string } }) {
|
||||
const router = useRouter()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [formData, setFormData] = useState({
|
||||
planName: "",
|
||||
phoneNumbers: ["400-123-4567"],
|
||||
autoAddEnabled: true,
|
||||
speechToTextEnabled: true,
|
||||
questionExtractionEnabled: true,
|
||||
greetingMessage: "",
|
||||
followUpMessages: [],
|
||||
addToGroups: [],
|
||||
tags: [],
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
// 模拟从API获取计划数据
|
||||
const fetchPlanData = async () => {
|
||||
try {
|
||||
// 这里应该是实际的API调用
|
||||
const mockData = {
|
||||
planName: "招商电话获客",
|
||||
phoneNumbers: ["400-123-4567"],
|
||||
autoAddEnabled: true,
|
||||
speechToTextEnabled: true,
|
||||
questionExtractionEnabled: true,
|
||||
greetingMessage: "您好，感谢您的来电咨询，我稍后会添加您为好友，为您提供更详细的资料。",
|
||||
followUpMessages: [
|
||||
"您好，我是XX公司的客服，刚才接到您的电话，现在方便聊一下吗？",
|
||||
"关于您刚才咨询的问题，我这边整理了一些资料，希望对您有所帮助。",
|
||||
],
|
||||
addToGroups: ["产品咨询群", "招商合作群"],
|
||||
tags: ["电话咨询", "招商意向"],
|
||||
}
|
||||
setFormData(mockData)
|
||||
setLoading(false)
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "加载失败",
|
||||
description: "获取计划数据失败，请重试",
|
||||
variant: "destructive",
|
||||
})
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
fetchPlanData()
|
||||
}, [])
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
// 这里应该是实际的API调用
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
|
||||
toast({
|
||||
title: "保存成功",
|
||||
description: "电话获客计划已更新",
|
||||
})
|
||||
router.push(`/scenarios/phone`)
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "保存失败",
|
||||
description: "更新计划失败，请重试",
|
||||
variant: "destructive",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddPhoneNumber = () => {
|
||||
setFormData({
|
||||
...formData,
|
||||
phoneNumbers: [...formData.phoneNumbers, ""],
|
||||
})
|
||||
}
|
||||
|
||||
const handlePhoneNumberChange = (index: number, value: string) => {
|
||||
const updatedPhoneNumbers = [...formData.phoneNumbers]
|
||||
updatedPhoneNumbers[index] = value
|
||||
setFormData({
|
||||
...formData,
|
||||
phoneNumbers: updatedPhoneNumbers,
|
||||
})
|
||||
}
|
||||
|
||||
const handleRemovePhoneNumber = (index: number) => {
|
||||
const updatedPhoneNumbers = [...formData.phoneNumbers]
|
||||
updatedPhoneNumbers.splice(index, 1)
|
||||
setFormData({
|
||||
...formData,
|
||||
phoneNumbers: updatedPhoneNumbers,
|
||||
})
|
||||
}
|
||||
|
||||
const handleAddFollowUpMessage = () => {
|
||||
setFormData({
|
||||
...formData,
|
||||
followUpMessages: [...formData.followUpMessages, ""],
|
||||
})
|
||||
}
|
||||
|
||||
const handleFollowUpMessageChange = (index: number, value: string) => {
|
||||
const updatedMessages = [...formData.followUpMessages]
|
||||
updatedMessages[index] = value
|
||||
setFormData({
|
||||
...formData,
|
||||
followUpMessages: updatedMessages,
|
||||
})
|
||||
}
|
||||
|
||||
const handleRemoveFollowUpMessage = (index: number) => {
|
||||
const updatedMessages = [...formData.followUpMessages]
|
||||
updatedMessages.splice(index, 1)
|
||||
setFormData({
|
||||
...formData,
|
||||
followUpMessages: updatedMessages,
|
||||
})
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
|
||||
<p className="mt-2 text-gray-600">加载中...</p>
|
||||
</div>
|
||||
</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 h-14 px-4">
|
||||
<Button variant="ghost" size="icon" onClick={() => router.back()}>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<h1 className="ml-2 text-lg font-medium">编辑电话获客计划</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 p-4">
|
||||
<Tabs defaultValue="basic" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-3 mb-4">
|
||||
<TabsTrigger value="basic">
|
||||
<Phone className="h-4 w-4 mr-2" />
|
||||
基础设置
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="message">
|
||||
<MessageSquare className="h-4 w-4 mr-2" />
|
||||
消息设置
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="advanced">
|
||||
<Settings className="h-4 w-4 mr-2" />
|
||||
高级设置
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="basic" className="space-y-4">
|
||||
<Card className="p-4">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="planName">计划名称</Label>
|
||||
<Input
|
||||
id="planName"
|
||||
value={formData.planName}
|
||||
onChange={(e) => setFormData({ ...formData, planName: e.target.value })}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>接听电话</Label>
|
||||
<div className="space-y-2 mt-1">
|
||||
{formData.phoneNumbers.map((phone, index) => (
|
||||
<div key={index} className="flex items-center space-x-2">
|
||||
<Input
|
||||
value={phone}
|
||||
onChange={(e) => handlePhoneNumberChange(index, e.target.value)}
|
||||
placeholder="输入电话号码"
|
||||
/>
|
||||
{formData.phoneNumbers.length > 1 && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleRemovePhoneNumber(index)}
|
||||
className="text-red-500 hover:text-red-700"
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<Button variant="outline" size="sm" onClick={handleAddPhoneNumber}>
|
||||
添加电话号码
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="auto-add">自动添加客户</Label>
|
||||
<p className="text-xs text-gray-500">来电后自动将客户添加为微信好友</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="auto-add"
|
||||
checked={formData.autoAddEnabled}
|
||||
onCheckedChange={(checked) => setFormData({ ...formData, autoAddEnabled: checked })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="speech-to-text">语音转文字</Label>
|
||||
<p className="text-xs text-gray-500">自动将通话内容转换为文字记录</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="speech-to-text"
|
||||
checked={formData.speechToTextEnabled}
|
||||
onCheckedChange={(checked) => setFormData({ ...formData, speechToTextEnabled: checked })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="question-extraction">问题提取</Label>
|
||||
<p className="text-xs text-gray-500">自动从通话中提取客户的首句问题</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="question-extraction"
|
||||
checked={formData.questionExtractionEnabled}
|
||||
onCheckedChange={(checked) => setFormData({ ...formData, questionExtractionEnabled: checked })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="message" className="space-y-4">
|
||||
<Card className="p-4">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="greeting">添加好友后的问候语</Label>
|
||||
<Textarea
|
||||
id="greeting"
|
||||
value={formData.greetingMessage}
|
||||
onChange={(e) => setFormData({ ...formData, greetingMessage: e.target.value })}
|
||||
placeholder="输入添加好友后的问候语"
|
||||
className="mt-1 min-h-[100px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>后续跟进消息</Label>
|
||||
<div className="space-y-2 mt-1">
|
||||
{formData.followUpMessages.map((message, index) => (
|
||||
<div key={index} className="space-y-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-sm">消息 {index + 1}</Label>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleRemoveFollowUpMessage(index)}
|
||||
className="text-red-500 hover:text-red-700"
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
<Textarea
|
||||
value={message}
|
||||
onChange={(e) => handleFollowUpMessageChange(index, e.target.value)}
|
||||
placeholder="输入跟进消息内容"
|
||||
className="min-h-[80px]"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<Button variant="outline" size="sm" onClick={handleAddFollowUpMessage}>
|
||||
添加跟进消息
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="advanced" className="space-y-4">
|
||||
<Card className="p-4">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>添加到群组</Label>
|
||||
<Select
|
||||
value={formData.addToGroups.length > 0 ? "selected" : "none"}
|
||||
onValueChange={(value) => {
|
||||
if (value === "none") {
|
||||
setFormData({ ...formData, addToGroups: [] })
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="选择群组" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">不添加到群组</SelectItem>
|
||||
<SelectItem value="selected">已选择 {formData.addToGroups.length} 个群组</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{formData.addToGroups.length > 0 && (
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{formData.addToGroups.map((group, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center bg-blue-50 text-blue-700 rounded-full px-3 py-1"
|
||||
>
|
||||
<Users className="h-3 w-3 mr-1" />
|
||||
<span className="text-sm">{group}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="ml-1 p-0 h-4 w-4 rounded-full"
|
||||
onClick={() => {
|
||||
const updatedGroups = [...formData.addToGroups]
|
||||
updatedGroups.splice(index, 1)
|
||||
setFormData({ ...formData, addToGroups: updatedGroups })
|
||||
}}
|
||||
>
|
||||
×
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>标签设置</Label>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{formData.tags.map((tag, index) => (
|
||||
<div key={index} className="flex items-center bg-gray-100 rounded-full px-3 py-1">
|
||||
<span className="text-sm">{tag}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="ml-1 p-0 h-4 w-4 rounded-full"
|
||||
onClick={() => {
|
||||
const updatedTags = [...formData.tags]
|
||||
updatedTags.splice(index, 1)
|
||||
setFormData({ ...formData, tags: updatedTags })
|
||||
}}
|
||||
>
|
||||
×
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Input
|
||||
placeholder="添加标签"
|
||||
className="w-32"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && e.currentTarget.value) {
|
||||
e.preventDefault()
|
||||
setFormData({
|
||||
...formData,
|
||||
tags: [...formData.tags, e.currentTarget.value],
|
||||
})
|
||||
e.currentTarget.value = ""
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<div className="sticky bottom-0 left-0 right-0 bg-white border-t p-4">
|
||||
<Button className="w-full" onClick={handleSave}>
|
||||
保存
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user