From 6bc8515f48e8480700afcd0dc472526250e5e922 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Fri, 7 Nov 2025 09:40:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A2=E6=88=B7=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                           |   2 +-
 common/api.js                     | 100 ++++++
 components/CustomerManagement.vue | 579 ++++++++++++++++++++++++++++++
 pages/index/index.vue             |  46 ++-
 4 files changed, 709 insertions(+), 18 deletions(-)
 create mode 100644 components/CustomerManagement.vue

diff --git a/App.vue b/App.vue
index f5057a9..0e709ea 100644
--- a/App.vue
+++ b/App.vue
@@ -8,7 +8,7 @@
 			// 如果还没有 token，则设置一个测试 token
 			const token = uni.getStorageSync('token')
 			if (!token) {
-				const testToken = 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImUzMDY4YzNjLThiOTMtNGExNy1hNmFlLWY1NDg5ZTJjYmYyOSJ9.k1cspIDAA_Z357hbRC0PY3PPwRLjTlvezrq37rgVVSYL_T11nDjF3IOWw7QZoEK1uZKYKNn_rAhuqKGOoopvWw'
+				const testToken = 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImQ0ODJhYzdlLTBiYzgtNGFhNC1hMDI2LWVkMWU4YWQ3YmJkYiJ9._m4s6mcpjAHtk4u9r6LMMfIQHSCXDPCTfiWVOTyopZfbsxVFiLkY4ovec3M3u2E9KKm_jIH2fLhAduW4rfAZHQ'
 				uni.setStorageSync('token', testToken)
 				console.log('已设置测试 token:', testToken)
 			}
diff --git a/common/api.js b/common/api.js
index 20bda64..2d38078 100644
--- a/common/api.js
+++ b/common/api.js
@@ -117,3 +117,103 @@ export const submitTask = ({ id, submitAttaches, submitRemark }) => {
   });
 };
 
+/**
+ * 获取客户列表
+ * @param {Object} params 请求参数（可选）
+ * @param {string[]} params.statusList 客户状态列表：["1"] 正在跟进, ["2"] 待跟进
+ * @param {string} params.excludeld 排除id
+ * @param {string[]} params.ids id列表
+ * @param {string} params.intent 意向
+ * @param {string} params.createDate 创建日期 (yyyy-MM-dd)
+ * @param {string} params.joinUserld 参与人id
+ * @param {string} params.lastFollowDate 上次跟进日期 (yyyy-MM-dd)
+ * @param {string} params.nextFollowDate 下次跟进日期 (yyyy-MM-dd)
+ * @param {string} params.nextFollowDateStart 下次跟进日期开始 (yyyy-MM-dd)
+ * @param {string} params.nextFollowDateEnd 下次跟进日期结束 (yyyy-MM-dd)
+ * @param {string[]} params.createDateRange 创建日期范围 (yyyy-MM-dd)
+ * @param {string[]} params.saleList 销售列表
+ * @returns {Promise} 返回客户列表 { total: number, rows: array }
+ */
+export const getCustomerList = (params = {}) => {
+  const queryParams = [];
+  
+  // 处理数组参数
+  if (params.statusList && Array.isArray(params.statusList) && params.statusList.length > 0) {
+    params.statusList.forEach(status => {
+      queryParams.push(`statusList=${encodeURIComponent(status)}`);
+    });
+  }
+  
+  if (params.ids && Array.isArray(params.ids) && params.ids.length > 0) {
+    params.ids.forEach(id => {
+      queryParams.push(`ids=${encodeURIComponent(id)}`);
+    });
+  }
+  
+  if (params.createDateRange && Array.isArray(params.createDateRange) && params.createDateRange.length > 0) {
+    params.createDateRange.forEach(date => {
+      queryParams.push(`createDateRange=${encodeURIComponent(date)}`);
+    });
+  }
+  
+  if (params.saleList && Array.isArray(params.saleList) && params.saleList.length > 0) {
+    params.saleList.forEach(sale => {
+      queryParams.push(`saleList=${encodeURIComponent(sale)}`);
+    });
+  }
+  
+  // 处理字符串参数
+  if (params.excludeld) {
+    queryParams.push(`excludeld=${encodeURIComponent(params.excludeld)}`);
+  }
+  
+  if (params.intent) {
+    queryParams.push(`intent=${encodeURIComponent(params.intent)}`);
+  }
+  
+  if (params.createDate) {
+    queryParams.push(`createDate=${encodeURIComponent(params.createDate)}`);
+  }
+  
+  if (params.joinUserld) {
+    queryParams.push(`joinUserld=${encodeURIComponent(params.joinUserld)}`);
+  }
+  
+  if (params.lastFollowDate) {
+    queryParams.push(`lastFollowDate=${encodeURIComponent(params.lastFollowDate)}`);
+  }
+  
+  if (params.nextFollowDate) {
+    queryParams.push(`nextFollowDate=${encodeURIComponent(params.nextFollowDate)}`);
+  }
+  
+  if (params.nextFollowDateStart) {
+    queryParams.push(`nextFollowDateStart=${encodeURIComponent(params.nextFollowDateStart)}`);
+  }
+  
+  if (params.nextFollowDateEnd) {
+    queryParams.push(`nextFollowDateEnd=${encodeURIComponent(params.nextFollowDateEnd)}`);
+  }
+  
+  const queryString = queryParams.length > 0 ? `?${queryParams.join('&')}` : '';
+  
+  return uni.$uv.http.get(`bst/customer/list${queryString}`, {
+    custom: {
+      auth: true  // 启用 token 认证
+    }
+  });
+};
+
+/**
+ * 获取客户详情
+ * @param {string} id 客户ID
+ * @returns {Promise} 返回客户详情
+ */
+export const getCustomerDetail = (id) => {
+  return uni.$uv.http.get(`customer/${id}`, {
+    custom: {
+      auth: true  // 启用 token 认证
+    }
+  });
+};
+
diff --git a/components/CustomerManagement.vue b/components/CustomerManagement.vue
new file mode 100644
index 0000000..983a912
--- /dev/null
+++ b/components/CustomerManagement.vue
@@ -0,0 +1,579 @@
+<template>
+  <view class="customer-management">
+    <!-- 顶部标题栏 -->
+    <view class="header">
+      <text class="header-title">客户管理</text>
+      <view class="filter-btn" @click="showFilter = !showFilter">
+        <text class="filter-text">筛选</text>
+        <text class="filter-icon" :class="{ 'rotate': showFilter }">▼</text>
+      </view>
+    </view>
+
+    <!-- 筛选区域（可选） -->
+    <view class="filter-panel" v-if="showFilter">
+      <view class="filter-item">
+        <text class="filter-label">状态：</text>
+        <view class="filter-options">
+          <text 
+            class="filter-option" 
+            :class="{ 'active': filterStatus === '' }"
+            @click="filterStatus = ''"
+          >全部</text>
+          <text 
+            class="filter-option" 
+            :class="{ 'active': filterStatus === 'following' }"
+            @click="filterStatus = 'following'"
+          >正在跟进</text>
+          <text 
+            class="filter-option" 
+            :class="{ 'active': filterStatus === 'pending' }"
+            @click="filterStatus = 'pending'"
+          >待跟进</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 客户列表 -->
+    <scroll-view class="customer-list" scroll-y>
+      <view 
+        class="customer-card" 
+        v-for="customer in filteredCustomers" 
+        :key="customer.id"
+        @click="handleCustomerClick(customer)"
+      >
+        <!-- 客户信息区域 -->
+        <view class="customer-header">
+          <view class="customer-info">
+            <text class="customer-name">{{ customer.name }}</text>
+            <text class="last-followup">最后跟进: {{ formatDateTime(customer.lastFollowTime) }}</text>
+          </view>
+          <view class="status-indicator">
+            <view 
+              class="status-dot" 
+              :class="getStatusClass(customer.status)"
+            ></view>
+            <text class="status-text">{{ getStatusText(customer.status) }}</text>
+          </view>
+        </view>
+
+        <!-- 客户星级 -->
+        <view class="customer-rating">
+          <text class="rating-label">客户星级:</text>
+          <view class="stars">
+            <text 
+              class="star" 
+              v-for="i in 5" 
+              :key="i"
+              :class="{ 'filled': i <= getRatingFromIntentLevel(customer.intentLevel) }"
+            >★</text>
+          </view>
+        </view>
+
+        <!-- 分配用户 -->
+        <view class="assigned-user">
+          <image 
+            class="user-avatar" 
+            :src="customer.assignedUserAvatar || '/static/default-avatar.png'"
+            mode="aspectFill"
+          />
+          <text class="user-name">{{ customer.followName || '未分配' }}</text>
+        </view>
+
+        <!-- 操作按钮 -->
+        <view class="action-buttons">
+          <view class="action-item" @click.stop="handleFollowup(customer)">
+            <text class="action-icon" :class="{ 'checked': customer.status === '1' }">✓</text>
+            <text class="action-text">跟进</text>
+          </view>
+          <view class="action-item" @click.stop="handleTasks(customer)">
+            <text class="action-icon">☰</text>
+            <text class="action-text">任务</text>
+          </view>
+          <view class="action-item" @click.stop="handleCall(customer)">
+            <text class="action-icon">☎</text>
+            <text class="action-text">电话</text>
+          </view>
+          <view class="action-item" @click.stop="handleMore(customer)">
+            <text class="action-text">更多</text>
+            <text class="action-arrow">›</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 空状态 -->
+      <view class="empty-state" v-if="filteredCustomers.length === 0 && !loading">
+        <text class="empty-text">暂无客户数据</text>
+      </view>
+
+      <!-- 加载状态 -->
+      <view class="loading-state" v-if="loading">
+        <text class="loading-text">加载中...</text>
+      </view>
+    </scroll-view>
+
+    <!-- 悬浮添加按钮 -->
+    <FabPlus @click="handleAddCustomer" />
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import FabPlus from '@/components/FabPlus.vue';
+import { getCustomerList } from '@/common/api';
+
+// 筛选状态
+const showFilter = ref(false);
+const filterStatus = ref('');
+
+// 加载状态
+const loading = ref(false);
+
+// 客户列表数据
+const customers = ref([]);
+
+// 过滤后的客户列表
+const filteredCustomers = computed(() => {
+  if (!filterStatus.value) {
+    return customers.value;
+  }
+  // 将筛选状态映射到API状态值
+  const statusMap = {
+    'following': '1',  // 正在跟进
+    'pending': '2'     // 待跟进
+  };
+  const targetStatus = statusMap[filterStatus.value];
+  if (!targetStatus) {
+    return customers.value;
+  }
+  return customers.value.filter(customer => customer.status === targetStatus);
+});
+
+// 获取状态样式类
+const getStatusClass = (status) => {
+  return {
+    'status-following': status === '1',  // 正在跟进
+    'status-pending': status === '2'     // 待跟进
+  };
+};
+
+// 获取状态文本
+const getStatusText = (status) => {
+  const statusMap = {
+    '1': '正在跟进',
+    '2': '待跟进',
+    '3': '其他',
+    '4': '无效客户'
+  };
+  return statusMap[status] || '未知';
+};
+
+// 根据意向等级获取星级（1=高=5星，2=中=3星）
+const getRatingFromIntentLevel = (intentLevel) => {
+  const levelMap = {
+    '1': 5,  // 高意向 = 5星
+    '2': 3   // 中意向 = 3星
+  };
+  return levelMap[intentLevel] || 0;
+};
+
+// 格式化日期时间
+const formatDateTime = (dateTime) => {
+  if (!dateTime) return '暂无';
+  // 将 "2025-10-29 09:00:00" 格式化为 "2025-10-29 09:00"
+  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 loadCustomerList = async () => {
+  loading.value = true;
+  try {
+    // 构建请求参数
+    const params = {};
+    
+    // 根据筛选状态设置statusList参数
+    if (filterStatus.value) {
+      const statusMap = {
+        'following': ['1'],  // 正在跟进
+        'pending': ['2']     // 待跟进
+      };
+      if (statusMap[filterStatus.value]) {
+        params.statusList = statusMap[filterStatus.value];
+      }
+    }
+    
+    // 调用 API 获取客户列表
+    const res = await getCustomerList(params);
+    
+    // API返回格式: { total: number, rows: array }
+    if (res && res.rows && Array.isArray(res.rows)) {
+      customers.value = res.rows;
+    } else if (res && Array.isArray(res)) {
+      // 兼容直接返回数组的情况
+      customers.value = res;
+    } else {
+      customers.value = [];
+    }
+  } catch (error) {
+    console.error('加载客户列表失败:', error);
+    uni.$uv.toast('加载客户列表失败');
+    customers.value = [];
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 处理客户点击
+const handleCustomerClick = (customer) => {
+  console.log('点击客户:', customer);
+  // 可以跳转到客户详情页
+  // uni.navigateTo({
+  //   url: `/pages/customer-detail/index?id=${customer.id}`
+  // });
+};
+
+// 处理跟进
+const handleFollowup = (customer) => {
+  console.log('跟进客户:', customer);
+  // TODO: 调用 API 更新跟进状态
+  // 这里可以跳转到跟进记录页面或打开跟进对话框
+  uni.navigateTo({
+    url: `/pages/customer-follow/index?customerId=${customer.id}&customerName=${customer.name}`
+  });
+};
+
+// 处理任务
+const handleTasks = (customer) => {
+  console.log('查看客户任务:', customer);
+  // 可以跳转到客户任务列表页
+  uni.navigateTo({
+    url: `/pages/customer-tasks/index?customerId=${customer.id}&customerName=${customer.name}`
+  });
+};
+
+// 处理电话
+const handleCall = (customer) => {
+  console.log('拨打客户电话:', customer);
+  // 使用 mobile 字段
+  if (customer.mobile) {
+    uni.makePhoneCall({
+      phoneNumber: customer.mobile,
+      fail: (err) => {
+        console.error('拨打电话失败:', err);
+        uni.$uv.toast('拨打电话失败');
+      }
+    });
+  } else {
+    uni.$uv.toast('客户未设置电话号码');
+  }
+};
+
+// 处理更多
+const handleMore = (customer) => {
+  console.log('更多操作:', customer);
+  // 可以显示操作菜单
+  uni.showActionSheet({
+    itemList: ['编辑客户', '删除客户', '查看详情'],
+    success: (res) => {
+      console.log('选择了第' + (res.tapIndex + 1) + '个选项');
+      // 根据选择执行相应操作
+    }
+  });
+};
+
+// 处理添加客户
+const handleAddCustomer = () => {
+  console.log('添加新客户');
+  // 跳转到添加客户页面
+  uni.navigateTo({
+    url: '/pages/add-customer/index'
+  });
+};
+
+// 监听筛选状态变化，重新加载数据
+watch(filterStatus, () => {
+  loadCustomerList();
+});
+
+// 组件挂载时加载数据
+onMounted(() => {
+  loadCustomerList();
+});
+</script>
+
+<style lang="scss" scoped>
+.customer-management {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #f5f5f5;
+}
+
+/* 顶部标题栏 */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.filter-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+.filter-text {
+  font-size: 14px;
+  color: #666;
+}
+
+.filter-icon {
+  font-size: 12px;
+  color: #666;
+  transition: transform 0.3s;
+  
+  &.rotate {
+    transform: rotate(180deg);
+  }
+}
+
+/* 筛选面板 */
+.filter-panel {
+  background-color: #fff;
+  padding: 12px 16px;
+  border-bottom: 1px solid #eee;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.filter-label {
+  font-size: 14px;
+  color: #666;
+  flex-shrink: 0;
+}
+
+.filter-options {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.filter-option {
+  padding: 4px 12px;
+  font-size: 14px;
+  color: #666;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  
+  &.active {
+    color: #1976d2;
+    background-color: #e3f2fd;
+  }
+}
+
+/* 客户列表 */
+.customer-list {
+  flex: 1;
+  padding: 12px;
+  padding-bottom: 80px; /* 为底部导航栏留出空间 */
+}
+
+.customer-card {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.customer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+}
+
+.customer-info {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+}
+
+.customer-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.last-followup {
+  font-size: 12px;
+  color: #999;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  
+  &.status-following {
+    background-color: #1976d2;
+  }
+  
+  &.status-pending {
+    background-color: #999;
+  }
+}
+
+.status-text {
+  font-size: 12px;
+  color: #666;
+}
+
+/* 客户星级 */
+.customer-rating {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.rating-label {
+  font-size: 14px;
+  color: #666;
+}
+
+.stars {
+  display: flex;
+  gap: 2px;
+}
+
+.star {
+  font-size: 16px;
+  color: #ddd;
+  
+  &.filled {
+    color: #999;
+  }
+}
+
+/* 分配用户 */
+.assigned-user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.user-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #f0f0f0;
+}
+
+.user-name {
+  font-size: 12px;
+  color: #999;
+}
+
+/* 操作按钮 */
+.action-buttons {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding-top: 12px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.action-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+.action-icon {
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+  
+  &.checked {
+    color: #1976d2;
+    font-weight: 600;
+  }
+}
+
+.action-text {
+  font-size: 14px;
+  color: #666;
+}
+
+.action-arrow {
+  font-size: 18px;
+  color: #999;
+  margin-left: 4px;
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 60px 0;
+}
+
+.empty-text {
+  font-size: 14px;
+  color: #999;
+}
+
+/* 加载状态 */
+.loading-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40px 0;
+}
+
+.loading-text {
+  font-size: 14px;
+  color: #999;
+}
+</style>
+
diff --git a/pages/index/index.vue b/pages/index/index.vue
index fa2d4e2..c5de374 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,31 +1,37 @@
 <template>
-  <!-- 顶部Tabs栏 -->
-  <view class="fixed-tabs">
+  <!-- 顶部Tabs栏（只在非客户管理页面显示） -->
+  <view class="fixed-tabs" v-if="value !== 3">
     <uv-tabs :list="topTabs" :current="topTabValue" @click="clickTab"></uv-tabs>
   </view>
   
   <!-- 内容区域 -->
   <view class="content-wrapper">
-    <!-- 日程编辑 -->
-    <ScheduleEditor
-      v-if="topTabValue === 0"
-      ref="scheduleEditorRef"
-      :events="allEvents"
-      @date-change="handleDateChange"
-    />
+    <!-- 客户管理（底部导航栏选中时显示） -->
+    <CustomerManagement v-if="value === 3" />
 
-    <!-- 内容看板 -->
-    <ContentDashboard v-if="topTabValue === 1" />
+    <!-- 其他内容（底部导航栏未选中客户管理时显示） -->
+    <template v-else>
+      <!-- 日程编辑 -->
+      <ScheduleEditor
+        v-if="topTabValue === 0"
+        ref="scheduleEditorRef"
+        :events="allEvents"
+        @date-change="handleDateChange"
+      />
 
-    <!-- 待办事项 -->
-    <TodoList v-if="topTabValue === 2" />
+      <!-- 内容看板 -->
+      <ContentDashboard v-if="topTabValue === 1" />
 
-    <!-- 消息内容 -->
-    <MessageContent v-if="topTabValue === 3" />
+      <!-- 待办事项 -->
+      <TodoList v-if="topTabValue === 2" />
+
+      <!-- 消息内容 -->
+      <MessageContent v-if="topTabValue === 3" />
+    </template>
   </view>
 
   <!-- 悬浮新建按钮（只在日程编辑页显示） -->
-  <FabPlus v-if="topTabValue === 0" @click="handleAddClick" />
+  <FabPlus v-if="topTabValue === 0 && value !== 3" @click="handleAddClick" />
 
   <!-- 新建日程弹窗（保留以备后用） -->
   <AddEventModal :show="showAdd" @ok="addEvent" @cancel="showAdd = false" />
@@ -53,6 +59,7 @@ import ScheduleEditor from '@/components/ScheduleEditor.vue';
 import ContentDashboard from '@/components/ContentDashboard.vue';
 import TodoList from '@/components/TodoList.vue';
 import MessageContent from '@/components/MessageContent.vue';
+import CustomerManagement from '@/components/CustomerManagement.vue';
 
 // 顶部tabs选项
 const topTabs = [
@@ -179,9 +186,14 @@ onShow(() => {
 
 .content-wrapper {
   padding-top: 8rpx;
-
   overflow: hidden;
   margin-top: var(--status-bar-height, 0);
+  
+  /* 客户管理页面不需要顶部 padding */
+  :deep(.customer-management) {
+    margin-top: 0;
+    padding-top: 0;
+  }
 }
 
 :deep(.bottom-tabbar) { z-index: 1000 !important; }