11

project/package-lock.json

@@ -453,6 +453,16 @@
       "resolved": "http://npm.dui88.com:80/minimist/-/minimist-1.2.5.tgz",
       "integrity": "sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI="
     },
+    "mobx": {
+      "version": "6.0.4",
+      "resolved": "http://npm.dui88.com:80/mobx/-/mobx-6.0.4.tgz",
+      "integrity": "sha1-j8PjYpozRviv3fW9lUQRl0dE2tE="
+    },
+    "mobx-react-lite": {
+      "version": "3.1.6",
+      "resolved": "http://npm.dui88.com:80/mobx-react-lite/-/mobx-react-lite-3.1.6.tgz",
+      "integrity": "sha1-5/SAmrZu3RrMpa2wDGuIxgCuGVI="
+    },
     "mockjs": {
       "version": "1.1.0",
       "resolved": "http://npm.dui88.com:80/mockjs/-/mockjs-1.1.0.tgz",

project/package.json

@@ -14,6 +14,8 @@
     "css-loader": "^3.6.0",
     "duiba-utils": "^1.0.2",
     "fyge-tbmini": "^1.3.1",
+    "mobx": "^6.0.4",
+    "mobx-react-lite": "^3.1.6",
     "postcss-loader": "^3.0.0",
     "prettier": "^2.0.5",
     "qs": "^6.9.4",

project/src/app.jsx

@@ -12,6 +12,7 @@ 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'
 class App extends Component {
   constructor(props) {
     super(props);
@@ -27,14 +28,16 @@ class App extends Component {
   render() {
     const { page, pagedata } = this.state;
     return (
-      <div>
+      <>
+
         {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> */}
-      </div>
+        <AUPOP AUPopState={AUP_MBX_STATE} ></AUPOP>
+      </>
     );
   }
 }

project/src/components/rule/rule.jsx

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

project/src/components/userinfo/userinfo.jsx

 'use strict';
 
 import React, { Component } from 'react';
+import { Aup } from '../../pop'
 import resList from '../../resconfig/resList';
 
 import './userinfo.less';
@@ -9,9 +10,14 @@ class Userinfo extends Component {
     super(props);
     this.state = { resList: resList };
   }
+
+  showSomething = () => {
+    Aup.show('PopRule', {}, this)
+  }
+
   render() {
     return (
-      <div className="userinfo " 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"

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/pop/AUPopMobx/AUPopMobx.jsx

+import React, { Component } from 'react';
+
+import popMap from '../PopMap.js'
+import { observer } from 'mobx-react-lite'
+import { toJS } from "mobx";
+import { Aup } from "../index.js"
+import { ConsoleStyleComponents, ConsoleStyleFlagColor } from '../api/tools.js';
+
+import './AUPopMobx.less'
+
+class AUPopMobx extends Component {
+  constructor (props) {
+    super(props)
+    this.state = this.state || {
+      popArr: []
+    }
+    this.auPopRef = React.createRef()
+    this.closeFlagRef = React.createRef()
+  }
+
+  static getDerivedStateFromProps(nextProprs, preState) {
+    console.log(`%c AUPopMobx nextProprs is: \n`, ConsoleStyleComponents, nextProprs)
+    if (nextProprs.popArr.length === 0) {
+      allowScroll()
+    } else if (nextProprs.popArr.length && preState.popArr.length == 0) {
+      disableScroll()
+    }
+    return {
+      popArr: nextProprs.popArr
+    }
+  }
+
+  closePop = (index) => {
+  
+    // TODO: not complete
+    // TODO: inject some animation function in there:
+
+    if (!this.state.popArr.length) return
+
+    else if (this.state.popArr.length == 1) {
+      if (this.auPopRef.current) {
+        this.auPopRef.current.style.transition = `opacity 350ms`
+        this.auPopRef.current.style.opacity = '0'
+        this.closeFlagRef.current && (this.closeFlagRef.current.style.display = 'block')
+        setTimeout(() => {
+          Aup.close()
+          this.closeFlagRef.current && (this.closeFlagRef.current.style.display = 'none')
+        }, 400);
+      } else {
+        Aup.close()
+        this.closeFlagRef.current.style.display = 'none'
+      }
+    }
+
+    else if (this.state.popArr.length > 1) {
+      this.closeFlagRef.current && (this.closeFlagRef.current.style.display = 'block')
+      setTimeout(() => {
+        Aup.close()
+        this.closeFlagRef.current && (this.closeFlagRef.current.style.display = 'none')
+      }, 400);
+    }
+
+  }
+
+  render() {
+    console.log('%c ----------------- AUtest - RENDER RUN FLAG ----------------- ----------------- ----------------- -----------------', ConsoleStyleFlagColor)
+
+    const { popArr } = this.state
+    let Pop = []
+    popArr.forEach((item, index) => {
+      const { showPop, popData, fn, ctx } = item
+      let PItem = popMap.get(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'/>
+        </div>
+      )
+    })
+
+    const Com = (popArr.length && popArr[0].showPop) ? (
+      <div className='compop_back' ref={this.auPopRef}>
+
+        <div className='compop_mask'></div>
+
+        {/* 关闭-禁止点击 */}
+        <div ref={this.closeFlagRef} className='compop_transparent'></div>
+
+        {Pop.map((It, index) => {
+          return (
+            <React.Fragment key={index}>
+              <div className={(index !== Pop.length - 1) ? 'Fragment-wrapper Fragment-small-opacity' : 'Fragment-wrapper'}>
+                {(index !== Pop.length - 1) ? <div className="Fragment-wrapper-mask"></div> : null }
+                {It}
+              </div>
+            </React.Fragment>)
+        })}
+
+      </div>
+    ) : null
+    return (
+      Com
+    );
+  }
+}
+
+export const AUPOP = observer(({ AUPopState }) => {
+  console.log(AUPopState)
+  return <AUPopMobx popArr={toJS(AUPopState.popArr)}/>
+})
+
+const debounce = (fn, wait, immediate = false) => {
+  let timer
+  return function () {
+    if (timer) clearTimeout(timer)
+    if (immediate) {
+      // 如果已经执行过，不再执行
+      var callNow = !timer
+      timer = setTimeout(() => {
+        timer = null
+      }, wait)
+      if (callNow) {
+        fn()
+      }
+    } else {
+      timer = setTimeout(() => {
+        fn()
+      }, wait)
+    }
+  }
+}
+
+let top = 0
+const disableScroll = debounce(() => {
+  var top_ = window.scrollY;
+  // console.log('ScrollScroll disableScroll', top_)
+  document.body.style.position = "fixed";
+  document.body.style.overflow = "hidden";
+  top = top_
+  document.body.style.top = -top + "px";
+}, 300, 1)
+
+const allowScroll = debounce(() => {
+  // console.log('ScrollScroll allowScroll', top)
+  document.body.style.top = "0px";
+  document.body.style.position = "relative";
+  document.body.style.overflow = "auto";
+  window.scrollTo(0, top);
+}, 300, 1)

project/src/pop/AUPopMobx/AUPopMobx.less

+.compop_back {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 99;
+  touch-action: none;
+  .compop_mask {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .7);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    touch-action: none;
+  }
+  .compop_transparent {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9;
+    touch-action: none;
+    display: none;
+  }
+}
+
+.pop_mask {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  position: fixed;
+  background: transparent;
+}
+
+.compop_content {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  left: 0;
+  z-index: 2;
+}
+
+.comPop_close_btn {
+  position: absolute;
+  display: block;
+  z-index: 1;
+  width: 102px;
+  height: 102px;
+  left: calc(49% - (102px / 2));
+  bottom: -160px;
+  z-index: 3;
+}
+
+.comPop_back_light {
+  position: absolute;
+  display: block;
+  z-index: -1;
+  width: 883px;
+  height: 883px;
+  left: calc(50% - (883px / 2));
+  top: -200px;
+  bottom: -144px;
+}
+
+.comPop_back_head {
+  position: absolute;
+  display: block;
+  z-index: 2;
+  width: 567px;
+  height: 140px;
+  left: 5px;
+  top: 20px;
+  animation: floatAni 3000ms infinite linear;
+  transform-origin: center center center;
+  position: relative;
+}
+
+@keyframes floatAni {
+  0% {
+    transform: skewX(-1deg) skewY(0.8deg) scaleX(1.05) translateY(-30px) rotate(-3deg);
+  }
+  25% {
+    transform: skewX(-0.5deg) skewY(0.3deg) scaleX(1.02) translateY(-20px) rotate(-2deg);
+  }
+  50% {
+    transform: skewX(0deg) skewY(0deg) scaleX(1) translateY(-15px) rotate(-2deg);
+  }
+  75% {
+    transform: skewX(-0.5deg) skewY(0.3deg) scaleX(1.02) translateY(-20px) rotate(-2deg);
+  }
+  100% {
+    transform: skewX(-1deg) skewY(0.8deg) scaleX(1.05) translateY(-30px) rotate(-3deg);
+  }
+}
+
+.comPop_zoom {
+  transform-origin: center center;
+  animation: zoom 0.24s linear 0s 1;
+}
+
+.comPop_zoom_from0 {
+  transform-origin: center center;
+  opacity: 0;
+  transform: scale(0);
+  animation: zoomfrom0 0.22s linear 0.44s 1 forwards;
+}
+
+.Fragment-wrapper-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: transparent;
+  z-index: 99;
+  touch-action: none;
+}
+
+.Fragment-small-opacity {
+  transition: transform 300ms ease-in, opacity 200ms linear !important;
+  transform: scale(0.5) !important;
+  opacity: 0 !important;
+}
+
+.Fragment-wrapper {
+  opacity: 1;
+  transition: transform 200ms ease-out, opacity 200ms linear;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1);
+  transform-origin: center center;
+}
+
+@keyframes zoom {
+  0% {
+    transform: scale(0.75);
+  }
+
+  50% {
+    transform: scale(1.08)
+  }
+
+  100% {
+    transform: scale(1)
+  }
+}
+
+@keyframes zoomfrom0 {
+  0% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+
+  80% {
+    opacity: 1;
+    transform: scale(1.12)
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1)
+  }
+}
+
+.comPop_fadeout {
+  opacity: 0;
+  transition: opacity 300ms linear;
+}
\ No newline at end of file

project/src/pop/AUState.js

+'use strict';
+import { makeAutoObservable, observable, computed, action, runInAction, autorun, reaction, configure, toJS } from 'mobx'
+import { CONSO_START_mark, ConsoleStyleTitle, ConsoFunc } from './api/tools'
+// configure({
+//   useProxies: "never"
+// })
+
+class PopState {
+  nowShow
+  popArr
+
+  constructor() {
+    this.popArr = []
+    this.nowShow = arguments[0]
+    // makeAutoObservable(this)
+    makeAutoObservable(this, {
+      nowShow: observable,
+      popArr: observable,
+      addPop: action.bound,
+      changePop: action.bound,
+      popArrLength: computed
+    })
+  }
+
+  // 添加一个弹窗
+  addPop = (data) => {
+    this.nowShow = data.type
+    this.popArr.push(data)
+    // console.log(`${CONSO_START_mark}\n addPop:`, ConsoleStyleTitle, toJS(this.popArr))
+  }
+
+  // 改变数组中的第一个弹窗
+  changePop = (data) => {
+    this.nowShow = data.type
+    this.popArr.push(data)
+    // console.log(`${CONSO_START_mark}\n changePop:`, ConsoleStyleTitle, toJS(this.popArr))
+    // this.popArr = [data]
+  }
+
+  // 删除弹窗
+  delePop = (long) => {
+    this.popArr.splice(this.popArr.length - long, long)
+    if (this.popArr.length) this.nowShow = this.popArr[this.popArr.length - 1].type
+  }
+
+  // 清空 弹窗
+  clearPop = () => {
+    this.popArr = []
+  }
+
+  get popArrLength () {
+    // console.log(`${CONSO_START_mark}\n this.popArr:`, ConsoleStyleTitle, toJS(this.popArr))
+    return this.popArr.length
+  }
+}
+
+export const AUP_MBX_STATE = new PopState('init')
+
+autorun(() => {
+  let tempLastComPop = toJS(AUP_MBX_STATE.popArr)
+  let last = tempLastComPop.length ? tempLastComPop[tempLastComPop.length - 1] : undefined
+  console.log(`${CONSO_START_mark}\n AUTORUN::: the last Pop`, ConsoleStyleTitle, last)
+  return last
+})
+
+
+// ready code for mobx can't use
+
+// author: 沈阳楠
+
+// export const EventDispatcher = (function () {
+//   function EventDispatcher() {
+//       this._events = {}
+//   }
+
+//   EventDispatcher.ins = function () {
+//       if (EventDispatcher.ins == null) {
+//           EventDispatcher.ins = new EventDispatcher()
+//       }
+//       return EventDispatcher.ins
+//   }()
+
+//   EventDispatcher.prototype.dispatch = function (eventName, data) {
+//       for (let i in this._events[eventName]) {
+//           var _event = this._events[eventName][i]
+//           _event.callback.call(_event.target.context, data)
+//       }
+//   }
+
+//   EventDispatcher.prototype.addEventListener = function (eventName, callback, target) {
+//       var _events = this._events[eventName]
+//       if (_events) {
+//           _events.push({
+//               callback: callback,
+//               target: target
+//           })
+//       } else {
+//           this._events[eventName] = [{
+//               callback: callback,
+//               target: target
+//           }]
+//       }
+//   }
+
+//   EventDispatcher.prototype.removeEventListener = function (eventName, callback, target) {
+//       for (let i = this._events[eventName].length - 1; i >= 0; i--) {
+//           var _event = this._events[eventName][i]
+//           if (_event.callback == callback && _event.target == target) {
+//               this._events[eventName].splice(i, 1)
+//           }
+//       }
+//   }
+
+//   EventDispatcher.prototype.removeAllEventListener = function (eventName) {
+//       this._events[eventName] = null
+//   }
+
+//   return EventDispatcher
+
+// }())
+
+
+// EventDispatcher.ins.addEventListener("aaaa", this.isStart, this)
+        
+// EventDispatcher.ins.addEventListener("aaaa", () => {
+//     EventDispatcher.ins.removeEventListener("aaaa", this.isStart, this)
+// }, this)
+
+// EventDispatcher.ins.dispatch("aaaa", 3213123)
\ No newline at end of file

project/src/pop/PopMap.js

+// import PopGetPiece from '../components/pop/PopGetPiece/PopGetPiece.jsx'
+// import PopInfiniteA from '../components/pop/PopInfiniteA/PopInfiniteA.jsx'
+// import PopRegret from '../components/pop/PopRegret/PopRegret.jsx'
+// import PopRotate from '../components/pop/PopRotate/PopRotate.jsx'
+// import PopInput from '../components/pop/PopInput/PopInput.jsx'
+// import PopDefault from '../components/pop/PopDefault/PopDefault.jsx'
+import PopRule from '../components/rule/rule.jsx'
+// import PopLightCard from '../components/pop/PopLightCard/PopLightCard.jsx'
+
+let popMap = new Map()
+
+popMap.set("PopRule", PopRule)
+// popMap.set("PopGetPiece", PopGetPiece)
+// popMap.set("PopRegret", PopRegret)
+// popMap.set("PopInfiniteA", PopInfiniteA)
+// popMap.set("PopRotate", PopRotate)
+// popMap.set("PopDefault", PopDefault)
+// popMap.set("PopInput", PopInput)
+// popMap.set("PopLightCard", PopLightCard)
+
+
+export default popMap
\ No newline at end of file

project/src/pop/api/clear.js

+'use strict';
+import { AUP_MBX_STATE } from '../AUState'
+import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
+
+/** 
+ * 清空页面弹窗
+ */
+export const clear = () => {
+  if (AUP_MBX_STATE.popArrLength === 0) return
+  else AUP_MBX_STATE.clearPop()
+}
+
+

project/src/pop/api/close.js

+'use strict';
+import { AUP_MBX_STATE } from '../AUState'
+import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
+
+/** 
+ * 关闭弹窗
+ * @param {Number} length 关闭的数量
+ */
+export const close = (length = 1) => {
+  if (AUP_MBX_STATE.popArrLength === 0) {
+    console.warn(`弹窗数组无储存的弹窗, \n 勿重复调用 close()`)
+    return
+  }
+  else if (AUP_MBX_STATE.popArrLength >= length) {
+    AUP_MBX_STATE.delePop(length)
+  }
+  else {
+    console.warn(`传入的关闭弹窗数量 ${length}，大于弹窗数组所储存的数量 ${AUP_MBX_STATE.popArrLength}, \n 执行清空操作`)
+    AUP_MBX_STATE.clearPop()
+  }
+}
+

project/src/pop/api/cover.js

+'use strict';
+import { AUP_MBX_STATE } from '../AUState'
+import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
+
+/** 
+ * 显示弹窗
+ * @param {String} type 弹窗类型
+ * @param {Object} data 传递数据
+ * @param {Fucntion} fn 定义更多 需要执行的方法 (context 来自父组件)
+ * @param {Context} ctx 传递 父组件 Context 
+ */
+export const cover = (type, data = {}, option = null) => {
+  const pData = {
+    showPop: type,
+    popData: data || null,
+    fn: fn || null, 
+    ctx: ctx || null
+  }
+  // console.log(`${CONSO_START_mark}\n AupopShow data is:`, ConsoleStyleTitle, data)
+
+  // 覆盖弹窗
+  if (type && AUP_MBX_STATE.popArrLength) AUP_MBX_STATE.addPop(pData)
+
+  // 出现弹窗 - ps: 首个弹窗
+  else AUP_MBX_STATE.addPop(pData)
+
+}
+

project/src/pop/api/getArr.js

+'use strict';
+import { AUP_MBX_STATE } from '../AUState'
+import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
+
+/** 
+ * 获取弹窗数组
+ */
+export const getArr = () => {
+  return new Promise((resolve, reject) => {
+    let popArrTmp = deepCopy(AUP_MBX_STATE.popArr)
+    resolve(popArrTmp)
+  })
+}
+function deepCopy(source){
+  if (typeof source != "object") {
+    return source
+  }
+  if (source == null) {
+    return source
+  }
+  var newObj = source.constructor === Array ? [] : {}  //开辟一块新的内存空间
+  for (var i in source) {
+    newObj[i] = deepCopy(source[i])
+  }
+  return newObj
+}
+
+// IntersectionObserver
\ No newline at end of file

project/src/pop/api/index.js

+export { show } from './show'
+export { cover } from './cover'
+export { close } from './close'
+export { clear } from './clear'
+export { getArr } from './getArr'
\ No newline at end of file

project/src/pop/api/show.js

+'use strict';
+import { AUP_MBX_STATE } from '../AUState'
+import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
+
+/** 
+ * 显示弹窗
+ * @param {String} type 弹窗类型
+ * @param {Object} data 传递数据
+ * @param {Fucntion} fn 定义更多 需要执行的方法 (context 来自父组件)
+ * @param {Context} ctx 传递 父组件 Context 
+ */
+export const show = (type, data = {}, ctx, fn) => {
+  const pData = {
+    showPop: type,
+    popData: data || null,
+    fn: fn || null, 
+    ctx: ctx || null
+  }
+  // console.log(`${CONSO_START_mark}\n AupopShow data is:`, ConsoleStyleTitle, data)
+
+  // 添加弹窗 没有弹窗
+  if (type && !AUP_MBX_STATE.popArrLength) AUP_MBX_STATE.addPop(pData)
+
+  // 替换弹窗
+  else if (type && AUP_MBX_STATE.popArrLength) AUP_MBX_STATE.changePop(pData)
+
+}
+

project/src/pop/api/tools.js

+
+
+
+
+export function ConsoFunc() {
+  console.log(
+    CONSO_START_mark, ConsoleStyleTitle, 
+    ...arguments
+  )
+  // console.log(END_mark, ConsoleStyleDetail)
+}
+
+export const ConsoleStyleTitle = [
+  'color: #94c902',
+  'font-size: 12px',
+  'font-weight: 500',
+  'text-shadow: 1px 1px rgba(200, 200, 200, 0.2)',
+].join(';')
+
+export const ConsoleStyleDetail = [
+  'color: #94c902',
+  'font-size: 8px',
+  'font-weight: 200'
+].join(';')
+
+export const ConsoleStyleComponents = [
+  'color: #a591ff',
+  'font-size: 12px',
+  'font-weight: 400'
+].join(';')
+
+export const ConsoleStyleFlagColor = [
+  'color: #fda300',
+  'font-size: 6px',
+  'font-weight: 900'
+].join(';')
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+export const CONSO_END_mark = `%c  end  --------\n`
+
+export const CONSO_START_mark = `%c------- ~ (๑• . •๑) ~ ------- AUPOP -------- \n`
\ No newline at end of file

project/src/pop/index.js

+export * as Aup from './api'
+export { AUP_MBX_STATE } from './AUState'
+export { AUPOP } from './AUPopMobx/AUPopMobx.jsx'
\ No newline at end of file