init

src/components/ReviewPanel/ReviewPanel.jsx

@@ -11,7 +11,8 @@ import modalStore from "@src/store/modal";
 @observer
 class ReviewPanel extends React.Component {
   state = {
-    itemsVisible: new Array(5).fill(false)
+    itemsVisible: new Array(5).fill(false),
+    animationCompleted: false
   };
 
   componentDidMount() {
@@ -30,42 +31,61 @@ class ReviewPanel extends React.Component {
             i === index ? true : visible
           )
         }));
+
+        // 最后一个 item 显示后，等待动画完成再设置完成状态
+        if (index === this.state.itemsVisible.length - 1) {
+          setTimeout(() => {
+            this.setState({ animationCompleted: true });
+          }, 600); // 等待最后一个 item 的动画完成 (0.6s)
+        }
       }, index * 300); // 每个 item 延迟 300ms
     });
   };
 
   clickNext = () => {
+    // 只有在动画完成后才允许点击
+    if (!this.state.animationCompleted) {
+      return;
+    }
     modalStore.closePop();
     store.changePage(PAGE_MAP.QUES_PAGE, {funds: this.props.popData.funds});
   }
 
   render() {
-    const {funds} = this.props.popData;
-    const {itemsVisible} = this.state;
+    const {review} = this.props.popData;
+    const {itemsVisible, animationCompleted} = this.state;
 
     // 当前题目
-    return <div className="ReviewPanel modal_center" onClick={this.clickNext}>
+    return (
+      <div
+        className={`ReviewPanel modal_center ${animationCompleted ? 'animation-completed' : ''}`}
+        onClick={this.clickNext}
+      >
         <SvgaPlayer className="effect" src={RES_PATH + "svga/2输出弹窗氛围.svga"}/>
         <div className="bg"/>
         <div className="items-container">
           {
-          new Array(5).fill(1).map((item, index) => {
+            review.map((item, index) => {
               return (
                 <div
                   key={index}
                   className={`item item${index % 2} ${itemsVisible[index] ? 'item-visible' : ''}`}
                   style={{
-                  top: (217 + index * 250) * remScale,
+                    top: (317 + index * 250) * remScale,
                   }}
                 >
-                <div className="txt">11岁：家庭纽带</div>
+                  <div className="title">{item.title}</div>
+                  <div className="txt">{item.txt}</div>
                 </div>
               );
             })
           }
         </div>
-      <div className="tip">点击屏幕继续测试</div>
-    </div>;
+        {animationCompleted && <div className={`tip`}>
+          点击屏幕继续测试
+        </div>}
+      </div>
+    );
   }
 }
 

src/components/ReviewPanel/ReviewPanel.less

@@ -41,20 +41,28 @@
       transform: translateY(0) scale(1);
     }
 
-    .txt {
+    .title {
       position: absolute;
-      top: 30px;
-      font-size: 34px;
+      top: 15px;
+      font-size: 32px;
       color: #008bdb;
       font-family: "KingnamBobo";
     }
 
+    .txt {
+      position: absolute;
+      top: 50px;
+      font-size: 24px;
+      color: black;
+      left: 38px;
+    }
+
     &.item0 {
       left: 0;
       .webpBg("ReviewPanel/itemBg0.png");
 
-      .txt {
-        right: 58px;
+      .title {
+        right: 38px;
       }
     }
 
@@ -62,8 +70,8 @@
       right: 0;
       .webpBg("ReviewPanel/itemBg1.png");
 
-      .txt {
-        left: 58px;
+      .title {
+        left: 38px;
       }
     }
   }
@@ -74,7 +82,7 @@
     text-align: center;
     position: absolute;
     left: 0;
-    top: 1440px;
+    top: 1280px;
     width: 100%;
     .blinkAni();
   }

src/pages/answerpage/QuestionCfg.js

@@ -35,6 +35,24 @@ export const QuestionCfg = [
         }
       },
     ],
+    review: [
+      {
+        title: "14岁：中考前夜",
+        txt: "台灯下背英语单词到眼皮打架，爸爸悄悄端来热牛奶，故意把成绩单藏在篮球杂志里，却在公布重点高中录取名单时蹦得比谁都高。",
+      },
+      {
+        title: "16岁：第一次远行",
+        txt: "拖着比人高的行李箱去外地上高中，妈妈塞了二十个茶叶蛋和三张手写便签（“洗头后吹干”“别总吃泡面”），到校后第一时间给爸妈发消息报平安。",
+      },
+      {
+        title: "18岁：成人礼礼物",
+        txt: "收到爸妈送的二手笔记本电脑（备注“大学用”），却在拆开包装时发现里面夹着一张泛黄的合影——那是他们当年考上大学时的照片。",
+      },
+      {
+        title: "20岁：租房初挑战",
+        txt: "对着58同城上的租房信息挑花眼，中介带看的第三套房终于有独立卫生间，搬进去那天妈妈远程指导安装窗帘杆，爸爸偷偷塞了备用钥匙。",
+      },
+    ],
   },
   {
     stage: "初入社会（22岁）",
@@ -70,6 +88,24 @@ export const QuestionCfg = [
         }
       },
     ],
+    review: [
+      {
+        title: "24岁：领证小剧场",
+        txt: "在民政局门口反复练习“我愿意”，选了爸妈结婚时同款的戒指，租来的婚房里摆着单位发的二手衣柜，却在挂结婚照时发现尺寸刚好遮住墙上的霉斑。",
+      },
+      {
+        title: "26岁：新手爸妈记",
+        txt: "产房外听着婴儿的啼哭手忙脚乱，给女儿取名字时翻了三小时字典（最终用了妈妈起的乳名），月子期间爸爸笨拙地给母女俩煮小米粥，锅底总是糊。",
+      },
+      {
+        title: "28岁：学区房攻坚战",
+        txt: "把结婚时的金镯子熔了凑首付，每天挤地铁送孩子上早教班，周末蹲在地上陪孩子用积木搭“梦想城堡”，听着“妈妈回家”的呼唤突然鼻酸。",
+      },
+      {
+        title: "30岁：职场小突破",
+        txt: "熬夜做的方案被总监认可，第一次独立负责项目时紧张到失眠，项目落地那天带全家去吃火锅，女儿把虾滑偷偷夹进爸爸碗里。",
+      },
+    ],
   },
   {
     stage: "结婚（32岁）",
@@ -105,6 +141,24 @@ export const QuestionCfg = [
         }
       },
     ],
+    review: [
+      {
+        title: "32岁：体检初体验",
+        txt: "单位组织体检时第一次做胃镜，紧张得握紧拳头，医生说“注意饮食规律”，回家后默默把夜宵换成小米粥，却发现老婆早就炖好了山药汤。",
+      },
+      {
+        title: "34岁：车子终于提回家",
+        txt: "咬咬牙买下十万块的代步车，第一次载着全家人去周边露营，女儿在后座哼跑调的儿歌，后视镜里老婆的笑脸比星星还亮。",
+      },
+      {
+        title: "36岁：父母退休记",
+        txt: "爸妈捧着退休证笑得合不拢嘴，把家里的旧钢琴擦得锃亮说要学弹《茉莉花》，周末回家吃饭时，爸爸偷偷把剥好的虾仁放进女儿碗里。",
+      },
+      {
+        title: "38岁：职场爬坡路",
+        txt: "熬夜改方案时孩子打来视频说“爸爸回家”，项目成功升职加薪，咬咬牙给孩子报了每月三千的兴趣班，却在月底收到爸妈寄来的晒干的陈皮（“给你泡茶喝”）。",
+      },
+    ],
   },
   {
     stage: "事业有成（40岁）",
@@ -140,6 +194,24 @@ export const QuestionCfg = [
         }
       },
     ],
+    review: [
+      {
+        title: "42岁：老家翻新记",
+        txt: "把结婚时的金镯子熔了给父母翻新老房子，看着他们摸着新贴的瓷砖掉眼泪，周末带孩子回去住三天，发现老家的萤火虫比城市灯光更亮。",
+      },
+      {
+        title: "44岁：体检报告单",
+        txt: "收到血脂偏高的体检单，开始每天晨跑五公里，孩子上小学后每天清晨煎鸡蛋，突然在某个瞬间读懂了“养儿方知父母恩”的重量。",
+      },
+      {
+        title: "46岁：家庭旅行计划",
+        txt: "妻子提议“一家人去海边”，女儿立刻翻出攒了三年的贝壳，订酒店时特意选了带儿童乐园的民宿，出发前偷偷给父母报了跟团游，备注“全程陪同”。",
+      },
+      {
+        title: "48岁：职场转型期",
+        txt: "被年轻下属调侃“跟不上时代”，悄悄报名线上运营课到凌晨，项目落地那天，女儿把奖状贴在客厅墙上，旁边是她画的“全家福”——三个小人手拉手。",
+      },
+    ],
   },
   {
     stage: "资产配置（50岁）",
@@ -175,6 +247,24 @@ export const QuestionCfg = [
         }
       },
     ],
+    review: [
+      {
+        title: "52岁：老友重逢记",
+        txt: "在小区偶遇三十年未见的小学同学，大家晒出孙子的照片笑出皱纹，突然想起当年一起偷摘隔壁大爷的枇杷，如今大爷的枇杷树早已长成参天大树。",
+      },
+      {
+        title: "54岁：退休倒计时",
+        txt: "妻子提前两年研究退休政策，把家庭账本整理成二十页Excel，女儿偷偷定制了“退休快乐”纪念牌，每天清晨的豆浆油条，成了全家最温暖的期待。",
+      },
+      {
+        title: "56岁：正式退休啦！",
+        txt: "退休仪式上，领导给戴了定制的工牌（背面刻着“职场生涯圆满收官”），回家路上妻子突然说：“其实你退休后，家里厨房终于有时间做你爱吃的糖醋排骨了。”",
+      },
+      {
+        title: "58岁：父母银婚记",
+        txt: "爸妈举办金婚宴时，全家人翻出泛黄的结婚证和老照片，奶奶指着照片说：“你看你爷爷当年多瘦，现在都能抱动孙子了。” 晚宴上，孙子举着手机给大家拍全家福。",
+      },
+    ],
   },
   {
     stage: "养老规划（60岁）",

src/pages/answerpage/answerpage.jsx

@@ -45,11 +45,11 @@ class Answerpage extends React.Component {
   clickNext = () => {
     const {quesIndex, chooseIndex, funds} = this.state;
 
-    const {event} = QuestionCfg[quesIndex].answer[chooseIndex];
-
+    const {event, review} = QuestionCfg[quesIndex].answer[chooseIndex];
     modalStore.pushPop("EventPanel", {
       event,
       call: () => {
+        modalStore.pushPop("ReviewPanel", {review: QuestionCfg[quesIndex].review});
         this.goNext(event.money);
       }
     });

src/pages/homepage/homepage.jsx

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