From 25bf702ed4b05a758e4255e68973324b98648da7 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Fri, 7 Nov 2025 16:51:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A2=E6=88=B7=E8=AF=A6=E7=BB=86=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E9=A1=B5=E6=8B=86=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/customer-detail/FollowupTab.vue | 259 ++++++++
 components/customer-detail/InfoTab.vue     | 188 ++++++
 components/customer-detail/ProjectsTab.vue | 334 ++++++++++
 pages/customer/detail/index.vue            | 725 +--------------------
 4 files changed, 807 insertions(+), 699 deletions(-)
 create mode 100644 components/customer-detail/FollowupTab.vue
 create mode 100644 components/customer-detail/InfoTab.vue
 create mode 100644 components/customer-detail/ProjectsTab.vue

diff --git a/components/customer-detail/FollowupTab.vue b/components/customer-detail/FollowupTab.vue
new file mode 100644
index 0000000..3d42c86
--- /dev/null
+++ b/components/customer-detail/FollowupTab.vue
@@ -0,0 +1,259 @@
+<template>
+  <view class="tab-content">
+    <view class="followup-timeline">
+      <template v-for="(group, groupIndex) in groupedFollowupList" :key="groupIndex">
+        <view 
+          class="followup-item" 
+          v-for="(item, index) in group.items" 
+          :key="index"
+          @click="handleFollowupClick(item)"
+        >
+          <view class="date-header" v-if="index === 0">
+            <view class="date-dot"></view>
+            <text class="date-text">{{ group.date }}</text>
+          </view>
+          <view class="followup-card">
+            <view class="followup-header">
+              <image 
+                class="followup-avatar" 
+                :src="item.userAvatar || '/static/default-avatar.png'"
+                mode="aspectFill"
+              />
+              <view class="followup-user-info">
+                <text class="followup-user-name">{{ item.userName }}</text>
+                <text class="followup-user-role">销售经理</text>
+              </view>
+              <text class="followup-arrow">›</text>
+            </view>
+            <text class="followup-text">{{ item.content }}</text>
+            <view class="followup-time-wrapper">
+              <text class="time-icon">🕐</text>
+              <text class="followup-time">{{ formatTimeOnly(item.followTime) }}</text>
+            </view>
+          </view>
+        </view>
+      </template>
+      <view class="empty-state" v-if="followupList.length === 0">
+        <text>暂无跟进记录</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  followupList: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['followup-click']);
+
+// 按日期分组的跟进记录
+const groupedFollowupList = computed(() => {
+  if (!props.followupList || props.followupList.length === 0) {
+    return [];
+  }
+  
+  const groups = {};
+  props.followupList.forEach(item => {
+    if (!item.followTime) return;
+    const dateKey = formatDate(item.followTime);
+    if (!groups[dateKey]) {
+      groups[dateKey] = [];
+    }
+    groups[dateKey].push(item);
+  });
+  
+  // 转换为数组并按日期倒序排列
+  return Object.keys(groups)
+    .sort((a, b) => {
+      // 从原始数据中获取完整日期进行比较
+      const getFullDate = (dateKey) => {
+        const items = groups[dateKey];
+        if (items && items.length > 0 && items[0].followTime) {
+          return new Date(items[0].followTime);
+        }
+        return new Date();
+      };
+      return getFullDate(b) - getFullDate(a);
+    })
+    .map(date => ({
+      date,
+      items: groups[date].sort((a, b) => {
+        // 同一天内的记录按时间倒序排列
+        const timeA = new Date(a.followTime || 0).getTime();
+        const timeB = new Date(b.followTime || 0).getTime();
+        return timeB - timeA;
+      })
+    }));
+});
+
+// 格式化日期（仅显示月-日）
+const formatDate = (dateTime) => {
+  if (!dateTime) return '';
+  try {
+    const date = new Date(dateTime);
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${month}-${day}`;
+  } catch (e) {
+    return '';
+  }
+};
+
+// 格式化时间（仅显示时:分）
+const formatTimeOnly = (dateTime) => {
+  if (!dateTime) return '';
+  try {
+    const date = new Date(dateTime);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}`;
+  } catch (e) {
+    return dateTime;
+  }
+};
+
+// 跟进项点击
+const handleFollowupClick = (item) => {
+  emit('followup-click', item);
+};
+</script>
+
+<style lang="scss" scoped>
+.tab-content {
+  padding: 16px;
+}
+
+// 跟进动态样式
+.followup-timeline {
+  position: relative;
+  padding-bottom: 16px;
+}
+
+.followup-item {
+  margin-bottom: 12px;
+  position: relative;
+}
+
+.date-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  padding-left: 4px;
+}
+
+.date-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #1976d2;
+  margin-right: 8px;
+  position: relative;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: #fff;
+  }
+}
+
+.date-text {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+.followup-card {
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  padding: 14px;
+  margin-left: 16px;
+  position: relative;
+}
+
+.followup-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.followup-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 18px;
+  margin-right: 10px;
+  background-color: #e0e0e0;
+}
+
+.followup-user-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.followup-user-name {
+  font-size: 15px;
+  color: #333;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.followup-user-role {
+  font-size: 12px;
+  color: #999;
+  line-height: 1.2;
+}
+
+.followup-arrow {
+  font-size: 20px;
+  color: #ccc;
+  font-weight: 300;
+}
+
+.followup-text {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.6;
+  margin-bottom: 10px;
+}
+
+.followup-time-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.time-icon {
+  font-size: 12px;
+  color: #999;
+}
+
+.followup-time {
+  font-size: 12px;
+  color: #999;
+  line-height: 1.2;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 40px 0;
+  color: #999;
+  font-size: 14px;
+}
+</style>
+
diff --git a/components/customer-detail/InfoTab.vue b/components/customer-detail/InfoTab.vue
new file mode 100644
index 0000000..08c687d
--- /dev/null
+++ b/components/customer-detail/InfoTab.vue
@@ -0,0 +1,188 @@
+<template>
+  <view class="tab-content">
+    <view class="info-section">
+      <view class="section-title">
+        <view class="title-line"></view>
+        <text>基础信息</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">客户名称</text>
+        <text class="info-value">{{ customerDetail.name || '--' }}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">联系电话</text>
+        <text class="info-value">{{ customerDetail.mobile || '--' }}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">微信号</text>
+        <text class="info-value">{{ customerDetail.wechat || '--' }}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">客户来源</text>
+        <text class="info-value">{{ customerDetail.source || '--' }}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">客户意向</text>
+        <text class="info-value">{{ formatIntents(customerDetail.intents) }}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">意向强度</text>
+        <text class="info-value">{{ getIntentStrengthText(customerDetail.intentLevel) }}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">客户地区</text>
+        <text class="info-value">{{ customerDetail.regionName || '--' }}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">工作微信</text>
+        <text class="info-value">{{ customerDetail.wechatId || '--' }}</text>
+      </view>
+    </view>
+
+    <view class="info-section">
+      <view class="section-title">
+        <view class="title-line"></view>
+        <text>其他信息</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">客户星级</text>
+        <view class="info-value-stars">
+          <text 
+            class="star" 
+            v-for="i in 5" 
+            :key="i"
+            :class="{ 'filled': i <= getRatingFromIntentLevel(customerDetail.intentLevel) }"
+          >★</text>
+        </view>
+      </view>
+      <view class="info-item">
+        <text class="info-label">备注</text>
+        <text class="info-value">{{ customerDetail.remark || '--' }}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">顾虑点</text>
+        <text class="info-value">{{ customerDetail.concern || '--' }}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">痛点</text>
+        <text class="info-value">{{ customerDetail.pain || '--' }}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">关注点</text>
+        <text class="info-value">{{ customerDetail.attention || '--' }}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">需求点</text>
+        <text class="info-value">{{ customerDetail.demand || '--' }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+const props = defineProps({
+  customerDetail: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+// 根据意向等级获取星级
+const getRatingFromIntentLevel = (intentLevel) => {
+  const levelMap = {
+    '1': 5,
+    '2': 3
+  };
+  return levelMap[intentLevel] || 0;
+};
+
+// 格式化客户意向（数组转字符串）
+const formatIntents = (intents) => {
+  if (!intents || !Array.isArray(intents) || intents.length === 0) return '--';
+  return intents.join('、');
+};
+
+// 获取意向强度文本
+const getIntentStrengthText = (intentLevel) => {
+  const levelMap = {
+    '1': '高',
+    '2': '中',
+    '3': '低'
+  };
+  return levelMap[intentLevel] || '--';
+};
+</script>
+
+<style lang="scss" scoped>
+.tab-content {
+  padding: 16px;
+}
+
+// 客户信息样式
+.info-section {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 12px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.title-line {
+  width: 3px;
+  height: 16px;
+  background-color: #1976d2;
+  margin-right: 8px;
+}
+
+.section-title text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.info-item {
+  display: flex;
+  padding: 12px 0;
+  border-bottom: 1px solid #f5f5f5;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.info-label {
+  width: 100px;
+  font-size: 14px;
+  color: #666;
+  flex-shrink: 0;
+}
+
+.info-value {
+  flex: 1;
+  font-size: 14px;
+  color: #333;
+  text-align: right;
+}
+
+.info-value-stars {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  gap: 2px;
+}
+
+.star {
+  font-size: 14px;
+  color: #ddd;
+  
+  &.filled {
+    color: #ffc107;
+  }
+}
+</style>
+
diff --git a/components/customer-detail/ProjectsTab.vue b/components/customer-detail/ProjectsTab.vue
new file mode 100644
index 0000000..f53e3d5
--- /dev/null
+++ b/components/customer-detail/ProjectsTab.vue
@@ -0,0 +1,334 @@
+<template>
+  <view class="tab-content">
+    <view class="project-list">
+      <view 
+        class="project-card" 
+        v-for="(project, index) in projectList" 
+        :key="project.id || index"
+      >
+        <view class="project-header">
+          <view class="project-status-tag" :class="getProjectStatusClass(project.status)">
+            <text>{{ getProjectStatusText(project.status) }}</text>
+          </view>
+          <text class="project-more" @click.stop="handleProjectMore(project)">⋯</text>
+        </view>
+        <text class="project-name">{{ project.name }}</text>
+        <view class="project-progress">
+          <view class="progress-bar">
+            <view 
+              class="progress-fill" 
+              :style="{ width: getProjectProgress(project) + '%' }"
+            ></view>
+          </view>
+          <text class="progress-text">{{ getProjectProgress(project) }}%</text>
+        </view>
+        <view class="project-task-count">
+          <text class="task-count-text">{{ getTaskCountText(project) }}</text>
+        </view>
+        <view class="project-members">
+          <view class="member-avatars">
+            <image 
+              v-for="(member, idx) in getDisplayMembers(project.memberList)" 
+              :key="member.id || idx"
+              class="member-avatar" 
+              :src="member.userAvatar || '/static/default-avatar.png'"
+              mode="aspectFill"
+            />
+          </view>
+          <text class="members-text">{{ formatProjectMembers(project.memberList) }}</text>
+        </view>
+        <view class="project-deadline" :class="{ 'overdue': isProjectOverdue(project) }">
+          <text class="deadline-icon">🕐</text>
+          <text class="deadline-text">{{ formatProjectDeadline(project) }}</text>
+        </view>
+      </view>
+      <view class="empty-state" v-if="projectList.length === 0">
+        <text>暂无项目</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+const props = defineProps({
+  projectList: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['project-more']);
+
+// 获取项目状态样式类
+const getProjectStatusClass = (status) => {
+  return {
+    'status-developing': status === 'developing' || status === '1' || status === 'IN_PROGRESS',
+    'status-expiring': status === 'expiring' || status === '2' || status === 'EXPIRING_SOON'
+  };
+};
+
+// 获取项目状态文本
+const getProjectStatusText = (status) => {
+  const statusMap = {
+    'developing': '开发中',
+    'expiring': '即将到期',
+    '1': '开发中',
+    '2': '即将到期',
+    'IN_PROGRESS': '开发中',
+    'EXPIRING_SOON': '即将到期'
+  };
+  return statusMap[status] || '未知';
+};
+
+// 计算项目进度
+const getProjectProgress = (project) => {
+  if (!project) return 0;
+  // 如果有任务数据，根据任务完成情况计算
+  if (project.taskCount && project.taskCount > 0) {
+    const completed = project.taskPassCount || 0;
+    const progress = Math.round((completed / project.taskCount) * 100);
+    return Math.min(100, Math.max(0, progress)); // 确保在0-100之间
+  }
+  // 如果有进度字段，使用进度字段
+  if (project.progress !== undefined && project.progress !== null) {
+    return Math.min(100, Math.max(0, project.progress));
+  }
+  // 默认返回0
+  return 0;
+};
+
+// 获取任务计数文本
+const getTaskCountText = (project) => {
+  if (!project) return '0 / 0';
+  const completed = project.taskPassCount || 0;
+  const total = project.taskCount || 0;
+  return `${completed} / ${total}`;
+};
+
+// 获取要显示的成员头像（最多4个）
+const getDisplayMembers = (memberList) => {
+  if (!memberList || !Array.isArray(memberList)) return [];
+  return memberList.slice(0, 4);
+};
+
+// 格式化项目成员列表
+const formatProjectMembers = (memberList) => {
+  if (!memberList || !Array.isArray(memberList) || memberList.length === 0) {
+    return '暂无成员';
+  }
+  
+  const names = memberList.map(member => member.userName || member.name).filter(Boolean);
+  
+  if (names.length <= 4) {
+    return names.join('、');
+  }
+  
+  const firstFour = names.slice(0, 4).join('、');
+  return `${firstFour}等${names.length}人`;
+};
+
+// 判断项目是否逾期
+const isProjectOverdue = (project) => {
+  if (!project) return false;
+  // 优先使用 devOverdue 字段
+  if (project.devOverdue !== undefined && project.devOverdue !== null) {
+    return project.devOverdue;
+  }
+  // 否则根据日期判断
+  const deadline = project.expireTime || project.expectedCompleteDate;
+  if (!deadline) return false;
+  const deadlineDate = new Date(deadline);
+  const now = new Date();
+  return deadlineDate < now;
+};
+
+// 格式化项目截止日期
+const formatProjectDeadline = (project) => {
+  if (!project) return '--';
+  
+  // 优先使用 expireTime，其次使用 expectedCompleteDate
+  const deadline = project.expireTime || project.expectedCompleteDate;
+  if (!deadline) return '--';
+  
+  const deadlineDate = new Date(deadline);
+  const now = new Date();
+  const diffTime = deadlineDate - now;
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  
+  // 格式化日期显示
+  const year = deadlineDate.getFullYear();
+  const month = String(deadlineDate.getMonth() + 1).padStart(2, '0');
+  const day = String(deadlineDate.getDate()).padStart(2, '0');
+  const dateStr = `${year}-${month}-${day}`;
+  
+  if (diffDays < 0) {
+    return `逾期${Math.abs(diffDays)}天 ${dateStr}`;
+  } else {
+    return `剩余${diffDays}天 ${dateStr}`;
+  }
+};
+
+// 项目更多操作
+const handleProjectMore = (project) => {
+  emit('project-more', project);
+};
+</script>
+
+<style lang="scss" scoped>
+.tab-content {
+  padding: 16px;
+}
+
+// 项目列表样式
+.project-list {
+  padding-bottom: 16px;
+}
+
+.project-card {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 12px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+}
+
+.project-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+}
+
+.project-status-tag {
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  
+  &.status-developing {
+    background-color: #1976d2;
+    color: #fff;
+  }
+  
+  &.status-expiring {
+    background-color: #ff9800;
+    color: #fff;
+  }
+}
+
+.project-more {
+  font-size: 20px;
+  color: #999;
+  line-height: 1;
+  padding: 4px;
+}
+
+.project-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+  display: block;
+  line-height: 1.4;
+}
+
+.project-progress {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.progress-bar {
+  flex: 1;
+  height: 6px;
+  background-color: #f0f0f0;
+  border-radius: 3px;
+  overflow: hidden;
+  margin-right: 8px;
+}
+
+.progress-fill {
+  height: 100%;
+  background-color: #1976d2;
+  border-radius: 3px;
+  transition: width 0.3s;
+}
+
+.progress-text {
+  font-size: 12px;
+  color: #1976d2;
+  font-weight: 600;
+  min-width: 40px;
+  text-align: right;
+}
+
+.project-task-count {
+  margin-bottom: 10px;
+}
+
+.task-count-text {
+  font-size: 13px;
+  color: #666;
+}
+
+.project-members {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  gap: 8px;
+}
+
+.member-avatars {
+  display: flex;
+}
+
+.member-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  border: 2px solid #fff;
+  margin-left: -8px;
+  
+  &:first-child {
+    margin-left: 0;
+  }
+}
+
+.members-text {
+  font-size: 13px;
+  color: #666;
+  flex: 1;
+}
+
+.project-deadline {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.deadline-icon {
+  font-size: 12px;
+  color: #999;
+}
+
+.deadline-text {
+  font-size: 12px;
+  color: #1976d2;
+  
+  .overdue & {
+    color: #f44336;
+  }
+}
+
+.project-deadline.overdue .deadline-text {
+  color: #f44336;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 40px 0;
+  color: #999;
+  font-size: 14px;
+}
+</style>
+
diff --git a/pages/customer/detail/index.vue b/pages/customer/detail/index.vue
index 84790a9..2c3cc21 100644
--- a/pages/customer/detail/index.vue
+++ b/pages/customer/detail/index.vue
@@ -80,175 +80,24 @@
     <!-- 内容区域 -->
     <scroll-view class="content-scroll" scroll-y>
       <!-- 跟进动态标签页 -->
-      <view class="tab-content" v-if="activeTab === 'followup'">
-        <view class="followup-timeline">
-          <template v-for="(group, groupIndex) in groupedFollowupList" :key="groupIndex">
-            <view 
-              class="followup-item" 
-              v-for="(item, index) in group.items" 
-              :key="index"
-              @click="handleFollowupClick(item)"
-            >
-              <view class="date-header" v-if="index === 0">
-                <view class="date-dot"></view>
-                <text class="date-text">{{ group.date }}</text>
-              </view>
-              <view class="followup-card">
-                <view class="followup-header">
-                  <image 
-                    class="followup-avatar" 
-                    :src="item.userAvatar || '/static/default-avatar.png'"
-                    mode="aspectFill"
-                  />
-                  <view class="followup-user-info">
-                    <text class="followup-user-name">{{ item.userName }}</text>
-                    <text class="followup-user-role">销售经理</text>
-                  </view>
-                  <text class="followup-arrow">›</text>
-                </view>
-                <text class="followup-text">{{ item.content }}</text>
-                <view class="followup-time-wrapper">
-                  <text class="time-icon">🕐</text>
-                  <text class="followup-time">{{ formatTimeOnly(item.followTime) }}</text>
-                </view>
-              </view>
-            </view>
-          </template>
-          <view class="empty-state" v-if="followupList.length === 0">
-            <text>暂无跟进记录</text>
-          </view>
-        </view>
-      </view>
-
+      <FollowupTab 
+        v-if="activeTab === 'followup'"
+        :followup-list="followupList"
+        @followup-click="handleFollowupClick"
+      />
+      
       <!-- 项目列表标签页 -->
-      <view class="tab-content" v-if="activeTab === 'projects'">
-        <view class="project-list">
-          <view 
-            class="project-card" 
-            v-for="(project, index) in projectList" 
-            :key="project.id || index"
-          >
-            <view class="project-header">
-              <view class="project-status-tag" :class="getProjectStatusClass(project.status)">
-                <text>{{ getProjectStatusText(project.status) }}</text>
-              </view>
-              <text class="project-more" @click.stop="handleProjectMore(project)">⋯</text>
-            </view>
-            <text class="project-name">{{ project.name }}</text>
-            <view class="project-progress">
-              <view class="progress-bar">
-                <view 
-                  class="progress-fill" 
-                  :style="{ width: getProjectProgress(project) + '%' }"
-                ></view>
-              </view>
-              <text class="progress-text">{{ getProjectProgress(project) }}%</text>
-            </view>
-            <view class="project-task-count">
-              <text class="task-count-text">{{ getTaskCountText(project) }}</text>
-            </view>
-            <view class="project-members">
-              <view class="member-avatars">
-                <image 
-                  v-for="(member, idx) in getDisplayMembers(project.memberList)" 
-                  :key="member.id || idx"
-                  class="member-avatar" 
-                  :src="member.userAvatar || '/static/default-avatar.png'"
-                  mode="aspectFill"
-                />
-              </view>
-              <text class="members-text">{{ formatProjectMembers(project.memberList) }}</text>
-            </view>
-            <view class="project-deadline" :class="{ 'overdue': isProjectOverdue(project) }">
-              <text class="deadline-icon">🕐</text>
-              <text class="deadline-text">{{ formatProjectDeadline(project) }}</text>
-            </view>
-          </view>
-          <view class="empty-state" v-if="projectList.length === 0">
-            <text>暂无项目</text>
-          </view>
-        </view>
-      </view>
-
+      <ProjectsTab 
+        v-if="activeTab === 'projects'"
+        :project-list="projectList"
+        @project-more="handleProjectMore"
+      />
+      
       <!-- 客户信息标签页 -->
-      <view class="tab-content" v-if="activeTab === 'info'">
-        <view class="info-section">
-          <view class="section-title">
-            <view class="title-line"></view>
-            <text>基础信息</text>
-          </view>
-          <view class="info-item">
-            <text class="info-label">客户名称</text>
-            <text class="info-value">{{ customerDetail.name || '--' }}</text>
-          </view>
-          <view class="info-item">
-            <text class="info-label">联系电话</text>
-            <text class="info-value">{{ customerDetail.mobile || '--' }}</text>
-          </view>
-          <view class="info-item">
-            <text class="info-label">微信号</text>
-            <text class="info-value">{{ customerDetail.wechat || '--' }}</text>
-          </view>
-          <view class="info-item">
-            <text class="info-label">客户来源</text>
-            <text class="info-value">{{ customerDetail.source || '--' }}</text>
-          </view>
-          <view class="info-item">
-            <text class="info-label">客户意向</text>
-            <text class="info-value">{{ formatIntents(customerDetail.intents) }}</text>
-          </view>
-          <view class="info-item">
-            <text class="info-label">意向强度</text>
-            <text class="info-value">{{ getIntentStrengthText(customerDetail.intentLevel) }}</text>
-          </view>
-          <view class="info-item">
-            <text class="info-label">客户地区</text>
-            <text class="info-value">{{ customerDetail.regionName || '--' }}</text>
-          </view>
-          <view class="info-item">
-            <text class="info-label">工作微信</text>
-            <text class="info-value">{{ customerDetail.wechatId || '--' }}</text>
-          </view>
-        </view>
-
-        <view class="info-section">
-          <view class="section-title">
-            <view class="title-line"></view>
-            <text>其他信息</text>
-          </view>
-          <view class="info-item">
-            <text class="info-label">客户星级</text>
-            <view class="info-value-stars">
-              <text 
-                class="star" 
-                v-for="i in 5" 
-                :key="i"
-                :class="{ 'filled': i <= getRatingFromIntentLevel(customerDetail.intentLevel) }"
-              >★</text>
-            </view>
-          </view>
-          <view class="info-item">
-            <text class="info-label">备注</text>
-            <text class="info-value">{{ customerDetail.remark || '--' }}</text>
-          </view>
-          <view class="info-item">
-            <text class="info-label">顾虑点</text>
-            <text class="info-value">{{ customerDetail.concern || '--' }}</text>
-          </view>
-          <view class="info-item">
-            <text class="info-label">痛点</text>
-            <text class="info-value">{{ customerDetail.pain || '--' }}</text>
-          </view>
-          <view class="info-item">
-            <text class="info-label">关注点</text>
-            <text class="info-value">{{ customerDetail.attention || '--' }}</text>
-          </view>
-          <view class="info-item">
-            <text class="info-label">需求点</text>
-            <text class="info-value">{{ customerDetail.demand || '--' }}</text>
-          </view>
-        </view>
-      </view>
+      <InfoTab 
+        v-if="activeTab === 'info'"
+        :customer-detail="customerDetail"
+      />
     </scroll-view>
 
     <!-- 底部操作栏 -->
@@ -274,9 +123,12 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted } from 'vue';
 import { onLoad } from '@dcloudio/uni-app';
 import { getCustomerDetail, getCustomerFollowupList, getCustomerProjects } from '@/common/api';
+import FollowupTab from '@/components/customer-detail/FollowupTab.vue';
+import ProjectsTab from '@/components/customer-detail/ProjectsTab.vue';
+import InfoTab from '@/components/customer-detail/InfoTab.vue';
 
 // 页面参数
 const customerId = ref('');
@@ -286,46 +138,6 @@ const followupList = ref([]);
 const projectList = ref([]);
 const loading = ref(false);
 
-// 按日期分组的跟进记录
-const groupedFollowupList = computed(() => {
-  if (!followupList.value || followupList.value.length === 0) {
-    return [];
-  }
-  
-  const groups = {};
-  followupList.value.forEach(item => {
-    if (!item.followTime) return;
-    const dateKey = formatDate(item.followTime);
-    if (!groups[dateKey]) {
-      groups[dateKey] = [];
-    }
-    groups[dateKey].push(item);
-  });
-  
-  // 转换为数组并按日期倒序排列
-  return Object.keys(groups)
-    .sort((a, b) => {
-      // 从原始数据中获取完整日期进行比较
-      const getFullDate = (dateKey) => {
-        const items = groups[dateKey];
-        if (items && items.length > 0 && items[0].followTime) {
-          return new Date(items[0].followTime);
-        }
-        return new Date();
-      };
-      return getFullDate(b) - getFullDate(a);
-    })
-    .map(date => ({
-      date,
-      items: groups[date].sort((a, b) => {
-        // 同一天内的记录按时间倒序排列
-        const timeA = new Date(a.followTime || 0).getTime();
-        const timeB = new Date(b.followTime || 0).getTime();
-        return timeB - timeA;
-      })
-    }));
-});
-
 // 获取页面参数
 onLoad((options) => {
   if (options && options.id) {
@@ -417,15 +229,6 @@ const getStatusText = (status) => {
   return statusMap[status] || '未知';
 };
 
-// 根据意向等级获取星级
-const getRatingFromIntentLevel = (intentLevel) => {
-  const levelMap = {
-    '1': 5,
-    '2': 3
-  };
-  return levelMap[intentLevel] || 0;
-};
-
 // 格式化日期时间
 const formatDateTime = (dateTime) => {
   if (!dateTime) return '暂无';
@@ -442,148 +245,13 @@ const formatDateTime = (dateTime) => {
   }
 };
 
-// 格式化日期（仅显示月-日）
-const formatDate = (dateTime) => {
-  if (!dateTime) return '';
-  try {
-    const date = new Date(dateTime);
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    return `${month}-${day}`;
-  } catch (e) {
-    return '';
-  }
-};
-
-// 格式化时间（仅显示时:分）
-const formatTimeOnly = (dateTime) => {
-  if (!dateTime) return '';
-  try {
-    const date = new Date(dateTime);
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    const hours = String(date.getHours()).padStart(2, '0');
-    const minutes = String(date.getMinutes()).padStart(2, '0');
-    return `${year}-${month}-${day} ${hours}:${minutes}`;
-  } catch (e) {
-    return dateTime;
-  }
-};
-
-// 获取项目状态样式类
-const getProjectStatusClass = (status) => {
-  return {
-    'status-developing': status === 'developing' || status === '1' || status === 'IN_PROGRESS',
-    'status-expiring': status === 'expiring' || status === '2' || status === 'EXPIRING_SOON'
+// 根据意向等级获取星级
+const getRatingFromIntentLevel = (intentLevel) => {
+  const levelMap = {
+    '1': 5,
+    '2': 3
   };
-};
-
-// 获取项目状态文本
-const getProjectStatusText = (status) => {
-  const statusMap = {
-    'developing': '开发中',
-    'expiring': '即将到期',
-    '1': '开发中',
-    '2': '即将到期',
-    'IN_PROGRESS': '开发中',
-    'EXPIRING_SOON': '即将到期'
-  };
-  return statusMap[status] || '未知';
-};
-
-// 计算项目进度
-const getProjectProgress = (project) => {
-  if (!project) return 0;
-  // 如果有任务数据，根据任务完成情况计算
-  if (project.taskCount && project.taskCount > 0) {
-    const completed = project.taskPassCount || 0;
-    const progress = Math.round((completed / project.taskCount) * 100);
-    return Math.min(100, Math.max(0, progress)); // 确保在0-100之间
-  }
-  // 如果有进度字段，使用进度字段
-  if (project.progress !== undefined && project.progress !== null) {
-    return Math.min(100, Math.max(0, project.progress));
-  }
-  // 默认返回0
-  return 0;
-};
-
-// 获取任务计数文本
-const getTaskCountText = (project) => {
-  if (!project) return '0 / 0';
-  const completed = project.taskPassCount || 0;
-  const total = project.taskCount || 0;
-  return `${completed} / ${total}`;
-};
-
-// 获取要显示的成员头像（最多4个）
-const getDisplayMembers = (memberList) => {
-  if (!memberList || !Array.isArray(memberList)) return [];
-  return memberList.slice(0, 4);
-};
-
-// 格式化项目成员列表
-const formatProjectMembers = (memberList) => {
-  if (!memberList || !Array.isArray(memberList) || memberList.length === 0) {
-    return '暂无成员';
-  }
-  
-  const names = memberList.map(member => member.userName || member.name).filter(Boolean);
-  
-  if (names.length <= 4) {
-    return names.join('、');
-  }
-  
-  const firstFour = names.slice(0, 4).join('、');
-  return `${firstFour}等${names.length}人`;
-};
-
-// 判断项目是否逾期
-const isProjectOverdue = (project) => {
-  if (!project) return false;
-  // 优先使用 devOverdue 字段
-  if (project.devOverdue !== undefined && project.devOverdue !== null) {
-    return project.devOverdue;
-  }
-  // 否则根据日期判断
-  const deadline = project.expireTime || project.expectedCompleteDate;
-  if (!deadline) return false;
-  const deadlineDate = new Date(deadline);
-  const now = new Date();
-  return deadlineDate < now;
-};
-
-// 格式化项目截止日期
-const formatProjectDeadline = (project) => {
-  if (!project) return '--';
-  
-  // 优先使用 expireTime，其次使用 expectedCompleteDate
-  const deadline = project.expireTime || project.expectedCompleteDate;
-  if (!deadline) return '--';
-  
-  const deadlineDate = new Date(deadline);
-  const now = new Date();
-  const diffTime = deadlineDate - now;
-  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-  
-  // 格式化日期显示
-  const year = deadlineDate.getFullYear();
-  const month = String(deadlineDate.getMonth() + 1).padStart(2, '0');
-  const day = String(deadlineDate.getDate()).padStart(2, '0');
-  const dateStr = `${year}-${month}-${day}`;
-  
-  if (diffDays < 0) {
-    return `逾期${Math.abs(diffDays)}天 ${dateStr}`;
-  } else {
-    return `剩余${diffDays}天 ${dateStr}`;
-  }
-};
-
-// 格式化客户意向（数组转字符串）
-const formatIntents = (intents) => {
-  if (!intents || !Array.isArray(intents) || intents.length === 0) return '--';
-  return intents.join('、');
+  return levelMap[intentLevel] || 0;
 };
 
 // 获取客户类型文本
@@ -595,16 +263,6 @@ const getCustomerTypeText = (type) => {
   return typeMap[type] || '--';
 };
 
-// 获取意向强度文本
-const getIntentStrengthText = (intentLevel) => {
-  const levelMap = {
-    '1': '高',
-    '2': '中',
-    '3': '低'
-  };
-  return levelMap[intentLevel] || '--';
-};
-
 // 返回
 const handleBack = () => {
   uni.navigateBack();
@@ -825,337 +483,6 @@ onMounted(() => {
   overflow-y: auto;
 }
 
-.tab-content {
-  padding: 16px;
-}
-
-// 跟进动态样式
-.followup-timeline {
-  position: relative;
-  padding-bottom: 16px;
-}
-
-.followup-item {
-  margin-bottom: 12px;
-  position: relative;
-}
-
-.date-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-  padding-left: 4px;
-}
-
-.date-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: #1976d2;
-  margin-right: 8px;
-  position: relative;
-  
-  &::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 4px;
-    height: 4px;
-    border-radius: 50%;
-    background-color: #fff;
-  }
-}
-
-.date-text {
-  font-size: 14px;
-  color: #333;
-  font-weight: 500;
-}
-
-.followup-card {
-  background-color: #f5f5f5;
-  border-radius: 8px;
-  padding: 14px;
-  margin-left: 16px;
-  position: relative;
-}
-
-.followup-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.followup-avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 18px;
-  margin-right: 10px;
-  background-color: #e0e0e0;
-}
-
-.followup-user-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.followup-user-name {
-  font-size: 15px;
-  color: #333;
-  font-weight: 500;
-  line-height: 1.2;
-}
-
-.followup-user-role {
-  font-size: 12px;
-  color: #999;
-  line-height: 1.2;
-}
-
-.followup-arrow {
-  font-size: 20px;
-  color: #ccc;
-  font-weight: 300;
-}
-
-.followup-text {
-  font-size: 14px;
-  color: #666;
-  line-height: 1.6;
-  margin-bottom: 10px;
-}
-
-.followup-time-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.time-icon {
-  font-size: 12px;
-  color: #999;
-}
-
-.followup-time {
-  font-size: 12px;
-  color: #999;
-  line-height: 1.2;
-}
-
-// 项目列表样式
-.project-list {
-  padding-bottom: 16px;
-}
-
-.project-card {
-  background-color: #fff;
-  border-radius: 8px;
-  padding: 16px;
-  margin-bottom: 12px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
-}
-
-.project-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 12px;
-}
-
-.project-status-tag {
-  padding: 4px 10px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 500;
-  
-  &.status-developing {
-    background-color: #1976d2;
-    color: #fff;
-  }
-  
-  &.status-expiring {
-    background-color: #ff9800;
-    color: #fff;
-  }
-}
-
-.project-more {
-  font-size: 20px;
-  color: #999;
-  line-height: 1;
-  padding: 4px;
-}
-
-.project-name {
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 12px;
-  display: block;
-  line-height: 1.4;
-}
-
-.project-progress {
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-}
-
-.progress-bar {
-  flex: 1;
-  height: 6px;
-  background-color: #f0f0f0;
-  border-radius: 3px;
-  overflow: hidden;
-  margin-right: 8px;
-}
-
-.progress-fill {
-  height: 100%;
-  background-color: #1976d2;
-  border-radius: 3px;
-  transition: width 0.3s;
-}
-
-.progress-text {
-  font-size: 12px;
-  color: #1976d2;
-  font-weight: 600;
-  min-width: 40px;
-  text-align: right;
-}
-
-.project-task-count {
-  margin-bottom: 10px;
-}
-
-.task-count-text {
-  font-size: 13px;
-  color: #666;
-}
-
-.project-members {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-  gap: 8px;
-}
-
-.member-avatars {
-  display: flex;
-}
-
-.member-avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 12px;
-  border: 2px solid #fff;
-  margin-left: -8px;
-  
-  &:first-child {
-    margin-left: 0;
-  }
-}
-
-.members-text {
-  font-size: 13px;
-  color: #666;
-  flex: 1;
-}
-
-.project-deadline {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.deadline-icon {
-  font-size: 12px;
-  color: #999;
-}
-
-.deadline-text {
-  font-size: 12px;
-  color: #1976d2;
-  
-  .overdue & {
-    color: #f44336;
-  }
-}
-
-.project-deadline.overdue .deadline-text {
-  color: #f44336;
-}
-
-// 客户信息样式
-.info-section {
-  background-color: #fff;
-  border-radius: 8px;
-  padding: 16px;
-  margin-bottom: 12px;
-}
-
-.section-title {
-  display: flex;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.title-line {
-  width: 3px;
-  height: 16px;
-  background-color: #1976d2;
-  margin-right: 8px;
-}
-
-.section-title text {
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.info-item {
-  display: flex;
-  padding: 12px 0;
-  border-bottom: 1px solid #f5f5f5;
-  
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.info-label {
-  width: 100px;
-  font-size: 14px;
-  color: #666;
-  flex-shrink: 0;
-}
-
-.info-value {
-  flex: 1;
-  font-size: 14px;
-  color: #333;
-  text-align: right;
-}
-
-.info-value-stars {
-  flex: 1;
-  display: flex;
-  justify-content: flex-end;
-  gap: 2px;
-}
-
-.empty-state {
-  text-align: center;
-  padding: 40px 0;
-  color: #999;
-  font-size: 14px;
-}
-
 // 底部操作栏
 .bottom-actions {
   display: flex;