help_user/src/my/MyLeaveWord.tsx

import React from "react";
import {Button, Col, Container, Image, Row} from "react-bootstrap";
import {ActiveDetail, User} from "../entity";

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<any, {
    data:Array<Type1|Type2>;
}>{


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

        this.state={data:[]}
    }

    componentDidMount() {
        this.loadLeaveWord()
    }

    /**
     * 加载留言
     */
    loadLeaveWord(){
        this.setState({
            data:[
                {
                    user:{
                        headImg:"logo512.png",
                        userId:"admin",
                        name:"张三",
                        age:Math.ceil(Math.random()*100)+1,
                        mobile:1234567879,
                        email:"admin@qq.com",
                        address:"上海高新区",
                        info:"个人简介",
                    },
                    active:{
                        title:"活动标题1",
                        content:"活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动",
                        activeImg:"logo512.png"
                    },
                    type:LeaveWordType.recommend
                },
                {
                    user:{
                        headImg:"logo512.png",
                        userId:"admin",
                        name:"张三",
                        age:Math.ceil(Math.random()*100)+1,
                        mobile:1234567879,
                        email:"admin@qq.com",
                        address:"上海高新区",
                        info:"个人简介",
                    },
                    active:{
                        title:"活动标题1",
                        content:"活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动活动内容活动内容活动",
                        activeImg:"logo512.png"
                    },
                    type:LeaveWordType.apply
                },
                {
                    user:{
                        headImg:"logo512.png",
                        userId:"admin",
                        name:"张三",
                        age:Math.ceil(Math.random()*100)+1,
                        mobile:1234567879,
                        email:"admin@qq.com",
                        address:"上海高新区",
                        info:"个人简介",
                    },
                    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
     */
    getData(data:Type1|Type2){
        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"}>查看活动详情</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 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="d-block text-center user-name">{data.user.name}</span>
                    </Col>
                    {body}
                </Row>
            </Container>
        )
    }


    render() {
        return (
            <div className="overflow-auto my-leave-world-height">
                {this.state.data.map(data =>this.getData(data))}
            </div>
        );
    }
}