拉master

src/components/detail/bargain/bargainInfo/bargain-info.scss

+.bargain-info {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-flow: column;
+    width: 300px;
+    height: 195px;
+    padding: 20px;
+    background: $white;
+    border-radius: 3px;
+
+    .title {
+        text-align: center;
+        font-size: $font_16;
+        margin-bottom: 12px;
+    }
+
+    .list {
+        .am-list-item {
+            height: 30px;
+            min-height: 30px;
+            border: 1px solid $border_ddd;
+
+            input {
+                font-size: $font_12;
+            }
+        }
+
+        .am-list-item {
+            margin-bottom: 15px;
+        }
+
+        .am-list-line {
+            &::after {
+                display: none;
+            }
+        }
+
+        .am-list-body {
+            &::after {
+                display: none;
+            }
+        }
+    }
+
+    button {
+        display: inline-block;
+        width: 260px;
+        height: 30px;
+        background: $bg_999;
+
+        -webkit-appearance: none;
+        border: none;
+
+        font-size: $font_16;
+        color: $white;
+        text-align: center;
+        line-height: 30px;
+    }
+}
\ No newline at end of file

src/components/detail/bargain/bargainInfo/index.js

+import React from 'react';
+import { InputItem, List } from "antd-mobile";
+import './bargain-info.scss'
+
+
+const BargainInfo = () => {
+    return (
+        <div className={'bargain-info'}>
+            <div className="title">绑定手机，先砍一刀</div>
+            <List className={'list'}>
+                <InputItem
+                    placeholder={'手机号'}
+                />
+                <InputItem
+                    placeholder={'验证码'}
+                />
+            </List>
+            <button>先砍一刀</button>
+        </div>
+    );
+};
+
+export default BargainInfo;
\ No newline at end of file

src/components/detail/bargain/index.js

 import React, { Component } from 'react';
 import './bargain.scss'
 import { Flex } from "antd-mobile";
-
-
-const mockData = {
-    sum: 59,
-}
+import Overlay from '../overlay'
+import BargainInfo from './bargainInfo'
 
 class Bargain extends Component {
+    state = {
+        showCover: false
+    }
+    toggleCover = () => {
+        this.setState({showCover: !this.state.showCover});
+    }
+
     render() {
         return (
             <div className={'bargain'}>
-                {/*<BargainIntro/>*/}
-                <BargainStatus
-
+                <BargainIntro
+                    onClick={this.toggleCover}
                 />
+                {
+                    this.state.showCover &&
+                    <Overlay>
+                        <BargainInfo/>
+                    </Overlay>
+                }
             </div>
         );
     }
 }
 
-
-function BargainIntro() {
+function BargainIntro({onClick}) {
     return (
         <div className="intro-outer">
             <div className="intro-inner">
@@ -34,7 +42,7 @@ function BargainIntro() {
                     </p>
                     <p>一刀绝杀，砍爆底价</p>
                     <Flex.Item>
-                        <button>我要砍价</button>
+                        <button onClick={onClick}>我要砍价</button>
                     </Flex.Item>
                 </Flex>
             </div>
@@ -59,7 +67,9 @@ function BargainStatus() {
                     </div>
                     <div className="sec-row">
                         <div>
-                            <img src="http://b-ssl.duitang.com/uploads/item/201506/23/20150623212143_hATKH.jpeg" alt=""/>
+                            <img
+                                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556513873959&di=dde8198548f6157add517042e0225748&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180802%2F00%2F1533140084-jtaHBPSIOh.jpg"
+                                alt=""/>
                             <span>机器学习集训营</span>
                         </div>
                         <div>
@@ -69,7 +79,8 @@ function BargainStatus() {
                     </div>
                     <div className="third-row">
                         <div>
-                            再邀请<span className={'indicator'}>5</span>位好友助力即可获得<span className={'indicator'}>【砍价神器】</span>
+                            再邀请<span className={'indicator'}>5</span>位好友助力即可获得<span
+                            className={'indicator'}>【砍价神器】</span>
                         </div>
 
                         {/*<button>立即领取</button>*/}
@@ -80,4 +91,5 @@ function BargainStatus() {
     )
 }
 
+
 export default Bargain;
\ No newline at end of file

src/components/detail/overlay/index.js

+import React, { Component } from 'react';
+import ReactDom from "react-dom";
+
+import './overlay.scss'
+
+const root = document.body || document.documentElement
+
+const events = ['touchmove', 'mousewheel']
+
+class Overlay extends Component {
+    constructor(props) {
+        super(props);
+        this.overlayBox = null
+    }
+
+    preventScroll = e => {
+        e.preventDefault()
+    }
+
+    componentDidMount() {
+        events.forEach(item => {
+            this.overlayBox.addEventListener(item, this.preventScroll, {
+                passive: false
+            })
+        })
+    }
+
+    componentWillUnmount() {
+        events.forEach(item => {
+            this.overlayBox.removeEventListener(item, this.preventScroll)
+        })
+    }
+
+    render() {
+        return ReactDom.createPortal(
+            (<div className={'overlay'} ref={el => this.overlayBox = el}>{this.props.children}</div>),
+            root
+        )
+    }
+}
+
+export default Overlay;
\ No newline at end of file

src/components/detail/overlay/overlay.scss

+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 9999;
+}
\ No newline at end of file

src/styles/variable.scss

@@ -46,6 +46,7 @@ $bg_EBEFF5: #EBEFF5;
 $bg_ccc: #ccc;
 $bg_333: #333;
 $bg_666: #666;
+$bg_999: #999;
 $bg_82BBFB: #82BBFB;
 $bg_EBC05A: #EBC05A;
 $bg_EBA216: #EBA216;