index.js

import React, {Component} from 'react'
import './bargain-middle-page.scss'
import {HeaderBar, VList} from '@common'
import {Course} from '@common'
import {api, getParam, http, browser, wxShare} from "@/utils"
import {Toast} from "antd-mobile"
import {Link, withRouter} from "react-router-dom"
import Ranking from './ranking'
import {differenceInSeconds, differenceInMinutes, differenceInHours, differenceInDays} from "date-fns"
import Overlay from '../detail/overlay'
import {compose} from "redux"
import {connect} from "react-redux";
import {getCourses} from './../detail/actions';
import classnames from 'classnames';
import FollowBarcode from './barcode/index';

@connect(state => ({
    user: state.user
}))
class BargainMiddlePage extends Component {

    timer

    constructor(props) {
        super(props)
        this.state = {
            isShowOverlay: false,
            isOriginator: '',
            kanjiaIcon: require('./image/kanjia_icon.png'),
            course: {}, // 当前砍价课程
            courseList: [],  // 所有砍价课程
            data: '',
            bargainData: '',
            limitPeople: 0,
            outList: [],
            list: [],
            width: '0',
            isShowMore: '',
            status: '',
            hour: '',
            min: '',
            sec: '',
            day: '',
            amount: '', // 每次砍掉的价格
            firendBaigainPrice: true,
            isshowYindao: false,
            isLoaidng: true,
            imglink: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/',
        }
    }

    componentDidMount() {
        this.getBargainRankList(getParam('id'), 1)
        this.getBargainCourse()
        this.getBargainInfo()
    }

    componentDidUpdate(prevProps) {
        let {user} = this.props
        let {user: prevUser} = prevProps
        if(!user.hasError && user.hasError !== prevUser.hasError){
            this.getBargainRankList(getParam('id'), 1)
            this.getBargainCourse()
            this.getBargainInfo()
        }
    }


    // 获取砍价信息
    getBargainInfo = () => {

        http.get(`${API.home}/m/bargain/info?bargaincode=${getParam('bargaincode')}&is_originator=${getParam('is_originator')}`).then((res) => {
            if (res.data.code === 200) {
                this.setState(
                    {
                        data: res.data.data,
                        isOriginator: res.data.data.is_originator,
                        originatorUid: res.data.data.originator_uid,
                        course: res.data.data.course,
                        limitPeople: res.data.data.course.limit_people,
                        bargainData: res.data.data.bargain,
                        width: (res.data.data.bargain.bargain_price / res.data.data.bargain.total_price).toFixed(2) * 100 + '%'
                    },
                    () => {
                        if (this.state.bargainData.expire_time) {
                            let date = this.state.bargainData.expire_time * 1000
                            let now = Date.now()
                            clearInterval(this.timer)
                            this.timer = setInterval(() => {
                                date -= 1000
                                let _d = new Date(date)
                                let s = differenceInSeconds(_d, now) % 60,
                                    m = differenceInMinutes(_d, now) % 60,
                                    h = differenceInHours(_d, now) % 24,
                                    d = differenceInDays(_d, now) % 24
                                this.setState({
                                    hour: h,
                                    min: m,
                                    sec: s,
                                    day: d
                                })

                            }, 1000)
                        }
                    }
                )
            } else {
                Toast.info(res.data.msg, 2)
            }
        })
    }

    // 获取砍价课程
    getBargainCourse = () => {
        http.get(`${API.home}/m/bargain/courseList`).then((res) => {
            if (res.data.code === 200) {
                this.setState({
                    courseList: res.data.data
                })
            } else {
                Toast.info(res.data.msg, 2)
            }
        })
    }

    // 获取助理好友
    getBargainRankList = (id = '', type) => {
        const bargain_code = getParam('bargaincode') || '';
        let data = {
            courseId: id,
            type: type,
            bargain_code
        }
        http.post(`${API.home}/m/bargain/rankList`, data).then((res) => {
            if (res.data.code === 200) {
                let arr = ['刀神', '刀王', '刀霸']
                let newList = res.data.data.out_list.map((item, i) => {
                    return {
                        ...item,
                        rank: arr[i]
                    }
                })
                this.setState({
                    list: res.data.data.list,
                    outList: newList
                })
            } else if (res.data.code == 4030 || res.data.code == 4040) {
            } else {
                Toast.info(res.data.msg, 2)
            }
        })
    }

    // 直接支付
    toCart = () => {
        http.get(`${API['base-api']}/m/cart/addtopreorder/[${getParam('id')}]`).then((res) => {
            if (res.data.errno === 0) {
                this.props.history.push(`/order?id=[${getParam('id')}]`, {bargain: 1});
            } else {
                Toast.info(res.data.msg, 2);
            }
        })
        // let data = {
        //     course_id: getParam('id')
        // }
        // http.post(`${API.home}/m/cart/add`, data).then((res) => {
        //     if (res.data.code === 200 || res.data.code === 15001) {
        //         this.props.history.push('/shopcart')
        //     } else {
        //         Toast.info(res.data.msg, 2);
        //     }
        // })
    }

    // 我要砍价列表的去支付
    toCartBottom = (id) => {
        http.get(`${API['base-api']}/m/cart/addtopreorder/[${id}]`).then((res) => {
            if (res.data.errno === 0) {
                this.props.history.push(`/order?id=[${getParam('id')}]`, {bargain: 1});
            } else {
                Toast.info(res.data.msg, 2);
            }
        })
        // http.post(`${API.home}/m/cart/add`, data).then((res) => {
        //     if (res.data.code === 200 || res.data.code === 15001) {
        //         this.props.history.push('/shopcart')
        //     } else {
        //         Toast.info(res.data.msg, 2);
        //     }
        // })
    }

    // 查看更多
    getMore = () => {
        this.setState({
            isShowMore: true
        })
    }

    // 自组件传给父组件的boxHide
    boxHide = (val) => {
        this.setState({isShowMore: val})
    }

    // 领取砍价神器
    toArtifact = () => {
        const { course: { course_id = '' } } = this.state;
        let data = {
            courseId: getParam('id')? getParam('id') : course_id
        }
        http.post(`${API.home}/m/bargain/receiveLimit`, data).then((res) => {
            if (res.data.code === 200) {
                this.setState({
                    isShowOverlay: true,
                    status: 5,
                });
                this.getBargainInfo();
            } else {
                Toast.info(res.data.msg, 2)
            }
        })
    }

    // 使用砍价神器
    useArtifact = () => {
        const { course: { course_id = '' } } = this.state;
        const id = getParam('id')? getParam('id') : course_id;
        this.toKanjia(id, 2, 0);
    }

    // 砍价接口
    toKanjia = (id, type, uid) => {
        let data = {
            course_id: id,
            type: type,  // 1 用户自己砍价 2 使用砍价神器 3 好友助力砍价 4 好友第二次助力
            parent_uid: uid // 被助力人id 【自己本人操作传0】
        }
        http.post(`${API.home}/m/bargain/toBargain`, data).then((res) => {
            if (res.data.code === 200) {

                // is_success =0一切正常 =1 不能在砍了 =2关注公众号,可以再砍一刀！
                this.setState({
                    amount: res.data.data.amount
                })
                if (type === 2) {
                    this.setState({
                        isShowOverlay: true,
                        status: 6
                    });
                    this.getBargainInfo();
                    this.getBargainRankList('', 1);
                }

                if (res.data.data.is_success === 1) {
                    this.setState({
                        isShowOverlay: true,
                        status: 4
                    })
                } else if (res.data.data.is_success === 2) {
                    if (type === 3) {
                        this.setState({
                            isShowOverlay: true,
                            status: 2
                        })
                    } else if (type === 4) {
                        this.setState({
                            isShowOverlay: true,
                            status: 1,
                            firendBaigainPrice: false
                        })
                    }
                } else if (res.data.data.is_success === 0) {
                    if (type === 3) {
                        this.setState({
                            isShowOverlay: true,
                            status: 2
                        })
                    } else if (type === 4) {
                        this.setState({
                            isShowOverlay: true,
                            status: 3
                        })
                    }
                }

                this.getBargainInfo()
                this.getBargainRankList(getParam('id'), 1)


            } else if (res.data.code == 4030 || res.data.code == 4040) {
                if (browser.isWeixin) {
                    let redirectURI = window.location.href
                    if (redirectURI.includes('code=') && redirectURI.includes('state=STATE')) {
                        let index = redirectURI.lastIndexOf('code=');
                        redirectURI = redirectURI.substr(0, index - 1);
                    }
                    window.location.assign(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=${encodeURIComponent(redirectURI)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`)
                } else {
                    this.props.history.push('/passport')
                }

            } else {
                Toast.info(res.data.msg, 2)
            }
        })
    }


    // 帮好友砍价第一刀
    friendBargainFirst = () => {
        const { course: { course_id = '' } } = this.state;
        const id = getParam('id')? getParam('id') : course_id;
        this.toKanjia(id, 3, this.state.originatorUid);
    }

    // 帮好友砍价第二刀
    friendBargainSecond = () => {
        const { course: { course_id = '' } } = this.state;
        const id = getParam('id')? getParam('id') : course_id;
        this.toKanjia(id, 4, this.state.originatorUid);
    }

    // 邀请好友砍价
    shareFriendBargain = () => {
        this.setState({
            isShowOverlay: true,
            status: 7,
            isshowYindao: browser.isWeixin ? true : false
        });

        wxShare({
            title: `我发现一门好课，快来帮我砍价吧！`,
            desc: `我已经砍了${this.state.bargainData.bargain_price}元，看看你能砍多少`,
            link: encodeURI(location.href),
            imgUrl: this.state.course.course_img,
        });
    }

    // 关闭弹窗
    close = () => {
        this.setState({
            isShowOverlay: false,
            status: '',
        });
    }

    toCourseDetail = (id) => {
        const {dispatch, history} = this.props;
        // dispatch(getCourses(id, () => {
        history.push(`/detail?id=${id}`);
        return false;
        // }));
    }

    render() {
        // console.log(this.props);
        let thirdRow, btn
        // is_artifact	 0-再邀请多少人可以使用 1-可以使用未领取 2-已领取 3-已使用
        if (this.state.bargainData.is_artifact === 0) {
            thirdRow =
                <div>再邀请<span className={'indicator'}>{this.state.bargainData.invite_num}</span>位好友助力即可获得<span
                    className={'indicator'}>【砍价神器】</span></div>
        } else if (this.state.bargainData.is_artifact === 1) {
            thirdRow = <div>恭喜你获得<span className={'indicator'}>【砍价神器】</span></div>
            btn = <button className={'artifact-btn'} onClick={this.toArtifact}>立即领取</button>
        } else if (this.state.bargainData.is_artifact === 2) {
            thirdRow = <div>恭喜你获得<span className={'indicator'}>【砍价神器】</span></div>
            btn = <button className={'artifact-btn'} onClick={this.useArtifact}>立即使用</button>
        }

        const { data: { is_originator = 0, assist_status = 0, bargain_status = 0 } } = this.state;
        let bargainBtn = '';
        // assist_status 助力状态 0-未助力，1-已助力一次 2-已助力两次，不能再助力
        // is_originator 是否发起人 0-否 1-是
        // bargain_status 砍价状态 0-砍价中，1砍价结束，待支付，2砍价过期（没有砍价记录没有砍价信息），3已购买
        if(is_originator) {
            if(bargain_status === 0) {
                bargainBtn = <button className='active-btn' onClick={this.shareFriendBargain}>邀请好友砍价</button>
            }
            else {
                bargainBtn = <button className={'invalid-btn'}>砍价结束</button>
            }
        }else {
            if(assist_status === 0 && bargain_status === 0) {
                bargainBtn = <button className='active-btn' onClick={this.friendBargainFirst}>帮好友砍一刀</button>
            }else if (assist_status === 1 && bargain_status === 0) {
                bargainBtn = <button className='active-btn' onClick={this.friendBargainSecond}>再砍一刀</button>
            }else if (assist_status === 2 && bargain_status === 0) {
                bargainBtn = <button className={'invalid-btn'}>已帮好友助力</button>
            }else if (bargain_status !== 0) {
                bargainBtn = <button className={'invalid-btn'}>砍价结束</button>
            }
        }

        // if (this.state.isOriginator !== 1 && this.state.data.assist_status === 0 && this.state.data.bargain_status === 0) {
        //     bargainBtn = <button className='active-btn' onClick={this.friendBargainFirst}>帮好友砍一刀</button>
        // } else if (this.state.isOriginator !== 1 && this.state.data.assist_status === 1) {
        //     bargainBtn = <button className='active-btn' onClick={this.friendBargainSecond}>再砍一刀1</button>
        // } else if (this.state.isOriginator !== 1 && this.state.data.assist_status === 2) {
        //     bargainBtn = <button className={'invalid-btn'}>已帮好友助力</button>
        // } else if (this.state.data.bargain_status === 1 || this.state.data.bargain_status === 2) {
        //     bargainBtn = <button className={'invalid-btn'}>砍价结束</button>
        // } else if (this.state.isOriginator === 1 && this.state.data.bargain_status === 0) {
        //     bargainBtn = <button className='active-btn' onClick={this.shareFriendBargain}>邀请好友砍价</button>
        // }
        return (
            <div className={'bargain-middle-page'}>
                <HeaderBar title='砍价详情' arrow={true} cart={true} toHref={'/'}></HeaderBar>
                {/*<Loading isLoading={this.state.isLoaidng}>*/}
                <div className="top">
                    <div className="bargain-area">
                        {
                            this.state.isOriginator !== 1 &&
                            <p className='bargain-tip'>你的好友发现一门精品课程，快来一起帮他砍价：</p>
                        }

                        <ul>
                            <VList
                                img={this.state.course.course_img}
                                info={
                                    <CourseDes
                                        isOriginator={this.state.isOriginator}
                                        data={this.state.data}
                                        toCart={this.toCart}/>
                                }
                            />
                        </ul>
                        <div className="bargain-detail">
                            {
                                (this.state.data.bargain_status == 0 || this.state.data.bargain_status == 1) &&
                                <div>
                                    <div className="top">
                                        <div>
                                            已砍<span className={'reduced-price'}>{this.state.bargainData.bargain_price}元</span>
                                        </div>
                                        {
                                            this.state.data.bargain_status === 0 &&
                                            <div>
                                        <span
                                            className={'time hour'}>{String(this.state.hour).padStart(2, 0)}</span> :&nbsp;
                                                <span
                                                    className={'time min'}>{String(this.state.min).padStart(2, 0)}</span> :&nbsp;
                                                <span className={'time sec'}>{String(this.state.sec).padStart(2, 0)}</span>
                                                <span className={'inactive'}> 后砍价结束</span>
                                            </div>
                                        }
                                        {
                                            this.state.data.bargain_status === 1 && this.state.isOriginator === 1 &&
                                            <span className={'inactive'}>砍价结束</span>
                                        }

                                    </div>
                                    <div className="middle">
                                        <span style={{width: this.state.width}}></span>
                                    </div>
                                </div>
                            }
                            {
                                this.state.isOriginator === 1 && this.state.data.bargain_status === 0 &&
                                <div>
                                    {thirdRow}
                                    {btn}
                                </div>
                            }

                            {
                                this.state.isOriginator === 1 && this.state.data.bargain_status === 1 &&
                                <div>
                                    砍价金额将于
                                    <span className={'time hour'}>{String(this.state.day).padStart(2, 0)}</span><span
                                    className={'unit'}> 天 </span>
                                    <span className={'time min'}>{String(this.state.hour).padStart(2, 0)}</span><span
                                    className={'unit'}> 时 </span>
                                    <span className={'time sec'}>{String(this.state.min).padStart(2, 0)}</span><span
                                    className={'unit'}>分</span>
                                    后清零，请尽快完成支付
                                </div>
                            }

                            <div className={'button'}>
                                {bargainBtn}
                            </div>

                        </div>
                    </div>
                    <div className="bargain-records">
                        <div className="title">砍价记录</div>
                        <ul>
                            {
                                this.state.outList && this.state.outList.length > 0 && this.state.outList.map((item, index) => {
                                    return (
                                        <li key={index}>
                                            <div className="left">
                                                <img className='avatar' src={item.avatar_file} alt=""/>
                                                <span className={'nickname'}>{item.user_name}</span>
                                                <span className="rank-tag">{item.rank}</span>
                                            </div>
                                            <div className="right">
                                                <img className='kanjia-icon' src={this.state.kanjiaIcon} alt=""/>
                                                砍掉<span className={'price'}>{item.amount}</span>
                                            </div>
                                        </li>
                                    )
                                })

                            }

                        </ul>
                        <div className="more" onClick={this.getMore}>查看更多>></div>
                    </div>
                </div>
                <div className="bargain-course-list" id='bargainCourse'>
                    <div className="title-wrapper">
                        <div className="title">我要砍价</div>
                        <div className="subtitle">邀请{this.state.limitPeople}位以上好友帮忙砍价可获得【砍价神器】</div>
                    </div>
                    <ul>
                        {
                            this.state.courseList && this.state.courseList.length > 0 && this.state.courseList.map((item, index) => {
                                return <Course
                                    className={'text-overflow-2'}
                                    key={index}
                                    id={item.course_id}
                                    img={item.image_name}
                                    title={item.course_title}
                                    toDetail={this.toCourseDetail}
                                    bottom={
                                        <CourseBottom
                                            user={this.props.user}
                                            item={item}
                                            toCartBottom={this.toCartBottom.bind(this, item.course_id)}
                                            toDetail={this.toCourseDetail}
                                        />
                                    }
                                />
                            })
                        }
                    </ul>
                </div>
                <Link to={'/classify'} className={'preferential'}>查看更多精品课程 >></Link>


                {/*更多好友砍价*/}
                <Ranking list={this.state.list} icon={this.state.kanjiaIcon} limitPeople={this.state.limitPeople}
                         isShowMore={this.state.isShowMore} boxHide={this.boxHide}></Ranking>


                {
                    this.state.isShowOverlay &&
                    <Overlay>
                        <div className="bargain-popup__content">



                        {/*砍价成功去分享*/}
                        {
                            this.state.status === 7 &&
                            <BargainSuccess isshowYindao={this.state.isshowYindao} limitPeople={this.state.limitPeople}
                                            close={this.close}/>
                        }


                        {/*引导关注公众号*/}
                        {/* {
                            this.state.status === 1 &&
                            <PublicNumber
                                money={this.state.amount}
                                avatar={this.props.user.data.avatar}
                                firendBaigainPrice={this.state.firendBaigainPrice}/>
                        } */}
                        {
                            this.state.status === 1 &&
                            <FollowBarcode
                                userInfo={this.props.user.data}
                                money={this.state.amount}
                                firendBaigainPrice={this.state.firendBaigainPrice}
                            />
                        }

                        {/*好友成功砍第一刀*/}
                        {
                            this.state.status === 2 &&
                            <BargainFirst
                                bargainSecond={this.friendBargainSecond}
                                money={this.state.amount}
                            />
                        }
                        {/*好友成功砍第二刀*/}
                        {
                            this.state.status === 3 &&
                            <BargainSecond close={this.close} money={this.state.amount}/>
                        }
                        {/*不能在砍了*/}
                        {
                            this.state.status === 4 &&
                            <NotBargain close={this.close} limitPeople={this.state.limitPeople}/>
                        }
                        {/*领取砍价神器*/}
                        {
                            this.state.status === 5 &&
                            <Artifact useArtifact={this.useArtifact}/>
                        }
                        {/*使用砍价神器*/}
                        {
                            this.state.status === 6 &&
                            <UseArtifact toCart={this.toCart} money={this.state.amount}
                                         allMoney={this.state.bargainData.bargain_price}/>
                        }

                        {
                            this.state.status !== 7 &&
                            <i onClick={this.close} className={'iconfont iconiconfront-2 bargain-popup__button--close'}></i>
                        }
                        </div>
                    </Overlay>

                }
                {/*</Loading>*/}

            </div>
        );
    }
}

// 课程信息 -- 右侧
function CourseDes(props) {
    const { data: { bargain_status = 0, course = {}, is_originator = 0 }, toCart } = props;
    return (
        <div className={'des'}>
            <div className="course-title text-overflow-2">
                {course.course_title}
            </div>
            <div className="price-bar">
                <span className={'discount-price'}>￥{course.course_price}</span>
                {/* is_originator 是否发起人 0-否 1-是 */}
                {
                    (is_originator == 1 && bargain_status != 3) &&
                    <button className={'purchase-btn'} onClick={toCart}>
                        ¥{course.pay_price}去支付
                    </button>
                }
                {
                    (is_originator == 1 && bargain_status == 3) &&
                    <span className="course-button__buy--done">已购买</span>
                }
            </div>
        </div>
    );
}

function CourseBottom(props) {

    // bargain_status 砍价状态 0-砍价中，1砍价结束，待支付，2砍价过期（没有砍价记录没有砍价信息），3已购买
    const {course_id = '', bargain_status = '', price1 = '', pay_price = '' } = props.item || {};
    const { user: { data = {} } } = props;
    const price = bargain_status === 2? price1 : pay_price;
    let Buttons
    if(data.uid) {
        if (props.item.bargain_status === 2) {
            // Buttons = <Link to={`/detail?id=${props.item.course_id}`} className={'bargain'}>我要砍价</Link>
            Buttons = (
                <div className="">
                    <a onClick={() => props.toDetail(props.item.course_id)} className={'bargain bargian-study'}>我要砍价</a>
                </div>

            )
        } else if (bargain_status === 3) {
            if(course_id === 139) {
                Buttons = (
                    <a
                        onClick={() => props.toDetail(props.item.course_id)}
                        className={'bargain bargian-study'}
                    >我要砍价</a>
                );
            }else {
                Buttons = (
                    <Link
                        to={`/play/video?id=${props.item.v_course_id}`}
                        className={classnames('bargain', 'button--study')}
                    >去学习</Link>
                );
            }
        } else {
            Buttons = (
                <div className="btns">
                    {/*<button className={classnames('bargain-btn', {invalid: props.item.bargain_status === 2})}>*/}
                    {/*{props.item.bargain_status === 2 ? '砍价结束' : '继续砍价'}*/}
                    {/*</button>*/}
                    {
                        bargain_status === 1 &&
                        <button className='invalid'>砍价结束</button>
                    }
                    {
                        bargain_status === 0 &&
                        <a onClick={() => props.toDetail(props.item.course_id)} className={'bargain-btn'}>继续砍价</a>
                    }
                    <button
                        onClick={() => props.toCartBottom(props.item.course_id)}
                        className={'purchase-btn'}
                    >
                        ¥{price}去支付
                    </button>
                </div>
            )
        }

    }else {
        Buttons = (
            <a
                onClick={() => props.toDetail(props.item.course_id)}
                className={'bargain bargian-study'}
            >我要砍价</a>
        );
    }

    return (
        <div className="course-bottom">
            <div className={'course-price'}>
                <span className={'discount-price'}>¥{props.item.price1}</span>
                <span className={'original-price'}>¥{props.item.price0}</span>
            </div>
            {Buttons}
        </div>
    )
}


function PublicNumber(props) {
    return (
        <div className='bargain-public-number'>
            <img className='avait' src={props.avatar} alt="" />
            {
                props.firendBaigainPrice &&
                <p className='status-title ff4'>谢谢你帮我砍了{props.money}元！</p>
            }
            <p className='status-dec'>关注公众号，可以再砍一刀哦~</p>
            <img
                className='public-number-img'
                src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png"
                alt=""
            />
        </div>
    )
}

function BargainFirst(props) {
    return (
        <div className='bargain-first'>
            <img className='top-img' src={require('./image/kanjia_cg_icon.png')} alt=""/>
            <p className='status-title'>谢谢你帮我砍了<span className='ff4'>{props.money}元</span>！</p>
            <p className='status-dec'>你还可以帮我再砍一刀哦~</p>
            <button className='bargain-href' onClick={props.bargainSecond}>再砍一刀</button>
        </div>
    )
}

function BargainSecond(props) {
    return (
        <div className='bargain-second'>
            <img className='top-img' src={require('./image/kanjia_cg_icon.png')} alt=""/>
            <p className='status-title'>厉害了，又帮好友砍掉<span className='ff4'>{props.money}元</span>！</p>
            <a className='bargain-href' href='#bargainCourse' onClick={props.close}>我也要砍价</a>
        </div>
    )
}

function NotBargain(props) {
    return (
        <div className='not-bargain'>
            <img className='middle-img' src={require('./image/kanjia_no_iccon.png')} alt=""/>
            <p className='status-title'>你的好友用【砍价神器】把我砍蒙圈了<br/>不能再砍了哦~</p>
            <p className='status-dec'>邀请{props.limitPeople}位以上好友帮忙砍价可获得【砍价神器】</p>
            <a className='bargain-href' href='#bargainCourse' onClick={props.close}>我也要砍价</a>
        </div>
    )
}

function Artifact(props) {
    return (
        <div className='artifact-box'>
            <p className='top-tip'>恭喜你获得【砍价神器】！</p>
            <p className='middle-tip'>
                您可以使用
                <span className={'indicator'}>【砍价神器】</span>
                再砍一刀
            </p>
            <button className='use-artifact' onClick={props.useArtifact}>立即使用</button>
        </div>
    )
}

function UseArtifact(props) {
    return (
        <div className='use-artifact-box'>
            <img className='top-img' src={require('./image/kanjia_cg_icon.png')} alt=""/>
            <p className='top-tip'>厉害了，又砍掉了{props.money}元！</p>
            <p className='middle-tip'>
                你已经砍了
                <span className={'indicator'}>{props.allMoney}元</span>
                没见过你这么能砍的人...
            </p>
            <p className='btm-tip'>
                不能再砍了哦~
            </p>
            <button className='tubuy' onClick={props.toCart}>去支付</button>
        </div>
    )
}


function BargainSuccess(props) {
    return (
        <div>
            <div className='close-bargain-success' onClick={props.close}></div>

            <div className="bargain-success">
                {
                    props.isshowYindao &&
                    <i className='iconfont iconyindao'></i>
                }
                <p>分享到微信群邀请更多好友帮忙砍价</p>
                <p>超过{props.limitPeople}位好友助力可获得<span className={'indicator'} style={{color: '#FF4000'}}>【砍价神器】</span>哦
                </p>
            </div>
        </div>
    )
}


export default withRouter(BargainMiddlePage);