Skip to content

T
TianGongKaiWu-20251203
Commit 38a2f026 authored by 天马流星拳's avatar 天马流星拳
Browse files
Options

feat(我的成绩页面): 添加我的成绩页面及相关资源文件 

添加我的成绩页面组件(myqradespage.jsx)和样式文件(myqradespage.less)
包含页面布局、月份选择、收益展示和奖品领取功能
添加相关图片资源文件用于页面展示
修改managepop.jsx中的页面跳转逻辑
parent 87b074ec
Hide whitespace changes
Inline Side-by-side
Showing with 495 additions and 2 deletions
src/pages/myQradesPage/myqradespage.jsx 0 → 100644
View file @ 38a2f026
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
import HomePage from "@/pages/HomePage/HomePage.tsx";
import { Button, Toast } from "@grace/ui";
import API from '@/api';
import './myqradespage.less';
@observer
class Myqradespage extends React.Component {
constructor(props) {
super(props);
this.state = {
monthInfo:[
{
monthId: 1, //月份ID
month:'10月', //月份日期（yyyyMM)
receiveStatus: 0, //领奖状态，0-待领奖，1-已领奖
},
{
monthId: 2, //月份ID
month:'9月', //月份日期（yyyyMM)
receiveStatus: 1, //领奖状态，0-待领奖，1-已领奖
},
{
monthId: 3, //月份ID
month:'8月', //月份日期（yyyyMM)
receiveStatus: 1, //领奖状态，0-待领奖，1-已领奖
},
{
monthId: 4, //月份ID
month:'7月', //月份日期（yyyyMM)
receiveStatus: 0, //领奖状态，0-待领奖，1-已领奖
},
{
monthId: 5, //月份ID
month:'6月', //月份日期（yyyyMM)
receiveStatus: 0, //领奖状态，0-待领奖，1-已领奖
},
{
monthId: 6, //月份ID
month:'5月', //月份日期（yyyyMM)
receiveStatus: 0, //领奖状态，0-待领奖，1-已领奖
},
{
monthId: 7, //月份ID
month:'4月', //月份日期（yyyyMM)
receiveStatus: 0, //领奖状态，0-待领奖，1-已领奖
},
{
monthId: 8, //月份ID
month:'3月', //月份日期（yyyyMM)
receiveStatus: 0, //领奖状态，0-待领奖，1-已领奖
},
{
monthId: 9, //月份ID
month:'2月', //月份日期（yyyyMM)
receiveStatus: 0, //领奖状态，0-待领奖，1-已领奖
},
],
selectIndex: 0,
selectId: {},
info:{
totalProfit: 3000000, //累计收益（单位：分） 必
profitRatio: 0.05, //收益率
rank: null , //必须 收益率排名，返回null表示未上榜，前端判断是否大于等于100，大于等于100展示99+
drawStatus: 0, //抽奖状态，0-直接领奖，1-点击抽奖（盲盒形式),2-已领奖
// 奖品信息，当drawStatus=0和2时有值 备注: 奖品信息，当drawStatus=0和2时有值
prizeInfo:{
prizeId: 1, //奖品id
prizeName:'红包', //奖品名称
prizeImg:'', //奖品图片
},
joinStatus: true, // 参与状态，true-当月已参与，false-当月未参与
}
};
}
// 返回
clickBack = () => {
PageCtrl.changePage(HomePage);
}
// 点击月份
clickMonth = (item, index) => {
this.setState({
selectIndex: index,
selectId: item.monthId,
})
}
// 点击立即领取
clickClaim = () => {
const { selectId } = this.state;
console.log("🚀 ~ Myqradespage ~ selectId:", selectId)
Toast.show("领取成功");
}
render() {
const { monthInfo, selectIndex } = this.state;
return (
<div className="myqradespage">
<span className="bg"></span>
<span className="back" onClick={() => this.clickBack()}></span>
<div className="lottery">
<span className="icon3">
<img src={this.state.info.prizeInfo.prizeImg} alt="" />
</span>
<span className="jiangPinMingCheng">{this.state.info.prizeInfo.prizeName}</span>
<span className="btn1" onClick={() => this.clickClaim()}></span>
{/* <span className="btn2"></span> */}
</div>
<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>
<span className="diXxx">{this.state.info.rank == null ? '未上榜' : this.state.info.rank >= 100 ? '99+' : this.state.info.rank}</span>
</div>
<div className="ranking2">
<span className="juXing880"></span>
<span className="liCaiZiJin">理财资金</span>
<span className="_334556675yuan">{this.state.info.totalProfit/100}元</span>
</div>
<div className="ranking3">
<span className="juXing880_1"></span>
<span className="leiJiShouYi">累计收益</span>
<span className="_2213yuan">2213元</span>
</div>
{/* <div className="ranking4">
<span className="juXing880_2"></span>
<span className="liCaiZhouQi">理财周期</span>
<span className="_2025062220250722">2022</span>
</div> */}
</div>
<span className="woDeChengJi">我的成绩</span>
<div className="month">
{
monthInfo.map((item, index) => (
<div className="yue" key={item.monthId} onClick={() => this.clickMonth(item,index)}>
{
selectIndex === index && (
<span className="line"></span>
)
}
{
item.receiveStatus === 0 && (
<span className="icon1"></span>
)
}
{item.month}
</div>
))
}
</div>
</div>
);
}
}
export default Myqradespage;
src/pages/myQradesPage/myqradespage.less 0 → 100644
View file @ 38a2f026
@import "../../res.less";
.myqradespage {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.bg {
width: 1633px;
height: 5597px;
left: -380px;
top: -135px;
position: absolute;
.sparkBg("myQradesPage/bg.png");
}
.back {
position: absolute;
left: 28px;
top: 58px;
width: 18px;
height: 32px;
.sparkBg("myQradesPage/back.png");
}
.lottery {
width: 714px;
height: 949px;
left: 18px;
top: 633px;
position: absolute;
.sparkBg("myQradesPage/bg-1.png");
.icon3 {
width: 470px;
height: 470px;
left: 122px;
top: 135px;
position: absolute;
.sparkBg("myQradesPage/icon-3.png");
}
.jiangPinMingCheng {
width: 206px;
height: 46px;
left: 256px;
top: 634px;
position: absolute;
font-size: 50px;
line-height: 46px;
color: rgba(11, 3, 4, 1);
}
.btn1 {
width: 416px;
height: 142px;
left: 148px;
top: 766px;
position: absolute;
.sparkBg("myQradesPage/btn-1.png");
}
.btn2 {
width: 416px;
height: 142px;
left: 148px;
top: 766px;
position: absolute;
.sparkBg("myQradesPage/btn-2.png");
}
}
.ranking {
width: 709px;
height: 407px;
left: 20px;
top: 209px;
position: absolute;
.rankingbg {
width: 709px;
height: 407px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("myQradesPage/ranking-bg.png");
}
.badge {
width: 176px;
height: 202px;
left: 51px;
top: 134px;
position: absolute;
.sparkBg("myQradesPage/badge-bg.png");
.xxx {
width: 100%;
height: 23px;
left: 0;
top: 72px;
position: absolute;
font-size: 32px;
line-height: 23px;
text-align: center;
color: #9d5d13;
}
}
.ranking1 {
width: 256px;
height: 29px;
left: 254px;
top: 120px;
position: absolute;
.woDeShouYiLuPaiMing {
width: 174px;
height: 24px;
left: 0px;
top: 5px;
position: absolute;
font-size: 24px;
line-height: 24px;
color: rgba(163, 116, 31, 1);
}
.diXxx {
width: 95px;
height: 29px;
left: 171px;
top: 0px;
position: absolute;
font-size: 30px;
line-height: 29px;
font-weight: bold;
color: rgba(238, 78, 50, 1);
}
}
.ranking2 {
width: 420px;
height: 54px;
left: 233px;
top: 168px;
position: absolute;
.juXing880 {
width: 420px;
height: 54px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("myQradesPage/矩形880.png");
}
.liCaiZiJin {
width: 106px;
height: 23px;
left: 21px;
top: 15px;
position: absolute;
font-size: 24px;
line-height: 23px;
font-weight: bold;
color: rgba(163, 116, 31, 1);
}
._334556675yuan {
width: 152px;
height: 21px;
left: 136px;
top: 15px;
position: absolute;
font-size: 24px;
line-height: 21px;
color: rgba(163, 116, 31, 1);
}
}
.ranking3 {
width: 420px;
height: 54px;
left: 233px;
top: 228px;
position: absolute;
.juXing880_1 {
width: 420px;
height: 54px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("myQradesPage/矩形880.png");
}
.leiJiShouYi {
width: 104px;
height: 23px;
left: 21px;
top: 15px;
position: absolute;
font-size: 24px;
line-height: 23px;
font-weight: bold;
color: rgba(163, 116, 31, 1);
}
._2213yuan {
width: 86px;
height: 21px;
left: 136px;
top: 15px;
position: absolute;
font-size: 24px;
line-height: 21px;
color: rgba(163, 116, 31, 1);
}
}
.ranking4 {
width: 420px;
height: 54px;
left: 233px;
top: 286px;
position: absolute;
.juXing880_2 {
width: 420px;
height: 54px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("myQradesPage/矩形880.png");
}
.liCaiZhouQi {
width: 105px;
height: 24px;
left: 20px;
top: 15px;
position: absolute;
font-size: 24px;
font-weight: bold;
line-height: 24px;
color: rgba(163, 116, 31, 1);
}
._2025062220250722 {
width: 257px;
height: 21px;
left: 136px;
top: 16px;
position: absolute;
font-size: 24px;
line-height: 21px;
color: rgba(163, 116, 31, 1);
}
}
}
.woDeChengJi {
width: 148px;
height: 33px;
left: 305px;
top: 53px;
position: absolute;
font-size: 35px;
line-height: 33px;
color: rgba(255, 255, 255, 1);
}
.month {
width: 630px;
height: 120px;
left: 62px;
top: 110px;
display: flex;
align-items: center;
position: absolute;
overflow-y: hidden;
overflow-x: auto;
/* 确保flex子元素在一行 */
flex-wrap: nowrap;
.yue {
width: 92px;
text-align: center;
font-size: 31px;
color: rgba(255, 255, 255, 1);
flex-shrink: 0;
position: relative;
margin-right: 15px;
.line {
width: 92px;
height: 13px;
left: 0;
bottom: -11px;
position: absolute;
.sparkBg("myQradesPage/line.png");
}
.icon1 {
width: 84px;
height: 38px;
left: 40px;
top: -43px;
position: absolute;
.sparkBg("myQradesPage/icon-1.png");
}
}
}
}
/* 隐藏滚动条 - IE and Edge */
.myqradespage .month {
-ms-overflow-style: none;
}
/* 隐藏滚动条 - Firefox */
.myqradespage .month {
scrollbar-width: none;
}
/* 隐藏滚动条 - Chrome, Safari and Opera */
.myqradespage .month::-webkit-scrollbar {
display: none;
}
\ No newline at end of file
src/panels/managepop/managepop.jsx
View file @ 38a2f026
......@@ -2,7 +2,7 @@
import React from 'react';
import { observer } from 'mobx-react';
import ResPage from '@/pages/ResPage/ResPage';
import MyQradesPage from '@/pages/myQradesPage/myqradespage';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
import { PageCtrl } from '@/core/ctrls/PageCtrl';
import './managepop.less';
......@@ -19,7 +19,7 @@ class Managepop extends React.Component {
// 查看
view_click = () => {
ModalCtrl.closeModal(Managepop);
PageCtrl.changePage(ResPage)
PageCtrl.changePage(MyQradesPage)
};
render() {
return (
......
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