feat(myQradesPage): 优化月份选择功能并调整样式

- 重构月份数据处理逻辑，支持动态生成月份范围
- 添加月份自动滚动功能，提升用户体验
- 调整奖品名称样式，增加居中显示
- 简化mock数据，仅保留必要月份信息
- 添加活动时间戳状态管理

mock/main.ts

@@ -416,30 +416,17 @@ export default [
         code: "",
         message: "",
         data: {
+          "actEndTime": 1785978000062,
+          "actStartTime": 1754470800892,
+          "currentTime": 1769950644280,
           "monthInfo":[
             {
               monthId: '2025-12-01',
               receiveStatus: 0
             },
             {
-              monthId: '2025-11-01',
-              receiveStatus: 1
-            },
-            {
-              monthId: '2025-10-01',
-              receiveStatus: 1
-            },
-            {
-              monthId: '2025-09-01',
-              receiveStatus: 1
-            },
-            {
-              monthId: '2025-08-01',
-              receiveStatus: 1
-            },
-            {
-              monthId: '2025-07-01',
-              receiveStatus: 1
+              monthId: '2026-01-01',
+              receiveStatus: 0
             },
           ]
               

src/pages/myQradesPage/myqradespage.jsx

@@ -17,20 +17,84 @@ class Myqradespage extends React.Component {
         monthInfo:[],   // 月份信息
         selectIndex: 0,
         selectId: {},
-        info:{}
+        info:{},
+        actStartTime: 0,  // 活动开始时间戳	
+        actEndTime: 0,  //活动结束时间戳	
+        currentTime: 0,  //当前时间戳
     };
+    this.monthContainerRef = React.createRef();
   }
   componentDidMount() {
     this.getMonthInfo();
   }
+  // 提取月份匹配辅助函数
+  findMatchingMonth = (monthInfo, targetMonth) => {
+    return monthInfo.find(item => {
+      // 提取yyyy-MM部分进行匹配
+      const itemMonthKey = item.monthId.split('-').slice(0, 2).join('-');
+      return itemMonthKey === targetMonth;
+    });
+  };
+  // 提取月份范围生成辅助函数
+  generateMonthList = (startTime, endTime) => {
+    const monthList = [];
+    const startDate = new Date(startTime);
+    const endDate = new Date(endTime);
+    const currentDate = new Date(startDate);
+    
+    // 从开始日期到结束日期，逐月添加
+    while (currentDate <= endDate) {
+      const year = currentDate.getFullYear();
+      const month = String(currentDate.getMonth() + 1).padStart(2, '0');
+      const monthStr = `${year}-${month}`;
+      
+      monthList.push({
+        monthId: monthStr,
+        month: monthStr
+      });
+      
+      // 移动到下个月第一天
+      currentDate.setMonth(currentDate.getMonth() + 1);
+      currentDate.setDate(1);
+    }
+    
+    return monthList;
+  };
   // 获取月份信息
   getMonthInfo = async () => {
     const {code, data, message, success} = await API.drawQuery();
     if (success) {
-      this.setState({
-        monthInfo: data.monthInfo
+      // 初始化状态
+      this.setState({ monthInfo: data.monthInfo }, () => {
+        // 生成完整月份列表
+        const monthList = this.generateMonthList(data.actStartTime, data.actEndTime);
+        console.log("🚀 ~ Myqradespage ~ monthList:", monthList);
+        
+        // 合并月份信息
+        const mergedMonthInfo = monthList.map(month => {
+          const existing = this.findMatchingMonth(this.state.monthInfo, month.monthId);
+          return existing ? { ...month, ...existing } : month;
+        });
+        
+        // 找到第一个包含receiveStatus属性的元素索引
+        const firstReceiveStatusIndex = mergedMonthInfo.findIndex(item => item.hasOwnProperty('receiveStatus'));
+        // 如果找到符合条件的元素，则使用其索引，否则使用默认索引0
+        const targetIndex = firstReceiveStatusIndex !== -1 ? firstReceiveStatusIndex : 0;
+        
+        // 更新状态并在回调中执行后续操作
+        this.setState({ 
+          monthInfo: mergedMonthInfo,
+          selectIndex: targetIndex
+        }, () => {
+          console.log("🚀 ~ Myqradespage ~ monthInfo:", this.state.monthInfo);
+          // 确保monthInfo数组非空再调用getdrawIndex
+          if (this.state.monthInfo && this.state.monthInfo.length > 0) {
+            this.getdrawIndex(this.state.monthInfo[targetIndex].monthId);
+            // 组件挂载后，自动滚动到选中的月份
+            this.scrollToSelectedMonth(targetIndex);
+          }
+        });
       });
-      this.getdrawIndex(data.monthInfo[0].monthId);
     }
   }
   // 获取理财成绩-首页
@@ -59,14 +123,39 @@ class Myqradespage extends React.Component {
         location.href = `/aaw/projectx/takePrize?projectOrderNo=${recordId}`
     }
   })
+  // 滚动到选中的月份
+  scrollToSelectedMonth = (index) => {
+    if (this.monthContainerRef.current) {
+      const container = this.monthContainerRef.current;
+      const monthElements = container.querySelectorAll('.yue');
+      if (monthElements && monthElements[index]) {
+        const targetElement = monthElements[index];
+        // 使用scrollLeft代替scrollIntoView，避免影响页面布局
+        // 计算元素相对于容器左侧的偏移量
+        const targetLeft = targetElement.offsetLeft;
+        // 平滑滚动到目标位置
+        container.scrollTo({
+          left: targetLeft,
+          behavior: 'smooth'
+        });
+      }
+    }
+  }
   // 点击月份
   clickMonth = _asyncThrottle((item, index) => {
     console.log("🚀 ~ Myqradespage ~ item, index:", item, index)
-    this.setState({
-      selectIndex: index,
-      selectId: item.monthId,
-    })
-    this.getdrawIndex(item.monthId)
+    if(item.hasOwnProperty('receiveStatus')){  // 检查字段是否存在
+       this.setState({
+        selectIndex: index,
+        selectId: item.monthId,
+      }, () => {
+        // 状态更新后，滚动到选中的月份
+        this.scrollToSelectedMonth(index);
+      })
+      this.getdrawIndex(item.monthId)
+    } else {
+      Toast.show("本月未参与哦～");
+    }
   })
   // 点击立即领取
   clickClaim = _asyncThrottle(() => {
@@ -113,12 +202,12 @@ class Myqradespage extends React.Component {
           )
         }
       
-       
+        
         <div className="ranking">
           <span className="rankingbg"></span>
           <div className="badge">
               <span className="xxx">{this.state.info.rank == null ? '未上榜' : this.state.info.rank > 100 ? '99+' : this.state.info.rank}</span>
-           
+            
           </div>
           <div className="ranking1">
             <span className="woDeShouYiLuPaiMing">我的收益率排名</span>
@@ -141,7 +230,7 @@ class Myqradespage extends React.Component {
           </div>
         </div>
         <span className="woDeChengJi">我的成绩</span>
-        <div className="month">
+        <div className="month" ref={this.monthContainerRef}>
           {
             monthInfo.map((item, index) => (
               <div className="yue" key={item.monthId} onClick={() => this.clickMonth(item,index)}>

src/pages/myQradesPage/myqradespage.less

@@ -50,13 +50,14 @@
     }
 
     .jiangPinMingCheng {
-      width: 206px;
+      width: 506px;
       height: 46px;
-      left: 256px;
+      left: 102px;
       top: 634px;
       position: absolute;
       font-size: 50px;
       line-height: 46px;
+      text-align: center;
       color: rgba(11, 3, 4, 1);
       .lineClamp1()
     }