diff --git a/nkebao/src/pages/mobile/mine/traffic-pool/detail/api.ts b/nkebao/src/pages/mobile/mine/traffic-pool/detail/api.ts index 0bbaec1f..dfad5195 100644 --- a/nkebao/src/pages/mobile/mine/traffic-pool/detail/api.ts +++ b/nkebao/src/pages/mobile/mine/traffic-pool/detail/api.ts @@ -1,5 +1,9 @@ import request from "@/api/request"; -import type { TrafficPoolUserDetail, UserJourneyResponse } from "./data"; +import type { + TrafficPoolUserDetail, + UserJourneyResponse, + UserTagsResponse, +} from "./data"; export function getTrafficPoolDetail( wechatId: string @@ -17,8 +21,8 @@ export function getUserJourney(params: { } // 获取用户标签 -export function getUserTags(userId: string): Promise { - return request("/v1/user/tags", { userId }, "GET"); +export function getUserTags(userId: string): Promise { + return request("/v1/traffic/pool/getUserTags", { userId }, "GET"); } // 添加用户标签 diff --git a/nkebao/src/pages/mobile/mine/traffic-pool/detail/data.ts b/nkebao/src/pages/mobile/mine/traffic-pool/detail/data.ts index 1e274f63..0657ab5e 100644 --- a/nkebao/src/pages/mobile/mine/traffic-pool/detail/data.ts +++ b/nkebao/src/pages/mobile/mine/traffic-pool/detail/data.ts @@ -62,6 +62,20 @@ export interface UserJourneyResponse { total: number; } +// 用户标签类型 +export interface UserTagItem { + id: string; + name: string; + color?: string; + type?: string; +} + +// 用户标签响应类型 +export interface UserTagsResponse { + wechat: UserTagItem[]; + siteLabels: UserTagItem[]; +} + // 扩展的用户详情类型 - 用于前端展示 export interface ExtendedUserDetail extends TrafficPoolUserDetail { // 前端计算或模拟的数据 diff --git a/nkebao/src/pages/mobile/mine/traffic-pool/detail/index.tsx b/nkebao/src/pages/mobile/mine/traffic-pool/detail/index.tsx index afe795fa..f478fdfc 100644 --- a/nkebao/src/pages/mobile/mine/traffic-pool/detail/index.tsx +++ b/nkebao/src/pages/mobile/mine/traffic-pool/detail/index.tsx @@ -24,12 +24,14 @@ import { } from "@ant-design/icons"; import Layout from "@/components/Layout/Layout"; import NavCommon from "@/components/NavCommon"; -import { getTrafficPoolDetail, getUserJourney } from "./api"; +import { getTrafficPoolDetail, getUserJourney, getUserTags } from "./api"; import type { TrafficPoolUserDetail, ExtendedUserDetail, InteractionRecord, UserJourneyRecord, + UserTagsResponse, + UserTagItem, } from "./data"; import styles from "./index.module.scss"; @@ -47,6 +49,10 @@ const TrafficPoolDetail: React.FC = () => { const [journeyTotal, setJourneyTotal] = useState(0); const pageSize = 10; + // 用户标签相关状态 + const [tagsLoading, setTagsLoading] = useState(false); + const [userTagsList, setUserTagsList] = useState([]); + useEffect(() => { if (!wxid) return; setLoading(true); @@ -117,12 +123,30 @@ const TrafficPoolDetail: React.FC = () => { } }; + // 获取用户标签数据 + const fetchUserTags = async () => { + if (!userId) return; + + setTagsLoading(true); + try { + const response: UserTagsResponse = await getUserTags(userId); + setUserTagsList(response.siteLabels || []); + } catch (error) { + console.error("获取用户标签失败:", error); + } finally { + setTagsLoading(false); + } + }; + // 标签切换处理 const handleTabChange = (tab: string) => { setActiveTab(tab); if (tab === "journey" && journeyList.length === 0) { fetchUserJourney(1); } + if (tab === "tags" && userTagsList.length === 0) { + fetchUserTags(); + } }; const handleClose = () => { @@ -245,6 +269,12 @@ const TrafficPoolDetail: React.FC = () => { } }; + // 获取标签颜色 + const getTagColor = (index: number): string => { + const colors = ["primary", "success", "warning", "danger", "default"]; + return colors[index % colors.length]; + }; + if (!user) { return ( } loading={loading}> @@ -256,73 +286,69 @@ const TrafficPoolDetail: React.FC = () => { } return ( - -
- {/* 头部 */} -
-
用户详情
- -
- - {/* 用户基本信息 */} - -
- } - /> -
-
{user.userInfo.nickname}
-
{user.userInfo.wechatId}
-
- - - 重要价值客户 - - - 优先添加 - + + + {/* 用户基本信息 */} + +
+ } + /> +
+
{user.userInfo.nickname}
+
{user.userInfo.wechatId}
+
+ + + 重要价值客户 + + + 优先添加 + +
+
+ {/* 导航标签 */} +
+
handleTabChange("basic")} + > + 基本信息 +
+
handleTabChange("journey")} + > + 用户旅程 +
+
handleTabChange("tags")} + > + 用户标签 +
- - - {/* 导航标签 */} -
-
handleTabChange("basic")} - > - 基本信息 -
-
handleTabChange("journey")} - > - 用户旅程 -
-
handleTabChange("tags")} - > - 用户标签 -
-
- + + } + > +
{/* 内容区域 */}
{activeTab === "basic" && ( @@ -593,20 +619,12 @@ const TrafficPoolDetail: React.FC = () => {
{/* 用户标签 */} - {user.userTags && user.userTags.length > 0 ? ( -
- {user.userTags.map(tag => ( - - {tag.name} - - ))} + {tagsLoading && userTagsList.length === 0 ? ( +
+ +
加载中...
- ) : ( + ) : userTagsList.length === 0 ? (
@@ -614,6 +632,19 @@ const TrafficPoolDetail: React.FC = () => {
暂无用户标签
该用户还没有任何标签
+ ) : ( +
+ {userTagsList.map((tag, index) => ( + + {tag.name} + + ))} +
)} @@ -661,14 +692,9 @@ const TrafficPoolDetail: React.FC = () => { {/* 添加新标签按钮 */} -
)}