diff --git a/SuperAdmin/app/dashboard/customers/page.tsx b/SuperAdmin/app/dashboard/customers/page.tsx index 63acc780..535936a8 100644 --- a/SuperAdmin/app/dashboard/customers/page.tsx +++ b/SuperAdmin/app/dashboard/customers/page.tsx @@ -1,6 +1,6 @@ "use client" -import { useState } from "react" +import { useState, useEffect } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" @@ -13,9 +13,11 @@ import { DropdownMenuSeparator, } from "@/components/ui/dropdown-menu" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" -import { Search, MoreHorizontal, Eye, UserPlus, Filter } from "lucide-react" +import { Search, MoreHorizontal, Eye, UserPlus, Filter, ChevronLeft, ChevronRight } from "lucide-react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" +import { getTrafficPoolList } from "@/lib/traffic-pool-api" +import { Customer } from "@/lib/traffic-pool-api" // Sample customer data const customersData = [ @@ -111,8 +113,52 @@ export default function CustomersPage() { const [selectedGender, setSelectedGender] = useState("") const [selectedSource, setSelectedSource] = useState("") const [selectedProject, setSelectedProject] = useState("") + + // 客户列表状态 + const [customers, setCustomers] = useState([]) + const [isLoading, setIsLoading] = useState(true) + const [error, setError] = useState(null) + + // 分页状态 + const [currentPage, setCurrentPage] = useState(1) + const [totalPages, setTotalPages] = useState(1) + const [totalItems, setTotalItems] = useState(0) + const [pageSize, setPageSize] = useState(10) - // Filter customers based on search and filters + // 获取客户列表数据 + useEffect(() => { + const fetchCustomers = async () => { + setIsLoading(true); + try { + const response = await getTrafficPoolList(currentPage, pageSize, searchTerm); + if (response.code === 200 && response.data) { + setCustomers(response.data.list); + setTotalItems(response.data.total); + setTotalPages(Math.ceil(response.data.total / pageSize)); + setError(null); + } else { + setError(response.msg || "获取客户列表失败"); + setCustomers([]); + } + } catch (err: any) { + setError(err.message || "获取客户列表失败"); + setCustomers([]); + } finally { + setIsLoading(false); + } + }; + + fetchCustomers(); + }, [currentPage, pageSize, searchTerm]); + + // 切换页码 + const goToPage = (page: number) => { + if (page >= 1 && page <= totalPages) { + setCurrentPage(page); + } + }; + + // Filter customers based on search and filters (兼容示例数据) const filteredCustomers = customersData.filter((customer) => { const matchesSearch = customer.name.toLowerCase().includes(searchTerm.toLowerCase()) || @@ -236,23 +282,35 @@ export default function CustomersPage() { 标签 地区 来源 - 所属项目 + 公司名称 添加时间 操作 - {filteredCustomers.length > 0 ? ( - filteredCustomers.map((customer) => ( + {isLoading ? ( + + + 正在加载... + + + ) : error ? ( + + + {error} + + + ) : customers.length > 0 ? ( + customers.map((customer) => (
- - {customer.name.slice(0, 2)} + + {customer.nickname.slice(0, 2)}
-
{customer.name}
+
{customer.nickname}
{customer.gender}
@@ -260,8 +318,8 @@ export default function CustomersPage() { {customer.wechatId}
- {customer.tags.map((tag) => ( - + {customer.tags.map((tag, index) => ( + {tag} ))} @@ -269,8 +327,8 @@ export default function CustomersPage() { {customer.region} {customer.source} - {customer.projectName} - {customer.addedDate} + {customer.companyName} + {customer.createTime} @@ -303,6 +361,35 @@ export default function CustomersPage() {
+ + {/* 分页控件 */} + {!isLoading && !error && customers.length > 0 && ( +
+
+ 共 {totalItems} 条记录,当前第 {currentPage}/{totalPages} 页 +
+
+ + +
+
+ )} ) diff --git a/SuperAdmin/lib/traffic-pool-api.ts b/SuperAdmin/lib/traffic-pool-api.ts new file mode 100644 index 00000000..39f77dfa --- /dev/null +++ b/SuperAdmin/lib/traffic-pool-api.ts @@ -0,0 +1,51 @@ +import { apiRequest, ApiResponse } from './api-utils'; + +/** + * 客户数据接口 + */ +export interface Customer { + id: number; + avatar: string; + nickname: string; + wechatId: string; + gender: string; + region: string; + tags: string[]; + source: string; + companyName: string; + createTime: string; + mobile: number; +} + +/** + * 分页响应数据类型 + */ +export interface PaginatedResponse { + list: T[]; + total: number; + page: number; + limit: number; +} + +/** + * 获取客户池列表 + * @param page 页码 + * @param limit 每页数量 + * @param keyword 搜索关键词 + * @returns 客户列表 + */ +export async function getTrafficPoolList( + page: number = 1, + limit: number = 10, + keyword: string = '' +): Promise>> { + // 构建查询参数 + const params = new URLSearchParams(); + params.append('page', page.toString()); + params.append('limit', limit.toString()); + if (keyword) { + params.append('keyword', keyword); + } + + return apiRequest(`/trafficPool/list?${params.toString()}`); +} \ No newline at end of file