index.js

import React, { Component } from 'react';
import './bargain.scss'
import { Flex } from "antd-mobile";
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
                    onClick={this.toggleCover}
                />
                {
                    this.state.showCover &&
                    <Overlay>
                        <BargainSuccess/>
                    </Overlay>
                }
            </div>
        );
    }
}

function BargainIntro({onClick}) {
    return (
        <div className="intro-outer">
            <div className="intro-inner">
                <Flex direction={'column'} justify={'center'} className={'intro-wrapper'}>
                    <p>
                        邀请
                        <span className={'indicator'}>20位</span>
                        好友帮忙砍价可获得
                        <span className={'indicator'}>【砍价神器】</span>
                    </p>
                    <p>一刀绝杀，砍爆底价</p>
                    <Flex.Item>
                        <button onClick={onClick}>我要砍价</button>
                    </Flex.Item>
                </Flex>
            </div>
        </div>
    )
}

function BargainStatus() {
    return (
        <div className="status-outer">
            <div className="status-inner">
                <Flex direction={'column'}>
                    <div className={'first-row'}>
                        <div>
                            已砍<span className={'indicator'}>59元</span>
                            <span className={'time hour'}>23</span>:
                            <span className={'time min'}>59</span>:
                            <span className={'time sec'}>02</span>
                            后砍价结束
                        </div>
                        <div>15位好友助力></div>
                    </div>
                    <div className="sec-row">
                        <div>
                            <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>
                            <div>砍掉<span className={'indicator'}>25.3元</span></div>
                            <button>继续砍价</button>
                        </div>
                    </div>
                    <div className="third-row">
                        <div>
                            再邀请<span className={'indicator'}>5</span>位好友助力即可获得<span
                            className={'indicator'}>【砍价神器】</span>
                        </div>

                        {/*<button>立即领取</button>*/}
                    </div>
                </Flex>
            </div>
        </div>
    )
}

function BargainSuccess() {
    return (
        <div className="bargain-success">
            <p className={'title'}>
                恭喜你，一刀砍了
                <span className={'indicator'}>39.8元</span>
            </p>
            <p>分享到微信群邀请更多好友帮忙砍价</p>
            <p>
                超过20位好友助力可获得
                <span className={'indicator'} style={{color: '#FF4000'}}>【砍价神器】</span>
                哦
            </p>
        </div>
    )
}


export default Bargain;