index.js 2.48 KB
Newer Older
wangshuo committed
1 2 3 4
import React, { Component } from 'react'
import './index.scss'

export default class Test extends Component {
wangshuo committed
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
  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;
}

wangshuo committed
25 26 27 28 29 30 31 32 33 34 35 36 37
  render() {
    return (
      <div className={'test_container'}>
        <p className={'title'}> /  /  / </p>
        <p className={'sub_title'}>涵盖完整知识体系,让你掌握实用高效的编程技巧</p>
        <div className={'table_container'}>
          <div className={'table_head'}>
            <span>序号</span>
            <span>实操项目</span>
          </div>
          <div className={'table_body'}>
            {
              this.props.practice.map((item, index)=>{
FE committed
38
                return <div className="stage-item" key={index}>
wangshuo committed
39
                  <div className='stage'>{`第${this.Change(item.stage)}阶段 ${item.name}`}</div>
wangshuo committed
40 41 42
                  {
                    item.questions.map((question, index)=>{
                      return <div key={index} className={'line'}>
43
                        <span>{question.number}</span>
wangshuo committed
44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
                        <div className={'test_name'}>
                          <img src={question.icon} alt=""/>
                          <p>{question.name}</p>
                        </div>
                      </div>
                    })
                  }
                </div>
              })
            }
          </div>
          <div className={'table_bottom'}>
            {
              this.props.allPracticeShow ? (
                <div onClick={()=>this.props.hide(2)}>
                  <p>收起</p>
                  <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/shouqi.png" alt=""/>
                </div>
              ) : (
                <div onClick={()=>this.props.show(2)}>
                  <p>展开更多</p>
                  <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhankai.png" alt=""/>
                </div>
              )
            }
          </div>
        </div>
      </div>
    )
  }
}