参与抽奖弹框

src/common/closable-popup/index.js

@@ -14,6 +14,16 @@ class ClosablePopup extends Component {
     close ? close() : this.setState({visible: false})
   }
 
+  componentDidUpdate(prevProps) {
+    const {visible} = this.props
+    if (prevProps.visible !== visible) {
+      this.setState({
+        visible
+      })
+    }
+  }
+
+
   render() {
     const {title, className, children, closable = true} = this.props
     return (

src/components/blessingPreheat/index.js

@@ -3,6 +3,9 @@ import RulePopup from './rulePopup/index'
 import CoursePopup from './coursePopup/index'
 import './index.scss'
 import { Popup } from '@/common'
+import {CopyToClipboard} from 'react-copy-to-clipboard'
+import { Toast } from "antd-mobile"
+
 
 class BlessingPreheat extends Component {
   constructor(props) {
@@ -10,7 +13,8 @@ class BlessingPreheat extends Component {
     this.state = {
       isRule: false,
       isCourse: false,
-      inviteVisible: true
+      inviteVisible: true,
+      joinLottery: true
     }
   }
 
@@ -22,6 +26,10 @@ class BlessingPreheat extends Component {
     })
   }
 
+  onCopy = () => {
+    Toast.info('复制成功', 2,null,false)
+  }
+
   render() {
     const {isRule, isCourse, inviteVisible} = this.state
     return (
@@ -40,7 +48,25 @@ class BlessingPreheat extends Component {
                className={'invite-popup'}
         >
           <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt="" className="qr-code"/>
-          <button>一键复制网址</button>
+          <CopyToClipboard
+            text={'kkk'}
+            onCopy={this.onCopy}
+          >
+            <button>一键复制网址</button>
+          </CopyToClipboard>
+        </Popup>
+        <Popup visible={this.state.joinLottery}
+               title={'你已成功参与本时段抽奖'}
+               className={'join-lottery'}
+        >
+          <div className="text">
+            <div className="code">抽奖码为：99999999</div>
+            <div className="time">本时段的中奖结果将在xx:xx公布</div>
+            <div className="hint">你可关注‘七月在线’服务号第一时间获得中奖信息。</div>
+            <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" className='qr-code' alt=""/>
+          </div>
+
+          <button onClick={() => {this.setState({joinLottery: false})}}>知道了</button>
         </Popup>
       </div>
     )

src/components/blessingPreheat/index.scss

@@ -25,4 +25,62 @@
             }
         }
     }
+
+    .join-lottery {
+        background: #5327FA;
+        text-align: center;
+
+        .title {
+            color: #fff;
+            margin-bottom: 15px;
+        }
+
+        .text {
+            width: 275px;
+            height: 248px;
+            padding: 36px 30px 0;
+            margin-bottom: 10px;
+            text-align: center;
+            background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/join-lottery-bg.png");
+            background-size: contain;
+            font-size: 14px;
+
+            .code {
+                color: #FF0000;
+                margin-bottom: 8px;
+            }
+
+            .time, .hint {
+                font-size: 12px;
+                color: #525C65;
+            }
+
+            .time {
+                margin-bottom: 20px;
+            }
+
+            .hint{
+                color: rgba(82, 92, 101, .8);
+                margin-bottom: 10px;
+                text-align: left;
+            }
+
+            .qr-code {
+                width: 90px;
+                height: 90px;
+            }
+        }
+
+        button {
+            width: 133px;
+            height: 30px;
+            background: #fff;
+            border-radius: 15px;
+            font-size: 14px;
+            color: #5327FA;
+            -webkit-appearance: none;
+            outline: none;
+            border: none;
+        }
+    }
 }