educoder/public/react/src/modules/tpm/shixuns/ShixunCard.js

import React, { Component } from 'react';
import { Redirect } from 'react-router';

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

import PropTypes from 'prop-types';

import classNames from 'classnames';

// import { Rating,Loading} from '@icedesign/base';

import {getImageUrl,setImagesUrl, toPath} from 'educoder';

// import { Pagination,Row,Col } from 'antd';

import 'antd/lib/pagination/style/index.css';

import './shixunCss/shixunCard.css';

import Rating from '@icedesign/base/lib/rating';

import Pagination from '@icedesign/base/lib/pagination';

// import Loading from '@icedesign/base/lib/loading';

// 引入业务组件样式
import '@icedesign/base/lib/pagination/style.js';

import '@icedesign/base/lib/rating/style.js';

import { Tooltip } from 'antd';

// import '@icedesign/base/lib/loading/style.js';

import axios from 'axios';

const $ = window.$;

class ShixunCard extends Component {
  constructor(props) {
    super(props)

    this.state = {
      startValue:[],
      order_by:"",
      page:1,
      limit:16,
      keyword:"",
      status:0,
      diff:0,
      hideme:false,
      tag_level:3,
      tag_id:''
    }

  }

  PaginationonChange=(pageNumber)=> {
    this.props.shixunsPage(pageNumber);
  }

  render() {
    let {middleshixundata, pagination, typepvisible, pages, totalcount} = this.props;
    return (
      <div className="educontent mb80">
        {/*<Loading visible={typepvisible} shape="dot-circle" color='#4AC7FF'>*/}

        <div id="shixun_list_content"
             style={{display: middleshixundata === undefined || middleshixundata.length === 0 ? "block" : "none"}}>
          <div className="square-list clearfix">
            <div className="edu-tab-con-box clearfix edu-txt-center">
              <img className="edu-nodata-img mb20" src={getImageUrl("images/educoder/nodata.png")}/>
              <p className="edu-nodata-p mb20">暂无数据哦~</p>
            </div>
          </div>
          <div className="educontent edu-txt-center mb80">
            <div className="inline pages_user_show">
              <ul>

              </ul>
              <div className="cl"></div>
            </div>
          </div>
        </div>

        <div className="mt10 mb20 clearfix"
             style={{display: middleshixundata === undefined || middleshixundata.length === 0 ? "none" : "block"}}>
          <div className="shixun_list_content">
            <div className="square-list clearfix">
              { middleshixundata===undefined?" ":middleshixundata.map((item,key)=>{
                return(
                  <div className="square-Item" key={key} id={item.id}>
                    {
                      item.tag_name === null ? "":
                        <div className="tag-green">
                          <span className="tag-name"> {item.tag_name}</span>
                          <img style={{display:'block',height: '28px'}} src={require(`./shixunCss/tag2.png`)}/>
                        </div>
                    }
                    <div className={item.power === false ? "closeSquare" : "none"}>
                      <img src={getImageUrl("images/educoder/icon/lockclose.svg")}
                           className="mt80 mb25"/>
                      <p className="font-14 color-white">非试用内容，需要授权</p>
                    </div>

                    <a href={"/shixuns/"+item.identifier+"/challenges"} target="_blank" className="square-img">
                      {/*<img  src={getImageUrl("images/"+item.pic+"?1540534846")}/>*/}
                      <img  src={setImagesUrl(`${item.pic}`)}/>
                    </a>

                    <div className="square-main">
                      <p className="task-hide">
                        <a href={"/shixuns/"+item.identifier+"/challenges"} target="_blank"  className="justify color-grey-name" title={item.name}>
                          {item.name}
                        </a>
                      </p>

                      <p className="clearfix mt8 ml-3">
                        <span className="rateYoStar fl" style={{padding: '0px',height: '20px',lineHeight: '19px',cursor: 'default'}} title="">
                              <Rating key={key} value={item.score_info===null?5:item.score_info} disabled allowHalf />
                        </span>
                        <span className="fl ml25 font-12 color-grey-9 lineh-12 mt4">{item.score_info===null?"5分":item.score_info+"分"}</span>
                      </p>

                      <p className="clearfix mt8 font-12 color-grey-B4">
                        <Tooltip placement="bottom" title={"关卡"}>
                            <span className="mr10 fl squareIconSpan">
                              <i className="iconfont icon-shixunguanqia fl mr3"></i>{item.challenges_count}
                            </span>
                        </Tooltip>

                        {/*<Tooltip placement="bottom" title={"经验值"}>*/}
                            {/*<span className="mr10 fl squareIconSpan">*/}
                                {/*<i className="iconfont icon-jingyan fl mr3"></i>{item.exp}*/}
                            {/*</span>*/}
                        {/*</Tooltip>*/}

                        <Tooltip placement="bottom" title={"学习人数"}>
                            <span className="mr10 fl squareIconSpan" style={{display:item.stu_num===0?"none":"block"}}>
                               <i className="iconfont icon-chengyuan fl mr3"></i>{item.stu_num}
                            </span>
                        </Tooltip>

                        <span className="fr color-grey-B3 squareIconSpan">{item.level}</span>
                      </p>

                    </div>
                  </div>
                )
              })
              }

            </div>

            <div className="both"></div>
            {/*totalcount*/}
            <div className={"ml425"}
              //className={totalcount < 22 ? "ml425" : "ml425"}
                 style={{display: pagination ? "block" : "none"}}>
              {/*<Pagination showQuickJumper defaultCurrent={1} current={pages} total={totalcount} pageSize={12} onChange={this.PaginationonChange} />*/}
              {/* 不加参数请求的时候，没返回总数了。加了个比较大的数字，让他可以翻页 */}
              <Pagination defaultCurrent={1} current={pages} total={ totalcount || 1299 } type="mini" pageSize={16}  onChange={this.PaginationonChange} />
            </div>

          </div>

        </div>
        {/*</Loading>*/}
      </div>
    )
  }
}

export default ShixunCard;