index.js

import React, {Component} from 'react'
import './index.scss'
import Description from './Description/index.js'
import NoWorry from './NoWorry/index.js'
import Study from './Study/index.js'
import Test from './Test/index.js'
import Team from './Team/index.js'
import Experience from './Experience/index.js'
import Progream from './Progream/index.js'
import Mask from './../poup/index.js'
import {http, getParam, SendMessageToApp,} from '@/utils'
import {connect} from 'react-redux'
import {Toast} from "antd-mobile"
import ShareRank from "@components/detail/shareRank"

@connect(state => ({
    user: state.user
}))
class PythonDes extends Component {
    constructor(props) {
        super(props)
        this.state = {
            syllabus: [], // 阶梯学习
            allSyllabus: [], // 阶梯学习
            allSyllabusShow: false,
            practice: [], // 课后实操
            allPractice: [], // 课后实操
            allPracticeShow: false,
            toApp: false,
            defineList: [
                {
                    titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/trophy.png',
                    title: '排名第1的编程语言',
                    subTitle: '2018世界编程语言排行榜中，Python排名第1',
                    subWidth: '180px',
                    bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/program_lan.png',
                    desInfo: {
                        width: '240px',
                        height: '170px',
                    }
                },
                {
                    titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/kaifa.png',
                    title: '开发快速、简单易掌握',
                    subTitle: '严谨的代码编写格式，语法格式简单易理解完成一个相同的任务',
                    subWidth: '260px',
                    bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/kuaisu.png',
                    desInfo: {
                        width: '212px',
                        height: '106px',
                    }
                },
                {
                    titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/lingyu.png',
                    title: '适用领域广',
                    subTitle: 'Python工程师可从事多领域编程工作，人才年需求增长6倍',
                    subWidth: '230px',
                    bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/jiandan.png',
                    desInfo: {
                        width: '234px',
                        height: '106px',
                    }
                }
            ],
            desList: [
                {
                    url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/xingshi.png',
                    title: '全新课程形式',
                    subTitle: '对话式交互教学，轻松、生动、不无聊'
                },
                {
                    url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/huanjing.png',
                    title: '在线编程环境',
                    subTitle: '无需安装任何编程软件'
                },
                {
                    url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/rumen.png',
                    title: '17天零基础入门',
                    subTitle: '降低学习门槛，17天入门人工智能'
                },
            ],
            worryList: [
                {
                    url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/jiechu.png',
                    title: '初次接触，担心学不会',
                    subTitle: '本课程专门为零基础的你打造，全篇通过最白话沟通交流的方式进行讲解，无论你有无编程经验都可以轻松理解并且掌握。'
                },
                {
                    url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/xuexi.png',
                    title: '想学习，没有坚持下来',
                    subTitle: '以故事性的方式编写学习内容， 把生硬的知识点有趣化。精美的图片+幽默的文字+代码编写让你越学越想学。'
                },
                {
                    url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhishidian.png',
                    title: '知识点掌握了，不知如何运用',
                    subTitle: '每节课的知识点都设有代码编写部分，每节课课后都有课后实操。有多次代码编写练习的机会，助你真正学以致用。'
                },
            ],
            payMoney: 0,
            isOnline: true, //课程是否上架
            courseInfo: {},
        }
    }

    // 立即报名
    signUp = () => {
        // 已登录
        if (!this.props.user.hasError) {
            this.toDetail()
        } else {// 未登录
            this.toLogin()
        }
    }

    // 立即体验、免费试学
    tryLearn = () => {
        // 已登录
        if (!this.props.user.hasError) {
            this.toLearn()
        } else {// 未登录
            this.toLogin()
        }
    }

    toLearn = () => {
        const {backwardVersion} = this.props;
        http.post(`${API['home']}/m/it/user/trialCourse`, {course_id: getParam('id')}).then((res) => {
            const {code, msg} = res.data
            if (code == 200) {
                if (!getParam('version')) { // H5
                    this.setState({
                        toApp: true
                    })
                } else { // APP
                    if(backwardVersion) {
                        Toast.info('当前版本不支持该课程模式，请升级到最新版本或前往PC端体验', 2)
                    } else {
                        SendMessageToApp("toLearn", getParam('id'))
                    }
                }
            } else {
                Toast.info(msg, 2)
            }
        })
    }

    closePop = () => {
        this.setState({
            toApp: false
        })
    }

    toDetail = () => {
        const {backwardVersion} = this.props;
        const id = getParam('id')
        if (!getParam('version')) { // H5
            http.get(`${API['base-api']}/m/cart/addtopreorder/[${id}]`).then((res) => {
                if (res.data.errno === 0) {
                    this.props.history.push(`/order?id=${id}`, {simple: 1})
                } else {
                    Toast.info(res.data.msg, 2)
                }
            })
        } else { // APP
            if(backwardVersion) {
                Toast.info('当前版本不支持该课程模式，请升级到最新版本或前往PC端购买', 2);
                let onlyoneUse = setTimeout(() => {
                    clearTimeout(onlyoneUse);
                    onlyoneUse = null;
                    SendMessageToApp('toPay', id)
                }, 2000); 
            } else {
                SendMessageToApp('toPay', id)
            }
        }
    }

    toLogin = () => {
        if (!getParam('version')) { // H5
            this.props.history.push('/passport')
        } else { // APP
            SendMessageToApp("toLogin")
        }
    }

    showAll = (key) => {
        if (key === 1) {
            this.setState({
                syllabus: this.state.allSyllabus,
                allSyllabusShow: true,
            })
        }
        if (key === 2) {
            this.setState({
                practice: this.state.allPractice,
                allPracticeShow: true,
            })
        }
    }
    hideSome = (key) => {
        if (key === 1) {
            this.setState({
                syllabus: this.state.allSyllabus.slice(0, 2),
                allSyllabusShow: false,
            })
        }
        if (key === 2) {
            this.setState({
                practice: this.state.allPractice.slice(0, 2),
                allPracticeShow: false,
            })
        }
    }

    getStatus = () => {
        http.get(`${API['home']}/web/it_detail?course_id=${getParam('id')}`).then(res => {
            const {code, data, msg} = res.data
            if (code == 200) {
                this.setState({
                    syllabus: data.syllabus.slice(0, 2),
                    allSyllabus: data.syllabus,
                    practice: data.practice.slice(0, 2),
                    allPractice: data.practice,
                    payMoney: data.course_info.price1,
                    courseInfo: data.course_info
                })
            } else {
                Toast.info(msg)
            }
        })
    }

    componentDidMount() {
        this.getStatus()

        const {backwardVersion, isPay} = this.props;
        if(backwardVersion && isPay === 1) {
            Toast.info('当前版本不支持该课程模式，请升级到最新版本或前往PC端学习', 2);
        }
    }


    shouldComponentUpdate(nextProps, nextState, nextContext) {
        if (this.props.isAppUpdate !== nextProps.isAppUpdate) {
            this.getStatus()
            return false
        }
        return true
    }

    render() {
        const {
            defineList, 
            desList, 
            worryList, 
            syllabus, 
            practice, 
            allSyllabusShow, 
            allPracticeShow, 
            toApp, 
            payMoney,
            isOnline,
            courseInfo
        } = this.state
        console.log(courseInfo)
        return (
            <div className={'python__des'}>
                <div className={'des__start'}></div>
                {
                    !!courseInfo.is_dist && <ShareRank courseInfo={courseInfo}/>
                }
                <div className={'python__define'}>
                    <img className={'left__decorate'}
                         src={'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/left__decorate.png'}></img>
                    <img className={'right__decorate'}
                         src={'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/right__decorate.png'}></img>
                    <p className={'define__title'}>什 / 么 / 是 / Python</p>
                    {
                        defineList.map((item, index) => {
                            return <DefineItem item={item} key={index}></DefineItem>
                        })
                    }
                </div>
                <div className={'course__introduce'}></div>
                {
                    isOnline
                    ? (
                        <div className={'bottom__btn_group'}>
                            <div className={'course__price'}>
                                <div className={'money'}>{payMoney}<span style={{fontSize: '18px'}}>元</span></div>
                                <div className={'discount'}>
                                    限时特惠
                                    <div className={'triangle'}></div>
                                </div>
                            </div>

                            <div className={'btn__group'}>
                                <div className={'try__study'} onClick={this.tryLearn}>免费试学</div>
                                <div className={'sign__now'} onClick={this.signUp}>立即报名</div>
                            </div>
                        </div>
                    )
                    : (
                        <div className="bottom__btn_group">
                            <p className="online__label">Python人工智能</p>
                            <button className="online__button">即将上架 敬请期待</button>
                        </div>
                    )
                }
                
                {/* 课程介绍 */}
                <Description list={desList} />

                <NoWorry list={worryList}></NoWorry>

                
                <Study syllabus={syllabus} allSyllabusShow={allSyllabusShow} show={this.showAll}
                       hide={this.hideSome}></Study>

                {/* 课后实操 */}
                <Test 
                    practice={practice} 
                    allPracticeShow={allPracticeShow} 
                    show={this.showAll}
                    hide={this.hideSome}
                />
                <Team/>

                {/* 试学体验 */}
                <Experience tryLearn={this.tryLearn} isOnline={isOnline} />
                <img 
                    style={{
                        display: 'block', 
                        width: '100%', 
                        height: '8px'
                    }}
                    src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/changjian.png" 
                    alt=""
                />
                
                {/* 常见问题 */}
                <Progream />
                {
                    toApp && (<Mask type={1} closePop={this.closePop}/>)
                }
            </div>
        )
    }
}

function DefineItem(props) {
    const {item, item: {desInfo}} = props
    return (
        <div className={'number_one'}>
            <img className={'trophy'} src={item.titleUrl}></img>
            <p className={'item__title'}>{item.title}</p>
            <p className={'item__subtitle'} style={{width: item.subWidth}}>{item.subTitle}</p>
            <img style={{width: desInfo.width, height: desInfo.height}} src={item.bottomUrl}></img>
        </div>
    )
}

export default PythonDes