Commit 61019670 authored by 天马流星拳's avatar 天马流星拳

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

- 重构月份数据处理逻辑,支持动态生成月份范围
- 添加月份自动滚动功能,提升用户体验
- 调整奖品名称样式,增加居中显示
- 简化mock数据,仅保留必要月份信息
- 添加活动时间戳状态管理
parent e4f73448
......@@ -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
},
]
......
......@@ -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)}>
......
......@@ -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()
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment