Skip to content

华
华夏模拟理财_20250701
Commit 3607892f authored by 俞嘉婷's avatar 俞嘉婷
Browse files
Options

feat: 首页功能

parent d411b3c2
Hide whitespace changes
Inline Side-by-side
Showing with 906 additions and 184 deletions
mock/main.ts
View file @ 3607892f
......@@ -13,10 +13,21 @@ export default [
}
},
},
{
url: '/home/coop_codeUpdate.do',
response: ({ query }) => {
return {
success: true,
code: "",
message: "",
timeStamp: Date.now(),
data: null
}
},
},
{
url: '/home/index.do',
response: ({ query }) => {
const signDay = Math.random() * 7 >> 0;
return {
success: true,
code: "",
......@@ -28,53 +39,63 @@ export default [
myEndTime: Date.now() + 1 * 24 * 60 * 60 * 1000,
uid: '234234',
ruleText: 'rulerulerulerulerulerulerule',
"bigStartConfig": [
{
"prizeImg": "Duis Excepteur cupidatat",
"titleImg": "sint magna sunt dolore"
},
{
"prizeImg": "non fugiat culpa ad",
"titleImg": "cillum id ex laborum"
"bigStartConfig": new Array(5).fill(1).map((_, index) => {
return {
"prizeImg": "//yun.duiba.com.cn/polaris/redpacket_img.3e5efeebc67c039d147cf881bf72c7de4b7b1efd.png",
"titleImg": "//yun.duiba.com.cn/polaris/redpacket_tag.e917e7cffb11dbfe48822d0b977e19fb7bab9d21.png"
}
],
}),
"firstMoneyPop": {
"agreementText": "文案文案文案文案文案文案文案文案 文案文案文案文案",
"experienceNum": 59442359
},
firstMoneyPop: null,
"virtualAssets": {
"preDayIncome": "pariatur labore esse enim nulla",
"availableFunds": "pariatur ullamco",
"totalMoney": "eu eiusmod aute nisi",
"preDayIncome": "656",
"availableFunds": "10284329.43",
"totalMoney": "359998480.1",
"realBuyJumpUrl": "anim consectetur dolor",
"totalIncome": "sunt non"
"totalIncome": "8390.22"
},
"checkIn": {
"totalCheckIn": "Excepteur",
"totalCheckIn": "4",
"checkInConfig": [
{
"days": "tempor in esse",
"experienceNum": "et qui",
"status": "exercitation"
"id": 1,
"days": "3",
"experienceNum": "1",
"status": '2'
},
{
"id": 2,
"days": "5",
"experienceNum": "3",
"status": '1'
},
{
"days": "laborum",
"experienceNum": "voluptate ea",
"status": "culpa in quis consectetur"
}
"id": 3,
"days": "10",
"experienceNum": "6",
"status": '0'
},
{
"id": 4,
"days": "20",
"experienceNum": "9",
"status": '0'
},
]
},
"recommendProductConfig": new Array(7).fill(1).map((_, index) => {
return {
"name": `产品${index + 1}`,
"shenShuGuiZei": "elit eiusmod",
"touZiQiXianText": "non in id aliquip cillum",
"qigouText": "nisi velit ipsum",
"baiFenBiText": "veniam ut sunt",
"fengXian": "officia laborum reprehenderit enim",
"code": "adipisicing",
"status": "dolor cul",
"name": `固收纯债最短持有7天A款Z${index + 1}`,
"shenShuGuiZei": "交易日申赎",
"touZiQiXianText": "近1个月年化收益率(截至2023/03/26)",
"qigouText": "1元起购",
"baiFenBiText": "90%活动用户选购本产品t",
"fengXian": "中低风险",
"code": "23112008P",
"status": index % 2 === 0 ? '1' : '0',
"realBuyJumpUrl": `https://www.baidu.com?t=${index}`
}
}),
......@@ -118,24 +139,26 @@ export default [
},
},
{
url: '/main/sign.do',
url: '/home/doCheckIn.do',
response: ({ query }) => {
return {
success: true,
code: "",
message: "",
data: {
signCredits: 100,
extraCredits: 100,
boolLimit: true,
vipLevel: 3,
multipleValue: 3,
url: "urlurlurlurlurl",
taskId: "taskId",
newLuckCreditsNum: 33,
},
data: 'ok',
}
},
},
{
url: '/home/doRewards.do',
response: ({ query }) => {
return {
success: true,
code: "",
message: "",
data: 'ok',
}
},
},
]
spark.config.json
View file @ 3607892f
{"proName":"未命名项目","proDesc":"","proPath":"F:\\2025\\20250609天天领积分","createTime":1729847802806}
{"proName":"华夏理财-模拟理财-20250701","proDesc":"","proPath":"/Users/yujiating/Documents/programme/华夏理财-模拟理财-20250701/HuaXiaSimulate_20250701","createTime":1729847802806}
src/app.less
View file @ 3607892f
......@@ -34,6 +34,13 @@ body {
overflow: hidden;
}
.com_Container {
width: 100%;
height: 100vh;
position: relative;
overflow-x: hidden;
overflow-y: auto;
}
input {
outline: none;
......
src/pages/HomePage/HomePage.less
View file @ 3607892f
@import "../../res.less";
.homepage {
.homePage {
width: 750px;
height: 100%;
left: 0;
top: 0;
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
background-color: #fff2e4;
.ActEndMask{
min-height: 100vh;
left: 0px;
top: 0px;
position: relative;
background-color: #fadfaf;
padding-top: 700px;
box-sizing: border-box;
.bg {
width: 750px;
height: 3040px;
left: 0px;
top: 0px;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
.sparkBg("homePage/bg.png");
}
.ActPreMask{
.title {
width: 469px;
height: 240px;
left: 135px;
top: 63px;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
.sparkBg("homePage/title.png");
}
.homeRoot {
.lc_bigstar {
width: 731px;
height: 342px;
left: 19px;
// top: 700px;
position: relative;
width: 100%;
padding-top: 961px;
padding-bottom: 120px;
.webpBg("HomePage/bg.jpg");
background-size: 750px 977px;
background-repeat: no-repeat;
background-position: top center;
background-color: #fff2e4;
.tipPop {
position: absolute;
left: 150px;
top: 224px;
width: 449px;
height: 71px;
pointer-events: none;
.webpBg("HomePage/tipsPop.png");
.tipsLab {
.lc_bigstar_bg {
width: 712px;
height: 342px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/lc_bigstar_bg.png");
}
.hongBao {
width: 694px;
height: 234px;
left: 10px;
top: 60px;
position: absolute;
display: flex;
overflow-x: auto;
padding-left: 20px;
box-sizing: border-box;
.bigstar_item {
flex-shrink: 0;
width: 256px;
height: 234px;
position: relative;
margin-right: 10px;
.redpacket_img {
width: 225px;
height: 228px;
left: 0px;
top: 6px;
position: absolute;
// .sparkBg("homePage/redpacket_img.png");
}
.redpacket_tag {
width: 80px;
height: 90px;
left: 176px;
top: 0px;
position: absolute;
// .sparkBg("homePage/redpacket_tag.png");
}
}
}
}
.virtual_assets {
width: 712px;
height: 440px;
left: 19px;
// top: 1060px;
position: relative;
margin-top: 18px;
.sparkBg("homePage/virtual_assets_bg.png");
&.short_height {
height: 330px;
.sparkBg("homePage/virtual_assets_bg_short.png");
}
.yesterday_label {
width: 153px;
height: 27px;
left: 30px;
top: 56px;
position: absolute;
opacity: 0.6;
font-size: 26px;
line-height: 27px;
color: rgba(0, 0, 0, 1);
}
.yesterday_amount {
width: 228px;
height: 56px;
left: 29px;
top: 106px;
position: absolute;
font-size: 66px;
line-height: 56px;
color: rgba(211, 26, 25, 1);
font-weight: bold;
}
.record_btn {
width: 176px;
height: 24px;
left: 507px;
top: 56px;
position: absolute;
.record_btn_text {
width: 162px;
height: 24px;
left: 0px;
top: 0px;
position: absolute;
opacity: 0.6;
font-size: 26px;
line-height: 24px;
color: rgba(24, 24, 24, 1);
}
.arrow_right {
width: 13px;
height: 24px;
left: 163px;
top: 0px;
position: absolute;
opacity: 0.6;
.sparkBg("homePage/arrow_right.png");
}
}
.other_assets {
width: 666px;
height: 70px;
left: 23px;
top: 203px;
position: absolute;
.other_assets1 {
width: 195px;
height: 70px;
left: 0px;
top: 0px;
position: absolute;
}
.other_assets2 {
width: 195px;
height: 70px;
left: 236px;
top: 0px;
position: absolute;
}
.other_assets3 {
width: 195px;
height: 69px;
left: 471px;
top: 1px;
position: absolute;
}
.other_assets_label {
width: 100%;
height: 25px;
left: 0px;
top: 0px;
position: absolute;
opacity: 0.6;
font-size: 26px;
line-height: 25px;
color: rgba(0, 0, 0, 1);
text-align: center;
font-size: 28px;
}
.other_assets_value {
width: 100%;
height: 26px;
left: 0;
top: 44px;
position: absolute;
color: #ffffff;
top: 13px;
font-size: 30px;
line-height: 26px;
color: rgba(211, 26, 25, 1);
text-align: center;
font-weight: bold;
}
}
.homeSvga{
position: absolute;
left: 53px;
top: 78px;
width: 644px;
height: 665px;
pointer-events: none;
}
.credits {
position: absolute;
left: 37px;
top: 78px;
width: 232px;
height: 58px;
.webpBg("HomePage/积分背景.png");
color: rgb(255, 255, 255);
line-height: 1.7;
text-align: center;
font-size: 32px;
}
.cash {
position: absolute;
left: 302px;
top: 78px;
width: 220px;
height: 58px;
.webpBg("HomePage/红包背景.png");
color: rgb(255, 255, 255);
line-height: 1.7;
text-align: center;
font-size: 32px;
span {
font-size: 19px;
color: #fff;
.canuse_popover {
width: 227px;
height: 50px;
left: 288px;
top: 146px;
position: absolute;
.canuse_popover_bg {
width: 227px;
height: 50px;
left: 0px;
top: 0px;
position: absolute;
opacity: 0.5;
.sparkBg("homePage/canuse_popover_bg.png");
}
.canuse_popover_text {
width: 100%;
height: 21px;
left: 0px;
top: 9px;
position: absolute;
font-size: 22px;
line-height: 22px;
color: rgba(135, 76, 8, 1);
text-align: center;
}
}
.rule {
.realbuy_btn {
width: 302px;
height: 86px;
left: 205px;
top: 315px;
position: absolute;
right: 0;
top: 78px;
width: 71px;
height: 40px;
transform-origin: center right !important;
.webpBg("HomePage/规则.png");
font-size: 35px;
line-height: 34px;
color: rgba(255, 255, 255, 1);
.sparkBg("homePage/realbuy_btn_bg.png");
.flex_center();
}
}
.sign_section {
width: 712px;
height: 329px;
left: 19px;
// top: 1521px;
position: relative;
margin-top: 21px;
.sign_section_bg {
width: 712px;
height: 329px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/sign_section_bg.png");
}
.sign_tips {
width: 334px;
height: 24px;
left: 29px;
top: 89px;
position: absolute;
font-size: 24px;
line-height: 24px;
color: rgba(255, 255, 255, 1);
}
.sign_btn {
width: 211px;
height: 63px;
left: 470px;
top: 51px;
position: absolute;
.sparkBg("homePage/sign_btn_bg.png");
font-size: 26px;
line-height: 25px;
color: rgba(220, 80, 63, 1);
font-weight: bold;
.flex_center();
}
.signed_btn {
width: 211px;
height: 63px;
left: 470px;
top: 51px;
position: absolute;
.sparkBg("homePage/signed_btn_bg.png");
font-size: 26px;
line-height: 25px;
color: rgba(108, 108, 108, 1);
font-weight: bold;
.flex_center();
}
.sign_progress {
width: 591px;
height: 109px;
left: 60px;
top: 158px;
position: absolute;
.progress_bg {
width: 576px;
height: 20px;
left: 0px;
top: 35px;
position: absolute;
background-color: rgb(248, 206, 198);
border-radius: 10px;
}
.progress_bar_box {
width: 576px;
height: 20px;
left: 0px;
top: 35px;
position: absolute;
.progress_bar {
width: 0%;
height: 20px;
left: 0px;
top: 0px;
position: absolute;
background-image: linear-gradient( 90deg, rgb(253,118,95) 8%, rgb(230,68,48) 100%);
border-radius: 10px;
}
}
.step_item {
width: 71px;
height: 109px;
left: 72px;
top: 0px;
position: absolute;
&.step_item2 {
left: 216px;
}
&.step_item3 {
left: 359px;
}
&.step_item4 {
left: 510px;
}
&.locked .prize_bg {
.sparkBg("homePage/prize_locked.png");
}
&.signed .prize_bg {
.sparkBg("homePage/prize_to_receive.png");
}
&.received .prize_bg {
.sparkBg("homePage/prize_received.png");
}
&.locked, &.received {
.prize_amount {
opacity: 0.7;
}
}
.prize_bg {
width: 71px;
height: 77px;
left: 0px;
top: 0px;
position: absolute;
}
.prize_amount {
width: 100%;
height: 21px;
left: 0px;
top: 12px;
position: absolute;
font-size: 28px;
color: rgba(238, 78, 50, 1);
font-weight: bold;
.flex_center();
.unit {
height: 30px;
font-size: 18px;
line-height: 34px;
}
}
.prize_day {
width: 91px;
height: 19px;
left: -10px;
top: 90px;
position: absolute;
opacity: 0.6;
font-size: 20px;
line-height: 19px;
color: rgba(0, 0, 0, 1);
text-align: center;
}
}
}
}
.recommend_products {
width: 750px;
height: 294px;
left: 0px;
// top: 1878px;
position: relative;
margin-top: 28px;
.r_products_title {
width: 141px;
height: 34px;
left: 17px;
top: 0px;
position: absolute;
.sparkBg("homePage/r_products_title.png");
}
.prize {
.r_products_list {
width: 750px;
height: 238px;
left: 0px;
top: 56px;
position: absolute;
padding-left: 18px;
box-sizing: border-box;
display: flex;
overflow-x: auto;
.r_products_item {
flex-shrink: 0;
width: 569px;
height: 238px;
position: relative;
margin-right: 10px;
.r_product_bg {
width: 569px;
height: 238px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/r_product_bg.png");
}
.r_product_name {
width: 520px;
height: 27px;
left: 32px;
top: 31px;
position: absolute;
font-size: 28px;
line-height: 27px;
color: rgba(1, 1, 1, 1);
font-weight: bold;
.lineClamp1();
}
.r_product_risk {
width: 360px;
height: 30px;
left: 31px;
top: 79px;
position: absolute;
font-size: 32px;
line-height: 30px;
color: rgba(211, 26, 25, 1);
font-weight: bold;
.lineClamp1();
}
.r_product_rate {
width: 520px;
height: 22px;
left: 30px;
top: 128px;
position: absolute;
opacity: 0.6;
font-size: 20px;
line-height: 22px;
color: rgba(1, 1, 1, 1);
.lineClamp1();
}
.detail_btn {
width: 140px;
height: 48px;
left: 398px;
top: 70px;
position: absolute;
.sparkBg("homePage/detail_btn.png");
}
.r_product_like {
width: 507px;
height: 46px;
left: 31px;
top: 167px;
position: absolute;
.sparkBg("homePage/r_product_like_bg.png");
.r_product_like_text {
width: 450px;
height: 20px;
left: 49px;
top: 13px;
position: absolute;
opacity: 0.6;
font-size: 20px;
line-height: 20px;
color: rgba(1, 1, 1, 1);
.lineClamp1();
}
}
}
}
}
.bottom_products {
width: 713px;
min-height: 848px;
left: 19px;
// top: 2192px;
position: relative;
margin-top: 20px;
padding-top: 152px;
box-sizing: border-box;
&::before {
content: "";
position: absolute;
top: 800px;
left: 0;
width: 100%;
height: calc(100% - 800px);
background-color: #fff;
}
.tab1_bg {
width: 713px;
height: 848px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/tab1_bg.png");
}
.tab2_bg {
width: 713px;
height: 848px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/tab2_bg.png");
}
.tab1_btn {
width: 50%;
height: 80px;
position: absolute;
left: 0;
top: 0;
// background-color: rgba(0, 0, 0, 0.6);
}
.tab2_btn {
width: 50%;
height: 80px;
position: absolute;
right: 0;
top: 136px;
width: 71px;
height: 40px;
transform-origin: center right !important;
.webpBg("HomePage/奖品.png");
top: 0;
// background-color: rgba(0, 0, 0, 0.6);
}
.empty {
width: 653px;
left: 29px;
top: 252px;
position: absolute;
color: #000;
text-align: center;
}
.products_list {
width: 653px;
// height: 696px;
left: 29px;
// top: 152px;
position: relative;
.b_product_item {
width: 653px;
height: 173px;
position: relative;
&:not(:last-child) {
margin-bottom: 50px;
}
.b_product_name {
width: 650px;
height: 30px;
left: 0px;
top: 0px;
position: absolute;
font-size: 28px;
line-height: 30px;
color: rgba(1, 1, 1, 1);
font-weight: bold;
}
.b_product_rate {
width: 200px;
height: 63px;
left: 0px;
top: 59px;
position: absolute;
.b_product_rate_label {
width: 100%;
height: 20px;
left: 0px;
top: 43px;
position: absolute;
opacity: 0.6;
font-size: 20px;
line-height: 20px;
color: rgba(1, 1, 1, 1);
.lineClamp1();
}
.b_product_rate_value {
width: 100%;
height: 24px;
left: 2px;
top: 0px;
position: absolute;
font-size: 32px;
line-height: 24px;
color: rgba(211, 26, 25, 1);
font-weight: bold;
.lineClamp1();
}
}
.b_product_shu {
width: 280px;
height: 63px;
left: 222px;
top: 60px;
position: absolute;
.b_product_shu_label {
width: 100%;
height: 20px;
left: 1px;
top: 43px;
position: absolute;
opacity: 0.6;
font-size: 20px;
line-height: 20px;
color: rgba(1, 1, 1, 1);
.lineClamp1();
}
.b_product_shu_value {
width: 100%;
height: 27px;
left: 0px;
top: 0px;
position: absolute;
font-size: 28px;
line-height: 27px;
color: rgba(0, 0, 0, 1);
font-weight: bold;
.lineClamp1();
}
}
.detail_btn_1 {
width: 140px;
height: 49px;
left: 513px;
top: 65px;
position: absolute;
.sparkBg("homePage/detail_btn.png");
}
.b_product_line {
width: 652px;
height: 2px;
left: 1px;
top: 171px;
position: absolute;
opacity: 0.1;
.sparkBg("homePage/b_product_line.png");
}
}
}
}
.rule_btn {
width: 40px;
height: 113px;
left: 710px;
top: 59px;
position: absolute;
.sparkBg("homePage/rule_btn.png");
}
}
src/pages/HomePage/HomePage.tsx
View file @ 3607892f
......@@ -7,61 +7,220 @@ import MyPrize from '../MyPrize/MyPrize';
import Rulepop from '@/panels/rulepop/rulepop';
import { PageCtrl } from '@/core/ctrls/PageCtrl';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
import { _asyncThrottle, formatThousand } from '@/utils/utils';
import RecordPage from '../RecordPage/RecordPage';
import { diffJump } from '@/AppTools';
import API from '@/api';
import DetailPage from '../DetailPage/DetailPage';
@observer
class HomePage extends React.Component<any, any> {
root: HTMLDivElement;
state = {
curTab: 1, // 1-产品列表 2-我的持仓
}
async componentDidMount() {
await store.judgeIsWhiteUser();
}
clickPrize = () => {
PageCtrl.changePage(MyPrize);
}
clickRule = () => {
/** 跳转模拟交易记录 */
recordHadnle = _asyncThrottle(() => {
if (!store.judgeActTime()) return
PageCtrl.changePage(RecordPage)
})
/** 真实买入 */
realBuyHandle = _asyncThrottle(() => {
if (!store.judgeActTime()) return
const { realBuyJumpUrl } = store.indexData?.virtualAssets || {}
diffJump(realBuyJumpUrl)
})
/** 跳转“模拟”产品详情页 */
jumpVirtualDetailHandle = _asyncThrottle((item) => {
if (!store.judgeActTime()) return
PageCtrl.changePage(DetailPage, item)
})
/** 跳转“真实”产品详情页 */
jumpRealDetailHandle = _asyncThrottle((item) => {
if (!store.judgeActTime()) return
const { curTab } = this.state
if (curTab != 2) return false
// 我的持仓才可以跳转
diffJump(item.realBuyJumpUrl)
})
/** 规则 */
ruleHandle = _asyncThrottle(() => {
if (!store.judgeActTime(true, false)) return
ModalCtrl.showModal(Rulepop)
}
clickCredits = () => {
wx.miniProgram.navigateTo({ url: "/packages/user/points?source=duiba" });
}
clickActPre = () => {
Toast.show("活动未开始");
}
clickActEnd = () => {
Toast.show("活动已结束");
})
/** 签到 */
signHandle = _asyncThrottle(async () => {
if (!store.judgeActTime()) return
await API.doCheckIn();
await store.updateIndex();
})
/** 签到-领奖 */
signPrizeHandle = _asyncThrottle(async (item) => {
if (!store.judgeActTime()) return
const { myEndTime, currentTime } = store.indexData || {}
if (myEndTime <= currentTime) {
Toast.show("模拟理财已结束～")
return false
}
const { success } = await API.doRewards({ checkInConfigId: item.id });
if (success) {
Toast.show("领取成功")
}
await store.updateIndex();
})
/** 切换tab */
toggleTab = _asyncThrottle(async (type) => {
if (!store.judgeActTime()) return
this.setState({ curTab: type })
})
settleMoney = (num) => {
return formatThousand((num / 100).toFixed(2))
}
componentWillUnmount(): void {
}
render() {
const { creditsNum, guideFlag, actStartTime, currentTime, actEndTime } = store.indexData
return <>
<div className="homepage" ref={(el) => this.root = el}>
<div className="homeRoot">
<Button className="credits"
onClick={this.clickCredits}>{creditsNum > 999999 ? "999999+" : creditsNum}</Button>
{/*<Button className="cash"><span>￥</span>32.88</Button>*/}
{currentTime >= actEndTime && <div className="ActEndMask" onClick={this.clickActEnd} />}
<Button className="rule" onClick={this.clickRule} />
<Button className="prize" onClick={this.clickPrize} />
{currentTime < actStartTime && <div className="ActPreMask" onClick={this.clickActPre} />}
const { curTab } = this.state;
const { bigStartConfig, virtualAssets, checkIn, recommendProductConfig } = store.indexData
return (
<div className="com_Container" ref={(el) => this.root = el}>
<div className="homePage">
<span className="bg"></span>
<span className="title"></span>
{/* 理财大明星 */}
<div className="lc_bigstar">
<span className="lc_bigstar_bg"></span>
<div className="hongBao">
{bigStartConfig?.map((item, index) => (
<div className="bigstar_item" key={`bigStart_${index}`}>
<img className="redpacket_img" src={item.prizeImg}></img>
<img className="redpacket_tag" src={item.titleImg}></img>
</div>
))}
</div>
</div>
{/* 模拟资产 */}
<div className={`virtual_assets ${!virtualAssets?.realBuyJumpUrl ? 'short_height' : ''}`}>
<span className="yesterday_label">昨日收益(元)</span>
<span className="yesterday_amount">{this.settleMoney(virtualAssets?.preDayIncome || 0)}</span>
<div className="record_btn" onClick={this.recordHadnle}>
<span className="record_btn_text">模拟交易记录</span>
<span className="arrow_right"></span>
</div>
<div className="other_assets">
<div className="other_assets1">
<span className="other_assets_label">总资产</span>
<span className="other_assets_value">{this.settleMoney(virtualAssets?.totalMoney || 0)}</span>
</div>
<div className="other_assets2">
<span className="other_assets_label">可用资金</span>
<span className="other_assets_value">{this.settleMoney(virtualAssets?.availableFunds || 0)}</span>
</div>
<div className="other_assets3">
<span className="other_assets_label">累计收益</span>
<span className="other_assets_value">{this.settleMoney(virtualAssets?.totalIncome || 0)}</span>
</div>
</div>
<div className="canuse_popover">
<span className="canuse_popover_bg"></span>
<span className="canuse_popover_text">可用资金去购买理财</span>
</div>
{!!virtualAssets?.realBuyJumpUrl && <Button className="realbuy_btn" onClick={this.realBuyHandle}>真实买入</Button>}
</div>
{/* 签到区 */}
<div className="sign_section">
<span className="sign_section_bg"></span>
<span className="sign_tips">累计签到，最高可得{checkIn?.TODO || 0}万资金</span>
{checkIn?.TODO
? <div className="signed_btn">已签到</div>
: <Button className="sign_btn" onClick={this.signHandle}>签到得1万资金</Button>
}
<div className="sign_progress">
<span className="progress_bg"></span>
<div className="progress_bar_box">
{/* TODO 百分比计算 */}
<div className="progress_bar" style={{ width: `${87}%` }}></div>
</div>
{checkIn?.checkInConfig?.map((item, index) => {
return (
<div
className={`step_item step_item${index + 1} ${item.status == '0' ? 'locked' : item.status == '1' ? 'signed' : 'received'}`}
key={`sign_${index}`}
onClick={() => this.signPrizeHandle(item)}
>
<span className="prize_bg"></span>
<div className="prize_amount">{item.experienceNum}<span className="unit">万</span></div>
<span className="prize_day">累计{item.days}天</span>
</div>
)
})}
</div>
</div>
<div className="recommend_products">
<span className="r_products_title"></span>
<div className="r_products_list">
{recommendProductConfig?.map((item, index) => (
<div className="r_products_item" key={`r_prdct_${index}`}>
<span className="r_product_bg"></span>
<span className="r_product_name">{item.name}</span>
<span className="r_product_risk">{item.fengXian}</span>
<span className="r_product_rate">{item.touZiQiXianText}</span>
<Button className="detail_btn" onClick={() => this.jumpVirtualDetailHandle(item)}></Button>
<div className="r_product_like">
<span className="r_product_like_text">{item.baiFenBiText}</span>
</div>
</div>
))}
</div>
</div>
<div className="bottom_products">
{curTab == 1 && <span className="tab1_bg"></span>}
{curTab == 2 && <span className="tab2_bg"></span>}
<span className="tab1_btn" onClick={() => this.toggleTab(1)}></span>
<span className="tab2_btn" onClick={() => this.toggleTab(2)}></span>
<div className="products_list">
{/* TODO 字段 */}
{recommendProductConfig?.map((item, index) => (
<div className="b_product_item" key={`r_prdct_${index}`} onClick={() => this.jumpRealDetailHandle(item.realBuyJumpUrl)}>
<span className="b_product_name">{item.name}</span>
<div className="b_product_rate">
<span className="b_product_rate_label">年化收益率</span>
{/* TODO */}
<span className="b_product_rate_value">1.97%</span>
</div>
<div className="b_product_shu">
<span className="b_product_shu_label">{item.fengXian} ｜ {item.qigouText}</span>
<span className="b_product_shu_value">{item.shenShuGuiZei}</span>
</div>
<Button className="detail_btn_1" onClick={() => this.jumpVirtualDetailHandle(item)}></Button>
<span className="b_product_line"></span>
</div>
))}
</div>
{/* TODO 字段 */}
{!recommendProductConfig?.length && curTab == 2 && <div className="empty">暂无持仓产品哦</div>}
</div>
<Button className="rule_btn" onClick={this.ruleHandle} />
</div>
</div>
{/*{!guideFlag && <GuidePanel />}*/}
</>;
);
}
}
export default HomePage;
src/panels/rulepop/rulepop.jsx
View file @ 3607892f
......@@ -14,9 +14,6 @@ class Rulepop extends React.Component {
super(props);
}
async componentDidMount() {
store.initRule();
}
handleClose = _asyncThrottle(() => {
ModalCtrl.closeModal()
......@@ -26,7 +23,7 @@ class Rulepop extends React.Component {
return (
<div className="rulepop modal_center">
<span className="bg"></span>
<div className="text" dangerouslySetInnerHTML={{ __html: store.ruleInfo }}></div>
<div className="text" dangerouslySetInnerHTML={{ __html: store.indexData.ruleText }}></div>
<Button className="close" onClick={this.handleClose} />
</div>
);
......
src/store/store.ts
View file @ 3607892f
......@@ -57,6 +57,7 @@ class Store {
indexData: {
actStartTime?: number,
actEndTime?: number,
currentTime?: number, // 前端自定义
// 我的终点时间
myEndTime?: number,
ruleText?: string,
......@@ -83,6 +84,7 @@ class Store {
checkIn?: {
totalCheckIn?: string,
checkInConfig?: Array<{
id?: number,
days?: string,
experienceNum?: string,
status?: string,
......
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