init

mock/project/home.js

@@ -27,7 +27,7 @@ module.exports = {
           return {
             index: i + 1,
             score: 1000 - i,
-            userName: `userName${i}`,
+            userName: `userNam啊实打实大苏打实打实的阿斯顿阿斯顿阿斯顿e${i}`,
             meFlag: i === 2
           };
         }),
@@ -36,28 +36,13 @@ module.exports = {
           score: 1011,
           userName: "userName"
         },
-        rankOptions: [
-          {
-            ranking: 11,
-            name: "奖品名称",
-            image: "奖品名称奖品名称奖品名称奖品名称奖品名称"
-          },
-          {
-            ranking: 11,
-            name: "奖品名称",
-            image: "奖品名称奖品名称奖品名称奖品名称奖品名称"
-          },
-          {
-            ranking: 11,
-            name: "奖品名称",
-            image: "奖品名称奖品名称奖品名称奖品名称奖品名称"
-          },
-          {
+        rankOptions: new Array(10).fill(1).map(() => {
+          return {
             ranking: 11,
-            name: "奖品名称",
+            name: "奖品名称奖品名称奖品名称奖品名称奖品名称",
             image: "奖品名称奖品名称奖品名称奖品名称奖品名称"
-          },
-        ]
+          };
+        })
       }
     }
   }

src/pages/userhomepage/rank.less

@@ -146,6 +146,8 @@
             .prizeName {
               margin-top: 7px;
               font-size: 22.19px;
+              .lineClamp1();
+              width: 140px;
             }
 
             .prizeRank {
@@ -179,6 +181,7 @@
 
         .nickName {
           flex: 289;
+          .lineClamp1();
         }
 
         .inviteNum {

src/pages/userhomepage/userhomepage.jsx

 import React from "react";
 import { observer } from "mobx-react";
 import store from "@src/store";
-import { _asyncThrottle, _throttle, dateFormatter, getUrlParam, windowJumpUrl } from "@src/utils/utils";
+import { _asyncThrottle, _throttle, dateFormatter, getUrlParam, prefixInteger, windowJumpUrl } from "@src/utils/utils";
 import modalStore from "@src/store/modal";
 import { PAGE_MAP } from "@src/utils/constants";
 import { Button } from "@src/components/Button";
@@ -16,8 +16,16 @@ import { RES_PATH } from "../../../sparkrc";
 @observer
 class Userhomepage extends React.Component {
 
+  state = {
+    dNum: 0,
+    hNum: 0,
+    mNum: 0,
+    sNum: 0
+  };
+
   async componentDidMount() {
-    store.getHomeInfo();
+    await store.getHomeInfo();
+    this.flushCD();
   }
 
   /** 规则按钮*/
@@ -59,14 +67,58 @@ class Userhomepage extends React.Component {
 
   };
 
+  getRankIndex = (index) => {
+    if (index == -1 || !index) {
+      return "未上榜";
+    }
+
+    return index;
+  };
+
+
+  interval = null;
+  flushCD = () => {
+    const { actEndTimestamp, currentTimestamp } = store.setIndex;
+    let diff = (actEndTimestamp - currentTimestamp) / 1000;
+    if (diff <= 0) {
+      return;
+    }
+
+    const flush = () => {
+      diff--;
+      if (diff <= 0) {
+        clearInterval(this.interval);
+        store.getHomeInfo().then(() => this.flushCD());
+        return;
+      }
+      const s = ~~diff;
+      const m = s / 60 >> 0;
+      const h = m / 60 >> 0;
+      const d = h / 24 >> 0;
+
+      this.setState({
+        dNum: prefixInteger(d, 2),
+        hNum: prefixInteger(h, 2),
+        mNum: prefixInteger(m % 60, 2),
+        sNum: prefixInteger(s % 60, 2)
+      });
+    };
+
+    flush();
+    this.interval = setInterval(flush, 1000);
+  };
+
   render() {
 
+    const { dNum, hNum, mNum, sNum } = this.state;
+
     const { userId, rankInfo = {}, actStartTimestamp , actEndTimestamp} = store.setIndex;
 
-    const { rankInfos, myRank, rankOptions } = rankInfo;
+    const { rankInfos, myRank = {}, rankOptions } = rankInfo;
 
     const sTxt = dateFormatter(actStartTimestamp, `yyyy年M月d日`);
     const eTxt = dateFormatter(actEndTimestamp, `yyyy年M月d日`);
+    const eRTxt = dateFormatter(actEndTimestamp, `yyyy.MM.dd`);
 
     return (
       <div className="HomePage">
@@ -109,15 +161,16 @@ class Userhomepage extends React.Component {
           <div className="rankTop" style={{ left: 0, top: -2 }} />
           <div className="rankBgInner">
             <div className="rankTitle" />
-            <div className="rankTip">截止2025.04.30，累计邀请人数前100名可获得旅游基金</div>
+            <div className="rankTip">截止{eRTxt}，累计邀请人数前100名可获得旅游基金</div>
             <div className="rankPrize">
               <div className="rankTime">
-                <span>01</span>天<span>01</span>:<span>59</span>:<span>59</span>后结算奖励
+                <span>{dNum}</span>天<span>{hNum}</span>:<span>{mNum}</span>:<span>{sNum}</span>后结算奖励
               </div>
               <Swiper
                 className="prizeList"
                 slideSize={174 / 654 * 100}
                 loop={true}
+                autoplay={true}
                 indicator={false}
               >
                 {rankOptions?.map((item, index) => (
@@ -136,9 +189,9 @@ class Userhomepage extends React.Component {
               <div className="inviteNum">累计邀请人数</div>
             </div>
             <div className="rankItem rankListItem">
-              <div className="rank">999+</div>
-              <div className="nickName">用户昵称（我）</div>
-              <div className="inviteNum">9</div>
+              <div className="rank">{this.getRankIndex(myRank?.index)}</div>
+              <div className="nickName">{myRank?.userName || ""}（我）</div>
+              <div className="inviteNum">{myRank?.score || 0}</div>
               <div className="border" />
             </div>
             <div className="rankList">
@@ -146,11 +199,11 @@ class Userhomepage extends React.Component {
                   const rankCls = classNames("rank", {
                     rankIcon: item.index <= 3
                   });
-                  const rank = item.index <= 3 ? "" : item.index;
+                const rank = item.index <= 3 ? "" : this.getRankIndex(item?.index);
                   return <div className="rankItem rankListItem" key={index}>
                     <div className={rankCls}>{rank}</div>
                     <div className="nickName">{item?.userName}</div>
-                    <div className="inviteNum">{item?.score}</div>
+                    <div className="inviteNum">{item?.score || 0}</div>
                     <div className="border" />
                   </div>;
               })}

src/utils/utils.js

@@ -450,3 +450,9 @@ export const appJump = (module, method, params, callback) => {
     callback: callback,
   });
 }
+
+
+
+export function prefixInteger(num, length) {
+  return (Array(length).join('0') + num).slice(-length);
+}