educoder/public/react/src/forge/Main/IndexItem.js

import React , { Component } from 'react';
import { getImageUrl } from 'educoder';
import { Link } from 'react-router-dom';
import '../css/index.css'
import './list.css';
//把时间戳转换为几分钟或几小时前或几天前
function getDateDiff(dateTimeStamp){
  var minute = 1000 * 60;
  var hour = minute * 60;
  var day = hour * 24;
  var month = day * 30; 
  
  var now = new Date().getTime();
  var diffValue = now - dateTimeStamp;
  if(diffValue < 0){return;}
  var monthC =diffValue/month;
  var weekC =diffValue/(7*day);
  var dayC =diffValue/day;
  var hourC =diffValue/hour;
  var minC =diffValue/minute;

  var result = "";
  if(monthC>=1){
    result="" + parseInt(monthC) + "月前";
  }
  else if(weekC>=1){
    result="" + parseInt(weekC) + "周前";
  }
  else if(dayC>=1){
    result=""+ parseInt(dayC) +"天前";
  }
  else if(hourC>=1){
    result=""+ parseInt(hourC) +"小时前";
  }
  else if(minC>=1){
    result=""+ parseInt(minC) +"分钟前";
  }else
  result="刚刚";
  return result;
}

class IndexItem extends Component{
  
  render(){ 
    const { projects } = this.props;

    const renderList = (
      projects && projects.length >0 && projects.map((item,key)=>{
        return(
          <div className="p-r-Item">
            <img className="p-r-photo" alt="" src={getImageUrl(`images/${item.author && item.author.image_url}`)} ></img>
            <div className="p-r-Infos">
              <div className="p-r-name">
                <Link to={""} className="hide-1 font-16 color-grey-3">{item.name}</Link>
                <span className="p-r-tags">
                  { item.forked_count ? <span><label>Fork</label><span>{ item.forked_count}</span></span>:"" }
                  <span><label>Start</label><span>{ item.praises_count }</span></span>
                  { item.language && item.language.id ? <span><label>{ item.language.name }</label></span>:"" }
                </span>
              </div>
              <div className="p-r-content">
                <p className="break_word hide-2">{item.description}</p>
              </div>
              <div className="p-r-name mt8 color-grey-6">
                <span className="p-r-detail">
                  <span><label>浏览量：</label>{item.visits}</span>
                  { item.category && item.category.id && <span><label>项目类别：</label>{item.category.name}</span>}
                </span>
                {item.last_update_time ? <span>{getDateDiff(item.last_update_time)}</span> : "" }
              </div>
            </div>
          </div>
        )
      })
    )
    return(
      <div className="project-list">
        { renderList }
      </div>
    )
  }
}
export default IndexItem;