index.js

import React, {Component} from 'react'
import './index.scss'
import Bargain from './bargain'
import Group from './group'
import OutLine from './outline'
import {HeaderBar, CallApp} from '../../common'
import ShareRank from "./shareRank"
import Audition from "./audition"
import Single from "./single"
import SingleSuccess from './single/singleSuccess'
import BtnStatus from "./btnstatus"
import Barrage from './barrage'
import Deposit from './deposit'
import {connect} from "react-redux"
import {getCourses, addCourseToCart} from "./actions"
import {getParam, http, browser, wxShare} from "@/utils"
import {Toast} from 'antd-mobile'
import {bindActionCreators} from "redux"
import {delCountryNum} from './../country/countryRedux'
import {Popup} from "@common/index"
import RedPacket from './redPacket'
import ExpandActiveToast from "../Index/expandActiveToast"
import {UserGift} from "@common"

class Detail extends Component {

    courseId

    constructor(props) {
        super(props)
        this.state = {
            isbuy: 0,
            isvip: 0,
            auditionBox: false,

            singleBox: false,
            singleType: 1,

            shareRank: false,
            singMess: '',
            barInfo: '',
            share: false,
            countdown: '00:00:00',
            outList: [],
            list: [],
            course: {},

            nowPrice: 0,
            laterPrice: 0,
            isPdd: 0, // 是否是拼团课程 控制首次单集购买后的 全集购买 接口： 拼团课程走拼团接口，否则直接走购买接口
            isRedPacket: true,

            countDownTime: '20s',
            isShowChannel: window.sessionStorage.getItem('isShowSiteWindowByChannel'),

            isShowUserGift: false
        }
    }

    componentDidMount() {
        this.fetchCourseInfo()
        const {location: {state = {}}} = this.props
        if (state.oid) {
            this.check(state.oid)
        }
        if (getParam('is_class') === 1 || getParam('weixinpay')) {
            this.payCallback()
        }
        if (browser.isWeixin) {
            this.isweixinPay()
        }

        this.judgeIsRedPacket()

        // 红包链接进入详情也
        if (getParam('share_code')) {
            this.setState({
                isRedPacket: true
            })
        }

        if (getParam('ac') && Number(getParam('ac')) === 11) {
            this.getBorwerCourse()
        }

        this.userStatus()
    }

    componentWillMount() {
        this.showUserGiftFun()
    }

    userStatus = () => {
        http.get(`${API['base-api']}/sys/user/new_user_status`).then((res) => {
            const {errno, data} = res.data
            if (errno === 0) {
                if (data.status == 1) {
                    // 新用户登录之后判断是否是新用户
                    this.setState({
                        isShowUserGift: false
                    })
                    Toast.info('新人大礼包已领取成功！', 2)
                } else {
                    this.setState({
                        isShowUserGift: false
                    })
                }
            }
        })
    }

    showUserGiftFun = () => {
        let newer_last_time = localStorage.getItem('newer_last_time') // 获取用户关闭大礼包的时间
        let now_time = (new Date()).valueOf()
        if (!newer_last_time || now_time - newer_last_time > 86400000) {
            this.setState({
                isShowUserGift: true
            })
        } else {
            this.setState({
                isShowUserGift: false
            })
        }
    }
    close = () => {
        this.setState({
            isShowUserGift: false
        })
        let now_time = (new Date()).valueOf() // 获取当前时间
        localStorage.setItem('newer_last_time', now_time)  // 存储关闭时间
    }
    get_newerModal = () => {
        this.close()
        this.props.history.push('/passport/login')
    }

    getBorwerCourse = () => {
        http.get(`${API.home}/sys/user/blessing`, {type: 4, course_id: getParam('id')}).then(res => {
            let {code, data: {today_browsed_courses}} = res.data
            if (code === 200) {
                let currentCourseId = getParam('id')
                if (today_browsed_courses.includes(Number(currentCourseId))) {
                    this.setState({
                        countDownTime: '任务完成'
                    })
                } else {
                    this.startActivity()
                }
            }
        })
    }

    startActivity = () => {
        let _this = this
        let countDownInterval = setInterval(function () {
            let countDown = parseInt(_this.state.countDownTime)
            countDown--
            if (countDown > 0) {
                _this.setState({
                    countDownTime: countDown + 's'
                })
            } else if (countDown === 0) {
                clearInterval(countDownInterval)
                countDownInterval = null
                http.post(`${API.home}/sys/add/blessing`, {type: 4, course_id: getParam('id')}).then(res => {
                    let {code} = res.data
                    if (code === 200) {
                        _this.setState({
                            countDownTime: '任务完成'
                        })
                    }
                })
            }
        }, 1000)
    }

    // 判断时候未红包课程
    judgeIsRedPacket = () => {
        http.get(`${API.home}/sys/redPacket/showShareActive/${getParam('id')}`).then(res => {
            const {code, data} = res.data
            if (code === 200) {
                this.setState({
                    isRedPacket: data.is_show
                })
            }
        })
    }

    componentDidUpdate(prevProps) {
        if (prevProps.user.hasError !== this.props.user.hasError) {
            this.fetchCourseInfo()
        }
    }

    payCallback = () => {
        const _this = this
        if (!getParam('oid')) {
            return
        } else {
            this.setState({
                singMess: JSON.parse(window.localStorage.getItem('singMess'))
            })
            _this.intervalPayStatus = setInterval(function () {
                http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => {
                    if (res.data.errno === 401) {
                        clearInterval(_this.intervalPayStatus)
                        _this.intervalPayStatus = null
                        // 获取课程类型
                        http.get(`${API['base-api']}/class_order_status/${getParam('oid')}`).then((res) => {
                            if (Number(res.data.data.errno) === 200) {
                                // 正常购买单集成功
                                _this.setState({
                                    singleType: 6,
                                })
                            } else if (Number(res.data.data.errno) === 201) {
                                // 0元参团
                                _this.setState({
                                    singleType: 4,
                                })
                            } else if (Number(res.data.data.errno) === 202) {
                                // 0元购
                                _this.setState({
                                    singleType: 3,
                                })
                            } else if (Number(res.data.data.errno) === 203) {
                                // 三天内特价
                                _this.setState({
                                    nowPrice: res.data.data.data.now_price,
                                    laterPrice: res.data.data.data.three_day_later_price,
                                    singleType: 2,
                                    isPdd: res.data.data.data.is_pdd,
                                })
                            } else {
                                Toast.info(res.data.data.msg, 2)
                            }
                        })
                    }
                })
            }, 1000)
        }
    }
    isweixinPay = () => {
        let _this = this
        let weixin_code = getParam('code')
        if (weixin_code) {
            if (!getParam('oid')) {
                return
            } else {
                // this.props.weixinPay(weixin_code)
                this.setState({
                    singMess: JSON.parse(window.localStorage.getItem('singMess'))
                })
                http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => {
                    if (res.data.errno === 0) {
                        const data = res.data.data

                        function onBridgeReady() {
                            WeixinJSBridge.invoke(
                                'getBrandWCPayRequest', {
                                    "appId": data.appId,                //公众号名称，由商户传入
                                    "timeStamp": data.timeStamp,        //时间戳，自1970年以来的秒数
                                    "nonceStr": data.nonceStr,          //随机串
                                    "package": data.package,
                                    "signType": data.signType,          //微信签名方式：
                                    "paySign": data.paySign             //微信签名
                                },
                                function (res) {
                                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                                        Toast.info('支付成功', 2)
                                        _this.intervalPayStatus = setInterval(function () {
                                            http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => {
                                                if (res.data.errno === 401) {
                                                    clearInterval(_this.intervalPayStatus)
                                                    _this.intervalPayStatus = null
                                                    // 获取课程类型
                                                    http.get(`${API['base-api']}/class_order_status/${getParam('oid')}`).then((res) => {
                                                        if (Number(res.data.data.errno) === 200) {
                                                            // 正常购买单集成功
                                                            _this.setState({
                                                                singleType: 6,
                                                            })
                                                        } else if (Number(res.data.data.errno) === 201) {
                                                            // 0元参团
                                                            _this.setState({
                                                                singleType: 4,
                                                            })
                                                        } else if (Number(res.data.data.errno) === 202) {
                                                            // 0元购
                                                            _this.setState({
                                                                singleType: 3,
                                                            })
                                                        } else if (Number(res.data.data.errno) === 203) {
                                                            // 三天内特价
                                                            _this.setState({
                                                                nowPrice: res.data.data.data.now_price,
                                                                laterPrice: res.data.data.data.three_day_later_price,
                                                                singleType: 2,
                                                                isPdd: res.data.data.data.is_pdd,
                                                            })
                                                        } else {
                                                            Toast.info(res.data.data.msg, 2)
                                                        }
                                                    })
                                                }
                                            })
                                        }, 1000)
                                    } else {
                                        alert('支付失败')
                                    }
                                }
                            )
                        }

                        if (typeof WeixinJSBridge == "undefined") {
                            if (document.addEventListener) {
                                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
                            } else if (document.attachEvent) {
                                document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
                                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
                            }
                        } else {
                            onBridgeReady()
                        }
                    } else {
                        Toast.info(res.data.msg, 2)
                    }
                })
            }
        }
    }

    // 判断支付是否成功
    check = (oid) => {
        this.setState({
            singMess: JSON.parse(window.localStorage.getItem('singMess'))
        })
        http.get(`${API['base-api']}/class_order_status/${oid}`).then((res) => {
            if (Number(res.data.data.errno) === 200) {
                // 正常购买单集成功
                this.setState({
                    singleType: 6
                })
            } else if (Number(res.data.data.errno) === 201) {
                // 0元参团
                this.setState({
                    singleType: 4
                })
            } else if (Number(res.data.data.errno) === 202) {
                // 0元购
                this.setState({
                    singleType: 3
                })
            } else if (Number(res.data.data.errno) === 203) {
                // 三天内特价
                this.setState({
                    nowPrice: res.data.data.data.now_price,
                    laterPrice: res.data.data.data.three_day_later_price,
                    singleType: 2,
                    isPdd: res.data.data.data.is_pdd,

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

    payCallBack = (singleType, nowPrice, laterPrice) => {
        const _this = this
        if (singleType === 2) {
            _this.setState({
                singleType,
                nowPrice,
                laterPrice
            })
        } else {
            _this.setState({
                singleType,
            })
        }
    }
    fetchCourseInfo = () => {
        const id = getParam('id')
        http.get(`${API.home}/m/course/detail/${id}`).then((res) => {
            const {data, code} = res.data
            if (code === 200) {
                if (data['redirect_url'] !== '') {
                    window.location.href = data['redirect_url']
                }
                this.setState({
                    course: data
                })
                if (data.course_info) {
                    const mode = data.course_info.mode

                    if (mode) {
                        const {history} = this.props
                        /*
                        * mode: 课程模式 1集训营2普通小课3就业班4VIP 5AI特训营 6图文小课-python 7图文小课-ML
                        * */
                        const route = {
                            6: 'python',
                            7: 'ml'
                        }
                        if (Object.keys(route).includes(mode)) {
                            history.push(`${route[mode]}?id=${id}`)
                        }
                    }

                    let course_info = data.course_info
                    document.title = `${course_info.course_title} - 七月在线`
                    if (course_info.group_status === 3 || course_info.group_status === 4) {
                        let endTime = course_info.pdd_group_info.groupon_member.end_time
                        if (endTime && endTime > 0) {
                            let date = endTime * 1000,
                                day = 0,
                                hours = 0,
                                minutes = 0,
                                seconds = 0
                            setInterval(() => {
                                date -= 1000
                                if (endTime > 86400) {
                                    day = `${parseInt(date / (3600000 * 24))}`.padStart(2, 0)
                                    hours = `${parseInt((date - day * 3600000 * 24) / 3600000)}`.padStart(2, 0)
                                    minutes = `${parseInt((date - day * 3600000 * 24 - hours * 3600000) / 60000)}`.padStart(2, 0)
                                    // seconds = `${parseInt((date - day * 3600000 * 24 - hours * 3600000 - minutes * 60000) / 1000)}`.padStart(2, 0);

                                    this.setState({
                                        countdown: `${day}:${hours}:${minutes}`
                                    })
                                } else {
                                    hours = `${parseInt(date / (60 * 60 * 1000))}`.padStart(2, 0)
                                    minutes = `${parseInt((date - hours * 3600000) / 60000)}`.padStart(2, 0)
                                    seconds = `${parseInt((date - hours * 3600000 - minutes * 60000) / 1000)}`.padStart(2, 0)
                                    this.setState({
                                        countdown: `${hours}:${minutes}:${seconds}`
                                    })
                                }
                            }, 1000)
                        }
                    }
                    wxShare({
                        title: course_info.course_title,
                        desc: course_info.index_description,
                        link: encodeURI(location.origin + '/detail?id=' + getParam('id')),
                        imgUrl: course_info.image_name
                    })
                }

            }
        })
    }

    // 点击子组件试听按钮
    toAudition = (vCourseId, videoId) => {
        const {user} = this.props
        const uid = user && user.data && user.data.uid
        if (!uid) {
            this.props.history.push('/passport/login')
        } else {
            if (videoId == '' || videoId == 0 || videoId == undefined) {
                return false
            }
            http.post(`${API['base-api']}/sys/get_class_audition?video_id=${videoId}`).then((res) => {
                if (res.data.errno == 200) {
                    this.props.history.push(`/play/video?id=${vCourseId + '&video_id=' + videoId}`)
                } else {
                    Toast.info(res.data.msg, 2)
                }
            })
            // this.setState({
            //     auditionBox: true,
            // })
        }
    }
    // 点击子组件单集购买按钮
    toSingleset = (item) => {
        const {user} = this.props
        const uid = user && user.data && user.data.uid
        if (!uid) {
            this.props.history.push('/passport/login')
        } else {
            this.setState({
                singleBox: true,
                singleType: 1,
                singMess: item
            })
            window.localStorage.setItem('singMess', JSON.stringify(item))
        }
    }

    // 加入购物车 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()
                    this.fetchCourseInfo()
                } 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)
            }
        })
    }

    invitedFriends = () => {
        // const {course_title, image_name, course_id, pdd_group_info, pdd_group_info: {groupon_member, groupon_member: {number}, price}} = this.state.course.course_info;
        // if (browser.isWeixin) {
        //     wxShare({
        //         title: `【仅剩${number}个名额】我${price}元拼了《${course_title}》`,
        //         desc: course_title,
        //         link: location.href,
        //         imgUrl: image_name,
        //     });
        // } else {
        //     Toast.info('请在微信中使用分享功能！', 2);
        // }
        const {history} = this.props
        const {course = {}} = this.state
        if (course.course_info && course.course_info.self_oid) {
            history.push(`/togroup?id=${course.course_info.self_oid}`)
        }
    }

    // 自组件传给父组件的boxHide
    boxHide = (val) => {
        this.setState({
            auditionBox: val,
            singleBox: val,
            singleType: 1
        })
        this.props.history.push(`/detail?id=${getParam('id')}`)
    }

    formatTime = seconds => ({
        d: Math.floor(seconds / 60 / 60 / 24).toString().padStart(2, '0'),
        h: Math.floor(seconds / 60 / 60 % 24).toString().padStart(2, '0'),
        m: Math.floor(seconds / 60 % 60).toString().padStart(2, '0')
    })

    getCourse = (courseId, vCourseId) => {
        const {history} = this.props
        http.post(`${API.home}/sys/limitFree/receive`, {
            course_id: courseId
        })
            .then(res => {
                const {code, msg} = res.data
                if (code === 200) {

                    const instance = Popup({
                        className: 'get-course-popup',
                        closable: false,
                        clickMaskClose: false,
                        title: <div>
                            <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/check.png"
                                 alt=""/>
                            <div>课程有效期7天，快去学习吧~</div>
                        </div>,
                        content: <div className={'btns'}>
                            <button onClick={() => {
                                instance.close()
                                this.fetchCourseInfo()
                            }}>知道了
                            </button>
                            <button onClick={() => {
                                history.push(`/play/video?id=${vCourseId}`)
                                instance.close()
                            }}>立即学习
                            </button>
                        </div>
                    })

                } else {
                    Toast.info(msg, 2, null, false)
                }
            })

    }


    render() {
        const {course: {course_info = {}}, barInfo, singleBox, singleType, isRedPacket, countDownTime} = this.state

        const {d, h, m} = this.formatTime(course_info.limit_free_time)

        let courseInfo = '',
            service = '',
            number = 0,
            endTime = 0
        // if (this.props.courseInfo.course_info) {
        //     courseInfo = this.props.courseInfo.course_info;
        //     service = courseInfo.service;
        if (course_info.group_status === 3 || course_info.group_status === 4) {
            number = course_info.pdd_group_info.groupon_member.number
        }
        // }
        const {share, countdown, list, outList} = this.state
        let href = ''
        const {location: {state = {}}} = this.props
        if (state.to && state.to === 'classify') {
            href = '/classify'
        }
        if (state.oid) {
            href = '/classify'
        }
        if (getParam('dist_code')) {
            href = '/'
        }
        let isCent = course_info.pdd_group_info && course_info.pdd_group_info.price != '0.01'
        return (
            <div>
                {
                    Number(getParam('ac')) === 11 ? (
                        <div className='activity__blessing'>
                            <img src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/count_donw.png'/>
                            <span className='count__down__time'>{`${countDownTime}`}</span>
                        </div>
                    ) : (null)
                }
                <div className='detail-box'>
                    <HeaderBar
                        title='课程详情'
                        arrow={true}
                        cart={true}
                        toHref={href}
                    />

                    <ExpandActiveToast/>


                    {
                        this.state.isShowChannel == 1 &&
                        <CallApp className='toapp' path={`/detail/id=${getParam('id')}`}/>
                    }


                    {/*弹幕*/}
                    <Barrage isShow={course_info.is_show}/>

                    {/*课程*/}
                    <div className='course-content'>
                        <div className='cover'>
                            <img src={course_info.image_name} alt=""/>
                            {
                                course_info.is_aist &&
                                <span className='return_cash'/>
                            }
                        </div>
                        <div className="info">
                            <p className='title'>{course_info.course_title}</p>
                            <p className='contact text-overflow-2'>{course_info.simpledescription}</p>
                            <div className='des'>
                                {
                                    course_info.is_baoming === 0 && !course_info.is_limit_free &&
                                    <p className="course-price">
                                        <span className="new">¥{course_info.price1}</span>
                                        <span className="old">¥{course_info.price0}</span>
                                    </p>
                                }
                                {
                                    !!course_info.is_deposit && course_info.is_deposit != 0 &&
                                    <div className="openExpand">
                                        支付定金￥{course_info.deposit_info.deposit_amount}，可抵扣￥{course_info.deposit_info.deduction_amount}
                                    </div>
                                }
                                {
                                    course_info.is_limit_free
                                        ?
                                        course_info.limit_free_status == 0
                                            ? <div className="limit-free">
                                                <span>限时免费</span>
                                                <span className={'origin-price'}>¥{course_info.price0}</span>
                                            </div>
                                            :
                                            course_info.limit_free_status == 1
                                                ? <div className={'time-limit'}>
                                                    <span>有效期7天，{d}天{h}时{m}分后过期</span>
                                                </div>
                                                : null
                                        : null
                                }
                            </div>
                        </div>
                    </div>

                    {/*正常课程已购买时显示*/}

                    {/*
                    没有权限：不显示
                    vip及赠课：显示黄的
                    不在vip范围内，单独购买：显示蓝的
                    单独买了课然后买了vip：显示蓝的

                    vip_range是vip里买的课，而且买了vip才会返回时间
                    is_pay 1是单独购买 0是买vip赠的
                    is_vip 1是属于vip赠的 0是不在vip范围内的
                    */}
                    {
                        !(course_info.is_limit_free && course_info.limit_free_status == 1) && course_info.is_baoming === 1 && course_info.is_pay == 1 && course_info.contact_type == 1 && course_info.course_qq &&
                        <div className='group'>
                            上课QQ群：{course_info.course_qq}，加群请备注您的学号：{course_info.uid}
                        </div>
                    }
                    {
                        !(course_info.is_limit_free && course_info.limit_free_status == 1) && course_info.is_baoming === 1 && course_info.is_pay == 1 && course_info.contact_type == 2 && course_info.course_qq &&
                        <div className='group'>
                            请添加班主任微信：{course_info.course_qq}，添加时备注学号：{course_info.uid}
                        </div>
                    }


                    {/*vip课程显示*/}
                    {
                        course_info.vip_range && course_info.is_vip == 1 && course_info.is_pay == 0 && course_info.contact_type == 1 && course_info.course_qq &&
                        <div className="vip">
                            <p>已开通年会员：{course_info.vip_range}</p>
                            <p>上课QQ群：{course_info.course_qq}，加群请备注您的学号：{course_info.uid}</p>
                        </div>
                    }
                    {
                        course_info.vip_range && course_info.is_vip == 1 && course_info.is_pay == 0 && course_info.contact_type == 2 && course_info.course_qq &&
                        <div className="vip">
                            <p>已开通年会员：{course_info.vip_range}</p>
                            <p>请添加班主任微信：{course_info.course_qq}，添加时备注学号：{course_info.uid}</p>
                        </div>
                    }


                    {/*定金相关信息*/}
                    {
                        !!course_info.is_deposit && course_info.is_deposit != 0 &&
                        <Deposit courseInfo={course_info}/>
                    }


                    {/*服务承诺*/}
                    <div className='promise'>
                        <label>服务承诺</label>
                        <p>
                            {
                                course_info.service && course_info.service.length > 0 && course_info.service.map((item, index) => {
                                    return (
                                        <span key={index}> {item} </span>
                                    )
                                })
                            }
                        </p>
                    </div>


                    {/*试听弹窗*/}
                    <Audition auditionBox={this.state.auditionBox} boxHide={this.boxHide}/>

                    {/*单集购买弹窗*/}
                    {
                        singleBox &&
                        <Single
                            singleType={this.state.singleType}
                            singleBox={this.state.singleBox}
                            boxHide={this.boxHide}
                            data={this.state.singMess}
                            vcourseId={course_info.v_course_id}
                            videoId={this.state.singMess.video_id}
                            title={course_info.course_title}
                            check={this.check}
                            courseId={course_info.course_id}
                        />
                    }

                    {/* 单集购买成功弹窗 */}
                    {
                        singleType !== 1 &&
                        <SingleSuccess
                            boxHide={this.boxHide}
                            data={this.state.singMess}
                            singleType={singleType}
                            vcourseId={course_info.v_course_id}
                            videoId={this.state.singMess.video_id}
                            nowPrice={this.state.nowPrice}
                            isPdd={this.state.isPdd}
                            laterPrice={this.state.laterPrice}
                            courseId={course_info.course_id}
                        />
                    }
                    {/*payCallback={this.payCallback}*/}
                    {/*weixinPay = {this.weixinPay}*/}

                    {/* 红包 */}
                    {
                        isRedPacket &&
                        <RedPacket
                            history={this.props.history}
                            country={this.props.country}
                            delCountryNum={this.props.delCountryNum}
                            userInfo={this.props.user.data}
                        />
                    }

                    {/*分享赚钱*/}
                    {
                        course_info.is_dist &&
                        <ShareRank courseInfo={course_info}/>
                    }

                    {/**
                     * 拼团
                     * is_aist: 是否AI特训营
                     * group_status: 团状态，3：课程有小团 用户没参加小团；4：用户参加了小团
                     * 拼团价格为1分钱时，不允许参团
                     */
                    }
                    {/*双十一期间不需要显示 不要删除*/}
                    {
                        isCent && !course_info.is_aist && (course_info.group_status === 3 || course_info.group_status === 4) &&
                        <Group
                            courseInfo={course_info}
                            history={this.props.history}
                            countdown={countdown}
                            invitedFriends={this.invitedFriends}
                        />
                    }

                    {/*
                      * 砍价
                      * is_baoming 否报名 0-未购买弹出报名 1-已购买弹出开始学习
                      * is_dist 是否分销课程
                      * is_bargain 是否砍价课程
                      */}
                    {
                        course_info.is_baoming === 0 && (!course_info.is_aist) && course_info.is_bargain &&
                        <Bargain
                            country={this.props.country}
                            delCountryNum={this.props.delCountryNum}
                        />
                    }

                    {/*课程介绍、大纲*/}
                    <OutLine
                        data={course_info}
                        toAudition={this.toAudition}
                        toSingleset={this.toSingleset}
                    />

                    {/*课程按钮*/}
                    {
                        course_info &&
                        <BtnStatus
                            country={this.props.country}
                            countdown={countdown}
                            data={course_info}
                            user={this.props.user}
                            invitedFriends={this.invitedFriends}
                            getCourse={this.getCourse}
                            // addCourseToCart={this.props.addCourseToCart}
                            toCart={this.toCart}
                            history={this.props.history}
                        />
                    }

                    {
                        share ? (
                            <div
                                className='groupSuccessMbc'
                                onClick={() => {
                                    this.setState({share: false})
                                }}
                            >
                                <div className='tipContent'>
                                    {`还差${number}人，分享到3个群，成团率高达98%`}
                                </div>
                                <div className='tipArrow'>
                                    <i className='iconfont iconyindao'/>
                                </div>
                            </div>
                        ) : null
                    }
                </div>

                {
                    this.state.isShowUserGift &&
                    <UserGift close={this.close} get_newerModal={this.get_newerModal}/>
                }
            </div>
        )
    }

}

const mapStateToProps = (state) => {
    return {
        // courseInfo: state.courseInfo,
        user: {
            ...state.user
        },
        country: state.country
    }
}

// const mapDispatchToProps = {
//     fetchCoursesListIfNeeded
// }
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators(
        {
            getCourses,
            addCourseToCart,
            delCountryNum
        },
        dispatch
    )
}


export default connect(mapStateToProps, mapDispatchToProps)(Detail)