init

mock/project/home.js

@@ -25,10 +25,11 @@ module.exports = {
     success: true,
     timeStamp: 1723602734176,
   },
-  "GET /home/submitAnswer.do": {
+  "GET /game/submitGame.do": {
     code: null,
     data: {
-      awardTimes: 18,
+      "rewardDrawTimes": 1,
+      "leftGameTimes": 2
     },
     message: null,
     success: true,

package.json

@@ -27,6 +27,7 @@
     "javascript-obfuscator": "^4.1.0",
     "mobx": "^6.2.0",
     "mobx-react": "^7.1.0",
+    "motion": "^12.23.5",
     "qs": "^6.9.4",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",

src/api/index.js

@@ -38,7 +38,7 @@ const API = generateAPI({
     withToken: true,  // 携带token
   },
   submitAnswer: {
-    uri: 'home/submitAnswer.do',
+    uri: 'game/submitGame.do',
     withToken: true,  // 携带token
   },
 

src/assetList.json

-{"preLoadImg":[],"asyncLoadImg":["answerPage/bg1.jpg","answerPage/bg2.jpg","answerPage/bg3.jpg","answerPage/bg4.jpg","answerPage/bg5.jpg","answerPage/bg6.jpg","answerPage/chooseBg.png","answerPage/normalBg.png","answerPage/q1.png","answerPage/q2.png","answerPage/q3.png","answerPage/q4.png","answerPage/q5.png","answerPage/q6.png","answerPage/queBg.png","answerPage/按钮.png","bindPop/bg.png","bindPop/bind_btn.png","common/back.png","common/close.png","drawChancePop/bg.png","drawChancePop/btn.png","drawFailPop/bg.png","drawFailPop/btn.png","drawPage/bg.png","drawPage/cloud.png","drawPage/draw_btn.png","drawPage/pointer.png","drawPage/prize_btn.png","drawPage/rule_btn.png","drawPage/subtitle_bg.png","drawPage/task_btn.png","drawPage/title.png","drawPage/turntable_bg.png","drawPage/turntable_box.png","drawSucPop/bg.png","drawSucPop/happy_btn.png","drawSucPop/leaves.png","drawSucPop/light.png","drawSucPop/prize_img.png","EventPanel/不慎受伤.png","EventPanel/不慎摔伤.png","EventPanel/不慎摔倒.png","EventPanel/分红致富.png","EventPanel/古井无波.png","EventPanel/夏令营不慎摔倒.png","EventPanel/家长奖励.png","EventPanel/惨遭辞退.png","EventPanel/晋升.png","EventPanel/生活美满.png","EventPanel/电商震荡.png","EventPanel/职场风波.png","EventPanel/股市震荡.png","EventPanel/获得保障.png","EventPanel/获得保障2.png","EventPanel/获得文凭.png","EventPanel/财富提升.png","EventPanel/钱包发瘪.png","exitPop/bg.png","exitPop/cancel_btn.png","exitPop/confirm_btn.png","focusPop/bg.png","focusPop/qrcode_bg.png","homePage/bg.png","homePage/content.png","homePage/draw_btn.png","homePage/main_btn.png","homePage/ptize_btn.png","homePage/rule_btn.png","homePage/share_btn.png","homePage/subtitle_bg.png","homePage/task_btn.png","homePage/title.png","LifeSettingsPage/0岁.png","LifeSettingsPage/10岁.png","LifeSettingsPage/20岁.png","LifeSettingsPage/30岁.png","LifeSettingsPage/ageTitle.png","LifeSettingsPage/bg.jpg","LifeSettingsPage/cityTitle.png","LifeSettingsPage/familyTitle.png","LifeSettingsPage/title.png","LifeSettingsPage/一线.png","LifeSettingsPage/三口.png","LifeSettingsPage/三线.png","LifeSettingsPage/三线外.png","LifeSettingsPage/两口.png","LifeSettingsPage/二线.png","LifeSettingsPage/四口.png","LifeSettingsPage/开始测试.png","LifeSettingsPage/更多.png","LifeSettingsPage/选择框.png","LoadingPage/loadingBg.jpg","LoadingPage/loadingFill.png","LoadingPage/loadingIp.png","mid/bg.jpg","prizePage/bg.png","prizePage/prize_btn.png","prizePage/prize_img.png","prizePage/prize_item_bg.png","prizePage/title.png","resultPage/bg.png","resultPage/code_bg.png","resultPage/code_img.png","resultPage/draw_btn.png","resultPage/product_btn.png","resultPage/share_btn.png","resultPage/传统守护者.png","resultPage/佛系随性派.png","resultPage/元气美食家.png","resultPage/狂热尝新党.png","resultPage/社交组局王.png","rulePop/bg.png","svga/choose.svga","svga/home.svga","svga/pop.svga","taskPop/bg.png","taskPop/grey_bg.png","taskPop/red_bg.png","taskPop/task_icon.png","taskPop/task_item_bg.png","taskPop/yellow_bg.png"]}
+{"preLoadImg":[],"asyncLoadImg":["answerPage/bg1.jpg","answerPage/bg2.jpg","answerPage/bg3.jpg","answerPage/bg4.jpg","answerPage/bg5.jpg","answerPage/bg6.jpg","answerPage/chooseBg.png","answerPage/normalBg.png","answerPage/q1.png","answerPage/q2.png","answerPage/q3.png","answerPage/q4.png","answerPage/q5.png","answerPage/q6.png","answerPage/queBg.png","answerPage/按钮.png","bindPop/bg.png","bindPop/bind_btn.png","common/back.png","common/close.png","drawChancePop/bg.png","drawChancePop/btn.png","drawFailPop/bg.png","drawFailPop/btn.png","drawPage/bg.png","drawPage/cloud.png","drawPage/draw_btn.png","drawPage/pointer.png","drawPage/prize_btn.png","drawPage/rule_btn.png","drawPage/subtitle_bg.png","drawPage/task_btn.png","drawPage/title.png","drawPage/turntable_bg.png","drawPage/turntable_box.png","drawSucPop/bg.png","drawSucPop/happy_btn.png","drawSucPop/leaves.png","drawSucPop/light.png","drawSucPop/prize_img.png","drawSucPop/title.png","EventPanel/不慎受伤.png","EventPanel/不慎摔伤.png","EventPanel/不慎摔倒.png","EventPanel/分红致富.png","EventPanel/古井无波.png","EventPanel/夏令营不慎摔倒.png","EventPanel/家长奖励.png","EventPanel/惨遭辞退.png","EventPanel/晋升.png","EventPanel/生活美满.png","EventPanel/电商震荡.png","EventPanel/职场风波.png","EventPanel/股市震荡.png","EventPanel/获得保障.png","EventPanel/获得保障2.png","EventPanel/获得文凭.png","EventPanel/财富提升.png","EventPanel/钱包发瘪.png","exitPop/bg.png","exitPop/cancel_btn.png","exitPop/confirm_btn.png","focusPop/bg.png","focusPop/qrcode_bg.png","FundsPanel/bg.png","FundsPanel/close.png","FundsPanel/去配置.png","homePage/bg.png","homePage/content.png","homePage/draw_btn.png","homePage/main_btn.png","homePage/ptize_btn.png","homePage/rule_btn.png","homePage/rule_prize.png","homePage/share_btn.png","homePage/subtitle_bg.png","homePage/task_btn.png","homePage/title.png","LifeSettingsPage/0岁.png","LifeSettingsPage/10岁.png","LifeSettingsPage/20岁.png","LifeSettingsPage/30岁.png","LifeSettingsPage/ageTitle.png","LifeSettingsPage/bg.jpg","LifeSettingsPage/cityTitle.png","LifeSettingsPage/familyTitle.png","LifeSettingsPage/title.png","LifeSettingsPage/一线.png","LifeSettingsPage/三口.png","LifeSettingsPage/三线.png","LifeSettingsPage/三线外.png","LifeSettingsPage/两口.png","LifeSettingsPage/二线.png","LifeSettingsPage/四口.png","LifeSettingsPage/开始测试.png","LifeSettingsPage/更多.png","LifeSettingsPage/选择框.png","LoadingPage/loadingBg.jpg","LoadingPage/loadingFill.png","LoadingPage/loadingIp.png","mid/bg.jpg","prizePage/bg.png","prizePage/prize_btn.png","prizePage/prize_img.png","prizePage/prize_item_bg.png","prizePage/title.png","resultPage/bg.png","resultPage/code_bg.png","resultPage/code_img.png","resultPage/draw_btn.png","resultPage/product_btn.png","resultPage/share_btn.png","resultPage/传统守护者.png","resultPage/佛系随性派.png","resultPage/元气美食家.png","resultPage/狂热尝新党.png","resultPage/社交组局王.png","ReviewPanel/bg.jpg","ReviewPanel/itemBg0.png","ReviewPanel/itemBg1.png","rulePop/bg.png","svga/1输出首页氛围.svga","svga/2输出弹窗氛围.svga","svga/choose.svga","svga/home.svga","svga/pop.svga","taskPop/bg.png","taskPop/grey_bg.png","taskPop/red_bg.png","taskPop/task_icon.png","taskPop/task_item_bg.png","taskPop/yellow_bg.png"]}
\ No newline at end of file

src/components/EventPanel/EventPanel.jsx

@@ -3,6 +3,8 @@ import {observer} from "mobx-react";
 import "./EventPanel.less";
 import {SvgaPlayer} from "@spark/svgaplayer";
 import {RES_PATH} from "../../../sparkrc";
+import modalStore from "@src/store/modal";
+import {_asyncThrottle} from "@src/utils/utils";
 
 @observer
 class EventPanel extends React.Component {
@@ -10,12 +12,17 @@ class EventPanel extends React.Component {
   componentDidMount() {
   }
 
+  onClick = _asyncThrottle(() => {
+    const {event, call} = this.props.popData;
+    call?.();
+    modalStore.closePop();
+  });
 
   render() {
     const {event, call} = this.props.popData;
 
     // 当前题目
-    return <div className="EventPanel modal_center">
+    return <div className="EventPanel modal_center" onClick={this.onClick}>
       <SvgaPlayer className="effect" src={RES_PATH + "svga/2输出弹窗氛围.svga"}/>
       <img className="bg" src={event.bg}/>
       <div className="txt" dangerouslySetInnerHTML={{__html: event.txt}}/>

src/components/EventPanel/EventPanel.less

 @import "../../res.less";
 
-.FundsPanel {
+.EventPanel {
   width: 750px;
   height: 1624px;
   left: 0;
@@ -22,39 +22,26 @@
 
   .bg {
     position: absolute;
-    left: 62px;
-    top: 396px;
-    width: 623px;
-    height: 558px;
-    .webpBg("FundsPanel/bg.png");
+    left: 0;
+    top: 0;
+    width: 750px;
+    height: 1624px;
   }
 
-  .funds {
-    font-size: 46px;
-    position: absolute;
-    left: 0;
-    top: 964px;
-    width: 100%;
+  .txt {
+    color: rgb(255, 255, 255);
+    line-height: 1.5;
     text-align: center;
-    color: white;
+    font-size: 32px;
+    margin-top: 958px;
   }
 
   .next {
-    position: absolute;
-    left: 217px;
-    top: 1060px;
-    width: 316px;
-    height: 97px;
-    .webpBg("FundsPanel/去配置.png");
-  }
-
-  .close {
-    position: absolute;
-    left: 348px;
-    top: 1248px;
-    width: 53px;
-    height: 52px;
-    .webpBg("FundsPanel/close.png");
+    color: rgb(255, 255, 255);
+    text-align: center;
+    font-size: 26px;
+    margin-top: 158px;
+    .blinkAni();
   }
 
 }

src/components/FundsPanel/FundsPanel.jsx

@@ -6,6 +6,7 @@ import {RES_PATH} from "../../../sparkrc";
 import {Button} from "@src/components/Button";
 import store from "@src/store";
 import {PAGE_MAP} from "@src/utils/constants";
+import modalStore from "@src/store/modal";
 
 @observer
 class FundsPanel extends React.Component {
@@ -14,6 +15,7 @@ class FundsPanel extends React.Component {
   }
 
   clickNext = () => {
+    modalStore.closePop();
     store.changePage(PAGE_MAP.QUES_PAGE, {funds: this.props.popData.funds});
   }
 

src/components/FundsPanel/FundsPanel.less

 @import "../../res.less";
 
-.EventPanel {
+.FundsPanel {
   width: 750px;
   height: 1624px;
   left: 0;
@@ -22,25 +22,39 @@
 
   .bg {
     position: absolute;
-    left: 0;
-    top: 0;
-    width: 750px;
-    height: 1624px;
+    left: 62px;
+    top: 396px;
+    width: 623px;
+    height: 558px;
+    .webpBg("FundsPanel/bg.png");
   }
 
-  .txt {
-    color: rgb(255, 255, 255);
-    line-height: 1.5;
+  .funds {
+    font-size: 46px;
+    position: absolute;
+    left: 0;
+    top: 964px;
+    width: 100%;
     text-align: center;
-    font-size: 32px;
-    margin-top: 958px;
+    color: white;
   }
 
   .next {
-    color: rgb(255, 255, 255);
-    text-align: center;
-    font-size: 26px;
-    margin-top: 158px;
+    position: absolute;
+    left: 217px;
+    top: 1060px;
+    width: 316px;
+    height: 97px;
+    .webpBg("FundsPanel/去配置.png");
+  }
+
+  .close {
+    position: absolute;
+    left: 348px;
+    top: 1248px;
+    width: 53px;
+    height: 52px;
+    .webpBg("FundsPanel/close.png");
   }
 
 }

src/components/ReviewPanel/ReviewPanel.jsx

+import React from "react";
+import {observer} from "mobx-react";
+import {motion} from "motion";
+import "./ReviewPanel.less";
+import {SvgaPlayer} from "@spark/svgaplayer";
+import {RES_PATH} from "../../../sparkrc";
+import {Button} from "@src/components/Button";
+import store from "@src/store";
+import {PAGE_MAP} from "@src/utils/constants";
+import modalStore from "@src/store/modal";
+
+@observer
+class ReviewPanel extends React.Component {
+
+  componentDidMount() {
+  }
+
+  clickNext = () => {
+    modalStore.closePop();
+    store.changePage(PAGE_MAP.QUES_PAGE, {funds: this.props.popData.funds});
+  }
+
+  render() {
+    const {funds} = this.props.popData;
+
+    // 动画配置
+    const containerVariants = {
+      hidden: { opacity: 0 },
+      visible: {
+        opacity: 1,
+        transition: {
+          staggerChildren: 0.3, // 每个子元素延迟0.3秒出现
+          delayChildren: 0.2    // 整体延迟0.2秒开始
+        }
+      }
+    };
+
+    const itemVariants = {
+      hidden: { 
+        opacity: 0, 
+        y: -50,
+        scale: 0.8
+      },
+      visible: { 
+        opacity: 1, 
+        y: 0,
+        scale: 1,
+        transition: {
+          duration: 0.6,
+          ease: "easeOut"
+        }
+      }
+    };
+
+    // 当前题目
+    return <div className="ReviewPanel modal_center" onClick={this.clickNext}>
+      <SvgaPlayer className="effect" src={RES_PATH + "svga/2输出弹窗氛围.svga"}/>
+      <div className="bg"/>
+      <motion.div
+        className="items-container"
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+      >
+        {
+          new Array(5).fill(1).map((item, index) => {
+            return (
+              <motion.div 
+                key={index}
+                className={`item item${index % 2}`} 
+                style={{
+                  top: (217 + index * 250) * remScale,
+                }}
+                variants={itemVariants}
+              >
+                <div className="txt">11岁：家庭纽带</div>
+              </motion.div>
+            );
+          })
+        }
+      </motion.div>
+      <div className="tip">点击屏幕继续测试</div>
+    </div>;
+  }
+}
+
+export default ReviewPanel;

src/components/ReviewPanel/ReviewPanel.less

+@import "../../res.less";
+
+.ReviewPanel {
+  width: 750px;
+  height: 1624px;
+  left: 0;
+  top: 0;
+  position: absolute;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: start;
+
+  .bg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 750px;
+    height: 1624px;
+    .webpBg("ReviewPanel/bg.jpg");
+  }
+
+  .items-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
+
+  .item {
+    position: absolute;
+    width: 730px;
+    height: 170px;
+
+    .txt {
+      position: absolute;
+      top: 30px;
+      font-size: 34px;
+      color: #008bdb;
+      font-family: "KingnamBobo";
+    }
+
+    &.item0 {
+      left: 0;
+      .webpBg("ReviewPanel/itemBg0.png");
+
+      .txt {
+        right: 58px;
+      }
+    }
+
+    &.item1 {
+      right: 0;
+      .webpBg("ReviewPanel/itemBg1.png");
+
+      .txt {
+        left: 58px;
+      }
+    }
+  }
+
+  .tip {
+    font-size: 30px;
+    color: rgb(0, 0, 0);
+    text-align: center;
+    position: absolute;
+    left: 0;
+    top: 1440px;
+    width: 100%;
+    .blinkAni();
+  }
+
+}

src/modal/modal.jsx

@@ -16,6 +16,7 @@ import Videopop from "@src/components/videopop/videopop";
 import ExitPop from "@src/components/exitPop/exitPop";
 import EventPanel from "@src/components/EventPanel/EventPanel";
 import FundsPanel from "@src/components/FundsPanel/FundsPanel";
+import ReviewPanel from "@src/components/ReviewPanel/ReviewPanel";
 /**
  * 弹窗配置
 */
@@ -34,6 +35,7 @@ export const cfg = {
   Videopop,
   EventPanel,
   FundsPanel,
+  ReviewPanel,
 };
 
 @observer

src/pages/answerpage/answerpage.jsx

@@ -29,6 +29,12 @@ class Answerpage extends React.Component {
 
 
   goNext(money) {
+
+    if (this.state.quesIndex == 5) {
+
+      return;
+    }
+
     this.setState({
       chooseIndex: null,
       quesIndex: this.state.quesIndex + 1,

src/pages/homepage/homepage.jsx

@@ -22,6 +22,9 @@ class Homepage extends React.Component {
   }
 
   async componentDidMount() {
+
+    modalStore.pushPop("ReviewPanel");
+
     await store.getHomeInfo();
     // 初始化神策埋点 得在首页接口之后 首页接口会打上业务员绑定标记
     await store.initSensorsMd();

src/res.less

 @RES_PATH: '/src/assets/';
 @webp: '?x-oss-process=image/format,webp';
+
 .sparkBg(@value) {
   background-repeat: no-repeat;
   background-size: 100% 100%;
@@ -146,3 +147,22 @@
     }
   }
 }
+
+// 隐藏滚动条
+.blinkAni() {
+  animation: blink 1.5s ease-in-out infinite;
+  @keyframes blink {
+    0% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: 0.3;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+}
\ No newline at end of file