index.js

/* eslint-disable eqeqeq, jsx-a11y/alt-text */
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 "src/utils"
import { connect } from "react-redux"
import { Toast } from "antd-mobile"
import ShareRank from "src/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://cdn.julyedu.com/h5_python_class/trophy.png",
          title: "排名第1的编程语言",
          subTitle: "2018世界编程语言排行榜中，Python排名第1",
          subWidth: "180px",
          bottomUrl: "https://cdn.julyedu.com/h5_python_class/program_lan.png",
          desInfo: {
            width: "240px",
            height: "170px",
          },
        },
        {
          titleUrl: "https://cdn.julyedu.com/h5_python_class/kaifa.png",
          title: "开发快速、简单易掌握",
          subTitle: "严谨的代码编写格式，语法格式简单易理解完成一个相同的任务",
          subWidth: "260px",
          bottomUrl: "https://cdn.julyedu.com/h5_python_class/kuaisu.png",
          desInfo: {
            width: "212px",
            height: "106px",
          },
        },
        {
          titleUrl: "https://cdn.julyedu.com/h5_python_class/lingyu.png",
          title: "适用领域广",
          subTitle: "Python工程师可从事多领域编程工作，人才年需求增长6倍",
          subWidth: "230px",
          bottomUrl: "https://cdn.julyedu.com/h5_python_class/jiandan.png",
          desInfo: {
            width: "234px",
            height: "106px",
          },
        },
      ],
      desList: [
        {
          url: "https://cdn.julyedu.com/h5_python_class/xingshi.png",
          title: "全新课程形式",
          subTitle: "对话式交互教学，轻松、生动、不无聊",
        },
        {
          url: "https://cdn.julyedu.com/h5_python_class/huanjing.png",
          title: "在线编程环境",
          subTitle: "无需安装任何编程软件",
        },
        {
          url: "https://cdn.julyedu.com/h5_python_class/rumen.png",
          title: "17天零基础入门",
          subTitle: "降低学习门槛，17天入门人工智能",
        },
      ],
      worryList: [
        {
          url: "https://cdn.julyedu.com/h5_python_class/jiechu.png",
          title: "初次接触，担心学不会",
          subTitle:
            "本课程专门为零基础的你打造，全篇通过最白话沟通交流的方式进行讲解，无论你有无编程经验都可以轻松理解并且掌握。",
        },
        {
          url: "https://cdn.julyedu.com/h5_python_class/xuexi.png",
          title: "想学习，没有坚持下来",
          subTitle:
            "以故事性的方式编写学习内容， 把生硬的知识点有趣化。精美的图片+幽默的文字+代码编写让你越学越想学。",
        },
        {
          url: "https://cdn.julyedu.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://cdn.julyedu.com/h5_python_class/left__decorate.png"}
          ></img>
          <img
            className={"right__decorate"}
            src={"https://cdn.julyedu.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://cdn.julyedu.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