完善登录注册页面

src/account/Login.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import {Button, Form} from 'react-bootstrap'
-import {LoginProps, LoginState} from "./LoginProps";
 import {Input} from "../ui/InputGroup";
+import {LoginProps, LoginState} from "../entity";
 
 /**
  * 登陆表单组件
@@ -23,11 +23,14 @@ export class Login extends React.Component<LoginProps, LoginState>{
             <div className="d-flex align-items-center" style={{height:window.screen.availHeight+'px'}}>
                 <div className="container">
                     <Form>
-                        <Input name="user" type="text" desc="用户账号" value={this.state.user} onChange={(value: string)=>{this.setState({user:value})}}/>
+                        <Input name="user" type="text" desc="用户账号" value={this.state.user}
+                               onChange={(value: string)=>{this.setState({user:value})}} valid={{check:this.state.user.length>0}}/>
 
-                        <Input name="password" type="password" desc="用户密码" value={this.state.password}  onChange={(value: string)=>{this.setState({password:value})}}/>
+                        <Input name="password" type="password" desc="用户密码" value={this.state.password}
+                               onChange={(value: string)=>{this.setState({password:value})}} valid={{check:this.state.password.length>0}}/>
 
-                        <Button variant="success" className="mt-3 col-2 mr-3"  onClick={()=>this.props.login(this.state.user,this.state.password)}>登录</Button>
+                        <Button variant="success" className="mt-3 col-2 mr-3"  disabled={!(this.state.user.length>0&&this.state.password.length>0)}
+                                onClick={()=>this.props.login(this.state.user,this.state.password)}>登录</Button>
 
                         <Button variant="info" className="mt-3 col-2"  onClick={()=>this.props.toRegister()}>跳转到注册</Button>
                     </Form>

src/account/LoginProps.ts

@@ -1,20 +0,0 @@
-
-/**
- * 登陆表单
- */
-export interface LoginProps{
-    //跳转注册
-    toRegister:Function;
-    //登录
-    login:Function;
-}
-
-/**
- * 登陆状态
- */
-export interface LoginState {
-    //管理员名
-    user:string;
-    //密码
-    password:string;
-}

src/account/Register.tsx

@@ -1,24 +1,98 @@
-import React from "react";
+import React, {RefObject} from "react";
-import {RegisterProps, RegisterState} from "./RegisterProps";
 import {Input} from "../ui/InputGroup";
 import {Button, Form} from 'react-bootstrap'
+import {RegisterProps, RegisterState, UserType} from "../entity";
+import {UploadImg} from "../ui/UploadImg";
+import {Address} from "../ui/Address";
 
+/**
+ * 图片尺寸限制
+ */
+const maxImageSize={
+    width:100,
+    height:100
+}
+
+const headimgTip="请上传头像"
 /**
  * 注册
  */
 export class Register extends React.Component<RegisterProps, RegisterState>{
 
+    //存放头像
+    private fileImg: RefObject<any>;
+
     constructor(props: Readonly<RegisterProps>) {
         super(props)
         this.state={
-            user:"",
+            sex: "",
+            address: "",
+            age: 0,
+            email: "",
+            headImg: headimgTip,
+            info: "",
+            mobile: 0,
+            name: "",
+            userId: "",
             password:"",
+            confirmPwd:"",
+            userType:""
         }
+
+        this.fileImg=React.createRef()
     }
 
     //注册
     register(){
-        alert("您输入的用户名是"+this.state.user+",您输入的密码是:"+this.state.password);
+        console.debug(this.state);
+
+    }
+
+    //检查是否为空
+    isNotEmpty(...value:(string | number)[]){
+        for(let index in value){
+            if(value[index].toString().length===0){
+                return false
+            }
+        }
+        return true
+    }
+
+    //检查密码
+    checkPwd(){
+        return this.state.confirmPwd.length>0&&this.state.password===this.state.confirmPwd
+    }
+
+    //检查表单
+    check(){
+        return this.isNotEmpty(this.state.userId,this.state.password,this.state.name,this.state.sex,this.state.address,this.state.userType,this.state.info)
+            &&this.state.headImg!==headimgTip&&this.checkPwd()&&this.checkMobile()&&this.checkEmail()
+    }
+
+    //解析身份
+    getType(type:String){
+        switch (type) {
+            case UserType.help.toString():
+                return "帮助信息"
+            case UserType.seekHelp.toString():
+                return "求助信息"
+        }
+
+        return ""
+    }
+
+    /**
+     * 检查手机号
+     */
+    checkMobile(){
+        return  /1[3456789]\d{9}/g.test(this.state.mobile.toString())
+    }
+
+    /**
+     * 检查邮箱
+     */
+    checkEmail(){
+        return /[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}/g.test(this.state.email)
     }
 
     render() {
@@ -26,11 +100,36 @@ export class Register extends React.Component<RegisterProps, RegisterState>{
             <div className="d-flex align-items-center" style={{height:window.screen.availHeight+'px'}}>
                 <div className="container">
                     <Form>
-                        <Input name="user" type="text" desc="用户账号" value={this.state.user} onChange={(value: string)=>{this.setState({user:value})}}/>
+                        <Input col={4} name="userId" type="text" desc="用户账号" value={this.state.userId} onChange={(value: string)=>{
+                            this.setState({...this.state,...{userId:value}})}} valid={{check:this.isNotEmpty(this.state.userId)}}/>
+
+                        <Input col={4} name="password" type="password" desc="用户密码" value={this.state.password}
+                               onChange={(value: string)=>{this.setState({password:value})}} valid={{check:this.isNotEmpty(this.state.password)}}/>
+
+                        <Input col={4} name="confirmPwd" type="password" desc="确认密码" placeholder="请确认密码" value={this.state.confirmPwd}
+                               onChange={(value: string)=>{this.setState({confirmPwd:value})}}
+                               valid={{check:this.checkPwd(),
+                                   invalid:this.state.confirmPwd.length>0&&this.state.password!==this.state.confirmPwd?"密码和确认密码不一致":"验证失败"}}/>
+
+                        <Input col={4} name="name" desc="姓名" onChange={(value:string)=>this.setState({name:value})} valid={{check:this.isNotEmpty(this.state.name)}}/>
+
+                        <Input col={4} name="sex" desc="性别" as="select" onChange={(value:string)=>this.setState({sex:value})}
+                               options={[<option value="" key={"sex"+0}>请选择性别</option>,<option value="man" key={"sex"+1}>男</option>,<option value="women" key={"sex"+2}>女</option>]}/>
+
+                        <UploadImg fileImg={this.fileImg} maxImageSize={maxImageSize} onChange={(value:string)=>this.setState({headImg:value})} imageName={this.state.headImg}/>
+
+                        <Address onChange={(value:string)=>this.setState({address:value})}/>
+
+                        <Input col={4} name="userType" desc="用户身份" as="select" onChange={(value:string)=>this.setState({userType:this.getType(value)})}
+                               options={[<option value="" key={"userType0"}>请选择用户身份</option>,<option key={"userType1"} value={UserType.help}>服务发起者</option>,<option key={"userType2"} value={UserType.seekHelp}>服务接收者</option>]}/>
+
+                        <Input col={4} name="mobile" desc="电话" onChange={(value:string)=>this.setState({mobile:+value})} valid={{check:this.checkMobile()}}/>
+
+                        <Input col={4} name="email" desc="邮箱" onChange={(value:string)=>this.setState({email:value})} valid={{check:this.checkEmail()}}/>
 
-                        <Input name="password" type="password" desc="用户密码" value={this.state.password}  onChange={(value: string)=>{this.setState({password:value})}}/>
+                        <Input col={7} name="info" desc="简介" as={"textarea"} onChange={(value:string)=>this.setState({info:value})} valid={{check:this.isNotEmpty(this.state.info)}}/>
 
-                        <Button variant="success" className="mt-3 col-2 mr-3"  onClick={()=>this.register()}>注册</Button>
+                        <Button variant="success" className="mt-3 col-2 mr-3" disabled={!this.check()} onClick={()=>this.register()}>注册</Button>
 
                         <Button variant="info" className="mt-3 col-2"  onClick={()=>this.props.toLogin()}>返回登陆</Button>
                     </Form>

src/account/RegisterProps.tsx

@@ -1,14 +0,0 @@
-/**
- * 注册表单
- */
-export interface RegisterProps {
-    //跳转登录
-    toLogin:Function;
-}
-
-export interface RegisterState {
-    //管理员名
-    user:string;
-    //密码
-    password:string;
-}

src/entity.ts

@@ -166,6 +166,11 @@ export interface MyDialogProps extends CloseDialogProps{
     open:boolean;
 }
 
+export enum UserType {
+    seekHelp,
+    help
+}
+
 /**
  * 用户信息
  */
@@ -186,7 +191,11 @@ export interface User{
     info:string;
     //头像
     headImg:string;
-    //好友状态
+    //性别
+    sex:string;
+    //身份
+    userType:string;
+    //用户状态
     status?:boolean;
 }
 
@@ -249,4 +258,45 @@ export interface FormInputProps {
     col?: number
     //长度
     maxLength?: number
+    //选项
+    options?:Array<JSX.Element>;
+}
+
+
+/**
+ * 表单状态
+ */
+export interface RegisterState extends User{
+    //密码
+    password: string;
+    //确认密码
+    confirmPwd:string;
+}
+
+/**
+ * 注册表单
+ */
+export interface RegisterProps {
+    //跳转登录
+    toLogin: Function;
+}
+
+/**
+ * 登陆表单
+ */
+export interface LoginProps {
+    //跳转注册
+    toRegister: Function;
+    //登录
+    login: Function;
+}
+
+/**
+ * 登陆状态
+ */
+export interface LoginState{
+    //管理员名
+    user: string;
+    //密码
+    password: string;
 }

src/my/MyFriend.tsx

@@ -5,6 +5,7 @@ import {Tooltip} from "@material-ui/core";
 import moment from "moment";
 import {MyInfo} from "./MyInfo";
 import {MyDialog} from "../ui/MyDialog";
+import {userObj} from "../ui/TestData";
 
 
 const maxLength=150
@@ -64,132 +65,22 @@ export class MyFriend extends React.Component<{ user:string },
      */
     queryUser(keyword:string){
         this.setState({
-            userList:[{
+            userList:[userObj,userObj,userObj]
-                headImg:"logo512.png",
-                userId:"admin",
-                name:"张三",
-                age:Math.ceil(Math.random()*100)+1,
-                mobile:1234567879,
-                email:"admin@qq.com",
-                address:"上海高新区",
-                info:"个人简介",
-            },
-            {
-                headImg:"logo512.png",
-                userId:"admin",
-                name:"张三",
-                age:Math.ceil(Math.random()*100)+1,
-                mobile:1234567879,
-                email:"admin@qq.com",
-                address:"上海高新区",
-                info:"个人简介",
-            },
-            {
-                headImg:"logo512.png",
-                userId:"admin",
-                name:"张三",
-                age:Math.ceil(Math.random()*100)+1,
-                mobile:1234567879,
-                email:"admin@qq.com",
-                address:"上海高新区",
-                info:"个人简介",
-            }]
         })
     }
 
     //查找我的好友
     loadMyFriend(keyword:string){
         this.setState({
-            friendList:[{
+            friendList:[userObj,userObj,userObj]
-                headImg:"logo512.png",
-                userId:"admin",
-                name:"张三",
-                age:Math.ceil(Math.random()*100)+1,
-                mobile:1234567879,
-                email:"admin@qq.com",
-                address:"上海高新区",
-                info:"个人简介",
-                status:true
-            },
-            {
-                headImg:"logo512.png",
-                userId:"admin",
-                name:"张三",
-                age:Math.ceil(Math.random()*100)+1,
-                mobile:1234567879,
-                email:"admin@qq.com",
-                address:"上海高新区",
-                info:"个人简介",
-                status:false
-            },
-            {
-                headImg:"logo512.png",
-                userId:"admin",
-                name:"张三",
-                age:Math.ceil(Math.random()*100)+1,
-                mobile:1234567879,
-                email:"admin@qq.com",
-                address:"上海高新区",
-                info:"个人简介",
-                status:false
-            }]
         })
     }
 
     //加载聊天记录
     loadMyChat(user:User){
+
         this.setState({
-            chatList:[{
+            chatList:[userObj,userObj,userObj,userObj]
-                //发送人名称
-                name:"张三",
-                //发送人头像
-                headImg:"logo512.png",
-                //发送内容
-                content:"发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容",
-                //发送时间
-                time:new Date().getTime(),
-                userId:"admin",
-                age:Math.ceil(Math.random()*100)+1,
-                mobile:1234567879,
-                email:"admin@qq.com",
-                address:"上海高新区",
-                info:"个人简介",
-                flag:false
-            },
-            {
-                //发送人名称
-                name:"张三",
-                //发送人头像
-                headImg:"logo512.png",
-                //发送内容
-                content:"发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容",
-                //发送时间
-                time:new Date().getTime(),
-                userId:"admin",
-                age:Math.ceil(Math.random()*100)+1,
-                mobile:1234567879,
-                email:"admin@qq.com",
-                address:"上海高新区",
-                info:"个人简介",
-                flag:false
-            },
-            {
-                //发送人名称
-                name:"abc",
-                //发送人头像
-                headImg:"logo512.png",
-                //发送内容
-                content:"发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容",
-                //发送时间
-                time:new Date().getTime(),
-                userId:"admin",
-                age:Math.ceil(Math.random()*100)+1,
-                mobile:1234567879,
-                email:"admin@qq.com",
-                address:"上海高新区",
-                info:"个人简介",
-                flag:true
-            }]
         })
     }
 

src/my/MyInfo.tsx

@@ -21,6 +21,7 @@ export class MyInfo extends React.Component<
         super(props);
 
         this.state={
+            userType: "",
             //用户ID
             userId:"",
             //用户姓名
@@ -35,6 +36,8 @@ export class MyInfo extends React.Component<
             address:"",
             //个人简介
             info:"",
+            //性别
+            sex:"男",
             //头像
             headImg:"",
             contentEditable:false,

src/my/MyLeaveWord.tsx

@@ -5,6 +5,7 @@ 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,
@@ -60,16 +61,7 @@ export class MyLeaveWord extends React.Component<{ user:string },
         this.setState({
             data:[
                 {
-                    user:{
+                    user:userObj,
-                        headImg:"logo512.png",
-                        userId:"admin",
-                        name:"张三",
-                        age:Math.ceil(Math.random()*100)+1,
-                        mobile:1234567879,
-                        email:"admin@qq.com",
-                        address:"上海高新区",
-                        info:"个人简介",
-                    },
                     active:{
                         activeId:1,
                         title:"活动标题1",
@@ -81,16 +73,7 @@ export class MyLeaveWord extends React.Component<{ user:string },
                     type:LeaveWordType.recommend
                 },
                 {
-                    user:{
+                    user:userObj,
-                        headImg:"logo512.png",
-                        userId:"admin",
-                        name:"张三",
-                        age:Math.ceil(Math.random()*100)+1,
-                        mobile:1234567879,
-                        email:"admin@qq.com",
-                        address:"上海高新区",
-                        info:"个人简介",
-                    },
                     active:{
                         activeId:1,
                         title:"活动标题1",
@@ -102,16 +85,7 @@ export class MyLeaveWord extends React.Component<{ user:string },
                     type:LeaveWordType.apply
                 },
                 {
-                    user:{
+                    user:userObj,
-                        headImg:"logo512.png",
-                        userId:"admin",
-                        name:"张三",
-                        age:Math.ceil(Math.random()*100)+1,
-                        mobile:1234567879,
-                        email:"admin@qq.com",
-                        address:"上海高新区",
-                        info:"个人简介",
-                    },
                     type:LeaveWordType.friend
                 }
             ]

src/my/SeekHelp.tsx

@@ -8,6 +8,7 @@ import {Paper, Tooltip} from "@material-ui/core";
 import Draggable from "react-draggable";
 import {MyDialog} from "../ui/MyDialog";
 import {MyInfo} from "./MyInfo";
+import {userObj} from "../ui/TestData";
 
 /**
  * 志愿者状态
@@ -54,26 +55,7 @@ export class SeekHelp extends React.Component<{ user:string },
     loadHelp(){
         this.setState({data:[
             {
-                applyVolunteerList: [{
+                applyVolunteerList: [userObj,userObj],
-                    headImg:"logo512.png",
-                    userId:"admin",
-                    name:"张三",
-                    age:Math.ceil(Math.random()*100)+1,
-                    mobile:1234567879,
-                    email:"admin@qq.com",
-                    address:"上海高新区",
-                    info:"个人简介",
-                },
-                    {
-                        headImg:"logo512.png",
-                        userId:"admin",
-                        name:"李四",
-                        age:Math.ceil(Math.random()*100)+1,
-                        mobile:1234567879,
-                        email:"admin@qq.com",
-                        address:"上海高新区",
-                        info:"个人简介",
-                    }],
                 completeVolunteerList: [],
                 joinVolunteerList: [],
                 activeImg: "logo512.png",

src/sub/IndexMenu.tsx

@@ -5,16 +5,23 @@ import {Page} from "../ui/Page";
 import {ActiveDetail, BaseHelp, PageProps} from "../entity";
 import {MyDialog} from "../ui/MyDialog";
 import {Active} from "../ui/Active";
+import {Input} from "../ui/InputGroup";
 
 /**
  * 首页
  */
 export class IndexMenu extends React.Component<{ user:string },
     {
+        //活动数据
         activeList:Array<Array<BaseHelp>>;
+        //分页信息
         page:PageProps;
+        //活动
         active?:ActiveDetail;
+        //打开活动
         openActive:boolean;
+        //检索活动标题
+        title:string;
     }>{
 
 
@@ -29,7 +36,8 @@ export class IndexMenu extends React.Component<{ user:string },
                 totalPage:3,
                 pageSize:9
             },
-            openActive:false
+            openActive:false,
+            title:""
         }
     }
 
@@ -65,6 +73,8 @@ export class IndexMenu extends React.Component<{ user:string },
      * @param page
      */
     loadActive(page:number){
+        console.debug("检索活动关键字:"+this.state.title)
+
         this.setState({
             activeList:[[{
                 activeId: 123,
@@ -152,7 +162,12 @@ export class IndexMenu extends React.Component<{ user:string },
         return (
 
             <Container className="p-5">
-                <Page onClick={(page:number)=>this.loadActive(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>
+
+                <Input name="keyword" desc="活动标题" onChange={(value:string)=>this.setState({title:value})}/>
+
+                <Button className="mt-3 mb-3" variant={"info"} onClick={()=>this.loadActive(1)}>检索活动</Button>
+
+                {/*<Page onClick={(page:number)=>this.loadActive(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>*/}
 
 
                     {rowList}

src/sub/SendHelp.tsx

@@ -5,8 +5,9 @@ import {Button, Container, Form, FormControl, InputGroup, ListGroup, OverlayTrig
 import ReactDatetimeClass from "react-datetime";
 import "react-datetime/css/react-datetime.css";
 import moment from 'moment';
-import path from "path";
 import {Address} from "../ui/Address";
+import {UploadImg} from "../ui/UploadImg";
+import {userObj} from "../ui/TestData";
 
 /**
  * 活动内容限长字符数
@@ -62,42 +63,8 @@ export class SendHelp extends React.Component<{ undefined?:undefined }, SendHelp
      */
     searchFriend(keyword:string){
         this.setState({friendList:[
-            {
+            userObj,
-                //用户ID
+            userObj]})
-                userId:"admin",
-                //用户姓名
-                name:"张三",
-                //用户年龄
-                age:Math.ceil(Math.random()*100)+1,
-                //用户电话
-                mobile:1234567879,
-                //用户邮箱
-                email:"admin@qq.com",
-                //地点
-                address:"上海高新区",
-                //个人简介
-                info:"个人简介",
-                //头像
-                headImg:"logo512.png",
-        },
-        {
-            //用户ID
-            userId:"admin",
-            //用户姓名
-            name:"李四",
-            //用户年龄
-            age:Math.ceil(Math.random()*100)+1,
-            //用户电话
-            mobile:1234567879,
-            //用户邮箱
-            email:"admin@qq.com",
-            //地点
-            address:"上海高新区",
-            //个人简介
-            info:"个人简介",
-            //头像
-            headImg:"logo512.png"
-        }]})
     }
 
     /**
@@ -116,15 +83,6 @@ export class SendHelp extends React.Component<{ undefined?:undefined }, SendHelp
         return RecommendType.no
     }
 
-    /**
-     * 获取图片url
-     */
-    getUrl(){
-        if(this.fileImg.current!==null&&this.fileImg.current.files.length>0) {
-            return URL.createObjectURL(this.fileImg.current.files[0])
-        }
-    }
-
     render() {
         return (
             <Container>
@@ -162,31 +120,7 @@ export class SendHelp extends React.Component<{ undefined?:undefined }, SendHelp
                     }} dateFormat="YYYY-MM-DD" timeFormat="HH:mm:ss"/>
                 </InputGroup>
 
-                {/*
+                <UploadImg fileImg={this.fileImg} maxImageSize={maxImageSize} onChange={(value:string)=>this.setState({activeImg:value})} imageName={this.state.activeImg}/>
-                预览活动背景图
-                */}
-                <img className="mt-3 d-none" src={this.getUrl()} onLoad={(s)=> {
-                    if(s.target instanceof HTMLImageElement){
-                        //限制图片显示大小
-                        s.target.width=s.target.width>maxImageSize.width?maxImageSize.width:s.target.width
-                        s.target.height=s.target.height>maxImageSize.height?maxImageSize.height:s.target.height
-                        s.target.classList.remove('d-none')
-                    }
-                }
-                } alt="活动背景图"/>
-
-                {/*上传活动背景图*/}
-                <Form className="col-7 ml-auto mr-auto mt-3">
-                    <Form.File
-                        ref={this.fileImg}
-                        label={path.basename(this.state.activeImg.replace(/\\/g,'/'))}
-                        custom
-                        accept="image/*"
-                        onChange={(e:any)=>{
-                            this.setState({activeImg:e.target.value})
-                        }}
-                        />
-                </Form>
 
                 {/*服务地点*/}
                 <Address onChange={(value:string)=>this.setState({address:value})}/>

src/sub/Volunteer.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import {Button, Table} from "react-bootstrap";
 import {Input} from "../ui/InputGroup";
-import {PageProps, VolunteerProps} from "../entity";
+import {PageProps, User} from "../entity";
 import {Page} from "../ui/Page";
 import {Address} from "../ui/Address";
+import {userObj} from "../ui/TestData";
 
 /**
  * 志愿者信息
@@ -14,7 +15,7 @@ export class Volunteer extends React.Component<{ undefined?:undefined }, {
         address:string;
     };
     addressList:Array<{address:string}>;
-    volunteerList:Array<Array<VolunteerProps>>;
+    volunteerList:Array<Array<User>>;
     page:PageProps;
 }>{
 
@@ -55,268 +56,11 @@ export class Volunteer extends React.Component<{ undefined?:undefined }, {
      * 加载志愿者列表
      */
     loadVolunteerList(page:number){
+
+        const array=[userObj,userObj,userObj,userObj]
+
         this.setState({
-            volunteerList:[[
+            volunteerList:[array,array,array,array]
-                {
-                    //个人描述
-                    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:"广州"
-                }
-            ],[
-                {
-                    //个人描述
-                    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:"广州"
-                }
-            ]]
         })
     }
 
@@ -343,19 +87,19 @@ export class Volunteer extends React.Component<{ undefined?:undefined }, {
                 {/*<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)=>
+                    {this.state.volunteerList.map((volunteers:Array<User>, index:number)=>
-                        <div className="p-3 d-flex ml-auto mr-auto volunteer overflow-auto" key={"row"+index}>{volunteers.map((volunteer:VolunteerProps, subIndex:number)=>
+                        <div className="p-3 d-flex ml-auto mr-auto volunteer overflow-auto" key={"row"+index}>{volunteers.map((volunteer:User, subIndex:number)=>
                             <div  key={"col"+subIndex} className="mr-3">
                                     <div className="border-info border">
                                         志愿者个人简介
                                     </div>
                                     <div>
-                                        <p className="border-info border m-0">{volunteer.desc}</p>
+                                        <p className="border-info border m-0">{volunteer.info}</p>
                                     </div>
                                     <div >
                                         <Table>
                                             <tbody>
-                                            {[[volunteer.name,volunteer.sex,volunteer.age],[volunteer.phone,volunteer.mail,volunteer.address]].map((tr,index)=>
+                                            {[[volunteer.name,volunteer.sex,volunteer.age],[volunteer.mobile,volunteer.email,volunteer.address]].map((tr,index)=>
                                                 <tr key={"tr"+index}>
                                                     {tr.map((td,index)=><td key={"td"+index} className="border border-info">{td}</td>)}
                                                 </tr>

src/ui/InputGroup.tsx

@@ -31,8 +31,12 @@ export class Input extends React.Component<FormInputProps, { undefined?:undefine
                 <InputGroup.Prepend>
                     <InputGroup.Text id={this.props.name}>{this.props.desc}</InputGroup.Text>
                 </InputGroup.Prepend>
-                <FormControl autoComplete={this.props.name} className={this.valid()} type={this.props.type} as={this.props.as} placeholder={(this.props.placeholder||"").length>0?this.props.placeholder:"请输入"+this.props.desc} aria-describedby={this.props.name} value={this.props.value}
+                <FormControl autoComplete={this.props.name} className={this.valid()} type={this.props.type} as={this.props.as}
-                             onChange={(e)=>this.props.onChange(e.target.value)} maxLength={this.props.maxLength }/>
+                             placeholder={(this.props.placeholder||"").length>0?this.props.placeholder:"请输入"+this.props.desc}
+                             aria-describedby={this.props.name} value={this.props.value}
+                             onChange={(e)=>this.props.onChange(e.target.value)} maxLength={this.props.maxLength }>
+                    {this.props.as==="select"?this.props.options?this.props.options.map(option=>option):null:null}
+                </FormControl>
                 <div className="valid-feedback text-center">
                     {this.merge().valid}
                 </div>

src/ui/TestData.ts

@@ -0,0 +1,22 @@
+import {UserType} from "../entity";
+
+export const userObj={
+    //发送人名称
+    name:"张三",
+    //发送人头像
+    headImg:"logo512.png",
+    //发送内容
+    content:"发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容",
+    //发送时间
+    time:new Date().getTime(),
+    userId:"admin",
+    age:Math.ceil(Math.random()*100)+1,
+    mobile:1234567879,
+    email:"admin@qq.com",
+    address:"上海高新区",
+    info:"个人简介",
+    //性别
+    sex:"男",
+    flag:false,
+    userType:UserType.seekHelp.toString()
+}

src/ui/UploadImg.tsx

@@ -0,0 +1,61 @@
+import React, {RefObject} from "react";
+import {Form, Image} from "react-bootstrap";
+import path from "path";
+
+/**
+ * 上传图片
+ */
+export class UploadImg extends React.Component<
+    {
+        //文件对象
+        fileImg:RefObject<any>;
+        //图片尺寸限制
+        maxImageSize:{
+            width:number,
+            height:number
+        };
+        //上传事件
+        onChange:Function;
+        //图片文件名
+        imageName:string;
+}, any>{
+
+    /**
+     * 获取图片url
+     */
+    getUrl(){
+        if(this.props.fileImg.current!==null&&this.props.fileImg.current.files.length>0) {
+            return URL.createObjectURL(this.props.fileImg.current.files[0])
+        }
+    }
+
+    render() {
+        return (
+            <div>
+                    {/*
+                        预览背景图
+                        */}
+                <Image className="mt-3 d-none" src={this.getUrl()} onLoad={(s)=> {
+                    if(s.target instanceof HTMLImageElement){
+                        //限制图片显示大小
+                        s.target.width=s.target.width>this.props.maxImageSize.width?this.props.maxImageSize.width:s.target.width
+                        s.target.height=s.target.height>this.props.maxImageSize.height?this.props.maxImageSize.height:s.target.height
+                        s.target.classList.remove('d-none')
+                    }
+                }
+                }/>
+
+                {/*上传背景图*/}
+                <div className="col-7 ml-auto mr-auto mt-3">
+                    <Form.File
+                        ref={this.props.fileImg}
+                        label={path.basename(this.props.imageName.replace(/\\/g,'/'))}
+                        custom
+                        accept="image/*"
+                        onChange={(e:any)=>this.props.onChange(e.target.value)}
+                    />
+                </div>
+            </div>
+        )
+    }
+}