update

mock/prize.ts

@@ -5,10 +5,11 @@ export default [
         response: ({ query }) => {
             return {
                 "code": "sint nisi ex",
+                "timeStamp": new Date().getTime(),
                 "message": "mollit id Excepteur ullamco deserunt",
                 "success": true,
                 "data": {
-                    "openTime": 79049724.44126037,
+                    "openTime": new Date().getTime() +1000000,
                     "rankOptions": [
                         {
                             "ranking": "1",

src/components/ComCountdown/index.jsx

+"use strict";
+
+import { zeroize } from "@/utils/utils.ts";
+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/components/ComCountdown/index.less

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

src/pages/RankPage/RankPage.less

@@ -22,6 +22,29 @@
     position: absolute;
     .sparkBg("rank/title.png");
   }
+  .countTime{
+    width:750px;
+    height: 80px;
+    position: absolute;
+    top:300px;
+    left:0;
+    text-align: center;
+    color: #fff;
+    font-size: 28px;
+    .times{
+      span{
+        width: 58px;
+        height: 58px;
+        display: inline-block;
+        text-align: center;
+        line-height: 58px;
+        color:#963800;
+        font-weight: 500;
+        margin:0 5px;
+      .sparkBg("rank/countbg.png");
+      }
+    }
+  }
   .prizeList{
     width:680px;
     height: 275px;

src/pages/RankPage/RankPage.tsx

@@ -5,7 +5,7 @@ import API from "@/api";
 import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
 import store from "@/store/store.ts";
 import HomePage from '../HomePage/HomePage';
-
+import Countdown from '@/components/ComCountdown/index.jsx';
 @observer
 class RankPage extends React.Component<any, any> {
     constructor(props) {
@@ -13,19 +13,23 @@ class RankPage extends React.Component<any, any> {
         this.state={
             rankList:[],
             myRankInfo:{},
-            prizeList:[]
+            prizeList:[],
+            openTime:0,
+            currentTime:0,
         }
     }
     componentDidMount(): void {
         this.getRankInfo();
     }
     getRankInfo = async() =>{
-        const {success, data} = await API.rankInfo()
+        const {success, data, timeStamp} = await API.rankInfo()
         if(success){
             this.setState({
                 rankList:data.rankInfos,
                 myRankInfo:data.myRank,
-                prizeList:data.rankOptions
+                prizeList:data.rankOptions,
+                openTime:data.openTime,
+                currentTime:timeStamp,
             })
         }
     }
@@ -34,10 +38,26 @@ class RankPage extends React.Component<any, any> {
     }
 
     render() {
-        const {rankList, myRankInfo, prizeList} = this.state;
+        const {rankList, myRankInfo, prizeList, openTime, currentTime} = this.state;
         return <div className="rankPage">
             <div className="bg"></div>
             <div className="title"></div>
+            <div className="countTime">
+                <Countdown
+                  leftT={openTime - currentTime}
+                  renderText={data => {
+                    const { day, hour, minute, second } = data
+                    return <div className="times">
+                      <span className="open_countdown_num">{day}</span>天
+                      <span className="open_countdown_num">{hour}</span>:
+                      <span className="open_countdown_num">{minute}</span>:
+                      <span className="open_countdown_num">{second}</span>
+                      后更新
+                    </div>
+                  }}
+                  countdownOver={() => store.getHomeInfo()}
+                />
+              </div>
             <div className="prizeList">
                 {
                     (prizeList || []).map((item,index)=>{
@@ -71,7 +91,7 @@ class RankPage extends React.Component<any, any> {
                         return(
                             <div className="rankItem">
                                 <div className="rank">
-                                    {item?.index > 4 ? <span></span> : item?.index}
+                                    {item?.index < 4 ? <span></span> : item?.index}
                                 </div>
                                 <div className="name">{item?.userName}</div>
                                 <div className="score">{item?.score}</div>

src/utils/utils.ts

@@ -477,3 +477,14 @@ export const appJump = (module, method, params, callback) => {
 export const windowJumpUrl = (url) => {
   url && (location.href = url);
 };
+
+
+/** 前置补零 */
+export function zeroize(num, n = 2) {
+  let len = num.toString().length
+  while (len < n) {
+    num = '0' + num
+    len++
+  }
+  return num
+}
\ No newline at end of file