You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
183 lines
6.2 KiB
183 lines
6.2 KiB
import React from "react";
|
|
import {Button, Col, Container, Image, Row} from "react-bootstrap";
|
|
import {ActiveDetail, User} from "../entity";
|
|
import {Tooltip} from "@material-ui/core";
|
|
import {MyDialog} from "../ui/MyDialog";
|
|
import {MyInfo} from "./MyInfo";
|
|
import {Active} from "../ui/Active";
|
|
import {userObj} from "../ui/TestData";
|
|
|
|
enum LeaveWordType {
|
|
recommend,
|
|
apply,
|
|
join,
|
|
complete,
|
|
friend
|
|
}
|
|
|
|
interface Type1{
|
|
active:ActiveDetail;
|
|
user:User;
|
|
type:LeaveWordType;
|
|
}
|
|
|
|
interface Type2 {
|
|
user:User;
|
|
type:LeaveWordType;
|
|
}
|
|
|
|
/**
|
|
* 我的留言
|
|
*/
|
|
export class MyLeaveWord extends React.Component<{ user:string },
|
|
{
|
|
//留言信息
|
|
data:Array<Type1|Type2>;
|
|
//打开用户信息弹框
|
|
openUserInfo:boolean;
|
|
//用户id
|
|
userId?:string;
|
|
//打开活动信息弹框
|
|
openActive:boolean;
|
|
//活动详情
|
|
active?:ActiveDetail;
|
|
}>{
|
|
|
|
|
|
constructor(props: Readonly<any>) {
|
|
super(props);
|
|
|
|
this.state={data:[],openUserInfo:false,openActive:false}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.loadLeaveWord()
|
|
}
|
|
|
|
/**
|
|
* 加载留言
|
|
*/
|
|
loadLeaveWord(){
|
|
this.setState({
|
|
data:[
|
|
{
|
|
user:userObj,
|
|
active:{
|
|
activeId:1,
|
|
title:"活动标题1",
|
|
content:"活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动",
|
|
activeImg:"logo512.png",
|
|
activeStartTime:new Date().getTime(),
|
|
activeEndTime:new Date().getTime()
|
|
},
|
|
type:LeaveWordType.recommend
|
|
},
|
|
{
|
|
user:userObj,
|
|
active:{
|
|
activeId:1,
|
|
title:"活动标题1",
|
|
content:"活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动",
|
|
activeImg:"logo512.png",
|
|
activeStartTime:new Date().getTime(),
|
|
activeEndTime:new Date().getTime()
|
|
},
|
|
type:LeaveWordType.apply
|
|
},
|
|
{
|
|
user:userObj,
|
|
type:LeaveWordType.friend
|
|
}
|
|
]
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 解析留言类型
|
|
* @param type
|
|
*/
|
|
getType(type:LeaveWordType){
|
|
switch (type) {
|
|
case LeaveWordType.recommend:return "推荐提示"
|
|
case LeaveWordType.apply:return "报名提示"
|
|
case LeaveWordType.join:return "参加提示"
|
|
case LeaveWordType.complete:return "完成提示"
|
|
case LeaveWordType.friend:return "好友验证"
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 解析留言
|
|
* @param data
|
|
* @param index
|
|
*/
|
|
getData(data:Type1|Type2,index:number){
|
|
let body
|
|
if("active" in data ){
|
|
body=<Col>
|
|
<div>
|
|
<h5 className="text-center">{data.active.title}</h5>
|
|
</div>
|
|
<div>
|
|
<p className="text-ellipsis leave-word-height">{data.active.content}</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<Button variant={"primary"} onClick={()=>this.setState({openActive:true,active:data.active})}>查看活动详情</Button>
|
|
</div>
|
|
</Col>
|
|
}else{
|
|
body=
|
|
<Col>
|
|
<div className="invisible">
|
|
<h5>~</h5>
|
|
</div>
|
|
<div>
|
|
<p className="text-ellipsis leave-word-height">{data.user.info}</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<Button variant={"primary"} className="mr-2">同意</Button>
|
|
<Button variant={"danger"}>拒绝</Button>
|
|
</div>
|
|
</Col>
|
|
}
|
|
|
|
return (
|
|
<Container key={"Container"+index} className="mt-3 pt-2 pb-2 border-info border rounded-pill">
|
|
<Row>
|
|
<Col>
|
|
<h3 className="text-center">{this.getType(data.type)}</h3>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col xs={3}>
|
|
<Image src={data.user.headImg} className="leave-word-headImg"/>
|
|
<span className="text-center user-name ml-3">{data.user.name}</span>
|
|
|
|
{data.type===LeaveWordType.friend?
|
|
<Tooltip title="查看用户信息" placement="right">
|
|
<Image src="user.svg" className="ml-1 mb-1 userIcon" onClick={()=>this.setState({openUserInfo:true,userId:data.user.userId})}/>
|
|
</Tooltip>:null}
|
|
</Col>
|
|
{body}
|
|
</Row>
|
|
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
|
|
render() {
|
|
return (
|
|
<div className="overflow-auto my-leave-world-height">
|
|
{this.state.data.map((data,index) =>this.getData(data,index))}
|
|
<MyDialog titleId="view-user" menuName="用户信息"
|
|
content={<MyInfo ownUserId={this.props.user} isOwn={false} isMyFriend={false} isAdd={false} userId={this.state.userId}/>}
|
|
open={this.state.openUserInfo} onClose={()=>this.setState({openUserInfo:false})}/>
|
|
|
|
{this.state.active?<MyDialog content={<Active active={this.state.active} showButton={false} />}
|
|
open={this.state.openActive} titleId="view-active" menuName="活动详情"
|
|
onClose={()=>this.setState({active:undefined,openActive:false})}/>:null}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|