index.js 18.4 KB
Newer Older
zhanghaozhe committed
1 2 3 4 5 6
import React, { Component } from 'react'
import { getParam, http } from "@/utils"
import { Toast } from 'antd-mobile'
import { Link } from 'react-router-dom'
import { getCourses } from "@/components/detail/actions"
import { connect } from "react-redux"
xuzhenghua committed
7
import './index.scss'
xuzhenghua committed
8
import Overlay from '../overlay'
xuzhenghua committed
9 10 11 12 13 14


class BtnStatus extends Component {
    constructor(props) {
        super(props)
        this.state = {
xuzhenghua committed
15
            isbuy: 1,
16 17 18
            is_baoming: 0,
            group_status: 3,
            in_cart: false,
wangshuo committed
19
            countdown: 0,
20
            barInfo: {}
xuzhenghua committed
21
        }
22

xuzhenghua committed
23 24
    }

xuzhenghua committed
25
    componentDidMount() {
26
        // this.getBargainInfo()
27
        this.group = false;
xuzhenghua committed
28 29 30 31 32 33 34 35 36 37 38 39 40
    }


    // componentDidUpdate(prevProps) {
    //     let {courseInfo} = this.props
    //     let {courseInfo: prevCourseInfo} = prevProps
    //     if (courseInfo && courseInfo.is_bargain) {
    //         if (prevCourseInfo && courseInfo.is_bargain !== prevCourseInfo.is_bargain) {
    //             this.getBargainInfo()
    //         }
    //     }
    // }

41
    componentWillReceiveProps(nextProps) {
42
        const { data = {}, user = {}} = nextProps;
43
        if(data.is_bargain && user.data && user.data.uid) {
44 45
            this.getBargainInfo();
        }
46 47 48
        // if(nextProps.data && nextProps.data.is_bargain) {
        //     this.getBargainInfo()
        // }
49
        this.setState({
FE committed
50
            courseInfo: data,
wangshuo committed
51
            countdown: nextProps.countdown,
52 53 54
        });
    }

FE committed
55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
    // // 加入购物车 type:1 加入购物车,2加入购物车并跳转到购物车页面去支付
    // toCart = (type) => {
    //     const { history, addCourseToCart } = this.props;
    //     let data = {
    //         course_id: getParam('id')
    //     };
    //     http.post(`${API.home}/m/cart/add`, data).then((res) => {
    //         if (res.data.code === 200) {
    //             if (type === 1) {
    //                 Toast.info('已加入购物车', 2)
    //                 // this.props.getCourses()
    //                 // document.location.reload()
    //                 addCourseToCart();
    //             } else {
    //                 history.replace('/shopcart');ß
    //             }
    //         } else if (res.data.code === 15001) {
    //             history.replace('/shopcart');
    //         } else if (res.data.code === 4030) {
    //             history.replace('/passport');
    //         } else {
    //             Toast.info(res.data.msg, 2);
    //         }
    //     })
    // };
80 81 82 83 84 85
    // 返现课程的立即购买
    signUpNow = () => {
        if(this.props.user.hasError) {
            // 未登录 去登陆
            this.props.history.push('/passport');
        }else{
wangshuo committed
86
            let cidArr = JSON.stringify([Number(getParam('id'))]);
87
            http.get(`${API['base-api']}/m/cart/addtopreorder/${cidArr}?type=1`).then((res) => {
wangshuo committed
88
                if (res.data.errno === 0) {
89
                    this.props.history.push("/order?id=" + res.data.data[0], {type: 1});
90 91 92 93 94 95
                } else {
                    Toast.info(res.data.msg, 2);
                }
            })
        }
    };
wangshuo committed
96 97
    // 普通课程的立即报名 要模拟结算过程
    simpleCourse = () => {
98 99 100 101 102 103
        if(this.props.user.hasError) {
            // 未登录 去登陆
            this.props.history.push('/passport');
        }else{
            http.get(`${API['base-api']}/m/cart/addtopreorder/[${getParam('id')}]`).then((res) => {
                if (res.data.errno === 0) {
wangshuo committed
104
                    this.props.history.push(`/order?id=${getParam('id')}`, {simple: 1})
105 106 107 108 109
                } else {
                    Toast.info(res.data.msg, 2);
                }
            })
        }
wangshuo committed
110
    };
111 112 113 114 115
    // 格式化开课时间
    formatDate = (date) => {
        let ary = date.split('-');
        return `${ary[1]}${ary[2]}日开课`;
    };
xuzhenghua committed
116 117
    // 直接购买
    tobuy = () => {
118 119
        const {user} = this.props;
        const {barInfo} = this.state;
xuzhenghua committed
120 121 122
        const uid = user && user.data && user.data.uid
        if (!uid) {
            this.props.history.push('/passport/login')
xuzhenghua committed
123
        } else {
124
            if (barInfo.bargain_status === 2) {
125 126 127
                // this.toCart(2)
                // 新需求 不需要加入购物车 直接走普通课程的立即报名流程 跳到订单页
                this.simpleCourse();
xuzhenghua committed
128 129 130 131 132 133 134
            } else {
                // 取消砍价记录
                this.setState({
                    isShowOverlay: true,
                    bargainStatus: 1,
                })
            }
xuzhenghua committed
135
        }
136
    };
137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153
    // 一键开团
    keyToGroup = () => {
        if(this.props.user.hasError) {
            // 未登录 去登陆
            this.props.history.push('/passport');
            return;
        }
        this.props.history.push(`/order?id=${getParam('id')}`, {group: 1})
    };
    // 砍完价去支付
    bargainToOrder = () => {
        if(this.props.user.hasError) {
            // 未登录 去登陆
            this.props.history.push('/passport');
        }else{
            http.get(`${API['base-api']}/m/cart/addtopreorder/[${getParam('id')}]`).then((res) => {
                if (res.data.errno === 0) {
wangshuo committed
154
                    this.props.history.push(`/order?id=[${getParam('id')}]`, {bargain: 1});
155 156 157 158 159 160
                } else {
                    Toast.info(res.data.msg, 2);
                }
            })
        }
    };
xuzhenghua committed
161

xuzhenghua committed
162 163 164 165 166
    // 取消砍价
    cancel = () => {
        let data = {
            courseId: getParam('id')
        }
zhanghaozhe committed
167
        http.post(`${API.home}/m/bargain/cancel`, data).then((res) => {
xuzhenghua committed
168 169 170 171 172
            if (res.data.code === 200) {
                this.setState({
                    isShowOverlay: false,
                    bargainStatus: '',
                })
173 174 175 176 177 178 179
                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')}]`, {simple: 1});
                    } else {
                        Toast.info(res.data.msg, 2);
                    }
                })
180
                // window.location.href = '/shopcart'
181
                // this.props.history.push(`/order?id=[${getParam('id')}]`, {simple: 1})
xuzhenghua committed
182 183 184 185 186 187 188 189 190 191 192 193 194
            } else {
                Toast.info(res.data.msg, 2)
            }
        })
    }
    close = () => {
        this.setState({
            isShowOverlay: false,
            bargainStatus: '',
        })
    }
    // 砍价接口
    toKanjia = () => {
FE committed
195 196 197
        const {user, history} = this.props;
        const uid = user && user.data && user.data.uid;
        const course_id = getParam('id');
xuzhenghua committed
198 199 200 201
        if (!uid) {
            this.props.history.push('/passport/login')
        } else {
            let data = {
FE committed
202
                course_id,
xuzhenghua committed
203 204 205
                type: 1,  // 1 用户自己砍价 2 使用砍价神器 3 好友助力砍价 4 好友第二次助力
                parent_uid: 0 // 被助力人id 【自己本人操作传0】
            }
206
            http.post(`${API.home}/m/bargain/toBargain`, data).then((res) => {
207
                const {data, code, msg} = res.data;
FE committed
208 209
                if (code === 200) {
                    history.push(`/bargain-middle-page?id=${course_id}&bargaincode=${data.bargain_code}&is_originator=1`)
xuzhenghua committed
210
                } else {
FE committed
211
                    Toast.info(msg, 2)
xuzhenghua committed
212 213 214 215 216
                }
            })
        }
    }

xuzhenghua committed
217 218 219 220 221 222 223 224 225 226
    // 开始学习
    toStudy=(vCourseId,isHaveVideo)=>{
        const { history } = this.props;
        if(isHaveVideo == 0){
            Toast.info('尚未开课,开课后立即上传课程~', 2)
        } else {
            history.push(`/play/video?id=${vCourseId}`)
        }
    }

xuzhenghua committed
227 228 229 230 231

    //获取砍价信息
    getBargainInfo = () => {
        const {user} = this.props
        const uid = user && user.data && user.data.uid
xuzhenghua committed
232
        let data = {
xuzhenghua committed
233
            courseId: getParam('id')
xuzhenghua committed
234
        }
wangshuo committed
235
        http.post(`${API.home}/m/bargain/courseDetail`, data).then((res) => {
xuzhenghua committed
236
            if (res.data.code === 200) {
xuzhenghua committed
237 238 239
                this.setState({
                    barInfo: res.data.data
                })
xuzhenghua committed
240 241 242 243 244
            } else {
                Toast.info(res.data.msg, 2)
            }
        })
    }
xuzhenghua committed
245

xuzhenghua committed
246 247 248 249 250 251 252 253 254 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 280
    // 付定金 付尾款
    expandPay = (info,type)=>{
        // type 等于1是定金 等于2是尾款
        const {user, history} = this.props;
        const uid = user && user.data && user.data.uid;
        if (!uid) {
            this.props.history.push('/passport/login')
        } else {
            if(type == 1){
                this.props.history.push(
                    `/deposit-order?oid=${getParam('id')}&source=${1}`,
                    {
                        id: getParam('id'),
                        isexpand: 1,
                        sourcenum: 1
                    }
                )
            } else {
                let timeStamp = Date.parse(new Date()) / 1000;
                if (timeStamp >= info.start_timestamp) {
                    this.props.history.push(
                        '/final-deposit-order?source=1',
                        {
                            id: getParam('id'),
                            sourcenum: 1

                        }
                    )
                } else {
                    Toast.info("付尾款时间将在" + info.final_start_time + "开启",2);
                }
            }
        }
    }

xuzhenghua committed
281
    render() {
282
        // data 课程信息;barInfo 砍价信息
FE committed
283 284
        const { user = {}, toCart } = this.props;
        const { countdown ,barInfo, courseInfo: info = {}} = this.state;
285
        const uid = user.data && user.data.uid;
xuzhenghua committed
286 287 288 289
        return (
            <div>
                {/*正常购买*/}
                {
xuzhenghua committed
290
                    info.is_baoming === 0 && info.group_status !== 3 &&
xuzhenghua committed
291
                    <div className='btns-box'>
xuzhenghua committed
292
                        <a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
xuzhenghua committed
293 294
                            <i className='iconfont iconerji'></i>
                            <span>课程咨询</span>
xuzhenghua committed
295
                        </a>
xuzhenghua committed
296 297 298 299 300 301
                        {
                            info.in_cart &&
                            <Link to='/shopcart' className='btn btn-s bg-FCCD05'>去购物车结算</Link>
                        }
                        {
                            !info.in_cart &&
FE committed
302
                            <button className='btn btn-s bg-FCCD05' onClick={e => toCart(1)}>加入购物车</button>
xuzhenghua committed
303 304

                        }
wangshuo committed
305
                        <span className='btn btn-s bg-FD7700' onClick={e => this.simpleCourse()}>立即报名</span>
xuzhenghua committed
306 307 308
                    </div>
                }

xuzhenghua committed
309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324
                {/* 定金课程 is_deposit 是否定金课程 0-否 1-付定金 2-付尾款*/}
                {
                    info.is_baoming === 0 && info.is_deposit != 0  &&
                    <div className='btns-box'>
                        <a className='consult consult-m' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
                            <i className='iconfont iconerji' />
                            <span>课程咨询</span>
                        </a>
                        <div className='btn btn-m bg-FD7700' onClick={()=>this.expandPay(info.deposit_info,info.is_deposit)}>
                            {info.is_deposit == 1 ? '立即付定金':'立即付尾款'}
                        </div>
                    </div>
                }



xuzhenghua committed
325 326
                {/*已购买*/}
                {
xuzhenghua committed
327
                    info.is_baoming === 1 &&
xuzhenghua committed
328
                    <div className='btns-box'>
xuzhenghua committed
329
                        <a className='consult consult-m' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
wangshuo committed
330
                            <i className='iconfont iconerji' />
xuzhenghua committed
331
                            <span>课程咨询</span>
xuzhenghua committed
332 333 334 335
                        </a>
                        <a className='btn btn-m bg-09f' onClick={() => this.toStudy(info.v_course_id,info.is_have_video)}>
                            开始学习
                        </a>
xuzhenghua committed
336 337 338 339
                    </div>
                }
                {/*拼团 未开团*/}
                {
340
                    info.is_baoming === 0 && info.group_status === 3 &&
xuzhenghua committed
341
                    <div className='btns-box'>
xuzhenghua committed
342
                        <a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
xuzhenghua committed
343 344
                            <i className='iconfont iconerji'></i>
                            <span>课程咨询</span>
xuzhenghua committed
345
                        </a>
346
                        <button className='btn btn-s bg-F4AAA7' onClick={this.simpleCourse}>
xuzhenghua committed
347 348 349 350
                            <span>{${info.price1}`}</span>
                            <span>直接购买</span>
                        </button>
                        <button className='btn btn-s bg-E02E24'>
351
                            <span onClick={this.keyToGroup}>
xuzhenghua committed
352 353
                                <span>{${info.pdd_group_info.price}`}</span>
                                <span>一键开团</span>
354
                            </span>
xuzhenghua committed
355 356
                        </button>
                    </div>
357

xuzhenghua committed
358 359 360
                }
                {/*拼团 已开团*/}
                {
361
                    info.is_baoming === 0 && info.group_status === 4 &&
xuzhenghua committed
362
                    <div className='btns-box'>
xuzhenghua committed
363
                        <a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
xuzhenghua committed
364 365
                            <i className='iconfont iconerji'></i>
                            <span>课程咨询</span>
xuzhenghua committed
366
                        </a>
367
                        <div className='btn btn-l bg-E02E24' onClick={this.props.invitedFriends}>
wangshuo committed
368
                            邀请好友参团 {countdown} 后结束
369
                        </div>
xuzhenghua committed
370 371 372 373 374
                    </div>
                }

                {/*砍价*/}
                {
375
                    info.is_baoming === 0 && this.props.data && this.props.data.is_bargain &&
xuzhenghua committed
376
                    <div className='btns-box'>
xuzhenghua committed
377
                        <a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
xuzhenghua committed
378 379
                            <i className='iconfont iconerji'></i>
                            <span>课程咨询</span>
xuzhenghua committed
380
                        </a>
xuzhenghua committed
381
                        <button className='btn btn-s bg-F4AAA7'>
xuzhenghua committed
382
                            <span>¥{info.price1}</span>
xuzhenghua committed
383
                            <span onClick={this.tobuy}>直接购买</span>
xuzhenghua committed
384 385
                        </button>
                        {
FE committed
386
                            (barInfo.bargain_status === 2|| (getParam('id') === '139' && barInfo.bargain_status === 3) || !uid) &&
xuzhenghua committed
387
                            <button className='btn btn-s bg-E02E24' onClick={this.toKanjia}>
xuzhenghua committed
388 389 390 391
                                我要砍价
                            </button>
                        }
                        {
392
                            (barInfo.bargain_status === 0 || barInfo.bargain_status === 1) && (uid) &&
xuzhenghua committed
393
                            <button className='btn btn-s bg-E02E24'>
394
                                <span>¥{barInfo.amount}</span>
395
                                <span onClick={this.bargainToOrder}>去支付</span>
xuzhenghua committed
396 397 398 399 400 401 402
                            </button>
                        }
                    </div>
                }

                {/*特殊课程*/}
                {
xuzhenghua committed
403
                    this.state.isbuy === 20 &&
xuzhenghua committed
404
                    <div className='btns-box'>
xuzhenghua committed
405
                        <a className='consult-l' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
xuzhenghua committed
406 407
                            <i className='iconfont iconerji'></i>
                            <span>课程咨询</span>
xuzhenghua committed
408
                        </a>
xuzhenghua committed
409 410
                    </div>
                }
xuzhenghua committed
411

412 413 414 415
                {/*特训营课程 未登录 未报名*/}
                {
                    (info.is_aist && (this.props.user.hasError || info.is_baoming === 0)) &&
                    <div className='btns-box'>
xuzhenghua committed
416
                        <a className='consult consult-m' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
417 418
                            <i className='iconfont iconerji'></i>
                            <span>课程咨询</span>
xuzhenghua committed
419
                        </a>
420 421 422 423 424 425 426 427

                        <button className='btn sign-up-now' onClick={e => this.signUpNow()}>
                            <span>立即报名</span>
                        </button>
                    </div>
                }
                {/*特训营课程 登陆且已报名*/}
                {
wangshuo committed
428
                    info.is_aist && !this.props.user.hasError && info.is_baoming === 1 &&
429
                    <div className='btns-box'>
xuzhenghua committed
430
                        <a className='consult consult-m' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
431 432
                            <i className='iconfont iconerji'></i>
                            <span>课程咨询</span>
xuzhenghua committed
433
                        </a>
434 435 436 437

                        {
                            info.aist_start_time === "" ?
                                (
xuzhenghua committed
438
                                    <a className='btn btn-m bg-09f' onClick={() => this.toStudy(info.v_course_id,info.is_have_video)}>开始学习</a>
439 440 441 442 443 444 445 446 447
                                ) : (
                                    <button className='btn btn-m wait-open' >
                                        <span>{this.formatDate(info.aist_start_time)}</span>
                                    </button>
                                )
                        }
                    </div>
                }

xuzhenghua committed
448 449 450 451 452 453 454 455 456 457 458 459 460 461

                {
                    this.state.isShowOverlay &&
                    <Overlay>
                        {/*引导关注公众号*/}
                        {
                            this.state.bargainStatus === 1 &&
                            <CancelBargain close={this.close} cancel={this.cancel}/>
                        }

                        <i onClick={this.close} className={'iconfont iconiconfront-2 bargain-close'}></i>
                    </Overlay>

                }
xuzhenghua committed
462 463 464 465 466
            </div>
        )
    }
}

xuzhenghua committed
467 468 469 470 471 472 473 474 475 476 477 478 479 480

function CancelBargain(props) {
    return (
        <div className='cancel-bargain'>
            <p className='top-img'><i className='iconfont icondanseshixintubiao-8'></i></p>
            <p className='tip-mess'>您已发起砍价,直接购买将清除已砍金额。直接购买可使用优惠券~</p>
            <div className="btns">
                <button onClick={props.close}>取消</button>
                <button onClick={props.cancel}>确定</button>
            </div>
        </div>
    )
}

xuzhenghua committed
481
export default connect(
xuzhenghua committed
482 483 484
    state => ({
        user: state.user
    }),
xuzhenghua committed
485
    {getCourses}
xuzhenghua committed
486
)(BtnStatus)