dev_cs_new
parent
cad8f2fbbd
commit
f3a744b712
@ -1,21 +1,230 @@
|
||||
import React, { Component } from 'react';
|
||||
import "../css/messagemy.css"
|
||||
import {getImageUrl} from 'educoder';
|
||||
import { Modal,Input,Icon,Tooltip,Spin} from 'antd';
|
||||
import axios from 'axios';
|
||||
//私信聊天页面
|
||||
class MessagChat extends Component{
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state={
|
||||
|
||||
isSpin:false,
|
||||
isSpins:false,
|
||||
limit:20,
|
||||
page:1,
|
||||
datay:[],
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
this.getdata(1);
|
||||
console.log("MessagChat");
|
||||
console.log(this.props);
|
||||
}
|
||||
// 滑动刷新
|
||||
contentViewScrolledit=(e)=>{
|
||||
|
||||
//滑动到底判断
|
||||
if(e.currentTarget.scrollHeight-e.currentTarget.scrollTop===e.currentTarget.clientHeight){
|
||||
console.log("滑动到底判断");
|
||||
let {page}=this.state;
|
||||
let newpage=page+1
|
||||
this.getdata(newpage);
|
||||
}
|
||||
|
||||
};
|
||||
//获取数据地方
|
||||
getdata=(page)=>{
|
||||
this.setState({
|
||||
isSpins:true,
|
||||
});
|
||||
let{limit}=this.state;
|
||||
let url = `/users/${this.props.current_user.user_id}/private_messages.json`;
|
||||
// let url = `/users/71519/private_messages.json`;
|
||||
axios.get((url),{params:{
|
||||
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");
|
||||
|
||||
|
||||
if(result.data!==null){
|
||||
if(result.data.private_messages!==null){
|
||||
if(result.data.private_messages.length>0){
|
||||
for (var i=0;i<result.data.private_messages.length;i++){
|
||||
this.state.datay.push(result.data.private_messages[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.setState({
|
||||
page:page,
|
||||
isSpins:false,
|
||||
datay,
|
||||
data:result.data.private_messages===null?undefined:result.data.private_messages===undefined?undefined:result.data.private_messages===[]?undefined:result.data.private_messages==="[]"?undefined:result.data.private_messages.length===0?undefined:result.data.private_messages,
|
||||
});
|
||||
// console.log(this.state.datay);
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
this.setState({
|
||||
isSpins:false,
|
||||
})
|
||||
})
|
||||
};
|
||||
// 跳转页面
|
||||
smyJump =(i)=>{
|
||||
console.log("跳转页面");
|
||||
console.log(i);
|
||||
this.props.Modifyur(i);
|
||||
};
|
||||
FormatTime=(timestamp)=> {
|
||||
var datetime = new Date(timestamp.replace(/-/,"/"))
|
||||
var mistiming = Math.round(new Date() / 1000) - datetime;
|
||||
var postfix = mistiming > 0 ? '前' : '后'
|
||||
mistiming = Math.abs(mistiming)
|
||||
var arrr = ['年', '个月', '星期', '天', '小时', '分钟', '秒'];
|
||||
var arrn = [31536000, 2592000, 604800, 86400, 3600, 60, 1];
|
||||
|
||||
for (var i = 0; i < 7; i++) {
|
||||
var inm = Math.floor(mistiming / arrn[i])
|
||||
if (inm != 0) {
|
||||
return inm + arrr[i] + postfix
|
||||
}
|
||||
}
|
||||
}
|
||||
render() {
|
||||
let{isSpins,datay}=this.state;
|
||||
return (
|
||||
<div>
|
||||
<div className="edu-back-white ml20">
|
||||
{/*私信对话框*/}
|
||||
<div className="df clearfix">
|
||||
{/*左边*/}
|
||||
<div className="flex1">
|
||||
<p className="clearfix pt30 pb30 edu-txt-center font-16 bor-bottom-greyE">
|
||||
<a onClick={()=>this.smyJump(2)}><i className="iconfont icon-zuojiantou font-14 fl ml25 color-grey-9"
|
||||
data-tip-down="返回到列表"></i></a>
|
||||
117llj与你的私信
|
||||
</p>
|
||||
{/*聊天页面*/}
|
||||
<div className="dialogPanel">
|
||||
<div className="dialogPanel">
|
||||
<div>
|
||||
<p className="mt30 edu-txt-center"><span className="letter-time">2019/07/20</span></p>
|
||||
{/*右边*/}
|
||||
<div className="ThisSide clearfix" id="message_content_25137">
|
||||
<a href="/users/innov"><img alt="1?1558048024" className="ml10 radius fr myimgw48 myimgh48" src={"/images/avatars/User/1?1558048024"} /></a>
|
||||
<div className="fr pr ThisSide-info">
|
||||
<span className="trangle"></span>
|
||||
<div className="sms break_word" id="message_content_show_25137">hello</div>
|
||||
<div className="edu-txt-left mt5">
|
||||
<a href="javascript:void(0)" className="color-grey-c"
|
||||
>删除</a>
|
||||
</div>
|
||||
</div>
|
||||
<span className="fr mr15 color-grey-c lineh-15 mt15">22:20</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/*回复*/}
|
||||
<div className="bor-top-greyE padding20">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
{/*右边*/}
|
||||
<div className="bor-left-greyE" style={{width:"290px"}}>
|
||||
{/*右边头部*/}
|
||||
<p className="pt30 pb30 pl30 edu-txt-left font-16 bor-bottom-greyE">私信列表</p>
|
||||
<Spin size="large" className="myw100baifenbi" spinning={isSpins}>
|
||||
<div className="private-list " style={{maxHeight:"628px"}} onScroll={this.contentViewScrolledit}>
|
||||
{/*列表数据*/}
|
||||
{
|
||||
datay===undefined?
|
||||
""
|
||||
:datay.map((item,key)=>{
|
||||
return(
|
||||
<div className="private-part clearfix" key={key}>
|
||||
<div className="part-line df">
|
||||
<img src={item.target.image_url} className="radius mr10 myimgw48 myimgh48"/>
|
||||
<div className="flex1">
|
||||
<p className="clearfix mb15 lineh-17">
|
||||
<span className="fl pr">
|
||||
<span className="task-hide privatePartName">{item.target.name}</span>
|
||||
{item.unread === true?
|
||||
<span className="newLetter"></span>
|
||||
:""}
|
||||
</span>
|
||||
<span className="color-grey-c fr">{(time)=>this.FormatTime(item.send_time)}</span>
|
||||
</p>
|
||||
<p className="color-grey-6 lineh-20 justify break_word task-hide-2" style={{wordBreak:"break-word"}} dangerouslySetInnerHTML={{__html:item.content}}></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</Spin>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default MessagChat;
|
||||
export default MessagChat;
|
||||
|
||||
|
||||
// onClick="delete_confirm_box('/users/innov/delete_message?mess_id=25137', '确定要删除该条记录吗？')"
|
||||
//
|
||||
// {/*左边*/}
|
||||
// <div className="OtherSide clearfix" id="message_content_25148">
|
||||
// <a href="/users/p94531287"><img alt="71519?1564061748" className="mr10 radius fl" height="48"
|
||||
// src="/images/avatars/User/71519?1564061748" width="48"></a>
|
||||
// <div className="fl pr OtherSide-info">
|
||||
// <span className="trangle"></span>
|
||||
// <div className="sms break_word" id="message_content_show_25148">你好</div>
|
||||
// <div className="edu-txt-right mt5">
|
||||
// <a href="javascript:void(0)" className="color-grey-c"
|
||||
// onClick="delete_confirm_box('/users/innov/delete_message?mess_id=25148', '确定要删除该条记录吗？')">删除</a>
|
||||
// </div>
|
||||
// </div>
|
||||
// <span className="fl ml15 color-grey-c lineh-15 mt15">22:21</span>
|
||||
// </div>
|
||||
@ -1,20 +1,158 @@
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Spin,
|
||||
Pagination,
|
||||
} from "antd";
|
||||
import axios from 'axios';
|
||||
import {getImageUrl} from 'educoder';
|
||||
import "../css/messagemy.css"
|
||||
import WriteaprivateletterModal from '../messagemodal/WriteaprivateletterModal';
|
||||
//私信页面
|
||||
class MessagePrivate extends Component{
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state={
|
||||
|
||||
}
|
||||
page:1,
|
||||
limit:10,
|
||||
count:0,
|
||||
data:undefined,
|
||||
isSpin:false,
|
||||
modalsType:false,
|
||||
};
|
||||
console.log("MessagePrivate");
|
||||
console.log(this.props);
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
this.getdata(1);
|
||||
};
|
||||
|
||||
//获取数据地方
|
||||
getdata=(page)=>{
|
||||
this.setState({
|
||||
isSpin:true,
|
||||
});
|
||||
let{limit}=this.state;
|
||||
let url = `/users/${this.props.current_user.user_id}/private_messages.json`;
|
||||
// let url = `/users/71519/private_messages.json`;
|
||||
axios.get((url),{params:{
|
||||
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,
|
||||
isSpin:false,
|
||||
data:result.data.private_messages===null?undefined:result.data.private_messages===undefined?undefined:result.data.private_messages===[]?undefined:result.data.private_messages==="[]"?undefined:result.data.private_messages.length===0?undefined:result.data.private_messages,
|
||||
})
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
this.setState({
|
||||
isSpin:false,
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
paginationonChanges=(pageNumber)=>{
|
||||
this.setState({
|
||||
page: pageNumber,
|
||||
})
|
||||
this.getdata(pageNumber);
|
||||
};
|
||||
okmodalsType=()=>{
|
||||
this.setState({
|
||||
modalsType:true,
|
||||
})
|
||||
}
|
||||
cancelmodalsType=()=>{
|
||||
this.setState({
|
||||
modalsType:false,
|
||||
})
|
||||
};
|
||||
// 跳转页面
|
||||
smyJump =(i)=>{
|
||||
console.log("跳转页面");
|
||||
console.log(i);
|
||||
this.props.Modifyur(i);
|
||||
}
|
||||
render() {
|
||||
let{page,limit,typeysl,count,isSpin,data,modalsType}=this.state;
|
||||
// console.log( this.props);
|
||||
// console.log("37");
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
modalsType===true?
|
||||
<WriteaprivateletterModal {...this.state} {...this.props} modalsType={modalsType} cancelmodalsType={this.cancelmodalsType} smyJump={(is)=>this.smyJump(is)} ></WriteaprivateletterModal>
|
||||
:""
|
||||
}
|
||||
<div className="edu-back-white ml25">
|
||||
<p className="clearfix font-16 padding30-20 bor-bottom-greyE">
|
||||
<span className="fl">全部私信</span>
|
||||
<a href="javascript:void(0);" className="color-blue fr" onClick={()=>this.okmodalsType()}>写私信</a>
|
||||
</p>
|
||||
<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)=>{
|
||||
return(
|
||||
|
||||
<div className="private-item clearfix df" key={key} onClick={(i)=>this.smyJump(3)}>
|
||||
<a className="fl mr10 private_message_a">
|
||||
<img src={item.target.image_url} className="radius myimgw48 myimgh48"/>
|
||||
</a>
|
||||
<div className="fl flex1">
|
||||
<p>
|
||||
<a href="javascript:void(0);" onClick={()=>this.smyJump()} className="mr20 private_message_a">{item.target.name}</a>
|
||||
<span>与你的私信</span>
|
||||
<span className="color-grey-c mr20">[{item.message_count}{"条"}]</span>
|
||||
<span className="color-grey-c">{item.send_time}</span>
|
||||
</p>
|
||||
<span className="color-grey-6 break_word_firefox " dangerouslySetInnerHTML={{__html:item.content}}></span>
|
||||
|
||||
</div>
|
||||
{item.unread === true ?<span className="new-point fr mt22"></span>:""}
|
||||
</div>
|
||||
|
||||
)
|
||||
})}
|
||||
</Spin>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/*页数*/}
|
||||
{ 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>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue