更新popup通用组件

src/common/closable-popup/index.js

-import React, { Component } from 'react'
+import React from 'react'
+import ReactDOM from 'react-dom'
 import './index.scss'
 import classnames from 'classnames'
-import propTypes from 'prop-types'
 
-class ClosablePopup extends Component {
-
-  state = {
-    visible: this.props.visible
+function ClosablePopup({
+                         title, content, className, closable = true, close = function () {
   }
+                       } = {}) {
 
-  close = () => {
-    const {close} = this.props
-    close ? close() : this.setState({visible: false})
+  function unmountComponent() {
+    ReactDOM.unmountComponentAtNode(div)
+    if (div && div.parentNode) {
+      div.parentNode.removeChild(div)
+    }
   }
 
-  componentDidUpdate(prevProps, prevState) {
-    const {visible} = this.props
-    if (prevState.visible !== this.props.visible) {
-      this.setState({
-        visible
+  function _close() {
+    let _c = close()
+    if (_c && _c.then) {
+      _c.then(() => {
+        unmountComponent()
       })
+    } else {
+      unmountComponent()
     }
   }
 
 
-  render() {
-    const {title, className, children, closable = true} = this.props
-    return (
-      this.state.visible
-        ?
+  const closablePopup = (
     <div className={'closable-popup-mask'}>
       <div className={classnames(['popup-container', className])}>
         <div className="title">{title}</div>
         <div className="content">
-              {children}
+          {content}
         </div>
         {
-              closable && <i className={'close iconfont iconiconfront-2'} onClick={this.close}/>
+          closable && <i className={'close iconfont iconiconfront-2'} onClick={_close}/>
         }
       </div>
     </div>
-        : null
   )
-  }
-}
+  const div = document.createElement('div')
+  document.body.appendChild(div)
+
 
-ClosablePopup.propTypes = {
-  title: propTypes.string.isRequired,
-  visible: propTypes.bool,
-  closable: propTypes.string,
-  close: propTypes.func
+  ReactDOM.render(closablePopup, div)
 }
 
 export default ClosablePopup

src/components/blessingPreheat/index.js

-import React, {Component} from 'react'
+import React, { Component } from 'react'
 import QRCode from 'qrcode'
-import {http, SendMessageToApp, wxShare, is_weixin, getParam} from '@/utils';
-import {Link} from 'react-router-dom'
-import {throttle, findIndex, debounce} from 'lodash'
+import { http, SendMessageToApp, wxShare, is_weixin, getParam } from '@/utils'
+import { Link } from 'react-router-dom'
+import { throttle, findIndex, debounce } from 'lodash'
 import RulePopup from './rulePopup/index'
 import CoursePopup from './coursePopup/index'
 import RecordPopup from './recordPopup/index'
@@ -15,16 +15,16 @@ import ListHeader from './listHeader/index'
 import LevelTest from './levelTest/index'
 import RankList from './rankList/index'
 import './index.scss'
-import {Popup} from '@/common'
-import {CopyToClipboard} from 'react-copy-to-clipboard'
-import {Toast} from "antd-mobile"
+import { Popup } from '@/common'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+import { Toast } from "antd-mobile"
 import Live from './live'
 import Banner from './banner'
-import cookie from "js-cookie";
-import {setCurrentUser, startFetchUser} from "@/store/userAction"
-import {addDays} from "date-fns";
-import {compose} from "redux";
-import {connect} from "react-redux";
+import cookie from "js-cookie"
+import { setCurrentUser, startFetchUser } from "@/store/userAction"
+import { addDays } from "date-fns"
+import { compose } from "redux"
+import { connect } from "react-redux"
 
 
 class BlessingPreheat extends Component {
@@ -43,14 +43,11 @@ class BlessingPreheat extends Component {
       // }],
       isRule: false,
       isCourse: false,
-            inviteUrl: '',
       inviteVisible: false,
       joinLotteryVisible: false,
       timelineShareVisible: false,
       showRecordList: false,
       isFormal: false, // 1正式 0 预热
-            isServer: false,
-            serverUrl: '',
       shareMark: false,
       userInfo: {},
       isSign: false,
@@ -86,9 +83,9 @@ class BlessingPreheat extends Component {
   }
 
   componentDidMount() {
-        this.fetchUserBlessing();
+    this.fetchUserBlessing()
     this.setInitialNavActiveStatus()
-        window.addEventListener('scroll', throttle(this.calcNavActive, 100));
+    window.addEventListener('scroll', throttle(this.calcNavActive, 100))
     if (is_weixin()) {
       wxShare({
         title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
@@ -104,10 +101,10 @@ class BlessingPreheat extends Component {
     }
 
     window['getNewData'] = result => {
-            this.fetchUserBlessing();
+      this.fetchUserBlessing()
     }
     window['QQWXWBshare'] = result => {
-            this.handleToAddBlessing(result);
+      this.handleToAddBlessing(result)
     }
 
 
@@ -129,12 +126,12 @@ class BlessingPreheat extends Component {
     let expires = addDays(new Date(), 90)
     this.state.userInfoList.map((item, index) => {
       Toast.info(item.uid)
-            cookie.set("token", item.token, {expires, path: '/', domain: 'julyedu.com'});
-            cookie.set("plat", item.plat, {expires, path: '/', domain: 'julyedu.com'});
-            cookie.set("uid", item.uid, {expires, path: '/', domain: 'julyedu.com'});
-            cookie.set("uname", item.uname, {expires, path: '/', domain: 'julyedu.com'});
-            cookie.set("avatar_file", item.avatar_file, {expires, path: '/', domain: 'julyedu.com'});
-        });
+      cookie.set("token", item.token, {expires, path: '/', domain: 'julyedu.com'})
+      cookie.set("plat", item.plat, {expires, path: '/', domain: 'julyedu.com'})
+      cookie.set("uid", item.uid, {expires, path: '/', domain: 'julyedu.com'})
+      cookie.set("uname", item.uname, {expires, path: '/', domain: 'julyedu.com'})
+      cookie.set("avatar_file", item.avatar_file, {expires, path: '/', domain: 'julyedu.com'})
+    })
     this.props.setCurrentUser(this.transformUser(this.state.userInfoList))
   }
   transformUser = res => {
@@ -157,8 +154,6 @@ class BlessingPreheat extends Component {
   }
 
 
-
-
   getActiveIndex = (arr, n) => {
     for (let i = 0, len = arr.length; i < len; i++) {
       if (arr[i] > n) {
@@ -206,7 +201,7 @@ class BlessingPreheat extends Component {
   }
 
   fetchUserBlessing() {
-        const {userInfo} = this.state;
+    const {userInfo} = this.state
     http.get(`${API.home}/sys/user/blessing`).then(res => {
       const {code, data} = res.data
       if (code === 200) {
@@ -233,11 +228,11 @@ class BlessingPreheat extends Component {
       share_platform: key, // 1 朋友圈 2 微博 3 qq
       type: 3 // 1：签到；3：分享；4：浏览课程；
     }).then(res => {
-            const {code } = res.data;
+      const {code} = res.data
       if (code === 200) {
-                Toast.info('+2点福气值~', 2, null, false);
+        Toast.info('+2点福气值~', 2, null, false)
       }
-        });
+    })
   }
 
 
@@ -289,9 +284,18 @@ class BlessingPreheat extends Component {
           margin: 1
         })
           .then(url => {
-                        this.setState({
-                            inviteUrl: url,
-                            inviteVisible: true
+            const content = (
+              <>
+                <img src={url} alt="barcode" className="qr-code"/>
+                <CopyToClipboard text={`${API.m}/invite"`} onCopy={this.onCopy}>
+                  <button>一键复制网址</button>
+                </CopyToClipboard>
+              </>
+            )
+            Popup({
+              title: '扫码邀请好友注册+10点福气值',
+              content,
+              className: 'invite-popup'
             })
           })
           .catch(err => {
@@ -307,7 +311,7 @@ class BlessingPreheat extends Component {
         SendMessageToApp("toShare", data)
       }
     } else {
-            this.toLogin();
+      this.toLogin()
     }
   }
 
@@ -320,9 +324,10 @@ class BlessingPreheat extends Component {
           height: 120,
           margin: 1
         }).then(url => {
-                    this.setState({
-                        isServer: true,
-                        serverUrl: url,
+          Popup({
+            title: '',
+            content: <img src={url} alt="barcode" className="qr-code"/>,
+            className: 'invite-popup'
           })
         })
           .catch(err => {
@@ -406,17 +411,13 @@ class BlessingPreheat extends Component {
       userInfo,
       isRule,
       isCourse,
-            inviteUrl,
-            inviteVisible,
       isFormal,
-            isServer,
-            serverUrl,
       isSign,
       showRecordList,
       shareMark,
       index
-        } = this.state;
-        const {history} = this.props;
+    } = this.state
+    const {history} = this.props
     const isLogin = !this.props.user.hasError
     return (
       <div id={'blessing-preheat'}>
@@ -490,23 +491,8 @@ class BlessingPreheat extends Component {
           shareMark &&
           <SharePopup/>
         }
-                <Popup
-                    visible={inviteVisible}
-                    title={'扫码邀请好友注册+10点福气值'}
-                    className={'invite-popup'}
-                >
-                    <img src={inviteUrl} alt="barcode" className="qr-code"/>
-                    <CopyToClipboard text={`${API.m}/invite"`} onCopy={this.onCopy}>
-                        <button>一键复制网址</button>
-                    </CopyToClipboard>
-                </Popup>
-                <Popup
-                    visible={isServer}
-                    title="扫码关注“七月在线”服务号"
-                    className={'invite-popup'}
-                >
-                    <img src={serverUrl} alt="barcode" className="qr-code"/>
-                </Popup>
+        {/*
+
 
                 <Popup visible={this.state.joinLotteryVisible}
                        title={'你已成功参与本时段抽奖'}
@@ -531,7 +517,7 @@ class BlessingPreheat extends Component {
                 >
                     <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt=""
                          className="qr-code"/>
-                </Popup>
+                </Popup>*/}
 
 
         <ListHeader id={'ai-test'} text="全国AI工程师水平测试" styles={{margin: '30px 0 15px'}}/>

src/components/blessingPreheat/live/index.js

@@ -16,8 +16,6 @@ class Live extends Component {
     tabs: [],
     lives: {},
     preheatLives: [],
-    visible: false,
-    qrcode: '',
     today: '',
     isApp: getParam('version')
   }
@@ -80,9 +78,9 @@ class Live extends Component {
         const {data} = res
         if (data.code == 200) {
           QRCode.toDataURL(data.data.url, (err, url) => {
-            this.setState({
-              qrcode: url,
-              visible: true
+            Popup({
+              title: '扫码关注“七月在线”服务号即可预约',
+              content: <img id={'live-qr-code'} src={url} alt=""/>
             })
           })
         } else {
@@ -92,14 +90,9 @@ class Live extends Component {
   }
 
   render() {
-    const {tabs, lives, visible, qrcode, preheatLives, today} = this.state
+    const {tabs, lives, preheatLives, today} = this.state
     return (
       <div id={'live'}>
-        <Popup title={'扫码关注“七月在线”服务号即可预约'}
-               visible={visible}
-        >
-          <img id={'live-qr-code'} src={qrcode} alt=""/>
-        </Popup>
         <div className="title">
           <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/title-decorate-left.png" alt=""/>
           <span>大咖直播</span>

src/components/blessingPreheat/live/index.scss

 #live {
     margin-top: 30px;
+
     .title {
         display: flex;
         justify-content: center;
@@ -175,22 +176,6 @@
 
     }
 
-    .popup-container {
-        .title {
-            color: #525C65;
-        }
-
-        .content {
-            display: flex;
-            justify-content: center;
-
-            img {
-                width: 120px;
-                height: 120px;
-            }
-        }
-    }
-
     .am-tabs {
         width: 330px;
         margin: 0 auto;
@@ -234,3 +219,20 @@
 
     }
 }
+
+.popup-container {
+    .title {
+        color: #525C65;
+    }
+
+    .content {
+        display: flex;
+        justify-content: center;
+
+        img {
+            width: 120px;
+            height: 120px;
+        }
+    }
+}
+