超管后台 - 项目管理详情增加字段符合触客宝要求
This commit is contained in:
@@ -1,6 +1,5 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import { useEffect, useState } from "react"
|
|
||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
import { Button } from "@/components/ui/button"
|
import { Button } from "@/components/ui/button"
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||||
@@ -8,10 +7,19 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|||||||
import { Badge } from "@/components/ui/badge"
|
import { Badge } from "@/components/ui/badge"
|
||||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||||
import { ArrowLeft, MessageSquare, Phone, UserPlus } from "lucide-react"
|
import { ArrowLeft, MessageSquare, Phone, UserPlus } from "lucide-react"
|
||||||
import { getCustomerDetail, CustomerDetail } from "@/lib/traffic-pool-api"
|
|
||||||
|
|
||||||
// 示例数据(用于详细信息部分)
|
// Sample customer data
|
||||||
const detailData = {
|
const customerData = {
|
||||||
|
id: "1",
|
||||||
|
name: "张三",
|
||||||
|
avatar: "/placeholder.svg?height=100&width=100",
|
||||||
|
wechatId: "zhangsan123",
|
||||||
|
gender: "男",
|
||||||
|
region: "北京",
|
||||||
|
source: "微信搜索",
|
||||||
|
tags: ["潜在客户", "高消费"],
|
||||||
|
projectName: "电商平台项目",
|
||||||
|
addedDate: "2023-06-10",
|
||||||
devices: [
|
devices: [
|
||||||
{ id: "d1", name: "iPhone 13 Pro", addedDate: "2023-06-10" },
|
{ id: "d1", name: "iPhone 13 Pro", addedDate: "2023-06-10" },
|
||||||
{ id: "d2", name: "MacBook Pro", addedDate: "2023-06-12" },
|
{ id: "d2", name: "MacBook Pro", addedDate: "2023-06-12" },
|
||||||
@@ -55,43 +63,6 @@ const detailData = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function CustomerDetailPage({ params }: { params: { id: string } }) {
|
export default function CustomerDetailPage({ params }: { params: { id: string } }) {
|
||||||
const [customer, setCustomer] = useState<CustomerDetail | null>(null)
|
|
||||||
const [isLoading, setIsLoading] = useState(true)
|
|
||||||
const [error, setError] = useState<string | null>(null)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchCustomerDetail = async () => {
|
|
||||||
try {
|
|
||||||
setIsLoading(true)
|
|
||||||
const response = await getCustomerDetail(params.id)
|
|
||||||
if (response.code === 200) {
|
|
||||||
setCustomer(response.data)
|
|
||||||
setError(null)
|
|
||||||
} else {
|
|
||||||
setError(response.msg || "获取客户详情失败")
|
|
||||||
}
|
|
||||||
} catch (err: any) {
|
|
||||||
setError(err.message || "获取客户详情失败")
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchCustomerDetail()
|
|
||||||
}, [params.id])
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return <div className="flex items-center justify-center min-h-screen">加载中...</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return <div className="flex items-center justify-center min-h-screen text-red-500">{error}</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!customer) {
|
|
||||||
return <div className="flex items-center justify-center min-h-screen">未找到客户信息</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
@@ -115,14 +86,15 @@ export default function CustomerDetailPage({ params }: { params: { id: string }
|
|||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="flex flex-col items-center text-center">
|
<CardContent className="flex flex-col items-center text-center">
|
||||||
<Avatar className="h-24 w-24 mb-4">
|
<Avatar className="h-24 w-24 mb-4">
|
||||||
<AvatarImage src={customer.avatar} alt={customer.nickname} />
|
<AvatarImage src={customerData.avatar} alt={customerData.name} />
|
||||||
<AvatarFallback>{customer.nickname.slice(0, 2)}</AvatarFallback>
|
<AvatarFallback>{customerData.name.slice(0, 2)}</AvatarFallback>
|
||||||
</Avatar>
|
</Avatar>
|
||||||
<h3 className="text-xl font-bold">{customer.nickname}</h3>
|
<h3 className="text-xl font-bold">{customerData.name}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground mb-4">{customerData.wechatId}</p>
|
||||||
|
|
||||||
<div className="flex flex-wrap justify-center gap-1 mb-6">
|
<div className="flex flex-wrap justify-center gap-1 mb-6">
|
||||||
{customer.tags.map((tag, index) => (
|
{customerData.tags.map((tag) => (
|
||||||
<Badge key={index} variant="outline">
|
<Badge key={tag} variant="outline">
|
||||||
{tag}
|
{tag}
|
||||||
</Badge>
|
</Badge>
|
||||||
))}
|
))}
|
||||||
@@ -131,23 +103,23 @@ export default function CustomerDetailPage({ params }: { params: { id: string }
|
|||||||
<div className="w-full space-y-2 text-left">
|
<div className="w-full space-y-2 text-left">
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<span className="text-sm text-muted-foreground">性别</span>
|
<span className="text-sm text-muted-foreground">性别</span>
|
||||||
<span className="text-sm">{customer.gender}</span>
|
<span className="text-sm">{customerData.gender}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<span className="text-sm text-muted-foreground">地区</span>
|
<span className="text-sm text-muted-foreground">地区</span>
|
||||||
<span className="text-sm">{customer.region}</span>
|
<span className="text-sm">{customerData.region}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<span className="text-sm text-muted-foreground">来源</span>
|
<span className="text-sm text-muted-foreground">来源</span>
|
||||||
<span className="text-sm">{customer.source}</span>
|
<span className="text-sm">{customerData.source}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<span className="text-sm text-muted-foreground">所属项目</span>
|
<span className="text-sm text-muted-foreground">所属项目</span>
|
||||||
<span className="text-sm">{customer.projectName}</span>
|
<span className="text-sm">{customerData.projectName}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<span className="text-sm text-muted-foreground">添加时间</span>
|
<span className="text-sm text-muted-foreground">添加时间</span>
|
||||||
<span className="text-sm">{customer.addTime || '暂无'}</span>
|
<span className="text-sm">{customerData.addedDate}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
@@ -166,7 +138,7 @@ export default function CustomerDetailPage({ params }: { params: { id: string }
|
|||||||
</TabsList>
|
</TabsList>
|
||||||
|
|
||||||
<TabsContent value="interactions" className="space-y-4">
|
<TabsContent value="interactions" className="space-y-4">
|
||||||
{detailData.interactions.map((interaction) => (
|
{customerData.interactions.map((interaction) => (
|
||||||
<div key={interaction.id} className="flex gap-4 pb-4 border-b last:border-0">
|
<div key={interaction.id} className="flex gap-4 pb-4 border-b last:border-0">
|
||||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
|
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
|
||||||
{interaction.type === "消息" ? (
|
{interaction.type === "消息" ? (
|
||||||
@@ -190,7 +162,7 @@ export default function CustomerDetailPage({ params }: { params: { id: string }
|
|||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="devices">
|
<TabsContent value="devices">
|
||||||
{detailData.devices.map((device) => (
|
{customerData.devices.map((device) => (
|
||||||
<div key={device.id} className="flex items-center justify-between py-2 border-b last:border-0">
|
<div key={device.id} className="flex items-center justify-between py-2 border-b last:border-0">
|
||||||
<div>
|
<div>
|
||||||
<p className="font-medium">{device.name}</p>
|
<p className="font-medium">{device.name}</p>
|
||||||
@@ -201,8 +173,8 @@ export default function CustomerDetailPage({ params }: { params: { id: string }
|
|||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="transactions">
|
<TabsContent value="transactions">
|
||||||
{detailData.transactions.length > 0 ? (
|
{customerData.transactions.length > 0 ? (
|
||||||
detailData.transactions.map((transaction) => (
|
customerData.transactions.map((transaction) => (
|
||||||
<div key={transaction.id} className="flex items-center justify-between py-2 border-b last:border-0">
|
<div key={transaction.id} className="flex items-center justify-between py-2 border-b last:border-0">
|
||||||
<div>
|
<div>
|
||||||
<p className="font-medium">{transaction.product}</p>
|
<p className="font-medium">{transaction.product}</p>
|
||||||
|
|||||||
@@ -294,9 +294,9 @@ export default function CustomersPage() {
|
|||||||
<Table>
|
<Table>
|
||||||
<TableHeader>
|
<TableHeader>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableHead>客户昵称</TableHead>
|
<TableHead>客户信息</TableHead>
|
||||||
<TableHead>微信ID</TableHead>
|
<TableHead>微信ID</TableHead>
|
||||||
<TableHead>性别</TableHead>
|
<TableHead>标签</TableHead>
|
||||||
<TableHead>地区</TableHead>
|
<TableHead>地区</TableHead>
|
||||||
<TableHead>来源</TableHead>
|
<TableHead>来源</TableHead>
|
||||||
<TableHead>公司名称</TableHead>
|
<TableHead>公司名称</TableHead>
|
||||||
@@ -341,11 +341,19 @@ export default function CustomersPage() {
|
|||||||
</div>
|
</div>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>{customer.wechatId}</TableCell>
|
<TableCell>{customer.wechatId}</TableCell>
|
||||||
<TableCell>{customer.gender}</TableCell>
|
<TableCell>
|
||||||
|
<div className="flex flex-wrap gap-1">
|
||||||
|
{customer.tags.map((tag, index) => (
|
||||||
|
<Badge key={index} variant="outline">
|
||||||
|
{tag}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
<TableCell>{customer.region}</TableCell>
|
<TableCell>{customer.region}</TableCell>
|
||||||
<TableCell>{customer.source}</TableCell>
|
<TableCell>{customer.source}</TableCell>
|
||||||
<TableCell>{customer.projectName}</TableCell>
|
<TableCell>{customer.companyName}</TableCell>
|
||||||
<TableCell>{customer.addTime || '暂无'}</TableCell>
|
<TableCell>{customer.createTime}</TableCell>
|
||||||
<TableCell className="text-right">
|
<TableCell className="text-right">
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ import { Input } from "@/components/ui/input"
|
|||||||
import { Textarea } from "@/components/ui/textarea"
|
import { Textarea } from "@/components/ui/textarea"
|
||||||
import { Label } from "@/components/ui/label"
|
import { Label } from "@/components/ui/label"
|
||||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||||
import { ArrowLeft, Plus, Trash } from "lucide-react"
|
import { ArrowLeft, Plus, Trash } from "lucide-react"
|
||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
|
|
||||||
@@ -16,6 +17,7 @@ export default function NewProjectPage() {
|
|||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||||
const [devices, setDevices] = useState([{ id: "1", name: "" }])
|
const [devices, setDevices] = useState([{ id: "1", name: "" }])
|
||||||
|
const [status, setStatus] = useState("1") // 默认启用
|
||||||
|
|
||||||
const handleAddDevice = () => {
|
const handleAddDevice = () => {
|
||||||
setDevices([...devices, { id: Date.now().toString(), name: "" }])
|
setDevices([...devices, { id: Date.now().toString(), name: "" }])
|
||||||
@@ -65,13 +67,21 @@ export default function NewProjectPage() {
|
|||||||
|
|
||||||
<div className="grid gap-6 md:grid-cols-2">
|
<div className="grid gap-6 md:grid-cols-2">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label htmlFor="phone">手机号</Label>
|
<Label htmlFor="account">账号</Label>
|
||||||
<Input id="phone" placeholder="请输入手机号" required />
|
<Input id="account" placeholder="请输入账号" required />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label htmlFor="account">账号</Label>
|
<Label htmlFor="status">状态</Label>
|
||||||
<Input id="account" placeholder="请输入账号" required />
|
<Select value={status} onValueChange={setStatus}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="请选择状态" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="1">启用</SelectItem>
|
||||||
|
<SelectItem value="0">禁用</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
@@ -85,6 +95,23 @@ export default function NewProjectPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-6 md:grid-cols-2">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="realName">真实姓名</Label>
|
||||||
|
<Input id="realName" placeholder="请输入真实姓名" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="nickname">昵称</Label>
|
||||||
|
<Input id="nickname" placeholder="请输入昵称" required />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="memo">备注</Label>
|
||||||
|
<Textarea id="memo" placeholder="请输入备注信息(选填)" rows={2} />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label>关联设备</Label>
|
<Label>关联设备</Label>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
|
|||||||
@@ -12,25 +12,11 @@ export interface Customer {
|
|||||||
region: string;
|
region: string;
|
||||||
tags: string[];
|
tags: string[];
|
||||||
source: string;
|
source: string;
|
||||||
projectName: string;
|
companyName: string;
|
||||||
addTime: string | null;
|
createTime: string;
|
||||||
mobile: number;
|
mobile: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 客户详情接口
|
|
||||||
*/
|
|
||||||
export interface CustomerDetail {
|
|
||||||
source: string;
|
|
||||||
addTime: string | null;
|
|
||||||
projectName: string;
|
|
||||||
avatar: string;
|
|
||||||
nickname: string;
|
|
||||||
region: string;
|
|
||||||
gender: string;
|
|
||||||
tags: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 分页响应数据类型
|
* 分页响应数据类型
|
||||||
*/
|
*/
|
||||||
@@ -62,11 +48,4 @@ export async function getTrafficPoolList(
|
|||||||
}
|
}
|
||||||
|
|
||||||
return apiRequest(`/trafficPool/list?${params.toString()}`);
|
return apiRequest(`/trafficPool/list?${params.toString()}`);
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取客户详情
|
|
||||||
*/
|
|
||||||
export async function getCustomerDetail(id: string): Promise<ApiResponse<CustomerDetail>> {
|
|
||||||
return apiRequest(`/trafficPool/detail?id=${id}`);
|
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user