index.js 4.37 KB
Newer Older
zhanghaozhe committed
1
/* eslint-disable jsx-a11y/anchor-is-valid */
zhanghaozhe committed
2 3 4 5 6 7 8 9 10
import React, { Component } from "react"
import { WithTab } from "src/HOCs"
import "./index.scss"
import { http } from "src/utils"
import { Link } from "react-router-dom"
import { Toast } from "antd-mobile"
import { HeaderBar } from "src/common"
import Loading from "src/common/Loading"
import { connect } from "react-redux"
xuzhenghua committed
11

FE committed
12
@connect()
baiguangyao committed
13
class Classify extends Component {
zhanghaozhe committed
14 15 16 17 18 19 20 21 22
  constructor(props) {
    super(props)
    this.state = {
      camp: [],
      employment: [],
      basics: [],
      advanced: [],
      special: [],
      isLoading: true,
xuzhenghua committed
23
    }
zhanghaozhe committed
24
  }
xuzhenghua committed
25

zhanghaozhe committed
26 27 28 29 30 31
  componentDidMount() {
    let data = 1
    http.get(`${API.home}/m/course/classify/${data}`).then((res) => {
      if (res.data.code === 200) {
        this.setState({
          isLoading: false,
xuzhenghua committed
32 33
        })

zhanghaozhe committed
34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
        if (res.data.data.common.length > 0) {
          this.setState({
            basics: res.data.data.common[0],
            advanced: res.data.data.common[1] || [],
          })
        }
        if (res.data.data.special.length > 0) {
          this.setState({
            camp: res.data.data.special[0],
            employment: res.data.data.special[1] || [],
            special: res.data.data.special[2] || [],
          })
        }
      } else {
        Toast.info(res.data.msg, 2)
      }
    })
  }
FE committed
52

zhanghaozhe committed
53
  toCourseDetail = (id) => {
zhanghaozhe committed
54
    const { history } = this.props
zhanghaozhe committed
55 56 57
    history.push(`/detail?id=${id}`)
    return false
  }
baiguangyao committed
58

zhanghaozhe committed
59
  render() {
xuzhenghua committed
60
    return (
zhanghaozhe committed
61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103
      <div className="class-box">
        <HeaderBar title="分类" arrow={false} cart={false}></HeaderBar>
        <Loading isLoading={this.state.isLoading}>
          <ClassCourseBox
            toDetail={this.toCourseDetail}
            data={this.state.camp.list}
            title={this.state.camp.name}
            type={1}
          />
          <ClassCourseBox
            toDetail={this.toCourseDetail}
            data={this.state.employment.list}
            title={this.state.employment.name}
            type={1}
          />
          <ClassCourseBox
            toDetail={this.toCourseDetail}
            data={this.state.basics.list}
            title={this.state.basics.name}
            type={2}
          />
          <ClassCourseBox
            toDetail={this.toCourseDetail}
            data={this.state.advanced.list}
            title={this.state.advanced.name}
            type={2}
          />
          <div className="vip">
            {this.state.special.list &&
              this.state.special.list.length > 0 &&
              this.state.special.list.map((item, index) => {
                return (
                  <a
                    onClick={() => this.toCourseDetail(item.course_id)}
                    key={index}
                  >
                    <img src={item.course_img} alt="" />
                  </a>
                )
              })}
          </div>
        </Loading>
      </div>
xuzhenghua committed
104
    )
zhanghaozhe committed
105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
  }
}

// 课程图片形式展示 点击图片直接跳转课程详情页面
function ClassCourseA({ data, toDetail }) {
  return (
    <div className="items-box">
      {data &&
        data.length > 0 &&
        data.map((item, index) => {
          return (
            <a
              onClick={() => toDetail(item.course_id)}
              key={index}
              className="item-banner"
            >
              <img src={item.course_img} alt="" />
              {item.is_aist && <span className="return_cash"></span>}
            </a>
          )
        })}
    </div>
  )
baiguangyao committed
128 129
}

xuzhenghua committed
130
// 课程标签的形式展示  点击标签跳转分类详情页面
xuzhenghua committed
131
function ClassCourseB(props) {
zhanghaozhe committed
132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
  return (
    <div className="items-box">
      {props.data &&
        props.data.length > 0 &&
        props.data.map((item, index) => {
          return (
            <Link
              to={`/courselist?id=${item.c_id}&name=${item.c_name}`}
              key={index}
              className="item-label"
            >
              {item.c_name}
            </Link>
          )
        })}
    </div>
  )
xuzhenghua committed
149 150
}

xuzhenghua committed
151
function ClassCourseBox(props) {
zhanghaozhe committed
152 153 154 155 156 157 158 159 160 161 162 163
  return (
    <div className="class-course">
      <p className="course-items-title">
        {props.title && <img src={require("./image/tips.png")} alt="" />}
        {props.title}
      </p>
      {props.type === 1 && (
        <ClassCourseA data={props.data} toDetail={props.toDetail} />
      )}
      {props.type === 2 && <ClassCourseB data={props.data} />}
    </div>
  )
xuzhenghua committed
164
}
xuzhenghua committed
165

zhanghaozhe committed
166
export default WithTab(Classify)