init

mock/challenge.ts

@@ -47,8 +47,8 @@ export default [
                     ],
                     "hasChallengeDay": 5,
                     "latestChallengeSuccessTime": 5,
-                    "boolNeedResign": true,
-                    "boolNeedResignPop": true,
+                    "boolNeedResign": false,
+                    "boolNeedResignPop": false,
                     "taskInfoList": [
                         {
                             "code": "sign",
@@ -205,4 +205,4 @@ export default [
             }
         },
     }
-]
\ No newline at end of file
+]

mock/main.ts

@@ -13,7 +13,7 @@ export default [
           actStartTime: Date.now() - 1000000,
           actEndTime: Date.now() + 1000000,
           currentTime: Date.now(),
-          guideFlag: false,
+          guideFlag: true,
           creditsNum: 923,
           expireDays: 7,
           currentStoreNum: 923,
@@ -41,7 +41,7 @@ export default [
               type: 1 + Math.random() * 2 >> 0,
             }
           }),
-          returnAwardCreditsNum: 1111,
+          returnAwardCreditsNum: 0,
           downGoldVo: {
             creditsNum: 100,
             multipleValue: 5,

src/App.tsx

@@ -47,12 +47,10 @@ class App extends Component {
   }
 
   render() {
-    return (
-      <>
+    return <>
         <PageCtrl/>
         <ModalCtrl/>
-      </>
-    );
+    </>;
   }
 }
 

src/pages/HomePage/HomePage.tsx

@@ -31,6 +31,7 @@ import API from "@/api";
 import VideoPanel from "@/panels/VideoPanel/VideoPanel.tsx";
 import ObtainPanel from "@/panels/ObtainPanel/ObtainPanel.tsx";
 import NewcomerPanel from "@/panels/NewcomerPanel/NewcomerPanel.tsx";
+import GuidePanel from "@/panels/GuidePanel/GuidePanel.tsx";
 
 
 @observer
@@ -55,10 +56,10 @@ class HomePage extends React.Component<any, any> {
   }
 
   render() {
-    const { creditsNum } = store.indexData
-    return <div className="homepage" ref={(el) => this.root = el}>
+    const { creditsNum, guideFlag } = store.indexData
+    return <>
+      <div className="homepage" ref={(el) => this.root = el}>
       <div className="homeRoot">
-
         <Top/>
 
         <SvgaPlayer className="homeSvga" src={lightSvga}/>
@@ -71,9 +72,11 @@ class HomePage extends React.Component<any, any> {
 
         <Button className="rule" onClick={this.clickRule} />
         <Button className="prize" onClick={this.clickPrize} />
+      </div>
 
       </div>
-    </div>;
+      {!guideFlag && <GuidePanel/>}
+    </>;
   }
 }
 

src/pages/HomePage/Sign/Sign.tsx

@@ -5,13 +5,7 @@ import { Button } from "@grace/ui";
 
 import styles from "./Sign.module.less";
 import classNames from "classnames";
-import API from "@/api";
 import { _asyncThrottle } from "@/utils/utils.ts";
-import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
-import WedExpPanel from "@/panels/WedExpPanel/WedExpPanel.tsx";
-import SignSucPanel from "@/panels/SignSucPanel/SignSucPanel.tsx";
-import NewcomerPanel from "@/panels/NewcomerPanel/NewcomerPanel.tsx";
-
 
 @observer
 class Sign extends React.Component<any, any> {
@@ -24,22 +18,7 @@ class Sign extends React.Component<any, any> {
     const { todaySignFlag } = store.indexData;
     if (todaySignFlag) return;
 
-    const { success, data } = await API.sign();
-    store.updateIndex();
-    if (!success) return;
-
-    const { signCredits, extraCredits, boolLimit, multipleValue, url, taskId, newLuckCreditsNum } = data;
-
-    if (newLuckCreditsNum) {
-      ModalCtrl.showModal(NewcomerPanel, { creditNum: newLuckCreditsNum, });
-    }
-
-    if (boolLimit) {
-      // 周三限时奖励
-      ModalCtrl.showModal(WedExpPanel, data);
-    } else {
-      ModalCtrl.showModal(SignSucPanel, data);
-    }
+    await store.doSign();
 
   });
 

src/panels/GuidePanel/GuidePanel.module.less

+@import "../../res.less";
+
+.GuidePanel {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  //background-color: rgba(0, 0, 0, 0.7);
+
+  .guide {
+    position: absolute;
+    width: 750px;
+    height: 1624px;
+    left: 0;
+    top: 0;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-position: left top;
+  }
+
+  .tip {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    bottom: 100px;
+    text-align: center;
+    font-size: 38px;
+    //color: rgba(255, 255, 255, 0.6);
+    color: white;
+  }
+
+  .guide6Tip {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 952px;
+    text-align: center;
+    font-size: 42px;
+    color: white;
+    font-family: zzgfyht;
+  }
+
+  .guide6Btn {
+    position: absolute;
+    left: 164px;
+    top: 1203px;
+    width: 420px;
+    height: 123px;
+    .webpBg("GuidePanel/按钮.png");
+  }
+
+}

src/panels/GuidePanel/GuidePanel.tsx

+import React from "react";
+import { observer } from "mobx-react";
+import styles from "./GuidePanel.module.less";
+import { Button } from "@grace/ui";
+import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
+import classNames from "classnames";
+import store from "@/store/store.ts";
+
+
+export interface IGuidePanelProps {
+}
+
+@observer
+class GuidePanel extends React.Component<IGuidePanelProps> {
+
+  state = {
+    step: 1,
+  }
+
+  componentDidMount() {
+  }
+
+  clickGuide = () => {
+    const { step } = this.state;
+    if (step == 6)  return;
+
+    this.setState({
+      step: step + 1,
+    });
+  };
+
+  clickGuide6Btn = () => {
+    const { step } = this.state;
+    if (step != 6)  return;
+    store.doSign();
+  };
+
+
+  render() {
+
+    const { expireDays } = store.indexData;
+    const { step } = this.state;
+    const guideSrc = new URL(`../../assets/GuidePanel/引导${step}.png`, import.meta.url).href;
+
+    return <div className={styles.GuidePanel} onClick={this.clickGuide}>
+
+      <div className={styles.guide} style={{
+        backgroundImage: `url(${guideSrc})`,
+      }}/>
+
+      {
+        step == 6
+          ? <>
+            <div className={styles.guide6Tip}>
+              超过{expireDays}天未登录<br/>
+              积分会清零<br/>
+              记得来“取积分”哦
+            </div>
+
+            <Button className={styles.guide6Btn} onClick={this.clickGuide6Btn}/>
+          </>
+          : <div className={styles.tip}>点击屏幕继续</div>
+      }
+
+    </div>;
+  }
+
+}
+
+export default GuidePanel;

src/store/store.ts

@@ -12,6 +12,9 @@ import Finish_challenge from '../../src/components/finish_challenge/finish_chall
 import { IBubbleInfo } from "@/pages/HomePage/Top/Components/Bubble.ts";
 import { IOverflowBubbleInfo } from "@/pages/HomePage/Top/Components/OverflowBubble.ts";
 import ReturnAwardPanel from "@/panels/ReturnAwardPanel/ReturnAwardPanel.tsx";
+import NewcomerPanel from "@/panels/NewcomerPanel/NewcomerPanel.tsx";
+import WedExpPanel from "@/panels/WedExpPanel/WedExpPanel.tsx";
+import SignSucPanel from "@/panels/SignSucPanel/SignSucPanel.tsx";
 
 class Store {
 
@@ -114,6 +117,27 @@ class Store {
     return await this.updateIndex();
   }, 500);
 
+
+  async doSign (){
+    const { success, data } = await API.sign();
+    this.updateIndex();
+    if (!success) return;
+
+    const { boolLimit, newLuckCreditsNum } = data;
+
+    if (newLuckCreditsNum) {
+      ModalCtrl.showModal(NewcomerPanel, { creditNum: newLuckCreditsNum, });
+    }
+
+    if (boolLimit) {
+      // 周三限时奖励
+      ModalCtrl.showModal(WedExpPanel, data);
+    } else {
+      ModalCtrl.showModal(SignSucPanel, data);
+    }
+  }
+
+
   judgeActTime(brakeStart = true, brakeEnd = true) {
     if (brakeStart && this.indexData.currentTime < this.indexData.actStartTime) {
       Toast.show("活动未开始");