index.js 32.1 KB
Newer Older
FE committed
1
import React, {Component} from 'react'
zhanghaozhe committed
2
import './bargain-middle-page.scss'
FE committed
3 4
import {HeaderBar, VList} from '@common'
import {Course} from '@common'
FE committed
5
import {api, getParam, http, browser, wxShare} from "@/utils"
FE committed
6 7
import {Toast} from "antd-mobile"
import {Link, withRouter} from "react-router-dom"
xuzhenghua committed
8
import Ranking from './ranking'
FE committed
9
import {differenceInSeconds, differenceInMinutes, differenceInHours, differenceInDays} from "date-fns"
xuzhenghua committed
10
import Overlay from '../detail/overlay'
FE committed
11 12
import {compose} from "redux"
import {connect} from "react-redux";
13
import {getCourses} from './../detail/actions';
14
import classnames from 'classnames';
FE committed
15
import FollowBarcode from './barcode/index';
xuzhenghua committed
16

17 18 19
@connect(state => ({
    user: state.user
}))
xuzhenghua committed
20
class BargainMiddlePage extends Component {
zhanghaozhe committed
21

zhanghaozhe committed
22 23
    timer

xuzhenghua committed
24 25 26
    constructor(props) {
        super(props)
        this.state = {
xuzhenghua committed
27
            isShowOverlay: false,
xuzhenghua committed
28
            isOriginator: '',
xuzhenghua committed
29
            kanjiaIcon: require('./image/kanjia_icon.png'),
FE committed
30
            course: {}, // 当前砍价课程
FE committed
31
            courseList: [],  // 所有砍价课程
xuzhenghua committed
32 33 34 35 36 37
            data: '',
            bargainData: '',
            limitPeople: 0,
            outList: [],
            list: [],
            width: '0',
xuzhenghua committed
38
            isShowMore: '',
FE committed
39
            status: '',
xuzhenghua committed
40 41
            hour: '',
            min: '',
xuzhenghua committed
42 43 44 45 46
            sec: '',
            day: '',
            amount: '',
            firendBaigainPrice: true,
            isshowYindao: false,
FE committed
47 48
            isLoaidng: true,
            imglink: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/',
xuzhenghua committed
49 50 51 52
        }
    }

    componentDidMount() {
xuzhenghua committed
53
        this.getBargainRankList(getParam('id'), 1)
xuzhenghua committed
54 55 56 57
        this.getBargainCourse()
        this.getBargainInfo()
    }

FE committed
58 59 60 61 62 63 64 65 66 67 68
    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()
        }
    }


xuzhenghua committed
69 70
    // 获取砍价信息
    getBargainInfo = () => {
xuzhenghua committed
71

zhanghaozhe committed
72
        http.get(`${API.home}/m/bargain/info?bargaincode=${getParam('bargaincode')}&is_originator=${getParam('is_originator')}`).then((res) => {
xuzhenghua committed
73
            if (res.data.code === 200) {
FE committed
74 75 76 77 78 79 80 81 82
                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 + '%'
xuzhenghua committed
83
                    },
FE committed
84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101
                    () => {
                        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
                                })
zhanghaozhe committed
102

FE committed
103 104
                            }, 1000)
                        }
zhanghaozhe committed
105
                    }
FE committed
106
                )
xuzhenghua committed
107 108 109 110 111 112 113 114
            } else {
                Toast.info(res.data.msg, 2)
            }
        })
    }

    // 获取砍价课程
    getBargainCourse = () => {
zhanghaozhe committed
115
        http.get(`${API.home}/m/bargain/courseList`).then((res) => {
xuzhenghua committed
116 117 118 119 120 121 122 123 124 125 126 127
            if (res.data.code === 200) {
                this.setState({
                    courseList: res.data.data
                })
            } else {
                Toast.info(res.data.msg, 2)
            }
        })
    }

    // 获取助理好友
    getBargainRankList = (id, type) => {
FE committed
128
        const bargain_code = getParam('bargaincode') || '';
xuzhenghua committed
129 130
        let data = {
            courseId: id,
FE committed
131 132
            type: type,
            bargain_code
xuzhenghua committed
133
        }
zhanghaozhe committed
134
        http.post(`${API.home}/m/bargain/rankList`, data).then((res) => {
xuzhenghua committed
135 136 137 138 139 140 141 142 143 144 145 146
            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
                })
FE committed
147
            } else if (res.data.code == 4030 || res.data.code == 4040) {
xuzhenghua committed
148 149 150 151 152 153
            } else {
                Toast.info(res.data.msg, 2)
            }
        })
    }

xuzhenghua committed
154
    // 直接支付
xuzhenghua committed
155
    toCart = () => {
xuzhenghua committed
156 157 158
        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});
xuzhenghua committed
159 160 161 162
            } else {
                Toast.info(res.data.msg, 2);
            }
        })
xuzhenghua committed
163 164 165 166 167 168 169 170 171 172
        // 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);
        //     }
        // })
xuzhenghua committed
173
    }
FE committed
174

xuzhenghua committed
175
    // 我要砍价列表的去支付
FE committed
176
    toCartBottom = (id) => {
xuzhenghua committed
177 178 179
        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});
xuzhenghua committed
180 181 182 183
            } else {
                Toast.info(res.data.msg, 2);
            }
        })
xuzhenghua committed
184 185 186 187 188 189 190
        // 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);
        //     }
        // })
xuzhenghua committed
191
    }
xuzhenghua committed
192 193 194 195 196 197 198

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

xuzhenghua committed
200 201 202 203
    // 自组件传给父组件的boxHide
    boxHide = (val) => {
        this.setState({isShowMore: val})
    }
zhanghaozhe committed
204

xuzhenghua committed
205 206
    // 领取砍价神器
    toArtifact = () => {
FE committed
207
        const { course: { course_id = '' } } = this.state;
xuzhenghua committed
208
        let data = {
FE committed
209
            courseId: getParam('id')? getParam('id') : course_id
xuzhenghua committed
210
        }
zhanghaozhe committed
211
        http.post(`${API.home}/m/bargain/receiveLimit`, data).then((res) => {
xuzhenghua committed
212 213 214 215 216 217 218 219 220 221 222 223 224
            if (res.data.code === 200) {
                this.setState({
                    isShowOverlay: true,
                    status: 5,
                })
            } else {
                Toast.info(res.data.msg, 2)
            }
        })
    }

    // 使用砍价神器
    useArtifact = () => {
FE committed
225 226 227
        const { course: { course_id = '' } } = this.state;
        const id = getParam('id')? getParam('id') : course_id;
        this.toKanjia(id, 2, 0);
xuzhenghua committed
228
    }
zhanghaozhe committed
229

xuzhenghua committed
230 231 232 233 234 235 236
    // 砍价接口
    toKanjia = (id, type, uid) => {
        let data = {
            course_id: id,
            type: type,  // 1 用户自己砍价 2 使用砍价神器 3 好友助力砍价 4 好友第二次助力
            parent_uid: uid // 被助力人id 【自己本人操作传0】
        }
zhanghaozhe committed
237
        http.post(`${API.home}/m/bargain/toBargain`, data).then((res) => {
xuzhenghua committed
238
            if (res.data.code === 200) {
xuzhenghua committed
239 240 241 242
                // is_success =0一切正常 =1 不能在砍了 =2关注公众号,可以再砍一刀!
                this.setState({
                    amount: res.data.data.amount
                })
xuzhenghua committed
243 244 245 246 247 248
                if (type === 2) {
                    this.setState({
                        isShowOverlay: true,
                        status: 6
                    })
                }
xuzhenghua committed
249 250

                if (res.data.data.is_success === 1) {
xuzhenghua committed
251 252
                    this.setState({
                        isShowOverlay: true,
xuzhenghua committed
253
                        status: 4
xuzhenghua committed
254
                    })
xuzhenghua committed
255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279
                } 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
                        })
                    }
xuzhenghua committed
280 281
                }

xuzhenghua committed
282
                this.getBargainInfo()
xuzhenghua committed
283 284


FE committed
285 286 287 288 289 290 291 292 293 294 295 296
            } 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')
                }

xuzhenghua committed
297 298 299 300 301 302 303 304 305
            } else {
                Toast.info(res.data.msg, 2)
            }
        })
    }


    // 帮好友砍价第一刀
    friendBargainFirst = () => {
FE committed
306 307 308
        const { course: { course_id = '' } } = this.state;
        const id = getParam('id')? getParam('id') : course_id;
        this.toKanjia(id, 3, this.state.originatorUid);
xuzhenghua committed
309 310 311 312
    }

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

xuzhenghua committed
318 319 320 321 322 323
    // 邀请好友砍价
    shareFriendBargain = () => {
        this.setState({
            isShowOverlay: true,
            status: 7,
            isshowYindao: browser.isWeixin ? true : false
FE committed
324
        });
FE committed
325 326 327 328 329 330 331

        wxShare({
            title: `我发现一门好课,快来帮我砍价吧!`,
            desc: `我已经砍了${this.state.bargainData.bargain_price}元,看看你能砍多少`,
            link: encodeURI(location.href),
            imgUrl: this.state.course.course_img,
        });
xuzhenghua committed
332
    }
xuzhenghua committed
333 334 335 336 337 338

    // 关闭弹窗
    close = () => {
        this.setState({
            isShowOverlay: false,
            status: '',
FE committed
339
        });
xuzhenghua committed
340 341
    }

342
    toCourseDetail = (id) => {
FE committed
343
        const {dispatch, history} = this.props;
344
        // dispatch(getCourses(id, () => {
FE committed
345 346
        history.push(`/detail?id=${id}`);
        return false;
347
        // }));
348 349
    }

zhanghaozhe committed
350
    render() {
FE committed
351
        // console.log(this.props);
xuzhenghua committed
352 353 354 355 356 357 358 359
        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>
xuzhenghua committed
360
            btn = <button className={'artifact-btn'} onClick={this.toArtifact}>立即领取</button>
xuzhenghua committed
361 362
        } else if (this.state.bargainData.is_artifact === 2) {
            thirdRow = <div>恭喜你获得<span className={'indicator'}>【砍价神器】</span></div>
xuzhenghua committed
363
            btn = <button className={'artifact-btn'} onClick={this.useArtifact}>立即使用</button>
xuzhenghua committed
364 365
        }

FE committed
366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384
        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 {
            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>
            }
xuzhenghua committed
385
        }
FE committed
386 387 388 389 390 391 392 393 394 395 396 397

        // 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>
        // }
zhanghaozhe committed
398 399
        return (
            <div className={'bargain-middle-page'}>
FE committed
400
                <HeaderBar title='砍价详情' arrow={true} cart={true} toHref={'/'}></HeaderBar>
xuzhenghua committed
401
                {/*<Loading isLoading={this.state.isLoaidng}>*/}
zhanghaozhe committed
402 403
                <div className="top">
                    <div className="bargain-area">
xuzhenghua committed
404
                        {
xuzhenghua committed
405
                            this.state.isOriginator !== 1 &&
xuzhenghua committed
406 407 408
                            <p className='bargain-tip'>你的好友发现一门精品课程,快来一起帮他砍价:</p>
                        }

zhanghaozhe committed
409 410
                        <ul>
                            <VList
FE committed
411 412
                                img={this.state.course.course_img}
                                info={
FE committed
413 414 415 416
                                    <CourseDes
                                        isOriginator={this.state.isOriginator}
                                        data={this.state.data}
                                        toCart={this.toCart}/>
FE committed
417
                                }
zhanghaozhe committed
418 419 420 421 422
                            />
                        </ul>
                        <div className="bargain-detail">
                            <div className="top">
                                <div>
xuzhenghua committed
423
                                    已砍<span className={'reduced-price'}>{this.state.bargainData.bargain_price}</span>
zhanghaozhe committed
424
                                </div>
xuzhenghua committed
425 426 427
                                {
                                    this.state.data.bargain_status === 0 &&
                                    <div>
xuzhenghua committed
428 429 430 431 432
                                        <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>
xuzhenghua committed
433 434 435
                                        <span className={'inactive'}> 后砍价结束</span>
                                    </div>
                                }
xuzhenghua committed
436
                                {
xuzhenghua committed
437
                                    this.state.data.bargain_status === 1 && this.state.isOriginator === 1 &&
xuzhenghua committed
438 439
                                    <span className={'inactive'}>砍价结束</span>
                                }
xuzhenghua committed
440

zhanghaozhe committed
441 442
                            </div>
                            <div className="middle">
xuzhenghua committed
443
                                <span style={{width: this.state.width}}></span>
zhanghaozhe committed
444
                            </div>
xuzhenghua committed
445
                            {
xuzhenghua committed
446
                                this.state.isOriginator === 1 && this.state.data.bargain_status === 0 &&
xuzhenghua committed
447
                                <div>
xuzhenghua committed
448 449
                                    {thirdRow}
                                    {btn}
xuzhenghua committed
450 451
                                </div>
                            }
xuzhenghua committed
452 453

                            {
xuzhenghua committed
454
                                this.state.isOriginator === 1 && this.state.data.bargain_status === 1 &&
xuzhenghua committed
455 456
                                <div>
                                    砍价金额将于
xuzhenghua committed
457 458 459 460 461 462
                                    <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>
xuzhenghua committed
463 464 465 466
                                    后清零,请尽快完成支付
                                </div>
                            }

zhanghaozhe committed
467
                            <div className={'button'}>
xuzhenghua committed
468
                                {bargainBtn}
zhanghaozhe committed
469
                            </div>
xuzhenghua committed
470

zhanghaozhe committed
471 472 473 474 475 476
                        </div>
                    </div>
                    <div className="bargain-records">
                        <div className="title">砍价记录</div>
                        <ul>
                            {
xuzhenghua committed
477
                                this.state.outList && this.state.outList.length > 0 && this.state.outList.map((item, index) => {
zhanghaozhe committed
478 479 480
                                    return (
                                        <li key={index}>
                                            <div className="left">
xuzhenghua committed
481 482
                                                <img className='avatar' src={item.avatar_file} alt=""/>
                                                <span className={'nickname'}>{item.user_name}</span>
zhanghaozhe committed
483 484 485
                                                <span className="rank-tag">{item.rank}</span>
                                            </div>
                                            <div className="right">
xuzhenghua committed
486 487
                                                <img className='kanjia-icon' src={this.state.kanjiaIcon} alt=""/>
                                                砍掉<span className={'price'}>{item.amount}</span>
zhanghaozhe committed
488 489 490 491 492 493 494 495
                                            </div>
                                        </li>
                                    )
                                })

                            }

                        </ul>
xuzhenghua committed
496
                        <div className="more" onClick={this.getMore}>查看更多>></div>
zhanghaozhe committed
497 498
                    </div>
                </div>
xuzhenghua committed
499
                <div className="bargain-course-list" id='bargainCourse'>
zhanghaozhe committed
500 501
                    <div className="title-wrapper">
                        <div className="title">我要砍价</div>
xuzhenghua committed
502
                        <div className="subtitle">邀请{this.state.limitPeople}位以上好友帮忙砍价可获得【砍价神器】</div>
zhanghaozhe committed
503 504 505
                    </div>
                    <ul>
                        {
xuzhenghua committed
506
                            this.state.courseList && this.state.courseList.length > 0 && this.state.courseList.map((item, index) => {
zhanghaozhe committed
507
                                return <Course
xuzhenghua committed
508
                                    className={'text-overflow-2'}
zhanghaozhe committed
509
                                    key={index}
xuzhenghua committed
510 511 512
                                    id={item.course_id}
                                    img={item.image_name}
                                    title={item.course_title}
513 514
                                    toDetail={this.toCourseDetail}
                                    bottom={
FE committed
515 516 517 518 519
                                        <CourseBottom
                                            item={item}
                                            toCartBottom={this.toCartBottom.bind(this, item.course_id)}
                                            toDetail={this.toCourseDetail}
                                        />
xuzhenghua committed
520
                                    }
zhanghaozhe committed
521 522 523 524 525
                                />
                            })
                        }
                    </ul>
                </div>
526
                <Link to={'/classify'} className={'preferential'}>查看更多精品课程 >></Link>
xuzhenghua committed
527 528 529


                {/*更多好友砍价*/}
xuzhenghua committed
530 531 532 533 534
                <Ranking list={this.state.list} icon={this.state.kanjiaIcon} limitPeople={this.state.limitPeople}
                         isShowMore={this.state.isShowMore} boxHide={this.boxHide}></Ranking>


                {
FE committed
535
                    this.state.isShowOverlay &&
xuzhenghua committed
536
                    <Overlay>
FE committed
537 538 539
                        <div className="bargain-popup__content">

                        
xuzhenghua committed
540

xuzhenghua committed
541 542 543 544 545 546 547 548
                        {/*砍价成功去分享*/}
                        {
                            this.state.status === 7 &&
                            <BargainSuccess isshowYindao={this.state.isshowYindao} limitPeople={this.state.limitPeople}
                                            close={this.close}/>
                        }


xuzhenghua committed
549
                        {/*引导关注公众号*/}
FE committed
550
                        {/* {
xuzhenghua committed
551
                            this.state.status === 1 &&
xuzhenghua committed
552 553 554 555
                            <PublicNumber
                                money={this.state.amount}
                                avatar={this.props.user.data.avatar}
                                firendBaigainPrice={this.state.firendBaigainPrice}/>
FE committed
556 557 558 559 560 561 562 563
                        } */}
                        {
                            this.state.status === 1 &&
                            <FollowBarcode  
                                userInfo={this.props.user.data}
                                money={this.state.amount}
                                firendBaigainPrice={this.state.firendBaigainPrice}
                            />
xuzhenghua committed
564 565 566 567 568
                        }

                        {/*好友成功砍第一刀*/}
                        {
                            this.state.status === 2 &&
xuzhenghua committed
569 570 571 572
                            <BargainFirst
                                bargainSecond={this.friendBargainSecond}
                                money={this.state.amount}
                            />
xuzhenghua committed
573 574 575 576
                        }
                        {/*好友成功砍第二刀*/}
                        {
                            this.state.status === 3 &&
xuzhenghua committed
577
                            <BargainSecond close={this.close} money={this.state.amount}/>
xuzhenghua committed
578 579 580 581
                        }
                        {/*不能在砍了*/}
                        {
                            this.state.status === 4 &&
xuzhenghua committed
582
                            <NotBargain close={this.close} limitPeople={this.state.limitPeople}/>
xuzhenghua committed
583
                        }
xuzhenghua committed
584 585 586 587 588 589 590 591
                        {/*领取砍价神器*/}
                        {
                            this.state.status === 5 &&
                            <Artifact useArtifact={this.useArtifact}/>
                        }
                        {/*使用砍价神器*/}
                        {
                            this.state.status === 6 &&
xuzhenghua committed
592 593
                            <UseArtifact toCart={this.toCart} money={this.state.amount}
                                         allMoney={this.state.bargainData.bargain_price}/>
xuzhenghua committed
594
                        }
xuzhenghua committed
595 596

                        {
xuzhenghua committed
597
                            this.state.status !== 7 &&
FE committed
598
                            <i onClick={this.close} className={'iconfont iconiconfront-2 bargain-popup__button--close'}></i>
xuzhenghua committed
599
                        }
FE committed
600
                        </div>
xuzhenghua committed
601 602 603
                    </Overlay>

                }
xuzhenghua committed
604
                {/*</Loading>*/}
xuzhenghua committed
605

zhanghaozhe committed
606 607 608 609 610
            </div>
        );
    }
}

FE committed
611
// 课程信息 -- 右侧
xuzhenghua committed
612
function CourseDes(props) {
FE committed
613
    const { data: { bargain_status = 0, course = {}, is_originator = 0 }, toCart } = props;
zhanghaozhe committed
614 615
    return (
        <div className={'des'}>
xuzhenghua committed
616
            <div className="course-title text-overflow-2">
FE committed
617
                {course.course_title}
zhanghaozhe committed
618 619
            </div>
            <div className="price-bar">
FE committed
620 621
                <span className={'discount-price'}>{course.course_price}</span>
                {/* is_originator 是否发起人 0-否 1-是 */}
xuzhenghua committed
622
                {
FE committed
623 624 625
                    (is_originator === 1 && bargain_status !== 3) &&
                    <button className={'purchase-btn'} onClick={toCart}>
                        ¥{course.pay_price}去支付
xuzhenghua committed
626 627
                    </button>
                }
FE committed
628 629 630 631
                {
                    (is_originator === 1 && bargain_status === 3) &&
                    <span className="course-button__buy--done">已购买</span>
                }
zhanghaozhe committed
632 633
            </div>
        </div>
FE committed
634
    );
zhanghaozhe committed
635 636
}

xuzhenghua committed
637
function CourseBottom(props) {
zhanghaozhe committed
638
    let Buttons
xuzhenghua committed
639
    if (props.item.bargain_status === 2) {
640
        // Buttons = <Link to={`/detail?id=${props.item.course_id}`} className={'bargain'}>我要砍价</Link>
xuzhenghua committed
641
        Buttons = <a onClick={() => props.toDetail(props.item.course_id)} className={'bargain bargian-study'}>我要砍价</a>
xuzhenghua committed
642
    } else if (props.item.bargain_status === 3) {
FE committed
643 644
        Buttons = <Link to={`/play/video?id=${props.item.v_course_id}`}
                        className={classnames('bargain', 'button--study')}>去学习</Link>
645 646 647
        if(props.item.course_id === 139) {
            Buttons = <a onClick={() => props.toDetail(props.item.course_id)} className={'bargain bargian-study'}>我要砍价</a>
        }
zhanghaozhe committed
648 649 650
    } else {
        Buttons = (
            <div className="btns">
xuzhenghua committed
651 652 653 654 655 656 657 658 659
                {/*<button className={classnames('bargain-btn', {invalid: props.item.bargain_status === 2})}>*/}
                {/*{props.item.bargain_status === 2 ? '砍价结束' : '继续砍价'}*/}
                {/*</button>*/}
                {
                    props.item.bargain_status === 1 &&
                    <button className='invalid'>砍价结束</button>
                }
                {
                    props.item.bargain_status === 0 &&
xuzhenghua committed
660
                    <a onClick={() => props.toDetail(props.item.course_id)} className={'bargain-btn'}>我要砍价</a>
xuzhenghua committed
661 662 663 664

                }


xuzhenghua committed
665
                <button onClick={() => props.toCartBottom(props.item.course_id)}
xuzhenghua committed
666 667
                        className={'purchase-btn'}>¥{props.item.pay_price}去支付
                </button>
zhanghaozhe committed
668 669 670 671 672 673
            </div>
        )
    }
    return (
        <div className="course-bottom">
            <div className={'course-price'}>
xuzhenghua committed
674 675
                <span className={'discount-price'}>¥{props.item.price1}</span>
                <span className={'original-price'}>¥{props.item.price0}</span>
zhanghaozhe committed
676 677 678 679 680 681
            </div>
            {Buttons}
        </div>
    )
}

xuzhenghua committed
682

xuzhenghua committed
683
function PublicNumber(props) {
xuzhenghua committed
684 685
    return (
        <div className='bargain-public-number'>
FE committed
686
            <img className='avait' src={props.avatar} alt="" />
xuzhenghua committed
687 688 689 690
            {
                props.firendBaigainPrice &&
                <p className='status-title ff4'>谢谢你帮我砍了{props.money}元!</p>
            }
xuzhenghua committed
691
            <p className='status-dec'>关注公众号,可以再砍一刀哦~</p>
FE committed
692 693 694 695 696
            <img 
                className='public-number-img'
                src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" 
                alt=""
            />
xuzhenghua committed
697 698 699 700
        </div>
    )
}

xuzhenghua committed
701
function BargainFirst(props) {
xuzhenghua committed
702 703 704
    return (
        <div className='bargain-first'>
            <img className='top-img' src={require('./image/kanjia_cg_icon.png')} alt=""/>
xuzhenghua committed
705
            <p className='status-title'>谢谢你帮我砍了<span className='ff4'>{props.money}</span>!</p>
xuzhenghua committed
706
            <p className='status-dec'>你还可以帮我再砍一刀哦~</p>
xuzhenghua committed
707
            <button className='bargain-href' onClick={props.bargainSecond}>再砍一刀</button>
xuzhenghua committed
708 709 710 711
        </div>
    )
}

xuzhenghua committed
712
function BargainSecond(props) {
xuzhenghua committed
713 714 715
    return (
        <div className='bargain-second'>
            <img className='top-img' src={require('./image/kanjia_cg_icon.png')} alt=""/>
xuzhenghua committed
716
            <p className='status-title'>厉害了,又帮好友砍掉<span className='ff4'>{props.money}</span>!</p>
FE committed
717
            <a className='bargain-href' href='#bargainCourse' onClick={props.close}>我也要砍价</a>
xuzhenghua committed
718 719 720 721
        </div>
    )
}

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

xuzhenghua committed
733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750
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=""/>
xuzhenghua committed
751
            <p className='top-tip'>厉害了,又砍掉了{props.money}元!</p>
xuzhenghua committed
752 753
            <p className='middle-tip'>
                你已经砍了
xuzhenghua committed
754
                <span className={'indicator'}>{props.allMoney}</span>
xuzhenghua committed
755 756 757 758 759 760 761 762 763 764 765
                没见过你这么能砍的人...
            </p>
            <p className='btm-tip'>
                不能再砍了哦~
            </p>
            <button className='tubuy' onClick={props.toCart}>去支付</button>
        </div>
    )
}


xuzhenghua committed
766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784
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>
    )
}


785
export default withRouter(BargainMiddlePage);