fix: 修改消息页

client/actions/news.js

@@ -4,19 +4,11 @@ import {
 } from '../constants/action-types.js';
 
 export function fetchNewsData () {
-  const data = [{
-    name: 'John Brown',
-    date: '2015-11-11 13:00:15',
-    desc: '创建服务现场'
-  }, {
-    name: 'John Brown1',
-    date: '2015-11-11 13:00:15',
-    desc: '技术测试异常'
-  }, {
-    name: 'John Brown2',
-    date: '2015-11-11 13:00:15',
-    desc: '网络异常正在修复'
-  }]
+  const data = [
+    { key: 1, type: 'John Brown', news: '您好！亲爱的用户：您已成功申请接口：实时空气质量数据查询，请于两个月内进行应用验证，逾期接口将不能正常使用。如果您在使用的过程中遇到任何问题，欢迎前往交流社区反馈意见，谢谢！',time: '2014-12-01' },
+    { key: 2, type: 'John Brown', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' },
+    { key: 3, type: 'John Brown', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' }
+  ];
 
   return {
     type: FETCH_NEWS_DATA,
@@ -25,19 +17,11 @@ export function fetchNewsData () {
 }
 
 export function fetchViewedNews () {
-  const data = [{
-    name: 'John Brown21',
-    date: '2015-11-11 13:00:15',
-    desc: '创建服务现场'
-  }, {
-    name: 'John Brown12',
-    date: '2015-11-11 13:00:15',
-    desc: '技术测试异常'
-  }, {
-    name: 'John Brown22',
-    date: '2015-11-11 13:00:15',
-    desc: '网络异常正在修复'
-  }]
+  const data = [
+    { key: 1, type: 'John Brown1', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' },
+    { key: 2, type: 'John Brown2', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' },
+    { key: 3, type: 'John Brown3å', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' }
+  ];
 
   return {
     type: FETCH_NEWS_DATA,
@@ -46,19 +30,11 @@ export function fetchViewedNews () {
 }
 
 export function fetchNotVieweNews () {
-  const data = [{
-    name: 'John Brown22',
-    date: '2015-11-11 13:00:15',
-    desc: '创建服务现场'
-  }, {
-    name: 'John Brown12',
-    date: '2015-11-11 13:00:15',
-    desc: '技术测试异常'
-  }, {
-    name: 'John Brown22',
-    date: '2015-11-11 13:00:15',
-    desc: '网络异常正在修复'
-  }]
+  const data = [
+    { key: 1, type: 'John Brown', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2015-11-11 13:00:15' },
+    { key: 2, type: 'John Brown', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2015-11-11 13:00:15' },
+    { key: 3, type: 'John Brown', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2015-11-11 13:00:15' }
+  ];
 
   return {
     type: FETCH_NEWS_DATA,
@@ -68,19 +44,11 @@ export function fetchNotVieweNews () {
 
 export function fetchMoreNews () {
   return (dispatch)=>{
-    const data = [{
-      name: 'John Brown2212',
-      date: '2015-11-11 13:00:15',
-      desc: '创建服务现场'
-    }, {
-      name: 'John Brown1132',
-      date: '2015-11-11 13:00:15',
-      desc: '技术测试异常'
-    }, {
-      name: 'John Brown23212',
-      date: '2015-11-11 13:00:15',
-      desc: '网络异常正在修复'
-    }]
+    const data = [
+      { key: 1, type: 'John Brown', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' },
+      { key: 2, type: 'John Brown', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' },
+      { key: 3, type: 'John Brown', news: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',time: '2014-12-01' }
+    ];
 
     dispatch({
       type: FETCH_MORE_NEWS,

client/containers/News/News.js

@@ -4,7 +4,7 @@ import NewsTimeline from './NewsTimeline/NewsTimeline'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import NewsList from './NewsList/NewsList.js'
-import { fetchNewsData } from '../../actions/news.js'
+import { fetchNotVieweNews } from '../../actions/news.js'
 
 
 @connect(
@@ -14,7 +14,7 @@ import { fetchNewsData } from '../../actions/news.js'
     }
   },
   {
-    fetchNewsData: fetchNewsData
+    fetchNotVieweNews: fetchNotVieweNews
   }
 )
 
@@ -24,10 +24,10 @@ class News extends Component {
   }
   static propTypes = {
     newsData: PropTypes.array,
-    fetchNewsData: PropTypes.func
+    fetchNotVieweNews: PropTypes.func
   }
   componentWillMount(){
-    this.props.fetchNewsData()
+    this.props.fetchNotVieweNews()
   }
   render () {
     const data = this.props.newsData

client/containers/News/News.scss

@@ -29,6 +29,50 @@
 .news-timeline{
   margin-left: 30px;
   margin-top: 30px;
+  .removeAllNews{
+    background-color: #f7f7f7;
+    padding: 7px;
+    display: inline-block;
+    overflow: hidden;
+    margin-bottom: 5px;
+    border-radius: 5px;
+    cursor: pointer;
+    color: #a09f9f;
+
+    &:hover,&:active{
+      background-color: #333;
+      color: white;
+    }
+  }
+  .ant-table-wrapper{
+    width: 822px;
+  }
+  .ant-table-row{
+    max-width: 80%;
+  }
+  .newsDesc{
+    padding-right: 15px;
+
+    p{
+      text-indent: 2em;
+      color: #333;
+      font-size: 14px;
+      line-height: 30px;;
+    }
+    span{
+      font-size: 14px;
+      margin-top: 15px;
+      display: inline-block;
+      color: #999;
+      cursor: pointer;
+      i{
+        margin-right: 5px;
+      }
+      &:hover, &.active {
+        color: #333;
+      }
+    }
+  }
 }
 
 .ant-timeline-item-content{

client/containers/News/NewsList/NewsList.js

@@ -66,9 +66,9 @@ class NewsList extends Component {
   render () {
     return (
       <ul onClick = {this.fetchData.bind(this)} className="news-list">
-        <li className="active allnews">全部消息</li>
+        {/*<li className="allnews">全部消息</li>*/}
+        <li className='active notview'>未读消息</li>
         <li className='viewednews'>已读消息</li>
-        <li className='notview'>未读消息</li>
       </ul>
     )
   }

client/containers/News/NewsTimeline/NewsTimeline.js

@@ -1,8 +1,13 @@
 import React, { Component } from 'react'
-import { Timeline } from 'antd'
+import { Table, Icon, Popconfirm } from 'antd'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { fetchMoreNews } from '../../../actions/news.js'
+
+const removeConfirm = function(e){
+  console.log(e);
+}
+
 @connect(
   state=>{
     return state;
@@ -11,35 +16,41 @@ import { fetchMoreNews } from '../../../actions/news.js'
     fetchMoreNews: fetchMoreNews
   }
 )
+
+
 class NewsTimeline extends Component {
   static propTypes = {
     newsData: PropTypes.array,
     fetchMoreNews: PropTypes.func
   }
-
+  
   constructor(props) {
     super(props);
   }
-
+  removeOneNews(id){
+    return ()=>{
+      console.log(id);
+    }
+  }
   render () {
+    const columns = [
+      { title: '类型',width:100, dataIndex: 'type', key: 'type' },
+      { title: '消息', dataIndex: 'news', key: 'news' },
+      { title: '发布时间',width:150, dataIndex: 'time', key: 'time' }
+    ];
     const data = this.props.newsData;
     return (
       <section className="news-timeline">
-        <Timeline pending={<a onClick = {this.props.fetchMoreNews}>See more</a>}>
-          { 
-            data.map(function(item,i){
-              return (
-                <Timeline.Item color = 'green' key = {i} >
-                  <div>
-                    <span className='timelineDate'>{item.date}</span>
-                    <span className='timelineName'>{item.name}</span>
-                  </div>
-                  <p>{item.desc}</p>
-                </Timeline.Item>
-              )
-            })
-           }
-        </Timeline>
+        <span className='removeAllNews'>
+          <Popconfirm title="你确定要清空所有消息吗?" onConfirm={removeConfirm} okText="删除" cancelText="取消">
+            清空消息
+          </Popconfirm>
+        </span>
+        <Table
+          columns={columns}
+          expandedRowRender={record => <div className='newsDesc'><p>{record.news}</p><span onClick = {this.removeOneNews(record.key)} ><Icon type="delete" />删除</span></div>}
+          dataSource={data}
+        />
       </section>
     )
   }