help_user/src/my/MyLeaveWord.tsx

import React from "react";
import {Button, Col, Container, Image, Row} from "react-bootstrap";
import {ActivityDetail, User} from "../entity";
import {Tooltip} from "@material-ui/core";
import {MyDialog} from "../ui/MyDialog";
import {MyInfo} from "./MyInfo";
import {Activity} from "../ui/Activity";
import {activityObj, userObj} from "../ui/TestData";

enum LeaveWordType {
    //推荐
    recommend="recommend",
    //报名
    apply="apply",
    //参与
    join="join",
    //完成
    complete="complete",
    //好友验证
    friend="friend"
}

interface Type1{
    activity:ActivityDetail;
    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;
    //打开活动信息弹框
    openActivity:boolean;
    //活动详情
    activity?:ActivityDetail;
}>{


    constructor(props: Readonly<any>) {
        super(props);

        this.state={data:[],openUserInfo:false,openActivity:false}
    }

    componentDidMount() {
        this.loadLeaveWord()
    }

    /**
     * 加载留言
     */
    loadLeaveWord(){
        this.setState({
            data:[
                {
                    user:userObj,
                    activity:activityObj,
                    type:LeaveWordType.recommend
                },
                {
                    user:userObj,
                    activity:activityObj,
                    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("activity" in data ){
           body=<Col>
               <div>
                   <h5 className="text-center">{data.activity.title}</h5>
               </div>
               <div>
                   <p className="text-ellipsis leave-word-height">{data.activity.content}</p>
               </div>
               <div className="text-center">
                   <Button variant={"primary"} onClick={()=>this.setState({openActivity:true,activity:data.activity})}>查看活动详情</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 isOwn={false} isMyFriend={false} isAdd={false} userId={this.state.userId?this.state.userId:""}/>}
                          open={this.state.openUserInfo} onClose={()=>this.setState({openUserInfo:false})}/>

                {this.state.activity?<MyDialog content={<Activity activity={this.state.activity} showButton={false} />}
                                               open={this.state.openActivity} titleId="view-activity" menuName="活动详情"
                                               onClose={()=>this.setState({activity:undefined,openActivity:false})}/>:null}
            </div>
        )
    }
}