1

project/src/app.jsx

 import React, { Component } from "react";
 import ReactDOM from "react-dom";
-import "./app.less";
-import { MOCK_STATUS } from '../sparkrc';
-MOCK_STATUS && (require('../mock/index'));
 import MD from '../MD';
-MD();
+import { MOCK_STATUS } from '../sparkrc';
+import "./app.less";
 //此处为spark-cli动态生成
 import Loading from "./pages/loading/loading.jsx";
 import Mainpage from "./pages/mainpage/mainpage.jsx";
-import Sign from "./components/sign/sign.jsx";
-import Select from "./components/select/select.jsx";
-import Rule from "./components/rule/rule.jsx";
-import Userinfo from "./components/userinfo/userinfo.jsx";
-import {AUP_MBX_STATE, AUPOP} from './pop'
+import { Aup, AUPOP, AUP_MBX_STATE } from './pop';
+MOCK_STATUS && (require('../mock/index'));
+MD();
+
 class App extends Component {
   constructor(props) {
     super(props);
@@ -21,6 +18,12 @@ class App extends Component {
     };
   }
 
+  // componentDidMount() {
+  //   setTimeout(() => {
+  //     Aup.show('PopRule', {}, this)
+  //   }, 1000);
+  // }
+
   navigateTo = (page, pagedata) => {
     this.setState({ page, pagedata })
   }
@@ -29,13 +32,8 @@ class App extends Component {
     const { page, pagedata } = this.state;
     return (
       <>
-
         {page == 'loading' && <Loading data={pagedata} navigateTo={this.navigateTo}></Loading>}
         {page == 'mainpage' && <Mainpage data={pagedata} navigateTo={this.navigateTo}></Mainpage>}
-        {/* <Select></Select> */}
-        <Userinfo></Userinfo>
-        {/* <Sign></Sign> */}
-        {/* <Rule></Rule> */}
         <AUPOP AUPopState={AUP_MBX_STATE} ></AUPOP>
       </>
     );

project/src/components/rule/rule.jsx

@@ -28,7 +28,7 @@ class Rule extends Component {
           4.活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则
         </span>
         <img
-          onClick={this.props.onClick}
+          onClick={this.props.onClose}
           className="rule_close "
           uuid="af9001ed-b3c5-404d-ab2a-34939510ea61"
           src={this.state.resList['3814359c-5889-4ffa-8b76-bc52f58ebd5d'].url}

project/src/components/rule/rule.less

 .rule {
   width: 612px;
   height: 784px;
-  left: 71px;
-  top: 386px;
+  left: calc(50% - (612px / 2));
+  top: calc(50% - (784px / 2));
   position: absolute;
   .rule_bg {
     width: 609px;

project/src/components/select/select.jsx

@@ -13,6 +13,13 @@ class Select extends Component {
     };
   }
 
+  componentDidMount(){
+    setTimeout(() => {
+      console.log('关闭这个弹窗')
+      this.props.onClose();
+    }, 1000);
+  }
+
   render() {
     return (
       <div className="select " uuid="298ea3b7-efbb-42ac-adea-ee68aa1db627">

project/src/components/select/select.less

 .select {
   width: 656px;
   height: 1140px;
-  left: 47px;
-  top: 228px;
+  left: calc(50% - (656px / 2));
+  top: calc(50% - (1140px / 2));
   position: absolute;
   .select_role1 {
     width: 535px;

project/src/components/sign/sign.jsx

@@ -22,6 +22,7 @@ class Sign extends Component {
           src={this.state.resList['7d7b7747-b417-45c0-959c-3d39603afc69'].url}
         />
         <img
+          onClick={this.props.onClose}
           className="sign_close "
           uuid="e112e990-527f-4a53-8eb4-3eb6bc60ad40"
           src={this.state.resList['104ff753-c9bc-4218-969c-3c3fa4d11610'].url}

project/src/components/sign/sign.less

 .sign {
   width: 612px;
   height: 936px;
-  left: 71px;
-  top: 291px;
+  left: calc(50% - (612px / 2));
+  top: calc(50% - (936px / 2));
   position: absolute;
   .sign_bg {
     width: 609px;

project/src/components/userinfo/userinfo.jsx

@@ -11,13 +11,9 @@ class Userinfo extends Component {
     this.state = { resList: resList };
   }
 
-  showSomething = () => {
-    Aup.show('PopRule', {}, this)
-  }
-
   render() {
     return (
-      <div className="userinfo " onClick={() => {this.showSomething()}} uuid="a9143822-c421-48d3-92c3-de9eafe5c234">
+      <div className="userinfo " onClick={() => { this.showSomething() }} uuid="a9143822-c421-48d3-92c3-de9eafe5c234">
         <img
           className="userinfo_bg "
           uuid="cf852278-516f-48f3-bad2-0e38a1431c4e"
@@ -29,6 +25,7 @@ class Userinfo extends Component {
           src={this.state.resList['5406c697-b889-4062-8910-343038c4dc93'].url}
         />
         <img
+          onClick={this.props.onClose}
           className="userinfo_close "
           uuid="4f217b43-8438-451e-b28f-0e9d611fce2b"
           src={this.state.resList['c7826e1a-8b74-44da-922f-0fe078587999'].url}

project/src/components/userinfo/userinfo.less

 .userinfo {
   width: 514px;
   height: 555px;
-  left: 121px;
-  top: 486px;
+  left: calc(50% - (514px / 2));
+  top: calc(50% - (555px / 2));
   position: absolute;
   .userinfo_bg {
     width: 509px;

project/src/pages/loading/loading.jsx

@@ -37,9 +37,9 @@ class Loading extends Component {
   }
 
   oncomplete(res) {
-    // this.props.navigateTo('mainpage', {
-    //   info: res.data,
-    // });
+    this.props.navigateTo('mainpage', {
+      info: res.data,
+    });
   }
 
   render() {

project/src/pages/mainpage/mainpage.jsx

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import resList from '../../resconfig/resList'; //import API from '../../api';
 
 import './mainpage.less';
+import { Aup, AUPOP, AUP_MBX_STATE } from '../../pop';
 
 class Mainpage extends Component {
   constructor(props) {
@@ -13,6 +14,19 @@ class Mainpage extends Component {
     };
   }
 
+  componentDidMount() {
+    if (this.props.data) {
+
+      setTimeout(() => {
+        // Aup.show('PopRule', {}, this)
+        // Aup.show('Userinfo', {}, this);
+        // Aup.show('Sign', {}, this);
+        // Aup.show('Select', {}, this);
+      }, 200);
+      
+    }
+  }
+
   render() {
     return (
       <div className="mainpage " uuid="1898b1e3-7737-449c-b7bf-0ee3cc1182bc">

project/src/pop/AUPopMobx/AUPopMobx.jsx

@@ -70,6 +70,7 @@ class AUPopMobx extends Component {
     popArr.forEach((item, index) => {
       const { showPop, popData, fn, ctx } = item
       let PItem = popMap.get(showPop)
+      if(!PItem)console.error(`没有类型为${showPop}的弹窗`)
       Pop.push(
         <div className={showPop === 'PopLightCard' ? 'compop_content comPop_zoom_from0' : 'compop_content comPop_zoom'}>
           <PItem onClose={this.closePop} data={popData} fn={fn} ctx={ctx} type='spot'/>

project/src/pop/PopMap.js

@@ -5,11 +5,17 @@
 // import PopInput from '../components/pop/PopInput/PopInput.jsx'
 // import PopDefault from '../components/pop/PopDefault/PopDefault.jsx'
 import PopRule from '../components/rule/rule.jsx'
+import Select from '../components/select/select.jsx'
+import Sign from '../components/sign/sign.jsx'
+import Userinfo from '../components/userinfo/userinfo.jsx'
 // import PopLightCard from '../components/pop/PopLightCard/PopLightCard.jsx'
 
 let popMap = new Map()
 
 popMap.set("PopRule", PopRule)
+popMap.set("Select", Select)
+popMap.set("Sign", Sign)
+popMap.set("Userinfo", Userinfo)
 // popMap.set("PopGetPiece", PopGetPiece)
 // popMap.set("PopRegret", PopRegret)
 // popMap.set("PopInfiniteA", PopInfiniteA)

spark.config.json

+{"proName":"未命名项目","proDesc":"","proPath":"/Users/wanghongyuan/icbcrpg","createTime":1608281698074}