feat: 首页迭代

mock/main.ts

@@ -51,7 +51,7 @@ export default [
         data: {
           actStartTime: Date.now() - 1 * 24 * 60 * 60 * 1000,
           actEndTime: Date.now() + 3 * 24 * 60 * 60 * 1000,
-          myEndTime: Date.now() + 1 * 24 * 60 * 60 * 1000,
+          endPoint: Date.now() + 0.0001 * 24 * 60 * 60 * 1000,
           endPop: false,
           productEnd: true,
           uid: '234234',

src/core/components/ComCountdown/index.jsx

+"use strict";
+
+/** 前置补零 */
+export function zeroize(num, n = 2) {
+  let len = num.toString().length
+  while (len < n) {
+    num = '0' + num
+    len++
+  }
+  return num
+}
+import React, { useEffect, useReducer } from "react";
+
+import "./index.less";
+const initialState = {
+  time: {
+    day: 0,
+    hour: "00",
+    minute: "00",
+    second: "00",
+  },
+};
+
+function reducer(state, action) {
+  switch (action.type) {
+    case "change":
+      return { time: { ...action.data } };
+
+    default:
+      throw new Error();
+  }
+}
+const Countdown = (props) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const { countdownOver, syst, endt, leftT, renderText } = props;
+
+  let countdownTimer = null;
+
+  const setTimeFun = (leftTime) => {
+    let day = Math.floor(leftTime / (3600 * 24 * 1000));
+    let hour = Math.floor((leftTime / 1000 / 3600) % 24);
+    let minute = Math.floor((leftTime / 1000 / 60) % 60);
+    let second = Math.floor((leftTime / 1000) % 60);
+    day = zeroize(day);
+    hour = zeroize(hour);
+    minute = zeroize(minute);
+    second = zeroize(second);
+    dispatch({ type: "change", data: { day, hour, minute, second } });
+  }
+
+  const countFun = () => {
+    if (!leftT && (!syst || !endt)) {
+      return;
+    }
+    let leftTime = null;
+    if (syst && endt) {
+      leftTime = endt - syst + 1000;
+    } else {
+      leftTime = leftT;
+    }
+    // console.log(leftTime, "leftTime");
+    if (leftTime <= 0) return;
+    setTimeFun(leftTime)
+    countdownTimer && clearInterval(countdownTimer);
+    // setStatus(true);
+    countdownTimer = setInterval(() => {
+      leftTime -= 1000;
+      if (leftTime <= 0) {
+        // 倒计时结束
+        clearInterval(countdownTimer);
+        countdownOver();
+        dispatch({
+          type: "change",
+          data: { day: "00", hour: "00", minute: "00", second: "00" },
+        });
+      } else {
+        setTimeFun(leftTime)
+      }
+    }, 1000);
+  };
+
+  useEffect(() => {
+    countFun(syst, endt);
+
+    return () => {
+      countdownTimer && clearInterval(countdownTimer);
+    };
+  }, [syst, endt, leftT]);
+  return (
+    renderText
+      ? renderText(state.time)
+      : <span className="com_countdown">
+        {state.time.day == "0" ? "" : `${state.time.day}天`}
+        {state.time.hour}:{state.time.minute}:{state.time.second}
+      </span>
+  );
+};
+
+export default Countdown;

src/core/components/ComCountdown/index.less

+.com_countdown {
+  font-size: 18px;
+  color: #fff;
+}

src/pages/HomePage/HomePage.less

@@ -92,21 +92,48 @@
   }
   .virtual_assets {
     width: 712px;
-    height: 440px;
+    height: 513px;
     left: 19px;
     // top: 1060px;
     position: relative;
     margin-top: 18px;
-    .sparkBg("homePage/virtual_assets_bg.png");
+    // .sparkBg("homePage/virtual_assets_bg.png");
+    .sparkBg("homePage/virtual_assets_bg_new.png");
     &.short_height {
       height: 330px;
       .sparkBg("homePage/virtual_assets_bg_short.png");
     }
+    .time_box {
+      width: 100%;
+      height: 40px;
+      position: absolute;
+      top: 20px;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      color: rgb(153, 108, 0);
+      padding-right: 32px;
+      box-sizing: border-box;
+      font-size: 22px;
+      line-height: 40px;
+      .time_item {
+        width: 40px;
+        height: 40px;
+        border: 1px solid rgb(255, 255, 255);
+        box-sizing: border-box;
+        border-radius: 10px;
+        background-image: linear-gradient( 0deg, rgb(237,88,29) 0%, rgb(255,144,65) 100%);
+        .flex_center();
+        color: rgb(255, 255, 255);
+        margin: 0 4px;
+      }
+    }
     .yesterday_label {
       width: 153px;
       height: 27px;
       left: 30px;
-      top: 56px;
+      top: 121px;
       position: absolute;
       opacity: 0.6;
       font-size: 26px;
@@ -117,7 +144,7 @@
       width: 228px;
       height: 56px;
       left: 29px;
-      top: 106px;
+      top: 171px;
       position: absolute;
       font-size: 66px;
       line-height: 56px;
@@ -128,7 +155,7 @@
       width: 176px;
       height: 24px;
       left: 507px;
-      top: 56px;
+      top: 121px;
       position: absolute;
       .record_btn_text {
         width: 162px;
@@ -155,7 +182,7 @@
       width: 666px;
       height: 70px;
       left: 23px;
-      top: 203px;
+      top: 268px;
       position: absolute;
       .other_assets1 {
         width: 195px;
@@ -207,7 +234,7 @@
       width: 227px;
       height: 50px;
       left: 288px;
-      top: 146px;
+      top: 211px;
       position: absolute;
       .canuse_popover_bg {
         width: 227px;
@@ -234,7 +261,7 @@
       width: 302px;
       height: 86px;
       left: 205px;
-      top: 315px;
+      top: 380px;
       position: absolute;
       font-size: 35px;
       line-height: 34px;
@@ -280,6 +307,7 @@
       color: rgba(220, 80, 63, 1);
       font-weight: bold;
       .flex_center();
+      .breathAnimation();
     }
     .signed_btn {
       width: 211px;

src/pages/HomePage/HomePage.tsx

@@ -12,6 +12,7 @@ import { diffJump, RATE_NAME } from '@/AppTools';
 import API from '@/api';
 import DetailPage from '../DetailPage/DetailPage';
 import ResPage from '../ResPage/ResPage';
+import Countdown from '@/core/components/ComCountdown/index.jsx';
 
 @observer
 class HomePage extends React.Component<any, any> {
@@ -93,8 +94,8 @@ class HomePage extends React.Component<any, any> {
     if (item.days > checkIn?.totalCheckIn) return false
 
     if (!store.judgeActTime()) return
-    const { myEndTime, currentTime } = store.indexData || {}
-    if (myEndTime <= currentTime) {
+    const { endPoint, currentTime } = store.indexData || {}
+    if (endPoint <= currentTime) {
       Toast.show("模拟理财已结束～")
       return false
     }
@@ -120,7 +121,7 @@ class HomePage extends React.Component<any, any> {
   }
   render() {
     const { curTab } = this.state;
-    const { bigStartConfig, virtualAssets, checkIn, recommendProductConfig, productEnd } = store.indexData
+    const { bigStartConfig, virtualAssets, checkIn, recommendProductConfig, productEnd, endPoint, currentTime } = store.indexData
     // 推荐产品
     const rProductList = recommendProductConfig?.filter((item) => +item.status === 0)
     // 我的持仓
@@ -151,8 +152,24 @@ class HomePage extends React.Component<any, any> {
           </div>}
           {/* 模拟资产 */}
           <div className={`virtual_assets ${!virtualAssets?.realBuyJumpUrl ? 'short_height' : ''}`}>
-            <span className="yesterday_label">昨日收益(元)</span>
-            <span className="yesterday_amount">{this.settleMoney(virtualAssets?.preDayIncome || 0)}</span>
+            {
+              endPoint > currentTime &&
+              <Countdown
+                leftT={endPoint - currentTime}
+                renderText={data => {
+                  const { day, hour, minute, second } = data
+                  return <div className="time_box">
+                    <span className="time_item">{day}</span>天
+                    <span className="time_item">{hour}</span>时
+                    <span className="time_item">{minute}</span>分
+                    <span className="time_item">{second}</span>秒后失效
+                  </div>
+                }}
+                countdownOver={() => store.updateIndex()}
+              />
+            }
+            <span className="yesterday_label">累计收益(元)</span>
+            <span className="yesterday_amount">{this.settleMoney(virtualAssets?.totalIncome || 0)}</span>
             <div className="record_btn md6" onClick={this.recordHadnle}>
               <span className="record_btn_text">模拟交易记录</span>
               <span className="arrow_right"></span>
@@ -167,8 +184,8 @@ class HomePage extends React.Component<any, any> {
                 <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>
+                <span className="other_assets_label">昨日收益</span>
+                <span className="other_assets_value">{this.settleMoney(virtualAssets?.preDayIncome || 0)}</span>
               </div>
             </div>
             <div className="canuse_popover">

src/store/store.ts

@@ -60,8 +60,8 @@ class Store {
     actStartTime?: number,
     actEndTime?: number,
     currentTime?: number, // 前端自定义
-    // 我的终点时间
-    myEndTime?: number,
+    // 终点倒计时时间戳
+    endPoint?: number,
     ruleText?: string,
     uid?: string,
     // 大明星配置