m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

time

Browse Source
dev_forge
caicai8 5 years ago
parent e0bc8c12de
commit d0cc2c6bbc
3 changed files with 109 additions and 66 deletions
Show Stats Download Patch File Download Diff File

95
public/react/src/forge/Main/Index.js
Unescape View File

@ -1,6 +1,6 @@
import React , { Component } from 'react';
import { Menu , Input , Dropdown , Icon, Result } from 'antd';
import { Menu , Input , Dropdown , Icon, Spin , Pagination } from 'antd';
import { Link } from 'react-router-dom';
import '../css/index.css'
import './list.css';
@ -18,7 +18,9 @@ class Index extends Component{
page:1,
limit:15,
search:undefined,
sort:undefined
sort:undefined,
total:0,
isSpin:true,
}
}
@ -34,30 +36,67 @@ class Index extends Component{
user_id:current_user && current_user.user_id,
page,
limit,
name:search,
search,
sort_by:sort
}}).then((result)=>{
if(result){
this.setState({
projectsList:result.data
projectsList:result.data.projects,
total:result.data.total_count,
isSpin:false
})
}
}).catch((error)=>{})
}
// 排序
ChangeSoryBy=(e)=>{
this.setState({
sort_by:e.key,
page:1,
search:undefined,
isSpin:true
})
const { limit } = this.state;
this.getListData(1 ,limit , undefined , e.key);
}
// 搜索
searchFun=(value)=>{
// console.log(value)
this.setState({
page:1,
search:value,
isSpin:true
})
const { limit , sort } = this.state;
this.getListData(1 ,limit, value , sort);
}
// 翻页
ChangePage=(page)=>{
this.setState({
page
})
const { limit, search , sort } = this.state;
this.getListData(page,limit, search , sort);
}
render(){
const menu=(
<Menu>
<Menu.Item key="0">
<a href="http://www.alipay.com/">1st menu item</a>
</Menu.Item>
<Menu.Item key="1">
<a href="http://www.taobao.com/">2nd menu item</a>
</Menu.Item>
<Menu onClick={this.ChangeSoryBy}>
<Menu.Item key="updated_on">更新时间排序</Menu.Item>
<Menu.Item key="created_on">创建时间排序</Menu.Item>
<Menu.Item key="forked_count">fork数据排序</Menu.Item>
<Menu.Item key="praises_count">点赞数量排序</Menu.Item>
</Menu>
)
const { projectsList } = this.state;
const { projectsList , isSpin , total , limit , page } = this.state;
const pagination = (
total && total > 0 &&
<Pagination showQuickJumper pageSize={limit} total={total} current={page} onChange={this.ChangePage}></Pagination>
)
return(
<div className="main ProjectListIndex">
<div className="list-left">
@ -100,21 +139,23 @@ class Index extends Component{
</ul>
</div>
<div className="list-right">
<div className="list-r-operation">
<Search
placeholder="输入项目名称关键字进行搜索"
enterButton="搜索"
size="large"
onSearch={value => console.log(value)}
className="list-r-Search"
/>
<Dropdown overlay={menu} trigger={['click']} placement='bottomRight'>
<a className="ant-dropdown-link">
排序 <Icon type="down" />
</a>
</Dropdown>
</div>
<ListItem {...this.props} {...this.state} projects={projectsList}></ListItem>
<Spin spinning={isSpin}>
<div className="list-r-operation">
<Search
placeholder="输入项目名称关键字进行搜索"
enterButton="搜索"
size="large"
onSearch={this.searchFun}
className="list-r-Search"
/>
<Dropdown overlay={menu} trigger={['click']} placement='bottomRight'>
<a className="ant-dropdown-link">
排序 <Icon type="down" />
</a>
</Dropdown>
</div>
<ListItem {...this.props} {...this.state} projects={projectsList}></ListItem>
</Spin>
</div>
</div>
)

79
public/react/src/forge/Main/IndexItem.js
Unescape View File

@ -1,43 +1,46 @@
import React , { Component } from 'react';
import { Menu , Input , Dropdown , Icon, Result } from 'antd';
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;
class IndexItem extends Component{
renderList=(list)=>{
if(list && list.length >0 ){
list.map((item,key)=>{
return(
<div className="p-r-Item">
<img className="p-r-photo" alt="" src="http://b-ssl.duitang.com/uploads/item/201901/17/20190117230425_eofqv.thumb.700_0.jpg" ></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">
<span><label>Fork</label><span>{item.forked_count}</span></span>
<span><label>Start</label><span>10</span></span>
{ item.language && item.language.id && <span><label>{ item.language.name }</label></span>}
<span><label>Python</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>
<span>最后更新于9小时前</span>
</div>
</div>
</div>
)
})
}
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;
@ -45,15 +48,14 @@ class IndexItem extends Component{
projects && projects.length >0 && projects.map((item,key)=>{
return(
<div className="p-r-Item">
<img className="p-r-photo" alt="" src="http://b-ssl.duitang.com/uploads/item/201901/17/20190117230425_eofqv.thumb.700_0.jpg" ></img>
<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>:"" }
{ item.prasies_count ? <span><label>Start</label><span>{ item.prasies_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><label>Python</label></span>
</span>
</div>
<div className="p-r-content">
@ -64,14 +66,13 @@ class IndexItem extends Component{
<span><label>浏览量：</label>{item.visits}</span>
{ item.category && item.category.id && <span><label>项目类别：</label>{item.category.name}</span>}
</span>
<span>最后更新于9小时前</span>
{item.last_update_time ? <span>{getDateDiff(item.last_update_time)}</span> : "" }
</div>
</div>
</div>
)
})
)
console.log(renderList);
return(
<div className="project-list">
{ renderList }

1
public/react/src/forge/Main/list.css
Unescape View File

@ -120,6 +120,7 @@
border-left: #efefef;
padding:0px 4px;
border-radius: 0px 4px 4px 0px;
color: #999;
}
.p-r-content{
margin-top:10px;

Write Preview
Loading…
Cancel
Save