From 84883bdb2e1bef35d54d75baf554ae5a8e3e4e94 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Thu, 13 Nov 2025 10:21:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8E=92=E8=A1=8C=E6=A6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/dashboard.js                  |  12 +
 components/index/RankingBoard.vue | 516 ++++++++++++++++++++++++++++++
 pages/index/index.vue             |  18 +-
 3 files changed, 542 insertions(+), 4 deletions(-)
 create mode 100644 components/index/RankingBoard.vue

diff --git a/api/dashboard.js b/api/dashboard.js
index 392ece6..ca47a9a 100644
--- a/api/dashboard.js
+++ b/api/dashboard.js
@@ -30,3 +30,15 @@ export const getDashboardBrief = ({ joinUserId, keys }) => {
   });
 };
 
+/**
+ * 获取客户统计排行榜
+ * @returns {Promise} 返回排行榜数据，包含 today、week、month 三个时间段的数据
+ */
+export const getCustomerStatistics = () => {
+  return uni.$uv.http.get('/dashboard/customer/statistics', {
+    custom: {
+      auth: true  // 启用 token 认证
+    }
+  });
+};
+
diff --git a/components/index/RankingBoard.vue b/components/index/RankingBoard.vue
new file mode 100644
index 0000000..5246eae
--- /dev/null
+++ b/components/index/RankingBoard.vue
@@ -0,0 +1,516 @@
+<template>
+  <view class="ranking-board">
+    <!-- 顶部Header -->
+    <view class="ranking-header">
+      <view class="header-content">
+        <text class="header-title">排行榜</text>
+        <view class="trophy-icon">🏆</view>
+      </view>
+    </view>
+
+    <!-- 内容区域 -->
+    <scroll-view class="ranking-content" scroll-y>
+      <!-- Tabs -->
+      <view class="ranking-tabs">
+        <view 
+          class="tab-item" 
+          :class="{ active: currentTab === 'today' }"
+          @click="switchTab('today')"
+        >
+          日排行
+        </view>
+        <view 
+          class="tab-item" 
+          :class="{ active: currentTab === 'week' }"
+          @click="switchTab('week')"
+        >
+          周排行
+        </view>
+        <view 
+          class="tab-item" 
+          :class="{ active: currentTab === 'month' }"
+          @click="switchTab('month')"
+        >
+          月排行
+        </view>
+      </view>
+
+      <!-- 加载状态 -->
+      <view v-if="loading" class="loading-container">
+        <view class="loading-text">加载中...</view>
+      </view>
+
+      <!-- 排行榜内容 -->
+      <view v-else class="ranking-list-container">
+        <!-- 当前用户排名（高亮显示） -->
+        <view v-if="currentUserRank" class="my-ranking-card">
+          <view class="my-ranking-header">
+            <text class="my-label">我</text>
+            <view class="my-avatar">
+              <text class="avatar-text">{{ getAvatarText(currentUserRank.userName) }}</text>
+            </view>
+            <text class="my-rank">第{{ currentUserRank.rank }}名</text>
+          </view>
+          <view class="my-ranking-stats">
+            <view class="stat-item">
+              <text class="stat-value">{{ currentUserRank.addNum }}</text>
+            </view>
+            <view class="stat-item">
+              <text class="stat-value">{{ currentUserRank.followNum }}</text>
+            </view>
+            <view class="stat-item">
+              <text class="stat-value">{{ currentUserRank.intentionNum }}</text>
+            </view>
+            <view class="stat-item">
+              <text class="stat-value">{{ currentUserRank.addWxNum }}</text>
+            </view>
+          </view>
+        </view>
+
+        <!-- 表头 -->
+        <view class="ranking-table-header">
+          <view class="header-col rank-col">排名</view>
+          <view class="header-col name-col">名称</view>
+          <view class="header-col stat-col">新增客户</view>
+          <view class="header-col stat-col">跟进客户</view>
+          <view class="header-col stat-col">意向客户</view>
+          <view class="header-col stat-col">加微信</view>
+        </view>
+
+        <!-- 排行榜列表 -->
+        <view class="ranking-list">
+          <view 
+            v-for="(item, index) in currentRankingList" 
+            :key="item.userId"
+            class="ranking-item"
+            :class="{ 'is-current-user': String(item.userId) === String(currentUserId) }"
+          >
+            <!-- 排名 -->
+            <view class="rank-col">
+              <view v-if="index === 0" class="medal gold">🥇</view>
+              <view v-else-if="index === 1" class="medal silver">🥈</view>
+              <view v-else-if="index === 2" class="medal bronze">🥉</view>
+              <text v-else class="rank-number">{{ index + 1 }}</text>
+            </view>
+            
+            <!-- 名称 -->
+            <view class="name-col">
+              <view class="user-avatar">
+                <text class="avatar-text">{{ getAvatarText(item.userName) }}</text>
+              </view>
+              <text class="user-name">{{ item.userName }}</text>
+            </view>
+            
+            <!-- 统计数据 -->
+            <view class="stat-col">
+              <text class="stat-text">{{ item.addNum }}</text>
+            </view>
+            <view class="stat-col">
+              <text class="stat-text">{{ item.followNum }}</text>
+            </view>
+            <view class="stat-col">
+              <text class="stat-text">{{ item.intentionNum }}</text>
+            </view>
+            <view class="stat-col">
+              <text class="stat-text">{{ item.addWxNum }}</text>
+            </view>
+          </view>
+        </view>
+
+        <!-- 空状态 -->
+        <view v-if="!loading && currentRankingList.length === 0" class="empty-state">
+          <text class="empty-text">暂无数据</text>
+        </view>
+      </view>
+    </scroll-view>
+    </view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { getCustomerStatistics } from '@/api/dashboard';
+import { useUserStore } from '@/store/user';
+
+// 当前选中的tab
+const currentTab = ref('today');
+
+// 加载状态
+const loading = ref(false);
+
+// 排行榜数据
+const rankingData = ref({
+  today: [],
+  week: [],
+  month: []
+});
+
+// 当前用户ID
+const userStore = useUserStore();
+const currentUserId = computed(() => {
+  const userId = userStore.userInfo?.id || userStore.userInfo?.userId || '';
+  return String(userId); // 确保返回字符串类型，与接口数据一致
+});
+
+// 当前显示的排行榜列表
+const currentRankingList = computed(() => {
+  return rankingData.value[currentTab.value] || [];
+});
+
+// 当前用户的排名信息
+const currentUserRank = computed(() => {
+  const list = currentRankingList.value;
+  const userId = currentUserId.value;
+  if (!userId) return null;
+  
+  const index = list.findIndex(item => String(item.userId) === String(userId));
+  if (index === -1) return null;
+  
+  return {
+    ...list[index],
+    rank: index + 1
+  };
+});
+
+// 切换tab
+const switchTab = (tab) => {
+  currentTab.value = tab;
+};
+
+// 获取头像文字（取姓名最后一个字）
+const getAvatarText = (name) => {
+  if (!name) return '?';
+  return name.length > 1 ? name.slice(-1) : name;
+};
+
+// 加载排行榜数据
+const loadRankingData = async () => {
+  try {
+    loading.value = true;
+    const res = await getCustomerStatistics();
+    console.log('排行榜数据:', res);
+    
+    if (res ) {
+      rankingData.value = {
+        today: res.today || [],
+        week: res.week || [],
+        month: res.month || []
+      };
+    }
+  } catch (err) {
+    console.error('加载排行榜数据失败:', err);
+    uni.showToast({
+      title: '加载数据失败',
+      icon: 'none'
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 组件挂载时加载数据
+onMounted(() => {
+  loadRankingData();
+});
+</script>
+
+<style lang="scss" scoped>
+.ranking-board {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #f6f7fb;
+  overflow: hidden;
+  position: relative;
+}
+
+.ranking-header {
+  background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
+  padding: 40rpx 32rpx 60rpx;
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 300rpx;
+    height: 300rpx;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+    transform: translate(30%, -30%);
+  }
+  
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -50rpx;
+    right: -50rpx;
+    width: 200rpx;
+    height: 200rpx;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+  }
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+}
+
+.header-title {
+  font-size: 48rpx;
+  font-weight: bold;
+  color: #ffffff;
+}
+
+.trophy-icon {
+  font-size: 80rpx;
+  line-height: 1;
+}
+
+.ranking-content {
+  flex: 1;
+  background: #ffffff;
+  border-radius: 32rpx 32rpx 0 0;
+  margin-top: -32rpx;
+  position: relative;
+  z-index: 2;
+  padding-top: 24rpx;
+  height: 0; /* 配合 flex: 1 使用 */
+}
+
+.ranking-tabs {
+  display: flex;
+  padding: 0 32rpx;
+  border-bottom: 2rpx solid #f0f0f0;
+  margin-bottom: 24rpx;
+}
+
+.tab-item {
+  flex: 1;
+  text-align: center;
+  padding: 24rpx 0;
+  font-size: 28rpx;
+  color: #666666;
+  position: relative;
+  
+  &.active {
+    color: #ff6b35;
+    font-weight: 600;
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 60rpx;
+      height: 4rpx;
+      background: #ff6b35;
+      border-radius: 2rpx;
+    }
+  }
+}
+
+.loading-container {
+  padding: 100rpx 0;
+  text-align: center;
+}
+
+.loading-text {
+  font-size: 28rpx;
+  color: #999999;
+}
+
+.ranking-list-container {
+  padding: 0 32rpx 40rpx;
+}
+
+.my-ranking-card {
+  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+  border-radius: 16rpx;
+  padding: 24rpx;
+  margin-bottom: 24rpx;
+}
+
+.my-ranking-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16rpx;
+}
+
+.my-label {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #1976d2;
+  margin-right: 16rpx;
+}
+
+.my-avatar {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16rpx;
+}
+
+.avatar-text {
+  font-size: 24rpx;
+  color: #1976d2;
+  font-weight: 600;
+}
+
+.my-rank {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #1976d2;
+  margin-left: auto;
+}
+
+.my-ranking-stats {
+  display: flex;
+  justify-content: space-around;
+}
+
+.stat-item {
+  flex: 1;
+  text-align: center;
+}
+
+.stat-value {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #1976d2;
+}
+
+.ranking-table-header {
+  display: flex;
+  padding: 16rpx 0;
+  background: #f8f9fa;
+  border-radius: 8rpx;
+  margin-bottom: 16rpx;
+}
+
+.header-col {
+  font-size: 24rpx;
+  color: #666666;
+  text-align: center;
+  
+  &.rank-col {
+    width: 80rpx;
+    flex-shrink: 0;
+  }
+  
+  &.name-col {
+    flex: 1;
+    text-align: left;
+    padding-left: 16rpx;
+    justify-content: center;
+  }
+  
+  &.stat-col {
+    width: 100rpx;
+    flex-shrink: 0;
+  }
+}
+
+.ranking-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.ranking-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 0;
+  border-bottom: 1rpx solid #f0f0f0;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  &.is-current-user {
+    background: #f0f7ff;
+    border-radius: 8rpx;
+    padding: 24rpx 16rpx;
+    margin: 8rpx 0;
+  }
+}
+
+.rank-col {
+  width: 80rpx;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.medal {
+  font-size: 40rpx;
+  line-height: 1;
+}
+
+.rank-number {
+  font-size: 28rpx;
+  color: #333333;
+  font-weight: 600;
+}
+
+.name-col {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding-left: 16rpx;
+}
+
+.user-avatar {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  background: #e0e0e0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16rpx;
+}
+
+.user-avatar .avatar-text {
+  font-size: 22rpx;
+  color: #666666;
+  font-weight: 500;
+}
+
+.user-name {
+  font-size: 28rpx;
+  color: #333333;
+}
+
+.stat-col {
+  width: 100rpx;
+  flex-shrink: 0;
+  text-align: center;
+}
+
+.stat-text {
+  font-size: 26rpx;
+  color: #333333;
+}
+
+.empty-state {
+  padding: 100rpx 0;
+  text-align: center;
+}
+
+.empty-text {
+  font-size: 28rpx;
+  color: #999999;
+}
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 4ae2b46..5735dfd 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,6 +1,7 @@
 <template>
-  <!-- 顶部Tabs栏（只在非客户管理页面显示） -->
-  <view class="fixed-tabs" v-if="value !== 3 && value !== 4">
+  <view>
+  <!-- 顶部Tabs栏（只在非客户管理、我的、月度考核页面显示） -->
+  <view class="fixed-tabs" v-if="value !== 3 && value !== 4 && value !== 2">
     <uv-tabs :list="topTabs" :current="topTabValue" @click="clickTab"></uv-tabs>
   </view>
   
@@ -10,6 +11,8 @@
     <CustomerManagement v-if="value === 3" ref="customerManagementRef" />
     <!-- 我的 -->
     <My v-else-if="value === 4" />
+    <!-- 月度考核（排行榜） -->
+    <RankingBoard v-else-if="value === 2" />
 
     <!-- 其他内容（底部导航栏未选中客户管理时显示） -->
     <template v-else>
@@ -33,7 +36,7 @@
   </view>
 
   <!-- 悬浮新建按钮（只在日程编辑页显示） -->
-  <FabPlus v-if="topTabValue === 0 && value !== 3 && value !== 4" @click="handleAddClick" />
+  <FabPlus v-if="topTabValue === 0 && value !== 3 && value !== 4 && value !== 2" @click="handleAddClick" />
 
   <!-- 新建日程弹窗（保留以备后用） -->
   <AddEventModal :show="showAdd" @ok="addEvent" @cancel="showAdd = false" />
@@ -46,7 +49,7 @@
     <uv-tabbar-item text="客户管理" icon="kefu-ermai" ></uv-tabbar-item>
     <uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
   </uv-tabbar>
-
+  </view>
 </template>
 
 <script setup>
@@ -63,6 +66,7 @@ import TodoList from '@/components/index/TodoList.vue';
 import MessageContent from '@/components/index/MessageContent.vue';
 import CustomerManagement from '@/components/customer/CustomerManagement.vue';
 import My from '@/components/my/My.vue';
+import RankingBoard from '@/components/index/RankingBoard.vue';
 
 // 顶部tabs选项
 const topTabs = [
@@ -225,6 +229,12 @@ onReachBottom(() => {
       display: none !important;
     }
   }
+  
+  /* 排行榜页面不需要顶部 padding */
+  :deep(.ranking-board) {
+    margin-top: 0;
+    padding-top: 0;
+  }
 }
 
 :deep(.bottom-tabbar) { z-index: 1000 !important; }