fork from bc4552c5a8
This commit is contained in:
80
client/containers/News/News.js
Normal file
80
client/containers/News/News.js
Normal file
@@ -0,0 +1,80 @@
|
||||
import './News.scss';
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import NewsTimeline from './NewsTimeline/NewsTimeline';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import Breadcrumb from '../../components/Breadcrumb/Breadcrumb';
|
||||
import { Button } from 'antd';
|
||||
import { getMockUrl } from '../../reducer/modules/news.js';
|
||||
import Subnav from '../../components/Subnav/Subnav.js';
|
||||
|
||||
@connect(
|
||||
state => {
|
||||
return {
|
||||
uid: state.user.uid + ''
|
||||
};
|
||||
},
|
||||
{
|
||||
getMockUrl: getMockUrl
|
||||
}
|
||||
)
|
||||
class News extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
mockURL: ''
|
||||
};
|
||||
}
|
||||
static propTypes = {
|
||||
uid: PropTypes.string,
|
||||
getMockUrl: PropTypes.func
|
||||
};
|
||||
UNSAFE_componentWillMount() {
|
||||
//const that = this;
|
||||
// this.props.getMockUrl(2724).then(function(data){
|
||||
// const { prd_host, basepath, protocol } = data.payload.data.data;
|
||||
// const mockURL = `${protocol}://${prd_host}${basepath}/{path}`;
|
||||
// that.setState({
|
||||
// mockURL: mockURL
|
||||
// })
|
||||
// })
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Subnav
|
||||
default={'动态'}
|
||||
data={[
|
||||
{
|
||||
name: '动态',
|
||||
path: '/news'
|
||||
},
|
||||
{
|
||||
name: '测试',
|
||||
path: '/follow'
|
||||
},
|
||||
{
|
||||
name: '设置',
|
||||
path: '/follow'
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<div className="g-row">
|
||||
<section className="news-box m-panel">
|
||||
<div className="logHead">
|
||||
<Breadcrumb />
|
||||
<div className="Mockurl">
|
||||
<span>Mock地址：</span>
|
||||
<p>{this.state.mockURL}</p>
|
||||
<Button type="primary">下载Mock数据</Button>
|
||||
</div>
|
||||
</div>
|
||||
<NewsTimeline />
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default News;
|
||||
101
client/containers/News/News.scss
Normal file
101
client/containers/News/News.scss
Normal file
@@ -0,0 +1,101 @@
|
||||
@import '../../styles/mixin.scss';
|
||||
|
||||
.news-box {
|
||||
@include row-width-limit;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 1;
|
||||
margin: 0px auto 0 auto;
|
||||
font-size: 0.14rem;
|
||||
background: #FFF;
|
||||
display: block;
|
||||
|
||||
.news-timeline{
|
||||
padding: 24px;
|
||||
padding-left: 125px;
|
||||
color: #6b6c6d;
|
||||
.ant-timeline-item{
|
||||
min-height: 60px;
|
||||
}
|
||||
.ant-timeline-item-head{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
left: -8px;
|
||||
top: -4px;
|
||||
border-color:#e1e3e4;
|
||||
}
|
||||
.logusername{
|
||||
color: #4eaef3;
|
||||
padding: 0px 16px 0px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.logtype{
|
||||
padding-right: 16px;
|
||||
}
|
||||
.logtime{
|
||||
padding-right: 16px;
|
||||
|
||||
}
|
||||
.logcontent{
|
||||
display: block;
|
||||
padding-left: 8px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.logoTimeago{
|
||||
position: absolute;
|
||||
left: -80px;
|
||||
top: 5px;
|
||||
color: #c0c1c1;
|
||||
}
|
||||
.logbidden{
|
||||
color: #c0c1c1;
|
||||
cursor: default;
|
||||
line-height: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.loggetMore{
|
||||
line-height: 30px;
|
||||
padding-left: 30px;
|
||||
color: #4eaef3;
|
||||
}
|
||||
}
|
||||
.logHead{
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
padding: 24px 0px;
|
||||
overflow: hidden;
|
||||
.breadcrumb-container{
|
||||
float: left;
|
||||
min-width:100px;
|
||||
}
|
||||
.Mockurl{
|
||||
width: 500px;
|
||||
float: right;
|
||||
color: #7b7b7b;
|
||||
>span{
|
||||
float: left;
|
||||
line-height: 30px;
|
||||
}
|
||||
p{
|
||||
width: 60%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 4px 7px;
|
||||
height: 28px;
|
||||
cursor: text;
|
||||
font-size: 13px;
|
||||
color: rgba(0,0,0,.65);
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border: 1px solid #d9d9d9;
|
||||
-webkit-transition: all .3s;
|
||||
transition: all .3s;
|
||||
overflow-x:auto;
|
||||
}
|
||||
button{
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
80
client/containers/News/NewsList/NewsList.js
Normal file
80
client/containers/News/NewsList/NewsList.js
Normal file
@@ -0,0 +1,80 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Menu } from 'antd';
|
||||
import { fetchNewsData } from '../../../reducer/modules/news.js';
|
||||
|
||||
const logList = [
|
||||
{
|
||||
name: '用户'
|
||||
},
|
||||
{
|
||||
name: '分组'
|
||||
},
|
||||
{
|
||||
name: '接口'
|
||||
},
|
||||
{
|
||||
name: '项目'
|
||||
}
|
||||
];
|
||||
@connect(
|
||||
state => {
|
||||
// console.log(state);
|
||||
return {
|
||||
uid: state.user.uid + '',
|
||||
newsData: state.news.newsData
|
||||
};
|
||||
},
|
||||
{
|
||||
fetchNewsData
|
||||
}
|
||||
)
|
||||
class NewsList extends Component {
|
||||
static propTypes = {
|
||||
fetchNewsData: PropTypes.func,
|
||||
setLoading: PropTypes.func,
|
||||
uid: PropTypes.string
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
selectedKeys: 0
|
||||
};
|
||||
}
|
||||
getLogData(e) {
|
||||
// page,size,logId
|
||||
// console.log(e.key);
|
||||
this.setState({
|
||||
selectedKeys: +e.key
|
||||
});
|
||||
const that = this;
|
||||
this.props.setLoading(true);
|
||||
this.props.fetchNewsData(+this.props.uid, 0, 5).then(function() {
|
||||
that.props.setLoading(false);
|
||||
});
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div className="logList">
|
||||
<h3>日志类型</h3>
|
||||
<Menu
|
||||
mode="inline"
|
||||
selectedKeys={[`${this.state.selectedKeys}`]}
|
||||
onClick={this.getLogData.bind(this)}
|
||||
>
|
||||
{logList.map((item, i) => {
|
||||
return (
|
||||
<Menu.Item key={i} className="log-item">
|
||||
{item.name}
|
||||
</Menu.Item>
|
||||
);
|
||||
})}
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NewsList;
|
||||
89
client/containers/News/NewsTimeline/NewsTimeline.js
Normal file
89
client/containers/News/NewsTimeline/NewsTimeline.js
Normal file
@@ -0,0 +1,89 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import { Timeline, Spin } from 'antd';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { formatTime } from '../../../common.js';
|
||||
import { fetchNewsData } from '../../../reducer/modules/news.js';
|
||||
import { timeago } from '../../../../common/utils';
|
||||
// timeago(new Date().getTime() - 40);
|
||||
|
||||
@connect(
|
||||
state => {
|
||||
return {
|
||||
newsData: state.news.newsData,
|
||||
curpage: state.news.curpage
|
||||
};
|
||||
},
|
||||
{
|
||||
fetchNewsData: fetchNewsData
|
||||
}
|
||||
)
|
||||
class NewsTimeline extends Component {
|
||||
static propTypes = {
|
||||
newsData: PropTypes.object,
|
||||
fetchNewsData: PropTypes.func,
|
||||
|
||||
setLoading: PropTypes.func,
|
||||
loading: PropTypes.bool,
|
||||
curpage: PropTypes.number
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
bidden: '',
|
||||
loading: false
|
||||
};
|
||||
}
|
||||
|
||||
getMore() {
|
||||
const that = this;
|
||||
this.setState({ loading: true });
|
||||
this.props.fetchNewsData(21, 'project', this.props.curpage, 8).then(function() {
|
||||
that.setState({ loading: false });
|
||||
if (that.props.newsData.total + 1 === that.props.curpage) {
|
||||
that.setState({ bidden: 'logbidden' });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
UNSAFE_componentWillMount() {
|
||||
this.props.fetchNewsData(21, 'project', this.props.curpage, 8);
|
||||
}
|
||||
|
||||
render() {
|
||||
let data = this.props.newsData ? this.props.newsData.list : [];
|
||||
if (data && data.length) {
|
||||
data = data.map(function(item, i) {
|
||||
return (
|
||||
<Timeline.Item key={i}>
|
||||
<span className="logoTimeago">{timeago(item.add_time)}</span>
|
||||
<span className="logusername">{item.username}</span>
|
||||
<span className="logtype">{item.type}</span>
|
||||
<span className="logtime">{formatTime(item.add_time)}</span>
|
||||
<span className="logcontent">{item.content}</span>
|
||||
</Timeline.Item>
|
||||
);
|
||||
});
|
||||
} else {
|
||||
data = '';
|
||||
}
|
||||
let pending = this.state.bidden ? (
|
||||
<a className={this.state.bidden}>以上为全部内容</a>
|
||||
) : (
|
||||
<a className="loggetMore" onClick={this.getMore.bind(this)}>
|
||||
查看更多
|
||||
</a>
|
||||
);
|
||||
if (this.state.loading) {
|
||||
pending = <Spin />;
|
||||
}
|
||||
return (
|
||||
<section className="news-timeline">
|
||||
{data ? <Timeline pending={pending}>{data}</Timeline> : data}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NewsTimeline;
|
||||
Reference in New Issue
Block a user