feat(performaceDistribution): 月份选择逻辑完善，添加空态展示

components/distribution/performanceDistribution.vue

@@ -77,11 +77,7 @@
       <!-- 普通列表数据 -->
       <view v-if="normalList.length > 0" class="normal-list">
         <view class="list-content">
-          <view
+          <view v-for="item in normalList" :key="item.id" class="list-item">
-            v-for="(item, index) in normalList"
-            :key="item.id"
-            class="list-item"
-          >
             <!-- <view class="item-index" :class="getRankClass(index + 1)">{{
               index + 1
             }}</view> -->
@@ -132,14 +128,22 @@
             ></u-loading-icon>
             <text class="loading-text">加载中...</text>
           </view>
+        </view>
+      </view>
 
-          <!-- 空状态 -->
+      <!-- 空状态 - 基于total为0判断 -->
-          <view
+      <view v-if="!loading && total === 0" class="empty-state-container">
-            v-if="!loading && normalList.length === 0 && !specialData"
+        <view class="empty-state">
-            class="empty-state"
+          <view class="empty-icon">
+            <u-icon name="file-text" color="#d0d7de" size="60"></u-icon>
+          </view>
+          <text class="empty-title">暂无业绩数据</text>
+          <text class="empty-desc"
+            >{{ whatYear }}年{{ whatMounth }}月暂时没有业绩分布数据</text
           >
-            <view class="empty-icon">📊</view>
+          <view class="empty-action" @tap="refresh">
-            <text class="empty-text">暂无业绩数据</text>
+            <u-icon name="reload" color="#005bac" size="16"></u-icon>
+            <text class="refresh-text">点击刷新</text>
           </view>
         </view>
       </view>
@@ -168,6 +172,8 @@ export default {
       yjTypeList: [],
       yearShow: false,
       whatYear: '',
+      currentYear: new Date().getFullYear(), // 当前真实年份
+      currentMonth: new Date().getMonth() + 1, // 当前真实月份
       selYearList: [
         {
           value: 0,
@@ -178,56 +184,7 @@ export default {
           label: new Date().getFullYear(),
         },
       ],
-      mounthList: [
+      mounthList: [], // 改为动态生成
-        {
-          value: '01',
-          label: 1 + '月',
-        },
-        {
-          value: '02',
-          label: 2 + '月',
-        },
-        {
-          value: '03',
-          label: 3 + '月',
-        },
-        {
-          value: '04',
-          label: 4 + '月',
-        },
-        {
-          value: '05',
-          label: 5 + '月',
-        },
-        {
-          value: '06',
-          label: 6 + '月',
-        },
-        {
-          value: '07',
-          label: 7 + '月',
-        },
-        {
-          value: '08',
-          label: 8 + '月',
-        },
-        {
-          value: '09',
-          label: 9 + '月',
-        },
-        {
-          value: '10',
-          label: 10 + '月',
-        },
-        {
-          value: '11',
-          label: 11 + '月',
-        },
-        {
-          value: '12',
-          label: 12 + '月',
-        },
-      ],
 
       // 列表数据相关
       specialData: null, // 特殊数据（第一页第一条）
@@ -245,19 +202,47 @@ export default {
   },
   methods: {
     changeYear(e) {
-      this.whatYear = this.selYearList[e.detail.value].label
+      const selectedYear = this.selYearList[e.detail.value].label
+      this.whatYear = selectedYear
+
+      // 生成新的月份列表
+      this.generateMonthList(selectedYear)
+
+      // 如果从上一年切换到当年，且当前选中月份大于真实当前月，则调整为当前月
+      if (selectedYear === this.currentYear) {
+        const currentMonthNum = parseInt(this.whatMounth)
+        if (currentMonthNum > this.currentMonth) {
+          this.whatMounth = this.currentMonth.toString().padStart(2, '0')
+        }
+      }
+
       this.refresh()
     },
     bindPickerChange(e) {
-      this.whatMounth = e.detail.value
+      // 使用月份列表中的value值
+      this.whatMounth = this.mounthList[e.detail.value].value
       this.refresh()
     },
 
     // 获取当前年/月
     initDate() {
-      const month = new Date().getMonth() + 1
+      this.whatMounth = this.currentMonth.toString().padStart(2, '0')
-      this.whatMounth = month.toString().padStart(2, '0')
+      this.whatYear = this.currentYear
-      this.whatYear = new Date().getFullYear()
+      // 初始化月份列表
+      this.generateMonthList(this.currentYear)
+    },
+
+    // 动态生成月份列表
+    generateMonthList(year) {
+      const maxMonth = year === this.currentYear ? this.currentMonth : 12
+      this.mounthList = []
+
+      for (let i = 1; i <= maxMonth; i++) {
+        this.mounthList.push({
+          value: i.toString().padStart(2, '0'),
+          label: i + '月',
+        })
+      }
     },
 
     // 获取月度业绩数据
@@ -347,7 +332,7 @@ export default {
 
 // 全宽日期选择器样式
 .date-selector-container {
-  padding: 20rpx;
+  padding: 10rpx 20rpx 10rpx;
 }
 
 .date-selector-full {
@@ -441,7 +426,7 @@ export default {
 
 /* 业绩分布列表样式 */
 .performance-list-container {
-  padding: 20rpx;
+  padding: 10rpx 20rpx 0;
   padding-bottom: 60rpx;
   background-color: #f5f7fa;
   min-height: 100vh;
@@ -674,20 +659,79 @@ export default {
   font-size: 20rpx;
 }
 
+/* 空状态容器样式 */
+.empty-state-container {
+  background: #ffffff;
+  border-radius: 16rpx;
+  margin: 0;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+}
+
 .empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 80rpx 40rpx;
+  padding: 100rpx 40rpx 80rpx;
   gap: 20rpx;
 }
 
 .empty-icon {
-  font-size: 80rpx;
+  margin-bottom: 16rpx;
-  opacity: 0.5;
+  opacity: 0.6;
+  animation: float 3s ease-in-out infinite;
 }
 
+.empty-title {
+  color: #333333;
+  font-size: 28rpx;
+  font-weight: 600;
+  margin-bottom: 8rpx;
+}
+
+.empty-desc {
+  color: #666666;
+  font-size: 24rpx;
+  text-align: center;
+  line-height: 1.5;
+  margin-bottom: 16rpx;
+}
+
+.empty-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  padding: 12rpx 24rpx;
+  background: rgba(0, 91, 172, 0.1);
+  border-radius: 20rpx;
+  border: 1rpx solid rgba(0, 91, 172, 0.2);
+  transition: all 0.3s ease;
+}
+
+.empty-action:active {
+  background: rgba(0, 91, 172, 0.15);
+  transform: scale(0.98);
+}
+
+.refresh-text {
+  color: #005bac;
+  font-size: 22rpx;
+  font-weight: 500;
+}
+
+/* 浮动动画 */
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8rpx);
+  }
+}
+
+/* 旧的空状态样式保留（以防其他地方使用） */
 .empty-text {
   color: #999999;
   font-size: 24rpx;