update

mock/main.ts

@@ -14,8 +14,8 @@ export default [
           "uid": "laboris Lorem sit officia aliqua",
           "currentTimestamp": 99790918.1204935,
           "actEndTimestamp": 42625488.007563084,
-          "rankPop": {
-            "prizeName": "名字是啥",
+          "rankPop1": {
+            "prizeName": null,
             "prizeImg": "//yun.duiba.com.cn/polaris/045CCBB8-F6C7-43DB-9F81-45F52430A878.441c8f13daf61c48b85fe383e764d9089f1d4a66.png",
             "rank": 825844,
           },

src/pages/HomePage/HomePage.tsx

@@ -16,7 +16,6 @@ import MyPrize from '../MyPrize/MyPrize.js';
 import shareStore from '@/store/share.js';
 import { LOG_KEY, MatterShareOpt, MatterViewDuration, MatterViewOpt, pageView, sensorLog } from "@/utils/sensors.js";
 import { CHANNEL_PARAMS, extranceName } from '@/utils/constants.js';
-import RankPrizePop from '@/panels/RankPrizePop/RankPrizePop.js';
 
 @observer
 class Homepage extends React.Component {
@@ -27,8 +26,7 @@ class Homepage extends React.Component {
   }
 
   async componentDidMount() {
-    // ModalCtrl.showModal(RankPrizePop);
-    await store.updateIndex()
+    await store.updateIndex();
     await shareStore.doAssist();
     this.initSensor();
 

src/panels/RankNoPrizePop/RankNoPrizePop.less

+@import "../../res.less";
+.rankNoPrizePop {
+  width: 750px;
+  height: 100%;
+  left: 0px;
+  top: 0px;
+  position: absolute;
+  overflow-y: auto;
+  overflow-x: hidden;
+  .bg {
+    width: 593px;
+    height: 475px;
+    left: 105px;
+    top: 390px;
+    position: absolute;
+    .sparkBg("ranknoprizepop/bg.png");
+  }
+  .btn{
+    width:263px;
+    height: 92px;
+    position: absolute;
+    top:670px;
+    left:230px;
+    .sparkBg("ranknoprizepop/okbtn.png");
+  }
+  .text{
+    width:400px;
+    position: absolute;
+    top:600px;
+    font-size: 30px;
+    color: #99391b;
+    text-align: center;
+    left:160px;
+    .lineClamp1();
+  }
+
+  .back {
+    left: 320px;
+    top: 930px;
+    width: 65px;
+    height: 65px;
+    position: absolute;
+    .webpBg("ranknoprizepop/close.png");
+  }
+}
\ No newline at end of file

src/panels/RankNoPrizePop/RankNoPrizePop.tsx

+import React from 'react';
+import { observer } from 'mobx-react';
+import './RankNoPrizePop.less';
+import API from "@/api";
+import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
+import store from "@/store/store.ts";
+import HomePage from '../../pages/HomePage/HomePage.js';
+import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
+import { LOG_KEY, MatterShareOpt, MatterViewOpt, pageView, sensorLog,MatterViewDuration } from '../../utils/sensors.js';
+
+@observer
+class RankNoPrizePop extends React.Component<any, any> {
+
+    componentDidMount(): void {
+        pageView("b14290", {
+            page_name: "排行榜未中奖弹窗",
+        });
+    
+        sensorLog(LOG_KEY.exposure, "b14290", "d14291", {
+            page_name: "排行榜未中奖弹窗",
+            button_name: "我知道了按钮",
+        });
+    }
+    clickBack = () => {
+        ModalCtrl.closeModal();
+    }
+    clickBack2 = () => {
+        sensorLog(LOG_KEY.click, "b14290", "d14291", {
+            page_name: "排行榜未中奖弹窗",
+            button_name: "我知道了按钮",
+        });
+        ModalCtrl.closeModal();
+    }
+
+    render() {
+       const { prize } = this.props;
+        return <div className="rankNoPrizePop">
+            <div className="bg"></div>
+            <div className="text">最终排名为{prize?.rank == -1 ? '3000+' : prize?.rank}</div>
+            <div className="btn"  onClick={this.clickBack2}></div>
+            <span className="back" onClick={this.clickBack}></span>
+        </div>;
+    }
+}
+
+export default RankNoPrizePop;
\ No newline at end of file

src/panels/RankPrizePop/RankPrizePop.less

@@ -15,6 +15,14 @@
     position: absolute;
     .sparkBg("ranknoprizepop/bg2.png");
   }
+  .light {
+    width: 750px;
+    height: 1006px;
+    left: 0px;
+    top: 260px;
+    position: absolute;
+    .sparkBg("ranknoprizepop/light.png");
+  }
   .prizeImg{
     width:217px;
     height: 217px;

src/panels/RankPrizePop/RankPrizePop.tsx

@@ -35,6 +35,7 @@ class RankPrizePop extends React.Component<any, any> {
     render() {
        const { prize } = this.props;
         return <div className="rankPrizePop">
+            <div className="light"></div>
             <div className="bg"></div>
             <div className="prizeImg">
                 <img src={prize?.prizeImg} alt="" />

src/store/store.ts

@@ -7,6 +7,9 @@ import { _asyncThrottle, _debounce, getUrlParam } from '@/utils/utils';
 // import { IOverflowBubbleInfo } from "@/pages/HomePage/Top/Components/OverflowBubble.ts";
 import { getDomain } from '@spark/dbdomain';
 import { showShareGuide } from '@spark/share';
+import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
+import RankPrizePop from '@/panels/RankPrizePop/RankPrizePop';
+import RankNoPrizePop from '@/panels/RankNoPrizePop/RankNoPrizePop';
 
 class Store {
 
@@ -110,6 +113,18 @@ class Store {
       API.visit()
       this.firstIn = false
     }
+
+    if(data?.rankPop){
+      if(data?.rankPop?.prizeName){
+        ModalCtrl.showModal(RankPrizePop,{
+          prize:data?.rankPop
+        })
+      }else{
+        ModalCtrl.showModal(RankNoPrizePop,{
+          prize:data?.rankPop
+        })
+      }
+    }
   }
 
   /**