educoder/public/react/src/modules/message/js/MessagSub.js

import React, { Component } from 'react';
import {
	Spin,
	Pagination,
} from "antd";
import axios from 'axios';
import {getImageUrl} from 'educoder';
import "../css/messagemy.css"
//消息页面
class MessagSub extends Component{
	constructor(props) {
		super(props);
		this.state={
			page:1,
			limit:10,
			typeysl:"",
			count:0,
			isSpin:false,
			data:undefined,
		}
	}
   // 初始化数据
	componentDidMount(){
		console.log("初始化数据了");
    this.getdata("",this.state.page);
		// this.Messageprivatemessageunreadmessage();
	}

	//塞选页数
	paginationonChanges=(pageNumber)=>{
		this.setState({
			page: pageNumber,
		})
		this.getdata(this.state.typeysl,pageNumber);

	}
	//获取数据源
	getdata=(types,page)=>{
		this.setState({
			isSpin:true,
		})
		let{limit}=this.state;
		let url = `/users/tidings.json`;
		axios.get((url),{params:{
				type:types,
				page:page,
				per_page:limit,
			}}).then((result) => {
			if (result) {
				// console.log(types);
				// console.log(result);
				if(result.data.message!==undefined){
					// console.log("5151515151");
					return;
				}
				// console.log("调用了消失的方法");
				// console.log("5454545454");
        this.setState({
					page:page,
					count:result.data.count,
					typeysl:types,
					isSpin:false,
					data:result.data.tidings===null?undefined:result.data.tidings===undefined?undefined:result.data.tidings===[]?undefined:result.data.tidings==="[]"?undefined:result.data.tidings.length===0?undefined:result.data.tidings,
				})
			}
		}).catch((error) => {
			console.log(error);
			this.setState({
				isSpin:false,
			})
		})
	}

	componentWillUnmount(){
		// 卸载异步操作设置状态
		this.setState = (state, callback) => {
			return;
		}
	}
	render() {
		let{page,limit,typeysl,count,isSpin,data}=this.state;
		// console.log("6868686868");
		 console.log(data);
		return (
     <div className="clearfix ml20">
			 {/*头部筛选数据*/}
     <ul className="pl10 ridingNav clearfix edu-back-white">
			 <li className={typeysl===""?"active":""}><a onClick={(s,i)=>this.getdata("",1)}>全部</a></li>

			 <li className={typeysl&&typeysl==="course"?"active":""} ><a onClick={(s,i)=>this.getdata("course",1)}>课堂提醒</a></li>

			 <li className={typeysl&&typeysl==="project"?"active":""} ><a onClick={(s,i)=>this.getdata("project",1)}>项目提醒</a></li>

			 <li className={typeysl&&typeysl==="project_package"?"active":""}><a onClick={(s,i)=>this.getdata("project_package",1)}>众包提醒</a></li>

			 <li className={typeysl&&typeysl==="interactive"?"active":""}><a onClick={(s,i)=>this.getdata("interactive",1)}>互动提醒</a></li>

			 <li className={typeysl&&typeysl==="apply"?"active":""}><a onClick={(s,i)=>this.getdata("apply",1)}>审核</a></li>

			 <li className={typeysl&&typeysl==="system"?"active":""}><a onClick={(s,i)=>this.getdata("system",1)}>通知</a></li>




		 </ul>
			  {/*下面内容页面*/}
			 <div className="bor-top-greyE mycenter">
				 {/*这里可以进行数据处理*/}
				 <div className="myw100baifenbi">
				 <Spin size="large" className="myw100baifenbi" spinning={isSpin}>

					 {
						 data===undefined?
							 <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>
							 :data.map((item,key)=>{
							 	console.log(data)
								 return(
									 <div className="pl25 ridinglist edu-back-white" key={key}>
										 <div className="ridinglist-sub clearfix df tiding_item">
											 <img  src={getImageUrl("/images/"+item.trigger_user.image_url)} className="radius mr10 fl myimgw48 myimgh48"/>
											 <div className="fl flex1">
												 <p>
													 <span className="mr20">{item.trigger_user.name}</span>
													 <span className="color-grey-c">{item.time}</span>
													 {this.state.typeysl==="apply"?(
														 item.status===0?
														 <span className="edu-filter-btn ml20 edu-filter-btn-red">待处理</span>:""
													 ):""}
													 {this.state.typeysl==="apply"?(
														 item.status===1?
														 <span className="edu-filter-btn ml20 edu-filter-btn-green">已处理</span>:""
													 ):""}

												 </p>
												 <p className="color-grey-6 break_word_firefox" style={{wordBreak: "break-word"}}>
													 {
													 	item.content
													 }
												 </p>

											 </div>

											 <span className={item.new_tiding===true?"new-point fr mr40 mt22":""}></span>
										 </div>

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

				 {/*页数*/}
				 { data===undefined?""
					 :
					 (count>10?
						 <div style={{textAlign: "center"}} className="new_expand mt10">
							 <div className="edu-txt-center mt30">
								 <Pagination showQuickJumper current={page}
														 onChange={this.paginationonChanges} pageSize={limit}
														 total={count}></Pagination>
							 </div>
						 </div>:""
					 )

				 }
				 </div>

			 </div>
		 </div>
		)
	}
}
export default MessagSub;