Commit 86d95194 authored by 天马流星拳's avatar 天马流星拳

fix: 修复收益率显示问题并优化排行榜展示

- 添加formatProfit方法统一处理收益率除以100的格式化
- 修复positionpop和HomePage中的收益率显示问题
- 添加无数据时的提示样式和显示逻辑
- 优化排行榜展开按钮的显示条件
- 更新mock数据中的收益率值为原始值
parent 3102756f
......@@ -310,72 +310,72 @@ export default [
index: 1, //排名,null表示未上榜,前端判断大于等于100,展示99+
userName:'136xxxx7894', // 用户名
userId: 1, //用户id
score: 43.18, //收益率
score: 4318, //收益率
meFlag: false //是否是我,为true是
},
{
index: 2, //排名,null表示未上榜,前端判断大于等于100,展示99+
userName:'136xxxx7894', // 用户名
userId:1, //用户id
score: 33.18, //收益率
score: 3318, //收益率
meFlag: false //是否是我,为true是
},
{
index: 3, //排名,null表示未上榜,前端判断大于等于100,展示99+
userName:'136xxxx7894', // 用户名
userId:1, //用户id
score: 23.18, //收益率
meFlag: false //是否是我,为true是
},
{
index: 4, //排名,null表示未上榜,前端判断大于等于100,展示99+
userName:'136xxxx7894', // 用户名
userId:1, //用户id
score: 13.18, //收益率
meFlag: false //是否是我,为true是
},
{
index: 5, //排名,null表示未上榜,前端判断大于等于100,展示99+
userName:'136xxxx7894', // 用户名
userId:1, //用户id
score: 3.18, //收益率
meFlag: false //是否是我,为true是
},
{
index: 6, //排名,null表示未上榜,前端判断大于等于100,展示99+
userName:'136xxxx7894', // 用户名
userId:1, //用户id
score: 43.18, //收益率
meFlag: false //是否是我,为true是
},
{
index: 7, //排名,null表示未上榜,前端判断大于等于100,展示99+
userName:'136xxxx7894', // 用户名
userId:1, //用户id
score: 43.18, //收益率
meFlag: false //是否是我,为true是
},
{
index: 8, //排名,null表示未上榜,前端判断大于等于100,展示99+
userName:'136xxxx7894', // 用户名
userId:1, //用户id
score: 43.18, //收益率
meFlag: false //是否是我,为true是
},
{
index: 9, //排名,null表示未上榜,前端判断大于等于100,展示99+
userName:'136xxxx7894', // 用户名
userId:1, //用户id
score: 43.18, //收益率
meFlag: false //是否是我,为true是
},
{
index: 10, //排名,null表示未上榜,前端判断大于等于100,展示99+
userName:'136xxxx7894', // 用户名
userId:1, //用户id
score: 43.18, //收益率
meFlag: false //是否是我,为true是
}
// {
// index: 3, //排名,null表示未上榜,前端判断大于等于100,展示99+
// userName:'136xxxx7894', // 用户名
// userId:1, //用户id
// score: null, //收益率
// meFlag: false //是否是我,为true是
// },
// {
// index: 4, //排名,null表示未上榜,前端判断大于等于100,展示99+
// userName:'136xxxx7894', // 用户名
// userId:1, //用户id
// score: 1318, //收益率
// meFlag: false //是否是我,为true是
// },
// {
// index: 5, //排名,null表示未上榜,前端判断大于等于100,展示99+
// userName:'136xxxx7894', // 用户名
// userId:1, //用户id
// score: 0, //收益率
// meFlag: false //是否是我,为true是
// },
// {
// index: 6, //排名,null表示未上榜,前端判断大于等于100,展示99+
// userName:'136xxxx7894', // 用户名
// userId:1, //用户id
// score: -123, //收益率
// meFlag: false //是否是我,为true是
// },
// {
// index: 7, //排名,null表示未上榜,前端判断大于等于100,展示99+
// userName:'136xxxx7894', // 用户名
// userId:1, //用户id
// score: 43.18, //收益率
// meFlag: false //是否是我,为true是
// },
// {
// index: 8, //排名,null表示未上榜,前端判断大于等于100,展示99+
// userName:'136xxxx7894', // 用户名
// userId:1, //用户id
// score: 43.18, //收益率
// meFlag: false //是否是我,为true是
// },
// {
// index: 9, //排名,null表示未上榜,前端判断大于等于100,展示99+
// userName:'136xxxx7894', // 用户名
// userId:1, //用户id
// score: 43.18, //收益率
// meFlag: false //是否是我,为true是
// },
// {
// index: 10, //排名,null表示未上榜,前端判断大于等于100,展示99+
// userName:'136xxxx7894', // 用户名
// userId:1, //用户id
// score: 43.18, //收益率
// meFlag: false //是否是我,为true是
// }
],
// 理财排行榜-我的排名
myRank:{
......
......@@ -873,4 +873,11 @@
position: absolute;
.sparkBg("homePage/monilicaijin.png");
}
}
.no_data_hint{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: #999;
}
\ No newline at end of file
......@@ -70,6 +70,12 @@ class HomePage extends React.Component<any, any> {
console.log("🚀 ~ HomePage ~ type:", type)
const {success, code , data , message } = await API.queryRankInfo({type: type});
if (data) {
// 格式化收益率
data.rankInfos.forEach(item => {
item.score = this.formatProfit(item.score)
})
// 格式化我的排名收益率
data.myRank.score = this.formatProfit(data.myRank.score)
this.setState({
rankOptions: data?.rankOptions || [],
rankInfos: data?.rankInfos || [],
......@@ -131,6 +137,7 @@ class HomePage extends React.Component<any, any> {
// 查看分布按钮
viewDistribution = (item) => {
console.log("🚀 ~ HomePage ~ item:", item)
if(!item || (Object.keys(item).length === 0 && item.constructor === Object)) return
// 新增 type 0-月榜 1-总榜
item.type = this.state.rankingTab
ModalCtrl.showModal(Positionpop, { item })
......@@ -140,10 +147,11 @@ class HomePage extends React.Component<any, any> {
if (!store.judgeActTime()) return
ModalCtrl.showModal(TaskPanel)
})
// 格式化收益率,将原始值除以100
// 格式化收益率,将原始值除以100
formatProfit(profit) {
if (profit == null) return 0;
return Number((profit / 100).toFixed(2));
const num = Number(profit);
if (num == null) return;
return (num / 100).toFixed(2);
}
settleMoney = (num) => {
return formatThousand((num / 100).toFixed(2))
......@@ -252,18 +260,23 @@ class HomePage extends React.Component<any, any> {
<span className='span-4'>持仓分布</span>
</div>
<div className={`postRanking_item_box ${this.state.isExpand ? 'expandSty3' : ''}`}>
{rankInfos
.filter(item => item.index && item.index >= 4 && item.index <= 100)
.map((item, index) => (
<div key={`rank_${item.index}`} className={`postRanking_item`}>
<span className='span-1'>{item.index}</span>
<span className='span-2'>{item.userName}</span>
{/* <span className='span-3'>+{item.score}%</span> */}
<span className='span-3'>{item.score != null ? (item.score > 0 ? `+${item.score}` : item.score) : '-'}%</span>
<span className='span-4' onClick={() => this.viewDistribution(item)}></span>
</div>
))
}
{(() => {
const filteredRanks = rankInfos.filter(item => item.index && item.index >= 4 && item.index <= 100);
return filteredRanks.length > 0 ? (
filteredRanks.map((item, index) => (
<div key={`rank_${item.index}`} className={`postRanking_item`}>
<span className='span-1'>{item.index}</span>
<span className='span-2'>{item.userName}</span>
{/* <span className='span-3'>+{item.score}%</span> */}
<span className='span-3'>{item.score != null ? (item.score > 0 ? `+${item.score}` : item.score) : '-'}%</span>
<span className='span-4' onClick={() => this.viewDistribution(item)}></span>
</div>
))
) : (
<div className="no_data_hint">暂无数据</div>
);
})()}
</div>
{/* 我的排名 */}
<div className='postRanking_myRanking'>
......@@ -274,9 +287,12 @@ class HomePage extends React.Component<any, any> {
<span className='span-4' onClick={() => this.viewDistribution(myRank)}></span>
</div>
{/* 展开 */}
<div className='postRanking_expand'>
{
rankInfos.length > 3 && <div className='postRanking_expand'>
<span className={this.state.isExpand ? 'expandSty-1' : 'expandSty-2'} onClick={() => this.setState({isExpand: !this.state.isExpand})}></span>
</div>
}
</div>
</div>
......
......@@ -21,15 +21,15 @@ class AnswerPrizePanel extends React.Component {
})
render() {
const { optionName, optionImg } = this.props
const { optionName, optionImg, sendCount } = this.props
return (
<div className="answerPrizePanel modal_center md17">
<span className="bg"></span>
<div className='prizeimg-con'>
<img className='prizeimg' src={optionImg}></img>
</div>
<div className='prize-name1'>成功获得{optionName}体验金</div>
<div className='prize-name'>体验金+{optionName}</div>
<div className='prize-name1'>成功获得{sendCount}体验金</div>
<div className='prize-name'>体验金+{sendCount}</div>
<div className='receive' onClick={this.handleClose} ></div>
{/* <div className='tip'></div> */}
<Button className="close" onClick={this.handleClose} />
......
......@@ -32,6 +32,12 @@ class Positionpop extends React.Component {
};
clickClose = () => {
ModalCtrl.closeModal();
}
// 格式化收益率,将原始值除以100
formatProfit(profit) {
const num = Number(profit);
if (num == null) return 0;
return (num / 100).toFixed(2);
}
render() {
return (
......@@ -55,7 +61,7 @@ class Positionpop extends React.Component {
<span className="productName">
{item.productName}
</span>
<span className="profit">{item.profit}%</span>
<span className="profit">{this.formatProfit(item.profit)}%</span>
<span className="ratio">{item.ratio}%</span>
</div>
))
......
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