Merge branch 'closable-popup' into 11-11

# Conflicts:
#	src/components/blessingPreheat/index.js

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 {
@@ -85,11 +85,63 @@ class BlessingPreheat extends Component {
             isApp: false
         }
     }
+  constructor(props) {
+    super(props)
+    this.navTop = 183
+    this.prevY = 0
+    this.state = {
+      userInfoList: [],
+      // userInfoList: [{
+      //     token:'fcfef221e60ab7a2-92a80d5d30196999',
+      //     uid:'545292',
+      //     uname:'xzhtest2',
+      //     avatar_file:''
+      // }],
+      isRule: false,
+      isCourse: false,
+      inviteVisible: false,
+      joinLotteryVisible: false,
+      timelineShareVisible: false,
+      showRecordList: false,
+      isFormal: false, // 1正式 0 预热
+      shareMark: false,
+      userInfo: {},
+      isSign: false,
+      navs: [
+        {
+          text: '积福气',
+          id: 'lucky-value'
+        },
+        {
+          text: '幸运大抽奖',
+          id: 'lucky-draw'
+        },
+        {
+          text: '预付定金',
+          id: 'deposit'
+        },
+        {
+          text: '精品特惠',
+          id: 'best-courses'
+        },
+        {
+          text: 'AI测试',
+          id: 'ai-test'
+        },
+        {
+          text: '大咖直播',
+          id: 'live'
+        },
+      ],
+      index: 0,
+      userHasError: props.user.hasError
+    }
+  }
 
   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万元奖品来就送！！',
@@ -105,10 +157,12 @@ class BlessingPreheat extends Component {
     }
 
     window['getNewData'] = result => {
-            this.fetchUserBlessing();
+      this.fetchUserBlessing()
     }
     window['QQWXWBshare'] = result => {
-            this.handleToAddBlessing(result);
+      this.handleToAddBlessing(result)
+    }
+
     }
 
   }
@@ -167,8 +221,6 @@ class BlessingPreheat extends Component {
   }
 
 
-
-
   getActiveIndex = (arr, n) => {
     for (let i = 0, len = arr.length; i < len; i++) {
       if (arr[i] > n) {
@@ -245,11 +297,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)
       }
-        });
+    })
   }
 
 
@@ -301,9 +353,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 => {
@@ -319,7 +380,7 @@ class BlessingPreheat extends Component {
         SendMessageToApp("toShare", data)
       }
     } else {
-            this.toLogin();
+      this.toLogin()
     }
   }
 
@@ -332,9 +393,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 => {
@@ -439,6 +501,28 @@ class BlessingPreheat extends Component {
                     toSection={this.toSection}
                     index={index}
                 />
+  render() {
+    const {
+      navs,
+      userInfo,
+      isRule,
+      isCourse,
+      isFormal,
+      isSign,
+      showRecordList,
+      shareMark,
+      index
+    } = this.state
+    const {history} = this.props
+    const isLogin = !this.props.user.hasError
+    return (
+      <div id={'blessing-preheat'}>
+        <Banner
+          isFormal={isFormal}
+          navs={navs}
+          toSection={this.toSection}
+          index={index}
+        />
 
         {/* 积福气 */}
         <ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '60px 0 15px'}}/>
@@ -502,23 +586,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={'你已成功参与本时段抽奖'}
@@ -543,7 +612,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;
+        }
+    }
+}
+