超管后台 - 对接客户管理详情

2025-04-13 14:12:39 +08:00
parent 213d6dd93e
commit b8d8a89bf9
4 changed files with 88 additions and 45 deletions
--- a/Server/application/superadmin/controller/TrafficPool.php
+++ b/Server/application/superadmin/controller/TrafficPool.php
@@ -35,7 +35,7 @@ class TrafficPool extends Controller
            ->field([
                'ts.id',
                'tp.wechatId',
-                'tp.createTime as addTime',
+                'ts.createTime as addTime',
                'ts.fromd as source',
                'c.name as projectName',
                'wa.avatar',
@@ -65,7 +65,9 @@ class TrafficPool extends Controller
                default:
                    $item['gender'] = '保密';
            }
-            
+
+            $item['addTime'] = $item['addTime'] ? date('Y-m-d H:i:s', $item['addTime']) : null;
+
            // 处理标签显示
            if (is_string($item['tags'])) {
                $item['tags'] = json_decode($item['tags'], true);
@@ -123,7 +125,7 @@ class TrafficPool extends Controller

            $result = [
                'source' => $sourceInfo['source'],
-                'addTime' => $sourceInfo['addTime'],
+                'addTime' => $sourceInfo['addTime'] ? date('Y-m-d H:i:s', $sourceInfo['addTime']) : null,
                'projectName' => $sourceInfo['projectName']
            ];

--- a/SuperAdmin/app/dashboard/customers/[id]/page.tsx
+++ b/SuperAdmin/app/dashboard/customers/[id]/page.tsx
@@ -1,5 +1,6 @@
 "use client"

+import { useEffect, useState } from "react"
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
@@ -7,19 +8,10 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Badge } from "@/components/ui/badge"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { ArrowLeft, MessageSquare, Phone, UserPlus } from "lucide-react"
+import { getCustomerDetail, CustomerDetail } from "@/lib/traffic-pool-api"

-// Sample customer data
-const customerData = {
-  id: "1",
-  name: "张三",
-  avatar: "/placeholder.svg?height=100&width=100",
-  wechatId: "zhangsan123",
-  gender: "男",
-  region: "北京",
-  source: "微信搜索",
-  tags: ["潜在客户", "高消费"],
-  projectName: "电商平台项目",
-  addedDate: "2023-06-10",
+// 示例数据（用于详细信息部分）
+const detailData = {
  devices: [
    { id: "d1", name: "iPhone 13 Pro", addedDate: "2023-06-10" },
    { id: "d2", name: "MacBook Pro", addedDate: "2023-06-12" },
@@ -63,6 +55,43 @@ const customerData = {
 }

 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 (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
@@ -86,15 +115,14 @@ export default function CustomerDetailPage({ params }: { params: { id: string }
          </CardHeader>
          <CardContent className="flex flex-col items-center text-center">
            <Avatar className="h-24 w-24 mb-4">
-              <AvatarImage src={customerData.avatar} alt={customerData.name} />
-              <AvatarFallback>{customerData.name.slice(0, 2)}</AvatarFallback>
+              <AvatarImage src={customer.avatar} alt={customer.nickname} />
+              <AvatarFallback>{customer.nickname.slice(0, 2)}</AvatarFallback>
            </Avatar>
-            <h3 className="text-xl font-bold">{customerData.name}</h3>
-            <p className="text-sm text-muted-foreground mb-4">{customerData.wechatId}</p>
+            <h3 className="text-xl font-bold">{customer.nickname}</h3>

            <div className="flex flex-wrap justify-center gap-1 mb-6">
-              {customerData.tags.map((tag) => (
-                <Badge key={tag} variant="outline">
+              {customer.tags.map((tag, index) => (
+                <Badge key={index} variant="outline">
                  {tag}
                </Badge>
              ))}
@@ -103,23 +131,23 @@ export default function CustomerDetailPage({ params }: { params: { id: string }
            <div className="w-full space-y-2 text-left">
              <div className="flex justify-between">
                <span className="text-sm text-muted-foreground">性别</span>
-                <span className="text-sm">{customerData.gender}</span>
+                <span className="text-sm">{customer.gender}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-sm text-muted-foreground">地区</span>
-                <span className="text-sm">{customerData.region}</span>
+                <span className="text-sm">{customer.region}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-sm text-muted-foreground">来源</span>
-                <span className="text-sm">{customerData.source}</span>
+                <span className="text-sm">{customer.source}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-sm text-muted-foreground">所属项目</span>
-                <span className="text-sm">{customerData.projectName}</span>
+                <span className="text-sm">{customer.projectName}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-sm text-muted-foreground">添加时间</span>
-                <span className="text-sm">{customerData.addedDate}</span>
+                <span className="text-sm">{customer.addTime || '暂无'}</span>
              </div>
            </div>
          </CardContent>
@@ -138,7 +166,7 @@ export default function CustomerDetailPage({ params }: { params: { id: string }
              </TabsList>

              <TabsContent value="interactions" className="space-y-4">
-                {customerData.interactions.map((interaction) => (
+                {detailData.interactions.map((interaction) => (
                  <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">
                      {interaction.type === "消息" ? (
@@ -162,7 +190,7 @@ export default function CustomerDetailPage({ params }: { params: { id: string }
              </TabsContent>

              <TabsContent value="devices">
-                {customerData.devices.map((device) => (
+                {detailData.devices.map((device) => (
                  <div key={device.id} className="flex items-center justify-between py-2 border-b last:border-0">
                    <div>
                      <p className="font-medium">{device.name}</p>
@@ -173,8 +201,8 @@ export default function CustomerDetailPage({ params }: { params: { id: string }
              </TabsContent>

              <TabsContent value="transactions">
-                {customerData.transactions.length > 0 ? (
-                  customerData.transactions.map((transaction) => (
+                {detailData.transactions.length > 0 ? (
+                  detailData.transactions.map((transaction) => (
                    <div key={transaction.id} className="flex items-center justify-between py-2 border-b last:border-0">
                      <div>
                        <p className="font-medium">{transaction.product}</p>
--- a/SuperAdmin/app/dashboard/customers/page.tsx
+++ b/SuperAdmin/app/dashboard/customers/page.tsx
@@ -294,9 +294,9 @@ export default function CustomersPage() {
          <Table>
            <TableHeader>
              <TableRow>
-                <TableHead>客户信息</TableHead>
+                <TableHead>客户昵称</TableHead>
                <TableHead>微信ID</TableHead>
-                <TableHead>标签</TableHead>
+                <TableHead>性别</TableHead>
                <TableHead>地区</TableHead>
                <TableHead>来源</TableHead>
                <TableHead>公司名称</TableHead>
@@ -341,19 +341,11 @@ export default function CustomersPage() {
                      </div>
                    </TableCell>
                    <TableCell>{customer.wechatId}</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.gender}</TableCell>
                    <TableCell>{customer.region}</TableCell>
                    <TableCell>{customer.source}</TableCell>
-                    <TableCell>{customer.companyName}</TableCell>
-                    <TableCell>{customer.createTime}</TableCell>
+                    <TableCell>{customer.projectName}</TableCell>
+                    <TableCell>{customer.addTime || '暂无'}</TableCell>
                    <TableCell className="text-right">
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
--- a/SuperAdmin/lib/traffic-pool-api.ts
+++ b/SuperAdmin/lib/traffic-pool-api.ts
@@ -12,11 +12,25 @@ export interface Customer {
  region: string;
  tags: string[];
  source: string;
-  companyName: string;
-  createTime: string;
+  projectName: string;
+  addTime: string | null;
  mobile: number;
 }

+/**
+ * 客户详情接口
+ */
+export interface CustomerDetail {
+  source: string;
+  addTime: string | null;
+  projectName: string;
+  avatar: string;
+  nickname: string;
+  region: string;
+  gender: string;
+  tags: string[];
+}
+
 /**
 * 分页响应数据类型
 */
@@ -48,4 +62,11 @@ export async function getTrafficPoolList(
  }
  
  return apiRequest(`/trafficPool/list?${params.toString()}`);
+}
+
+/**
+ * 获取客户详情
+ */
+export async function getCustomerDetail(id: string): Promise<ApiResponse<CustomerDetail>> {
+  return apiRequest(`/trafficPool/detail?id=${id}`);
 }