From d23bcb2baa63170cdf78200949f49c31bed5633a Mon Sep 17 00:00:00 2001 From: pan <1029559041@qq.com> Date: Mon, 25 May 2020 10:52:19 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E7=99=BB=E5=BD=95=E6=B3=A8?= =?UTF-8?q?=E5=86=8C=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/account/Login.tsx | 11 +- src/account/LoginProps.ts | 20 --- src/account/Register.tsx | 113 +++++++++++++- src/account/RegisterProps.tsx | 14 -- src/entity.ts | 52 ++++++- src/my/MyFriend.tsx | 119 +-------------- src/my/MyInfo.tsx | 3 + src/my/MyLeaveWord.tsx | 34 +---- src/my/SeekHelp.tsx | 22 +-- src/sub/IndexMenu.tsx | 19 ++- src/sub/SendHelp.tsx | 76 +--------- src/sub/Volunteer.tsx | 278 ++-------------------------------- src/ui/InputGroup.tsx | 8 +- src/ui/TestData.ts | 22 +++ src/ui/UploadImg.tsx | 61 ++++++++ 15 files changed, 300 insertions(+), 552 deletions(-) delete mode 100644 src/account/LoginProps.ts delete mode 100644 src/account/RegisterProps.tsx create mode 100644 src/ui/TestData.ts create mode 100644 src/ui/UploadImg.tsx diff --git a/src/account/Login.tsx b/src/account/Login.tsx index 740908d..4f93032 100644 --- a/src/account/Login.tsx +++ b/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{
- {this.setState({user:value})}}/> + {this.setState({user:value})}} valid={{check:this.state.user.length>0}}/> - {this.setState({password:value})}}/> + {this.setState({password:value})}} valid={{check:this.state.password.length>0}}/> - +
diff --git a/src/account/LoginProps.ts b/src/account/LoginProps.ts deleted file mode 100644 index c6e1d15..0000000 --- a/src/account/LoginProps.ts +++ /dev/null @@ -1,20 +0,0 @@ - -/** - * 登陆表单 - */ -export interface LoginProps{ - //跳转注册 - toRegister:Function; - //登录 - login:Function; -} - -/** - * 登陆状态 - */ -export interface LoginState { - //管理员名 - user:string; - //密码 - password:string; -} diff --git a/src/account/Register.tsx b/src/account/Register.tsx index 6a213a2..dae55d7 100644 --- a/src/account/Register.tsx +++ b/src/account/Register.tsx @@ -1,24 +1,98 @@ -import React from "react"; -import {RegisterProps, RegisterState} from "./RegisterProps"; +import React, {RefObject} from "react"; 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{ + //存放头像 + private fileImg: RefObject; + constructor(props: Readonly) { 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{
- {this.setState({user:value})}}/> + { + this.setState({...this.state,...{userId:value}})}} valid={{check:this.isNotEmpty(this.state.userId)}}/> + + {this.setState({password:value})}} valid={{check:this.isNotEmpty(this.state.password)}}/> + + {this.setState({confirmPwd:value})}} + valid={{check:this.checkPwd(), + invalid:this.state.confirmPwd.length>0&&this.state.password!==this.state.confirmPwd?"密码和确认密码不一致":"验证失败"}}/> + + this.setState({name:value})} valid={{check:this.isNotEmpty(this.state.name)}}/> + + this.setState({sex:value})} + options={[,,]}/> + + this.setState({headImg:value})} imageName={this.state.headImg}/> + +
this.setState({address:value})}/> + + this.setState({userType:this.getType(value)})} + options={[,,]}/> + + this.setState({mobile:+value})} valid={{check:this.checkMobile()}}/> + + this.setState({email:value})} valid={{check:this.checkEmail()}}/> - {this.setState({password:value})}}/> + this.setState({info:value})} valid={{check:this.isNotEmpty(this.state.info)}}/> - + diff --git a/src/account/RegisterProps.tsx b/src/account/RegisterProps.tsx deleted file mode 100644 index 2b3fac2..0000000 --- a/src/account/RegisterProps.tsx +++ /dev/null @@ -1,14 +0,0 @@ -/** - * 注册表单 - */ -export interface RegisterProps { - //跳转登录 - toLogin:Function; -} - -export interface RegisterState { - //管理员名 - user:string; - //密码 - password:string; -} diff --git a/src/entity.ts b/src/entity.ts index 0741c5d..d46b00e 100644 --- a/src/entity.ts +++ b/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; +} + + +/** + * 表单状态 + */ +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; } diff --git a/src/my/MyFriend.tsx b/src/my/MyFriend.tsx index 4e35bd0..e42d86e 100644 --- a/src/my/MyFriend.tsx +++ b/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:[{ - 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:"个人简介", - }] + userList:[userObj,userObj,userObj] }) } //查找我的好友 loadMyFriend(keyword:string){ this.setState({ - friendList:[{ - 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 - }] + friendList:[userObj,userObj,userObj] }) } //加载聊天记录 loadMyChat(user:User){ + this.setState({ - chatList:[{ - //发送人名称 - 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 - }] + chatList:[userObj,userObj,userObj,userObj] }) } diff --git a/src/my/MyInfo.tsx b/src/my/MyInfo.tsx index 79f6443..8f0863f 100644 --- a/src/my/MyInfo.tsx +++ b/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, diff --git a/src/my/MyLeaveWord.tsx b/src/my/MyLeaveWord.tsx index 8987c15..0f60a05 100644 --- a/src/my/MyLeaveWord.tsx +++ b/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:{ - headImg:"logo512.png", - userId:"admin", - name:"张三", - age:Math.ceil(Math.random()*100)+1, - mobile:1234567879, - email:"admin@qq.com", - address:"上海高新区", - info:"个人简介", - }, + user:userObj, active:{ activeId:1, title:"活动标题1", @@ -81,16 +73,7 @@ export class MyLeaveWord extends React.Component<{ user:string }, 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:"个人简介", - }, + user:userObj, active:{ activeId:1, title:"活动标题1", @@ -102,16 +85,7 @@ export class MyLeaveWord extends React.Component<{ user:string }, 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:"个人简介", - }, + user:userObj, type:LeaveWordType.friend } ] diff --git a/src/my/SeekHelp.tsx b/src/my/SeekHelp.tsx index 2d3cd8a..ffe2265 100644 --- a/src/my/SeekHelp.tsx +++ b/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: [{ - 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:"个人简介", - }], + applyVolunteerList: [userObj,userObj], completeVolunteerList: [], joinVolunteerList: [], activeImg: "logo512.png", diff --git a/src/sub/IndexMenu.tsx b/src/sub/IndexMenu.tsx index 156767e..018352f 100644 --- a/src/sub/IndexMenu.tsx +++ b/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>; + //分页信息 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 ( - this.loadActive(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/> + + this.setState({title:value})}/> + + + + {/*this.loadActive(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>*/} {rowList} diff --git a/src/sub/SendHelp.tsx b/src/sub/SendHelp.tsx index 47d85ba..2b6c688 100644 --- a/src/sub/SendHelp.tsx +++ b/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:[ - { - //用户ID - 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" - }]}) + userObj, + userObj]}) } /** @@ -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 ( @@ -162,31 +120,7 @@ export class SendHelp extends React.Component<{ undefined?:undefined }, SendHelp }} dateFormat="YYYY-MM-DD" timeFormat="HH:mm:ss"/> - {/* - 预览活动背景图 - */} - { - 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="活动背景图"/> - - {/*上传活动背景图*/} -
- { - this.setState({activeImg:e.target.value}) - }} - /> - + this.setState({activeImg:value})} imageName={this.state.activeImg}/> {/*服务地点*/}
this.setState({address:value})}/> diff --git a/src/sub/Volunteer.tsx b/src/sub/Volunteer.tsx index 37a4353..cc1ae82 100644 --- a/src/sub/Volunteer.tsx +++ b/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>; + volunteerList:Array>; 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:[[ - { - //个人描述 - 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:"广州" - } - ]] + volunteerList:[array,array,array,array] }) } @@ -343,19 +87,19 @@ export class Volunteer extends React.Component<{ undefined?:undefined }, { {/*this.loadVolunteerList(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>*/} - {this.state.volunteerList.map((volunteers:Array, index:number)=> -
{volunteers.map((volunteer:VolunteerProps, subIndex:number)=> + {this.state.volunteerList.map((volunteers:Array, index:number)=> +
{volunteers.map((volunteer:User, subIndex:number)=>
志愿者个人简介
-

{volunteer.desc}

+

{volunteer.info}

- {[[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.map((td,index)=>)} diff --git a/src/ui/InputGroup.tsx b/src/ui/InputGroup.tsx index 9bbf129..5fcb92f 100644 --- a/src/ui/InputGroup.tsx +++ b/src/ui/InputGroup.tsx @@ -31,8 +31,12 @@ export class Input extends React.Component {this.props.desc} - 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 }/> + 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} +
{this.merge().valid}
diff --git a/src/ui/TestData.ts b/src/ui/TestData.ts new file mode 100644 index 0000000..3dd92eb --- /dev/null +++ b/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() +} diff --git a/src/ui/UploadImg.tsx b/src/ui/UploadImg.tsx new file mode 100644 index 0000000..75d728c --- /dev/null +++ b/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; + //图片尺寸限制 + 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 ( +
+ {/* + 预览背景图 + */} + { + 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') + } + } + }/> + + {/*上传背景图*/} +
+ this.props.onChange(e.target.value)} + /> +
+
+ ) + } +}
{td}