feat: 新解锁弹窗

mock/home.js

@@ -45,8 +45,12 @@ export const homeJs = [
           }),
           "newGetMedalInfoList": [
             {
-              "medalId": "laboris sunt incididunt magna",
-              "babyCredits": 12125148.969407722
+              "medalId": "勋章id1",
+              "babyCredits": 111
+            },
+            {
+              "medalId": "勋章id1",
+              "babyCredits": 222
             },
           ],
           "babyCredits": 6676,

src/components/lightNewPop/lightNewPop.jsx

+import React, { Component } from 'react';
+import './lightNewPop.less';
+import { observer } from 'mobx-react';
+import store from '../../store';
+import modalStore from '../../store/modal';
+import { sensorMdClick, sensorMdExpouse } from '../../utils/sensorMd';
+import skinStore from '../../store/newSkin';
+import { SvgaPlayer } from '../SvgaPlayer';
+import { _asyncThrottle } from '../../utils/utils';
+@observer
+class LightNewPop extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    sensorMdExpouse("xcxPopupExpouse", { pageName: `点亮勋章弹窗` })
+  }
+
+  handleClose() {
+    sensorMdClick("xcxPopupClick", { pageName: `点亮勋章弹窗`, buttonName: '继续评估' })
+    modalStore.closePop("LightNewPop")
+  }
+
+  handleDraw = _asyncThrottle(() => {
+    modalStore.closePop("LightNewPop")
+    // 点击后跳转至【官微大转盘】
+    store.jumpDraw()
+  })
+
+  render() {
+    const { lightNewPop, common, svga } = skinStore
+    const { bg, draw_btn, prize_box } = lightNewPop
+    const { close } = common
+    const { pop, light } = svga
+
+    const { newGetMedalInfoList } = this.props.popData || {}
+
+    // 是否一个勋章
+    const isOne = newGetMedalInfoList.length === 1
+    const { name, icon, babyCredits } = newGetMedalInfoList[0]
+
+    // 累计保贝值
+    const totalBabyCredits = newGetMedalInfoList.reduce((acc, curr) => acc + curr.babyCredits, 0)
+
+    return <div className="lightNewPop modal_center">
+      <SvgaPlayer className="light" src={light} />
+      <SvgaPlayer className="pop" src={pop} />
+      <span className="bg" style={{ backgroundImage: `url(${bg})` }} ></span>
+      {isOne ? <>
+        <div className="title">您累计点亮了{name}勋章</div>
+        <div className="desc">获得{babyCredits}保贝值</div>
+        <img className="icon" src={icon} alt="" />
+        <div className="name">{name}</div>
+      </> : <>
+        <div className="title">您已点亮{newGetMedalInfoList.length}个勋章</div>
+        <div className="desc">获得{totalBabyCredits}保贝值</div>
+        <span className="prize_box" style={{ backgroundImage: `url(${prize_box})` }} ></span>
+      </>}
+      <span className="close" onClick={this.handleClose} style={{ backgroundImage: `url(${close})` }} />
+      <span className="draw_btn" onClick={this.handleDraw} style={{ backgroundImage: `url(${draw_btn})` }} />
+    </div>
+  }
+}
+export default LightNewPop;
\ No newline at end of file

src/components/lightNewPop/lightNewPop.less

+@import url('../../res.less');
+
+.lightNewPop {
+  width: 750px;
+  height: 1624px;
+  position: absolute;
+
+  .light {
+    position: absolute;
+    left: 0px;
+    top: 234px;
+    width: 750px;
+    height: 1074px;
+  }
+
+  .pop {
+    position: absolute;
+    left: 42px;
+    top: 224px;
+    width: 664px;
+    height: 663px;
+  }
+
+  .bg {
+    position: absolute;
+    left: 109px;
+    top: 440px;
+    width: 531px;
+    height: 590px;
+    .formatBg();
+  }
+
+  .title {
+    width: 350px;
+    height: 24px;
+    position: absolute;
+    left: 200px;
+    top: 474px;
+    font-size: 23px;
+    color: #faeddd;
+    line-height: 24px;
+    font-weight: bold;
+    text-align: center;
+    text-shadow: 0px 4px 2px rgba(216, 137, 58, 0.85);
+  }
+
+  .desc {
+    position: absolute;
+    left: 140px;
+    top: 544px;
+    width: 470px;
+    height: 22px;
+    font-size: 20px;
+    color: rgb(131, 80, 42);
+    line-height: 22px;
+    text-align: center;
+  }
+
+  .prize_box {
+    position: absolute;
+    left: 350px;
+    top: 584px;
+    width: 44px;
+    height: 44px;
+    .formatBg();
+  }
+  
+  .icon {
+    position: absolute;
+    left: 248px;
+    top: 590px;
+    width: 250px;
+    height: 250px;
+    object-fit: contain;
+  }
+  
+  .prize_box {
+    position: absolute;
+    left: 235px;
+    top: 600px;
+    width: 280px;
+    height: 280px;
+    .formatBg();
+  }
+
+  .name {
+    position: absolute;
+    left: 140px;
+    top: 844px;
+    width: 470px;
+    height: 22px;
+    font-size: 20px;
+    color: rgb(131, 80, 42);
+    line-height: 22px;
+    text-align: center;
+  }
+  
+  .draw_btn {
+    position: absolute;
+    left: 237px;
+    top: 901px;
+    width: 276px;
+    height: 61px;
+    .formatBg();
+  }
+
+  .close {
+    position: absolute;
+    left: 346px;
+    top: 1062px;
+    width: 61px;
+    height: 62px;
+    .formatBg();
+  }
+}

src/components/wanLiuDialog/index.jsx

-import React, { Component } from 'react';
-import './index.less';
-import { observer } from 'mobx-react';
-import store, { skinId } from '../../store';
-import { PAGE_MAP } from '../../utils/constants';
-import modalStore from '../../store/modal';
-import { sensorMdClick, sensorMdExpouse } from '../../utils/sensorMd';
-@observer
-class WanLiuDialog extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  componentDidMount() {
-    sensorMdExpouse("xcxPopupExpouse", { pageName: `退出挽留弹窗` })
-  }
-
-  tuiChuBtnFun() {
-    sensorMdClick("xcxPopupClick", { pageName: `退出挽留弹窗`, buttonName: '退出' })
-    store.changePage(PAGE_MAP.HOME_PAGE)
-    modalStore.closePop("WanLiuDialog")
-  }
-  continueFun() {
-    sensorMdClick("xcxPopupClick", { pageName: `退出挽留弹窗`, buttonName: '继续评估' })
-    modalStore.closePop("WanLiuDialog")
-  }
-  render() {
-    return <div className="wanLiuDialog modal_center">
-      弹窗
-    </div>
-  }
-}
-export default WanLiuDialog;
\ No newline at end of file

src/components/wanLiuDialog/index.less

-@import url('../../res.less');
-
-.wanLiuDialog {
-    width: 750px;
-    height: 448px;
-    position: absolute;
-
-    .bg {
-        width: 648px;
-        height: 448px;
-        left: 51px;
-        position: absolute;
-        .formatBg();
-    }
-
-    .characterBg {
-        width: 648px;
-        height: 448px;
-        left: 51px;
-        position: absolute;
-        .formatBg();
-    }
-
-    .tuiChuBtn {
-        width: 211px;
-        height: 76px;
-        left: 125px;
-        top: 278px;
-        position: absolute;
-        .formatBg();
-    }
-
-    .characterTuiChuBtn {
-        width: 211px;
-        height: 76px;
-        left: 125px;
-        top: 278px;
-        position: absolute;
-        .formatBg();
-
-    }
-
-    .continueBtn {
-        width: 211px;
-        height: 76px;
-        left: 411px;
-        top: 278px;
-        position: absolute;
-        .formatBg();
-    }
-
-    .characterContinueBtn {
-        width: 211px;
-        height: 76px;
-        left: 411px;
-        top: 278px;
-        position: absolute;
-        .formatBg();
-
-    }
-
-    .progressText {
-        width: 558px;
-        height: 35px;
-        text-align: center;
-        position: absolute;
-        left: 93px;
-        top: 149px;
-        font-size: 30px;
-        color: rgb(27, 27, 27);
-        line-height: 40px;
-    }
-
-    .timeText {
-        width: 558px;
-        height: 40px;
-        text-align: center;
-        position: absolute;
-        left: 93px;
-        top: 195px;
-        font-size: 30px;
-        color: rgb(27, 27, 27);
-        line-height: 40px;
-    }
-
-}
\ No newline at end of file

src/modal/modal.jsx

@@ -3,22 +3,22 @@ import './modal.less';
 import modalStore from '../store/modal';
 import { toJS } from "mobx";
 import { observer } from "mobx-react";
-import WanLiuDialog from "../components/wanLiuDialog";
 import RulePop from "../components/rulePop/rulePop";
 import LongImgPop from "../components/longImgPop/longImgPop";
 import LightedPop from "../components/lightedPop/lightedPop";
 import LightGreyPop from "../components/lightGreyPop/lightGreyPop";
 import LightEndPop from "../components/lightEndPop/lightEndPop";
+import LightNewPop from "../components/lightNewPop/lightNewPop";
 /**
  * 弹窗配置
 */
 export const cfg = {
-  WanLiuDialog: WanLiuDialog,
   RulePop: RulePop,
   LongImgPop: LongImgPop,
   LightedPop: LightedPop,
   LightGreyPop: LightGreyPop,
   LightEndPop: LightEndPop,
+  LightNewPop: LightNewPop,
 };
 
 

src/pages/homePage/homePage.jsx

@@ -28,6 +28,7 @@ class HomePage extends Component {
     sensorMdClick("xcxClick", { pageName: `首页`, buttonName: '开始测试' })
     const flag = store.checkActivityStatus();
     if (!flag) return;
+    store.jumpDraw()
   })
 
   // 规则

src/store/index.js

@@ -38,7 +38,20 @@ const store = makeAutoObservable({
     })
     console.log(res)
     if (res.ok) {
-      store.indexInfo = res.data || {}
+      const resData = res.data || {}
+      store.indexInfo = resData
+
+      let { medalInfoList, newGetMedalInfoList } = resData
+      if (newGetMedalInfoList && newGetMedalInfoList.length > 0) {
+        newGetMedalInfoList = newGetMedalInfoList.map(item => {
+          const medalInfo = medalInfoList.find(medal => medal.medalId === item.medalId)
+          return {
+            ...item,
+            ...medalInfo
+          }
+        })
+        modalStore.pushPop('LightNewPop', { newGetMedalInfoList })
+      }
     }
   },
 
@@ -64,6 +77,13 @@ const store = makeAutoObservable({
     Toast('活动异常~')
     return false;
   },
+
+  // 跳转至【官微大转盘】
+  jumpDraw() {
+    wx.miniProgram.navigateTo({
+      url: ' /packageTbzy/pages/lottery/lottery?activityCode=DRAWFARM&source_channel=nianjianhuodong'
+    })
+  }
 });
 
 export default store;

src/store/newSkin.js

@@ -87,6 +87,13 @@ const _lightEndPop = {
   know_btn: './assets/lightedPop/know_btn.png',
 }
 
+// 新点亮勋章弹窗
+const _lightNewPop = {
+  bg: './assets/lightNewPop/bg.png',
+  draw_btn: './assets/lightNewPop/draw_btn.png',
+  prize_box: './assets/lightNewPop/prize_box.png',
+}
+
 // 处理图片防止缓存
 const dealImg = (obj) => {
 
@@ -109,6 +116,8 @@ let futurePage = dealImg(_futurePage)
 let lightedPop = dealImg(_lightedPop)
 let lightGreyPop = dealImg(_lightGreyPop)
 let lightEndPop = dealImg(_lightEndPop)
+let lightNewPop = dealImg(_lightNewPop)
+
 const skinStore = makeAutoObservable({
   homePage,
   prizePage,
@@ -119,5 +128,6 @@ const skinStore = makeAutoObservable({
   lightedPop,
   lightGreyPop,
   lightEndPop,
+  lightNewPop,
 })
 export default skinStore;