forgeplus-react/src/modules/courses/coursesHome/CoursesHome.js

import React, { Component, Fragment } from 'react';
import { getImageUrl } from 'educoder';
import CoursesHomeCard from "./CoursesHomeCard.js"
import axios from 'axios';
import LoadingSpin from '../../../common/LoadingSpin';
import UpgradeModals from '../../modals/UpgradeModals';
import './css/CoursesHome.css';
import '../../tpm/shixuns/shixun-keyword-list.scss';
import btnNew from './btn-new.png'
import btnJoin from './btn-join.png'
import Pagination from '../../../components/mini-pagination'

class CoursesHome extends Component {
  constructor(props) {
    super(props)
    this.state = {
      limit: 16,
      page: 1,
      order: "created_at",
      coursesHomelist: undefined,
      search: "",
    }
  }
  //切换列表状态
  changeStatus = (value) => {
    this.setState({
      order: value,
      page: 1,
      coursesHomelist: undefined
    })

    this.searchcourses(16, 1, value, "")
  }
  //搜索输入
  inputSearchValue = (e) => {

    this.setState({
      search: e.target.value,
      page: 1
    })

  }
  //搜索
  searchValue = (e) => {
    let { search, order } = this.state;

    this.setState({
      order: order,
      page: 1
    })

    this.searchcourses(16, 1, order, search)

  }

  componentDidMount() {
    document.title = "教学课堂";
    const upsystem = `/users/system_update.json`;
    axios.get(upsystem).then((response) => {
      let updata = response.data;
      this.setState({
        updata: updata
      })
    }).catch((error) => {
      console.log(error);
    })

    this.searchcourses(16, 1, "all", "")
  }

  onChange = (pageNumber) => {
    this.setState({
      page: pageNumber
    })
    let { limit, order, search } = this.state;

    this.searchcourses(limit, pageNumber, order, search)

  }

  searchcourses = (limit, page, order, search) => {
    let url = "/courses.json";
    axios.get(url, {
      params: {
        limit: limit,
        page: page,
        order: order,
        search: search
      }
    }).then((result) => {
      if (result.data.status === 401) {

      } else {
        this.setState({
          coursesHomelist: result.data
        })
      }

    }).catch((error) => {
      console.log(error);
    })
  }

  getUser = (url, type) => {
    if (this.props.checkIfLogin() === false) {
      this.props.showLoginDialog()
      return
    }
    if (this.props.checkIfProfileCompleted() === false) {
      this.props.showProfileCompleteDialog()
      return
    }

    if (url !== undefined || url !== "") {
      this.props.history.push(url);
    }


  }
  render() {

    const { order, page, coursesHomelist } = this.state;
    const { user } = this.props

    return (
      <div>
        {this.state.updata === undefined ? "" : <UpgradeModals
          {...this.state}
        />}
        <div className="newMain clearfix">
          <style>
            {
              `    ::-webkit-scrollbar {
                      width: 0px !important;
                    }
										.courses-head{
												width: 100%;
												height: 300px;
												background-image: url(${getImageUrl(this.props.mygetHelmetapi && this.props.mygetHelmetapi.course_banner_url === null ? `images/educoder/courses/courses.jpg` : this.props.mygetHelmetapi && this.props.mygetHelmetapi.course_banner_url)});
											  background-color: #081C4B;
												background-position: center;
												background-repeat: no-repeat;
										}

									`
            }
          </style>
          <div className="courses-head pr" >
            <div className="edu-txt-center pathNavLine">
              <div className="inline path-nav">
              </div>
            </div>
          </div>

          <div className="wrapper">
            <div className="educontent  search-keyword-container" style={{ padding: '20px 0 0 0' }}>
              <div className="btn-groups">
                <a id='new' className={order === 'created_at' ? 'active' : ''} onClick={() => this.changeStatus("created_at")} title='最新'>最新</a>
                <a id='hot' className={order === 'visits' ? 'active' : ''} onClick={() => this.changeStatus("visits")} title='最热'>最热</a>
              </div>
            </div>
            {user && user.user_identity !== '学生' ?
              <Fragment>
                <a className="btn-new" style={{ top: '67px' }} onClick={() => { this.getUser("/classrooms/new") }} > <img src={btnNew} width={40} alt="创建教学课堂" /> </a>
              </Fragment> : null
            }
            <a className="btn-join" style={{ top: '123px' }} onClick={() => { window._header_componentHandler.tojoinclass() }} > <img src={btnJoin} width={40} alt="加入教学课堂" /> </a>
          </div>

          {coursesHomelist === undefined ? <LoadingSpin /> : <CoursesHomeCard {...this.props} {...this.state}
            coursesHomelist={coursesHomelist}></CoursesHomeCard>}

          {coursesHomelist === undefined ? "" : coursesHomelist.courses.length === 0 ? <div className="edu-tab-con-box clearfix edu-txt-center mb50">
            <img className="edu-nodata-img mb20" src={getImageUrl("/images/educoder/nodata.png")} />
            <p className="edu-nodata-p mb20">暂时还没有相关数据哦！</p>
          </div> : ""}

          {
            coursesHomelist === undefined ? "" : coursesHomelist.courses_count > 16 ?
              <div className="educontent mb80 edu-txt-center mt10">
                <Pagination current={page} total={coursesHomelist.courses_count || 1299} type="mini" pageSize={16} onChange={this.onChange} />
              </div> : ""
          }
        </div>

      </div>
    )
  }
}
export default CoursesHome;


//                {/*<Pagination showQuickJumper current={page} pageSize={16} total={coursesHomelist.courses_count} onChange={this.onChange} />*/}