index.js 2.99 KB
Newer Older
zhanghaozhe committed
1 2
import React, { Component } from "react"
import "./index.scss"
zhanghaozhe committed
3 4 5

export default class Study extends Component {
  Change = (data) => {
zhanghaozhe committed
6 7
    let cn = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"]
    let newStr = ""
zhanghaozhe committed
8 9 10
    let str = data.toString()
    let ci = Number(str) % 10
    let cs = Math.floor(Number(str) / 10)
zhanghaozhe committed
11
    let cv = ""
zhanghaozhe committed
12
    if (str.length > 1) {
zhanghaozhe committed
13
      if (cs === 1) {
zhanghaozhe committed
14 15 16 17
        cv = ci >= 1 ? cn[9] + cn[ci - 1] : cn[9]
      } else {
        cv = ci > 1 ? cn[cs - 1] + cn[9] + cn[ci - 1] : cn[cs - 1] + cn[9]
      }
zhanghaozhe committed
18
    } else {
zhanghaozhe committed
19
      cv = cn[ci - 1]
zhanghaozhe committed
20 21
    }
    newStr = str.replace(str, cv)
zhanghaozhe committed
22
    return newStr
zhanghaozhe committed
23 24 25 26
  }

  render() {
    return (
zhanghaozhe committed
27 28 29
      <div className={"study__container"}>
        <img
          className={"learn_left"}
30
          src="https://cdn.julyedu.com/h5_python_class/learn_left.png"
zhanghaozhe committed
31 32 33 34
          alt=""
        />
        <img
          className={"learn_bottom"}
35
          src="https://cdn.julyedu.com/h5_python_class/learn_bottom.png"
zhanghaozhe committed
36 37 38
          alt=""
        />
        <p className={"title"}> /  /  / </p>
zhanghaozhe committed
39
        {/*<p className={'sub__title'}>2020年4月20日开班</p>*/}
zhanghaozhe committed
40 41 42 43 44
        <div className={"table__container"}>
          <div className={"table__head"}>
            <div className={"head_title order_number"}>序号</div>
            <div className={"head_title chapter"}>章节</div>
            <div className={"head_title points"}>知识点</div>
zhanghaozhe committed
45
          </div>
zhanghaozhe committed
46 47 48 49 50 51
          <div className={"table__body"}>
            {this.props.syllabus.map((item, index) => {
              return (
                <div className={"item__container"} key={index}>
                  <div className={"item__title"}>
                    {"第" + this.Change(index + 1) + "阶段 " + item.name}
zhanghaozhe committed
52
                  </div>
zhanghaozhe committed
53 54 55 56 57 58 59 60 61 62 63
                  {item.lessons.map((item, index) => {
                    return (
                      <div className={"item__content"} key={index}>
                        <div className={"content order_number number_center"}>
                          {item.number}
                        </div>
                        <div className={"content chapter"}>{item.name}</div>
                        <div className={"content points"}>{item.info.name}</div>
                      </div>
                    )
                  })}
zhanghaozhe committed
64 65
                </div>
              )
zhanghaozhe committed
66 67 68 69 70 71 72
            })}
          </div>
          <div className={"table__bottom"}>
            {this.props.allSyllabusShow ? (
              <div onClick={() => this.props.hide(1)}>
                <p>收起</p>
                <img
73
                  src="https://cdn.julyedu.com/h5_python_class/shouqi.png"
zhanghaozhe committed
74 75 76 77 78 79 80
                  alt=""
                />
              </div>
            ) : (
              <div onClick={() => this.props.show(1)}>
                <p>展开更多</p>
                <img
81
                  src="https://cdn.julyedu.com/h5_python_class/zhankai.png"
zhanghaozhe committed
82 83 84 85
                  alt=""
                />
              </div>
            )}
zhanghaozhe committed
86 87 88 89 90 91
          </div>
        </div>
      </div>
    )
  }
}