index.js

import React, { Component } from 'react'
import './index.scss'

export default class Study extends Component {

  Change = (data) => {
    let cn = ["一", "二", "三", "四", "五", "六", "七", "八", "九", '十'];
    let newStr = ''
    let str = data.toString()
    let ci = Number(str) % 10
    let cs = Math.floor(Number(str) / 10)
    let cv = ''
    if (str.length > 1) {
        if(cs==1){
            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]
        }
    } else {
        cv = cn[ci - 1]
    }
    newStr = str.replace(str, cv)
    return newStr;
  }

  render() {
    return (
      <div className={'study__container'}>
        <img className={'learn_left'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/learn_left.png" alt=""/>
        <img className={'learn_bottom'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/learn_bottom.png" alt=""/>
        <p className={'title'}>阶 / 梯 / 学 / 习</p>
        <p className={'sub__title'}>17节课堂教学，带你掌握Python技术入门知识</p>
        <div className={'step__container'}>
          <div className={'item__container'}>
            <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/wanzheng.png" alt=""/>
            <p>完整的Python基础知识体系</p>
            <div className={'item__line'}></div>
          </div>
          <div className={'item__container'}>
            <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/siwei.png" alt=""/>
            <p>灵活的编程思维和实操技巧</p>
            <div className={'item__line'}></div>
          </div>
          <div className={'item__container'}>
            <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/shicao.png" alt=""/>
            <p>丰富有趣的实操训练</p>
          </div>
        </div>

        <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>
          </div>
          <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}</div>
                    {
                      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>
                        )
                      })
                    }
                  </div>
                )
              })
            }
          </div>
          <div className={'table__bottom'}>
            {
              this.props.allSyllabusShow ? (
                <div onClick={() => this.props.hide(1)}>
                  <p>收起</p>
                  <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/shouqi.png" alt=""/>
                </div>
              ) : (
                <div onClick={() => this.props.show(1)}>
                  <p>展开更多</p>
                  <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhankai.png" alt=""/>
                </div>
              )
            }
          </div>
        </div>
      </div>
    )
  }
}