修改增加关闭对应弹窗

public/index.html

@@ -33,6 +33,50 @@
     // if (!getUrlParam("appID")) {
     //   alert("【警告】检测到活动url中没有appID参数\n缺少该参数会导致埋点、分享、app信息获取错误。")
     // }
+    var Base64 = {
+      encode(str) {
+        return btoa(
+          encodeURIComponent(str).replace(
+            /%([0-9A-F]{2})/g,
+            function toSolidBytes(match, p1) {
+              return String.fromCharCode("0x" + p1);
+            }
+          )
+        );
+      },
+      decode(str) {
+        return decodeURIComponent(
+          atob(str)
+            .split("")
+            .map(function (c) {
+              return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+            })
+            .join("")
+        );
+      },
+    };
+    // 获取唤端的链接
+    function getCallAppUrl(url, shareCode) {
+      var data = {
+        id: "4955",
+        shareCode: shareCode,
+        dbredirect: encodeURIComponent(`${url}&shareCode=${shareCode}`),
+      }; //页面携带的参数
+      data = JSON.stringify(data);
+      var params = Base64.encode(data);
+      var appid = "TEST_KEY"; //配置ID，行方提供
+      // var url = "http://winxintest.bocd.com.cn/ares-web-pmobile/page/index.html#page/callAPP/01/P01.html?appid=" + appid + "&params="+ params;
+      var url =
+        "http://winxintest.bocd.com.cn/ares-web-pmobile/page/index.html#page/callAPP/01/P01.html?appid=" +
+        appid +
+        "&params=" +
+        params;
+
+      console.info(data, url);
+      console.info(Base64.decode('eyJpZCI6IjQ5NTUiLCJkYnJlZGlyZWN0IjoiaHR0cHM6Ly9hY3Rpdml0eS5tLmR1aWJhdGVzdC5jb20uY24vcHJvamVjdHgvcDAyZmMyZmUyL2luZGV4Lmh0bWw/YXBwSUQ9MTkzODYmc2hhcmVDb2RlPWVqa2FzayJ9'))
+      return url;
+    }
+    getCallAppUrl('https://activity.m.duibatest.com.cn/projectx/p02fc2fe2/index.html?appID=19386', '1111')
   </script>
 </head>
 

src/EdPop/EdPopRedux/EdPop.js

@@ -37,6 +37,9 @@ class EDPOP {
      * isCenter:true,   //是否剧中
      */
     showPop(T, propty) {
+        if (!T) {
+            console.warn('弹出弹窗失败，弹窗组件不存在')
+        }
         switch (this.popType) {
             case EDPOP_TYPE.SINGLE_POP:
                 this.closePop(true)
@@ -47,8 +50,8 @@ class EDPOP {
     }
 
     /**关闭弹窗 */
-    closePop(closeAll = false) {
-        EdPopStore.dispatch(CLOSE_POP({ closeAll }))
+    closePop(closeAll = false, popId) {
+        EdPopStore.dispatch(CLOSE_POP({ closeAll, popId }))
     }
 
     /**注册一个弹窗
@@ -103,7 +106,8 @@ class EDPOP {
         const { popArr } = changePop || {};
         let proptyArr = [];
         popArr?.map((itm, idx) => {
-            proptyArr.push({ com: itm.com, propty: EdPop.getPropty(itm.propty) });
+            console.log('bb--->>',itm)
+            proptyArr.push({id:itm.popId, com: itm.com, propty: EdPop.getPropty(itm.propty) });
         })
         console.log('yef-->', EdPopStore.getState(), proptyArr);
         if (proptyArr.length > 0) this.disScroll();
@@ -134,8 +138,9 @@ class EDPOP {
                 const { _posCls, _animCls, props } = itm.propty;
                 const { maskValue, maskColor, prop } = props;
                 const RGBColor = EdPopFun.colorToRgb(maskColor);
+                console.log('aa-->>',itm)
                 return (
-                    <div key={idx} className={_posCls} style={{ backgroundColor: `RGBA(${RGBColor},${maskValue})` }}>
+                    <div key={itm.id} className={_posCls} style={{ backgroundColor: `RGBA(${RGBColor},${maskValue})` }}>
                         <div className={_animCls}>
                             <itm.com {...prop} ></itm.com>
                         </div>
@@ -148,7 +153,7 @@ class EDPOP {
 const EdPop = new EDPOP();
 const defaultPropty = {
     prop: {},       //传入的属性，会直接传给弹窗的props
-    animType: EdPopAnimType.zoom,    //弹窗动画类型，默认为缩放
+    animType: EdPopAnimType.ZOOM,    //弹窗动画类型，默认为缩放
     animCls: null,   //自定义弹窗动画类
     maskValue: 0.7,  //背景蒙层的透明度,默认为0.7
     maskColor: '#000', //背景蒙层的颜色,默认为黑色

src/EdPop/EdPopRedux/reducer/EdPopChangeReducer.js

@@ -2,14 +2,18 @@ const { POP } = require("../EdPopAction");
 
 var popArr = [];
 var popId = 0;
+export function getPopId(){
+    return popId;
+}
 function showPop(state, action) {
     const { data } = action;
     let a = popArr.slice(0)
     console.log("show个pop之前，先让我看看属性-----》",a)
-    if (data) popArr.push(data)
+    popId++;
+    if (data) popArr.push(Object.assign({},data,{popId}))
     let b = popArr.slice(0)
     console.log("show个pop，我看看属性--->",b)
-    popId++;
+    console.log('当前popId为-->>',popId)
     var popState = Object.assign({}, state, { popArr, popId });
     return popState
 }
@@ -17,9 +21,10 @@ function showPop(state, action) {
 function closePop(state, action) {
     const { data } = action;
     const { closeAll, popId } = data;
+    console.log("关闭弹窗-->",data,popArr)
     if (closeAll) popArr.splice(0);
     else {
-        if (popId) popArr.splice(data, 1);
+        if (popId) {popArr.splice(data, 1);console.log("关闭弹窗了了--》》",popArr)}
         else popArr.splice(popArr.length - 1, 1);
     }
     var popState = Object.assign({}, state, { popArr });

src/EdPop/EdPopRedux/style/EdPop.less

@@ -52,3 +52,33 @@
         transform: translate(0, 0);
     }
 }
+
+.Ed_fly_down {
+    top: 0px !important;
+    animation: Ed_fly_down 0.4s linear forwards;
+    -webkit-animation: Ed_fly_down 0.4s linear forwards;
+}
+
+@keyframes Ed_fly_down {
+    0% {
+        transform: translate(0, -100%);
+    }
+
+    100% {
+        transform: translate(0, 0);
+    }
+}
+
+.Ed_fly_right{
+    left: 0 !important;
+    animation: Ed_fly_right 0.4s linear forwards;
+    -webkit-animation:Ed_fly_right 0.4s linear forwards ;
+}
+@keyframes Ed_fly_right{
+    0%{
+        transform: translate(-100%,0);
+    }
+    100%{
+        transform: translate(0,0);
+    }
+}
\ No newline at end of file

src/EdPop/EdPopRedux/style/EdPopAnimType.js

 const EdPopAnimType = {
-    zoom:'Ed_zoom',
-    push:'Ed_push'
+    ZOOM:'Ed_zoom',
+    FLY_UP:'Ed_push',
+    FLY_DOWN:'Ed_fly_down',
+    FLY_LEFT:'Ed_fly_left',
+    FLY_RIGHT:'Ed_fly_right'
 }
 export default EdPopAnimType
\ No newline at end of file

src/app.jsx

@@ -6,19 +6,8 @@ MOCK_STATUS && (require('../mock/index'));
 import MD from '../MD';
 MD();
 //此处为spark-cli动态生成
-import Pageindex from "./pages/pageindex/pageindex.jsx";
-import Pageloading from "./pages/pageloading/pageloading.jsx";
-// import EDPOP from "./EdPop/EdPop";
-import Comolduserpop from "./components/comolduserpop/comolduserpop.jsx";
-import Comrulepop from "./components/comrulepop/comrulepop.jsx";
-import Comselectpandapop from "./components/comselectpandapop/comselectpandapop.jsx";
-import Comcoindetailpop from "./components/comcoindetailpop/comcoindetailpop";
-// import EdPopAnimType from "./EdPop/EdPopAnimType";
-import Comwordcenterpop from "./components/comwordcenterpop/comwordcenterpop";
-import EdPop from "./EdPop/EdPopRedux/EdPop";
-import { EdPopStore } from "./EdPop/EdPopRedux/EdPopStore";
-import { SHOW_POP } from "./EdPop/EdPopRedux/EdPopAction";
-import Pagetest from "./pages/pagetest/pagetest";
+
+import Pagetest from "./pages/pagetest/pagetest.jsx";
 // import {EdPopStore } from "./EdPop/EdPopRedux/EdPopRedux";
 class App extends Component {
   render() {

src/components/comcenterpop/comcenterpop.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+
+import './comcenterpop.less';
+class Comcenterpop extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { resList: resList };
+    }
+    
+    render() {
+        return (
+            <div className="centerpop ">
+                <div className="centerpopclose">关闭<br/>按钮</div>
+                <button className="pop">弹出一个新的弹窗</button>
+            </div>
+        );
+    }
+}
+export default Comcenterpop;

src/components/comcenterpop/comcenterpop.less

+.centerpopclose {
+    width: 500px;
+    height: 500px;
+    position: fixed;
+    left: calc(50% - 250px);
+    top: 500px;
+    background-color: white;
+    .downpopclose {
+        width: 80px;
+        height: 80px;
+        border-radius: 45px;
+        position: absolute;
+        top: -100px;
+        background-color: rgba(255, 255, 255, 0.5);
+        text-align: center;
+    }
+}
\ No newline at end of file

src/components/comdownpop/comdownpop.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import EdPop from '../../EdPop/EdPopRedux/EdPop';
+import { getPopId } from '../../EdPop/EdPopRedux/reducer/EdPopChangeReducer';
+import resList from '../../resconfig/resList';
+
+import './comdownpop.less';
+class Comdownpop extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { resList: resList };
+    }
+    render() {
+        return (
+            <div className="downpop ">
+                <div className="downpopclose" onClick={()=>{EdPop.closePop(false)}}>关闭<br/>按钮</div>
+            </div>
+        );
+    }
+}
+export default Comdownpop;

src/components/comdownpop/comdownpop.less

+.downpop {
+    width: 500px;
+    height: 500px;
+    position: fixed;
+    left: calc(50% - 250px);
+    bottom: 0;
+    background-color: white;
+    .downpopclose {
+        width: 80px;
+        height: 80px;
+        border-radius: 45px;
+        position: absolute;
+        top: -100px;
+        background-color: rgba(255, 255, 255, 0.5);
+        text-align: center;
+    }
+}
\ No newline at end of file

src/components/comleftpop/comleftpop.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+
+import './comleftpop.less';
+class Comleftpop extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { resList: resList };
+    }
+    render() {
+        return (
+            <div className="leftpop ">
+                <div className="leftpopclose">关闭<br/>按钮</div>
+            </div>
+        );
+    }
+}
+export default Comleftpop;

src/components/comleftpop/comleftpop.less

+.leftpop {
+    width: 500px;
+    height: 500px;
+    position: fixed;
+    left: 0;
+    top: calc(50% - 250px);
+    background-color: white;
+    .leftpopclose {
+        width: 80px;
+        height: 80px;
+        border-radius: 45px;
+        position: absolute;
+        left: 600px;
+        background-color: rgba(255, 255, 255, 0.5);
+        text-align: center;
+    }
+}
\ No newline at end of file

src/components/comrightpop/comrightpop.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import resList from '../../resconfig/resList';
+
+import './comrightpop.less';
+class Comrightpop extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { resList: resList };
+    }
+    render() {
+        return (
+            <div className="leftpop ">
+                <div className="leftpopclose">关闭<br/>按钮</div>
+            </div>
+        );
+    }
+}
+export default Comrightpop;

src/components/comuppop/comuppop.jsx

+'use strict';
+
+import React, { Component } from 'react';
+import EDPOP from '../../EdPop/EdPop';
+import EdPop from '../../EdPop/EdPopRedux/EdPop';
+import { getPopId } from '../../EdPop/EdPopRedux/reducer/EdPopChangeReducer';
+import resList from '../../resconfig/resList';
+import Comdownpop from '../comdownpop/comdownpop';
+
+import './comuppop.less';
+class Comuppop extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { resList: resList };
+        let popId = getPopId();
+                    
+        
+        setTimeout(()=>{
+            EdPop.showPop(Comdownpop)
+            setTimeout(()=>{
+                EdPop.closePop(false,popId)
+            },1000)
+           
+        },1000)
+    }
+    render() {
+        return (
+            <div className="uppop ">
+                <div className="uppopclose" onClick={()=>{EdPop.closePop(false)}}>关闭<br/>按钮</div>
+            </div>
+        );
+    }
+}
+export default Comuppop;

src/components/comuppop/comuppop.less

+.uppop {
+    width: 500px;
+    height: 500px;
+    position: fixed;
+    left: calc(50% - 250px);
+    top: 0;
+    background-color: white;
+    .uppopclose {
+        width: 80px;
+        height: 80px;
+        border-radius: 45px;
+        position: absolute;
+        top: 600px;
+        background-color: rgba(255, 255, 255, 0.5);
+        text-align: center;
+    }
+}
\ No newline at end of file

src/config.js

+import Comcenterpop from "./components/comcenterpop/comcenterpop";
+
+export const popArr = [
+    Comcenterpop,
+    
+]
\ No newline at end of file

src/pages/pagetest/pagetest.jsx

 'use strict';
 
 import React, { Component } from 'react';
+import Comdownpop from '../../components/comdownpop/comdownpop';
+import Comleftpop from '../../components/comleftpop/comleftpop';
+import Comuppop from '../../components/comuppop/comuppop';
+import EdPop from '../../EdPop/EdPopRedux/EdPop';
+import EdPopAnimType from '../../EdPop/EdPopRedux/style/EdPopAnimType';
 import resList from '../../resconfig/resList';
 //import API from '../../api';
 
@@ -11,11 +16,41 @@ class Pagetest extends Component {
         this.state = { resList: resList };
     }
 
+    /**弹出一个顶部弹窗 */
+    showUpPop = () => {
+        EdPop.showPop(Comuppop, { animType: EdPopAnimType.FLY_DOWN })
+    }
+
+    /**弹出一个左侧弹窗 */
+    showLeftPop = () => {
+        EdPop.showPop(Comleftpop,{animType:EdPopAnimType.FLY_RIGHT});
+    }
 
+    /**弹出一个右侧弹窗 */
+    showRightPop = () => {
+
+    }
+
+    /**弹出一个底部弹窗 */
+    showDownPop = () => {
+        EdPop.showPop(Comdownpop,{animType:EdPopAnimType.FLY_UP})
+    }
+
+    /**弹出一个中间弹窗 */
+    showCenterPop=()=>{
+        EdPop.showPop()
+    }
 
     render() { 
         return (
             <div className="test ">
+                <button className="testbtn test_popup " onClick={this.showUpPop}>弹出一个顶部弹窗</button>
+                <button className="testbtn test_downpop" onClick={this.showDownPop}>弹出一个底部弹窗</button>
+                <button className="testbtn test_leftpop" onClick={this.showLeftPop}>弹出一个左侧弹窗</button>
+                <button className="testbtn test_rightpop" onClick={this.showCenterPop}>弹出一个右侧弹窗</button>
+                <button className="testbtn test_centerpop">弹出一个中间弹窗</button>
+                <button className="testbtn test_changesinglemode">设置为单一弹窗模式</button>
+                <button className="testbtn test_changenormalmode">设置为正常模式</button>
             </div>
         );
     }

src/pages/pagetest/pagetest.less

+.test{
+    width: 750px;
+    height: 1624px;
+    display: flex;
+    justify-items: center;
+    justify-content: center;
+    align-items: center;
+    .testbtn{
+        position: relative;
+        width: 750px;
+    }
+}
\ No newline at end of file