可关闭弹框通用组件

src/common/closable-popup/index.js

+import React, { Component } from 'react'
+import './index.scss'
+import classnames from 'classnames'
+
+class ClosablePopup extends Component {
+
+  state = {
+    visible: this.props.visible
+  }
+
+  close = () => {
+    const {close} = this.props
+    close ? close() : this.setState({visible: false})
+  }
+
+  render() {
+    const {title, className, children, closable = true} = this.props
+    return (
+      this.state.visible
+        ?
+        <div className={'closable-popup-mask'}>
+          <div className={classnames(['popup-container', className])}>
+            <div className="title">{title}</div>
+            <div className="content">
+              {children}
+            </div>
+            {
+              closable && <i className={'close iconfont iconiconfront-2'} onClick={this.close}/>
+            }
+          </div>
+        </div>
+        : null
+    )
+  }
+}
+
+
+/*
+function ClosablePopup({title}) {
+  return (
+    <div className={'closable-popup-mask'}>
+      <div className="popup-container">
+        <div className="title">{title}</div>
+      </div>
+    </div>
+  )
+}
+*/
+
+export default ClosablePopup

src/common/closable-popup/index.scss

+.closable-popup-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+
+    .popup-container {
+        position: absolute;
+        top: 165px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 300px;
+        padding: 20px 10px;
+        border-radius: 10px;
+        background: #fff;
+
+        .title {
+            font-size: 16px;
+            color: #525C65;
+            text-align: center;
+        }
+
+        .close {
+            position: absolute;
+            bottom: -88px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 36px;
+            color: #fff;
+        }
+    }
+}

src/common/index.js

@@ -5,8 +5,9 @@ export { default as OrderItem } from './OrderList'
 export { default as HeaderBar } from './HeaderBar'
 export { default as CallApp } from './CallApp'
 export { default as Captcha } from './Captcha'
-export { default as ClearableInput } from "./ClearableInput";
+export { default as ClearableInput } from "./ClearableInput"
 export { default as Loading } from './Loading'
 export { default as RenderTabBar } from './renderTabBar'
+export { default as Popup } from './closable-popup'
 
 

src/components/blessingPreheat/index.js

-import React, { Component } from 'react';
-import RulePopup from './rulePopup/index';
-import CoursePopup from './coursePopup/index';
-import './index.scss';
+import React, { Component } from 'react'
+import RulePopup from './rulePopup/index'
+import CoursePopup from './coursePopup/index'
+import './index.scss'
+import { Popup } from '@/common'
 
 class BlessingPreheat extends Component {
   constructor(props) {
-    super(props);
+    super(props)
     this.state = {
       isRule: false,
-      isCourse: true
-    };
+      isCourse: false,
+      inviteVisible: true
+    }
   }
 
   handleToHide = (key) => {
-    let obj = {};
-    obj[key] = false;
+    let obj = {}
+    obj[key] = false
     this.setState({
       ...obj
-    });
+    })
   }
 
   render() {
-    const { isRule, isCourse } = this.state;
+    const {isRule, isCourse, inviteVisible} = this.state
     return (
-      <div>
+      <div id={'blessing-preheat'}>
         22222
         {
-          isRule && 
-          <RulePopup handleToHide={() => this.handleToHide('isRule')} />
+          isRule &&
+          <RulePopup handleToHide={() => this.handleToHide('isRule')}/>
         }
         {
           isCourse &&
-          <CoursePopup handleToHide={() => this.handleToHide('isCourse')} />
+          <CoursePopup handleToHide={() => this.handleToHide('isCourse')}/>
         }
+        <Popup visible={inviteVisible}
+               title={'扫码邀请好友注册+10点福气值'}
+               className={'invite-popup'}
+        >
+          <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt="" className="qr-code"/>
+          <button>一键复制网址</button>
+        </Popup>
       </div>
-    );
+    )
   }
 }
 
-export default BlessingPreheat;
+export default BlessingPreheat

src/components/blessingPreheat/index.scss

+#blessing-preheat {
+    .invite-popup {
+        .content {
+            display: flex;
+            flex-flow: column;
+            align-items: center;
+            margin-top: 29px;
+
+            .qr-code {
+                width: 120px;
+                height: 120px;
+                margin-bottom: 20px;
+            }
+
+            button {
+                width: 133px;
+                height: 30px;
+                background: rgba(83, 39, 250, 1);
+                border-radius: 15px;
+                font-size: 14px;
+                color: #fff;
+                -webkit-appearance: none;
+                outline: none;
+                border: none;
+            }
+        }
+    }
+}