增加我的留言页面

志愿者布局调整

src/entity.ts

@@ -61,6 +61,11 @@ export interface BaseHelp {
     activeImg:string;
 }
 
+//活动详情
+export interface ActiveDetail extends BaseHelp{
+
+}
+
 //我的帮助信息
 export interface MyHelpState extends BaseHelp{
     //求助时间
@@ -208,3 +213,4 @@ export interface Chat {
     //发送时间
     time:number;
 }
+

src/index.css

@@ -39,6 +39,43 @@
   height: 100px;
 }
 
+.leave-word-headImg{
+  width:100px;
+  height: 100px;
+}
+
+/**
+* 文本省略
+ */
+.text-ellipsis{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+/**
+* 留言正文内容
+ */
+.leave-word-height{
+  -webkit-line-clamp:2;
+  height: 50px;
+}
+
+/**
+* 名字
+*/
+.user-name{
+  width: 100px;
+}
+
+/**
+* 留言
+ */
+.leave-word-parent-height{
+  height: 140px;
+}
+
 /**
 发送信息框
  */
@@ -76,7 +113,7 @@
 * 我的留言高度
  */
 .my-leave-world-height{
-  height: 400px;
+  height: 450px;
 }
 
 /**

src/my/MyFriend.tsx

@@ -13,7 +13,7 @@ function UserPart(props:Readonly<any>) {
     return (
         <Col xs={4}>
             <Image roundedCircle={true} src={props.headImg} className="chat-headImg"/>
-            <span className="d-block text-center" style={{width:"100px"}}>{props.name}</span>
+            <span className="d-block text-center user-name">{props.name}</span>
         </Col>
     )
 }

src/my/MyHelp.tsx

@@ -139,7 +139,7 @@ export class MyHelp extends React.Component<any, { data:Array<MyHelpState> }>{
 
     render() {
         return (
-            <div className="overflow-auto seek-help-height">
+            <div className="overflow-auto my-help-height">
                 {this.state.data.map((help:MyHelpState,index:number)=>
                     <div key={"list"+index} className="mt-3 mb-3 border-info border">
                         <Container>

src/my/MyLeaveWord.tsx

@@ -1,10 +1,175 @@
 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, any>{
+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 (<h1>我的留言！！！！！</h1>);
+        return (
+            <div className="overflow-auto my-leave-world-height">
+                {this.state.data.map(data =>this.getData(data))}
+            </div>
+        );
     }
 }

src/sub/Volunteer.tsx

@@ -113,6 +113,201 @@ export class Volunteer extends React.Component<any, any>{
                     //服务地点
                     address:"广州"
                 }
+            ],[
+                {
+                    //个人描述
+                    desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
+                    //姓名
+                    name:"张三",
+                    //性别
+                    sex:"男",
+                    //年龄
+                    age:17,
+                    //联系电话
+                    phone:15920722180,
+                    //邮箱
+                    mail:"admin@qq.com",
+                    //服务地点
+                    address:"广州"
+                },
+                {
+                    //个人描述
+                    desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
+                    //姓名
+                    name:"张三",
+                    //性别
+                    sex:"男",
+                    //年龄
+                    age:17,
+                    //联系电话
+                    phone:15920722180,
+                    //邮箱
+                    mail:"admin@qq.com",
+                    //服务地点
+                    address:"广州"
+                },
+                {
+                    //个人描述
+                    desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
+                    //姓名
+                    name:"张三",
+                    //性别
+                    sex:"男",
+                    //年龄
+                    age:17,
+                    //联系电话
+                    phone:15920722180,
+                    //邮箱
+                    mail:"admin@qq.com",
+                    //服务地点
+                    address:"广州"
+                },
+                {
+                    //个人描述
+                    desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
+                    //姓名
+                    name:"张三",
+                    //性别
+                    sex:"男",
+                    //年龄
+                    age:17,
+                    //联系电话
+                    phone:15920722180,
+                    //邮箱
+                    mail:"admin@qq.com",
+                    //服务地点
+                    address:"广州"
+                }
+            ],[
+                {
+                    //个人描述
+                    desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
+                    //姓名
+                    name:"张三",
+                    //性别
+                    sex:"男",
+                    //年龄
+                    age:17,
+                    //联系电话
+                    phone:15920722180,
+                    //邮箱
+                    mail:"admin@qq.com",
+                    //服务地点
+                    address:"广州"
+                },
+                {
+                    //个人描述
+                    desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
+                    //姓名
+                    name:"张三",
+                    //性别
+                    sex:"男",
+                    //年龄
+                    age:17,
+                    //联系电话
+                    phone:15920722180,
+                    //邮箱
+                    mail:"admin@qq.com",
+                    //服务地点
+                    address:"广州"
+                },
+                {
+                    //个人描述
+                    desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
+                    //姓名
+                    name:"张三",
+                    //性别
+                    sex:"男",
+                    //年龄
+                    age:17,
+                    //联系电话
+                    phone:15920722180,
+                    //邮箱
+                    mail:"admin@qq.com",
+                    //服务地点
+                    address:"广州"
+                },
+                {
+                    //个人描述
+                    desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
+                    //姓名
+                    name:"张三",
+                    //性别
+                    sex:"男",
+                    //年龄
+                    age:17,
+                    //联系电话
+                    phone:15920722180,
+                    //邮箱
+                    mail:"admin@qq.com",
+                    //服务地点
+                    address:"广州"
+                }
+            ],[
+                {
+                    //个人描述
+                    desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
+                    //姓名
+                    name:"张三",
+                    //性别
+                    sex:"男",
+                    //年龄
+                    age:17,
+                    //联系电话
+                    phone:15920722180,
+                    //邮箱
+                    mail:"admin@qq.com",
+                    //服务地点
+                    address:"广州"
+                },
+                {
+                    //个人描述
+                    desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
+                    //姓名
+                    name:"张三",
+                    //性别
+                    sex:"男",
+                    //年龄
+                    age:17,
+                    //联系电话
+                    phone:15920722180,
+                    //邮箱
+                    mail:"admin@qq.com",
+                    //服务地点
+                    address:"广州"
+                },
+                {
+                    //个人描述
+                    desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
+                    //姓名
+                    name:"张三",
+                    //性别
+                    sex:"男",
+                    //年龄
+                    age:17,
+                    //联系电话
+                    phone:15920722180,
+                    //邮箱
+                    mail:"admin@qq.com",
+                    //服务地点
+                    address:"广州"
+                },
+                {
+                    //个人描述
+                    desc:"个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述个人描述",
+                    //姓名
+                    name:"张三",
+                    //性别
+                    sex:"男",
+                    //年龄
+                    age:17,
+                    //联系电话
+                    phone:15920722180,
+                    //邮箱
+                    mail:"admin@qq.com",
+                    //服务地点
+                    address:"广州"
+                }
             ]]
         })
     }
@@ -137,7 +332,7 @@ export class Volunteer extends React.Component<any, any>{
 
                 <Button className="col-1 mt-3 mb-3" variant="info" onClick={()=>console.info(this.state.form)}>搜索</Button>
 
-                <Page onClick={(page:number)=>this.loadVolunteerList(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>
+                {/*<Page onClick={(page:number)=>this.loadVolunteerList(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>*/}
 
 
                     {this.state.volunteerList.map((volunteers:Array<VolunteerProps>, index:number)=>