panqihua
/
help_user
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

增加我的留言布局

Browse Source 
从我的留言-好友验证、个人信息-我的帮助，查看志愿者、个人信息-我的好友，可点击用户图标查看个人信息，并发起好友申请/同意好友邀请
master
pan 4 years ago
parent 8284bfa0fe
commit 8830296ba7
18 changed files with 274 additions and 152 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      src/Address.tsx
  2. 13
      src/App.tsx
  3. 22
      src/Main.tsx
  4. 2
      src/Page.tsx
  5. 2
      src/bootstrap/InputGroup.tsx
  6. 12
      src/entity.ts
  7. 1
      src/index.css
  8. 3
      src/my/CloseDialog.tsx
  9. 16
      src/my/MyDialog.tsx
  10. 211
      src/my/MyFriend.tsx
  11. 3
      src/my/MyHelp.tsx
  12. 61
      src/my/MyInfo.tsx
  13. 27
      src/my/MyLeaveWord.tsx
  14. 8
      src/my/MyMessage.tsx
  15. 25
      src/my/SeekHelp.tsx
  16. 2
      src/sub/IndexMenu.tsx
  17. 2
      src/sub/SendHelp.tsx
  18. 14
      src/sub/Volunteer.tsx

2
src/Address.tsx
Unescape View File

@ -5,7 +5,7 @@ import React from "react";
/** /**
* 加载服务地点信息 * 加载服务地点信息
*/ */
export class Address extends React.Component<OnChangeAddress, any>{ export class Address extends React.Component<OnChangeAddress, { addressList:Array<any> }>{
constructor(props: Readonly<OnChangeAddress>) { constructor(props: Readonly<OnChangeAddress>) {

13
src/App.tsx
Unescape View File

@ -2,12 +2,12 @@ import React from 'react';
import './App.css'; import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import {Login} from './account/Login'; import {Login} from './account/Login';
import {withCookies} from 'react-cookie'; import {Cookies, withCookies} from 'react-cookie';
import {Main} from "./Main"; import {Main} from "./Main";
import {Register} from "./account/Register"; import {Register} from "./account/Register";
import {user_cookie} from "./account/PropCookie"; import {user_cookie} from "./account/PropCookie";
class App extends React.Component<any, any> { class App extends React.Component<{ allCookies:any;cookies:Cookies }, { page?:JSX.Element }> {
constructor(props: Readonly<any>) { constructor(props: Readonly<any>) {
@ -27,11 +27,9 @@ class App extends React.Component<any, any> {
} }
} }
//注销登录
//注销登录
logout(){ logout(){
const { cookies } = this.props this.props.cookies.remove(user_cookie)
cookies.remove(user_cookie)
this.toLogin() this.toLogin()
} }
@ -47,9 +45,8 @@ class App extends React.Component<any, any> {
//登录 //登录
login(user:string,password:string){ login(user:string,password:string){
const { cookies } = this.props
console.debug("user_cookie="+user) console.debug("user_cookie="+user)
cookies.set(user_cookie,user) this.props.cookies.set(user_cookie,user)
this.setState({ this.setState({
page:<Main user={user} logout={()=>this.logout()}/> page:<Main user={user} logout={()=>this.logout()}/>

22
src/Main.tsx
Unescape View File

@ -7,6 +7,7 @@ import {MyFriend} from "./my/MyFriend";
import {MyDialog} from "./my/MyDialog"; import {MyDialog} from "./my/MyDialog";
import {MyLeaveWord} from "./my/MyLeaveWord"; import {MyLeaveWord} from "./my/MyLeaveWord";
import {MyMessage} from "./my/MyMessage"; import {MyMessage} from "./my/MyMessage";
import {User} from "./entity";
/** /**
* 菜单标记 * 菜单标记
@ -29,7 +30,18 @@ enum DialogType {
/** /**
* 主菜单 * 主菜单
*/ */
export class Main extends React.Component<any, any>{ export class Main extends React.Component<{ user:string,logout:Function },
{
menu:Menu;
subMenu:JSX.Element;
friendList:Array<User>;
my:{
menuName:string;
content:JSX.Element|null;
open:boolean;
}
}
>{
constructor(props: Readonly<any>) { constructor(props: Readonly<any>) {
super(props); super(props);
@ -91,7 +103,7 @@ export class Main extends React.Component<any, any>{
* 关闭弹窗 * 关闭弹窗
*/ */
closeDialog(){ closeDialog(){
this.setState({my:{...this.state.my,...{menuName: "",content:null,open:false}}}) this.setState({ my:{...this.state.my,...{menuName:"",content:null,open:false}}})
console.debug(this.state.my) console.debug(this.state.my)
} }
@ -108,12 +120,12 @@ export class Main extends React.Component<any, any>{
break; break;
case DialogType.leaveWord: case DialogType.leaveWord:
this.setState({ this.setState({
my:{menuName:dialogType,content:<MyLeaveWord/>,open:true} my:{menuName:dialogType,content:<MyLeaveWord user={this.props.user}/>,open:true}
}) })
break; break;
case DialogType.message: case DialogType.message:
this.setState({ this.setState({
my:{menuName:dialogType,content:<MyMessage/>,open:true} my:{menuName:dialogType,content:<MyMessage user={this.props.user}/>,open:true}
}) })
break; break;
} }
@ -149,7 +161,7 @@ export class Main extends React.Component<any, any>{
<Navbar.Brand className="ml-3">等待接受帮助</Navbar.Brand> <Navbar.Brand className="ml-3">等待接受帮助</Navbar.Brand>
<MyDialog menuName={this.state.my.menuName} content={this.state.my.content} open={this.state.my.open} onClose={()=>this.closeDialog()}/> <MyDialog titleId="my-dialog" menuName={this.state.my.menuName} content={this.state.my.content} open={this.state.my.open} onClose={()=>this.closeDialog()}/>
</Nav> </Nav>
</Navbar> </Navbar>

2
src/Page.tsx
Unescape View File

@ -5,7 +5,7 @@ import {Pagination} from "react-bootstrap";
/** /**
* 分页组件 * 分页组件
*/ */
export class Page extends React.Component<PageProps, any>{ export class Page extends React.Component<PageProps, { undefined?:undefined }>{
render() { render() {
return ( return (

2
src/bootstrap/InputGroup.tsx
Unescape View File

@ -11,7 +11,7 @@ const defaultValid={
/** /**
* bootstrap InputGroup组件封装 * bootstrap InputGroup组件封装
*/ */
export class Input extends React.Component<FormInputProps, any>{ export class Input extends React.Component<FormInputProps, { undefined?:undefined }>{
merge(){ merge(){
return {...defaultValid,...this.props.valid} return {...defaultValid,...this.props.valid}

12
src/entity.ts
Unescape View File

@ -151,9 +151,9 @@ export interface CloseDialogProps extends BaseDialogProps{
/** /**
* 我的弹窗 * 我的弹窗
*/ */
export interface MyDialogProps extends BaseDialogProps{ export interface MyDialogProps extends CloseDialogProps{
//弹窗内容 //弹窗内容
content:React.Component; content:JSX.Element|null;
//弹窗状态 //弹窗状态
open:boolean; open:boolean;
} }
@ -203,14 +203,12 @@ export interface UserEdit extends User{
/** /**
* 聊天信息 * 聊天信息
*/ */
export interface Chat { export interface Chat extends User{
//发送人名称
name:string;
//发送人头像
headImg:string;
//发送内容 //发送内容
content:string; content:string;
//发送时间 //发送时间
time:number; time:number;
//是否我发送的信息
flag:boolean;
} }

1
src/index.css
Unescape View File

@ -122,3 +122,4 @@
.volunteer{ .volunteer{
width: 1400px; width: 1400px;
} }

3
src/my/CloseDialog.tsx
Unescape View File

@ -5,7 +5,8 @@ import {CloseDialogProps} from "../entity";
/** /**
* 关闭弹窗 * 关闭弹窗
*/ */
export class CloseDialog extends React.Component<CloseDialogProps, any>{ export class CloseDialog extends React.Component<CloseDialogProps, {undefined?:undefined}>{
render() { render() {
return ( return (

16
src/my/MyDialog.tsx
Unescape View File

@ -8,30 +8,22 @@ import {CloseDialog} from "./CloseDialog";
/** /**
* 我的弹窗 * 我的弹窗
*/ */
export class MyDialog extends React.Component<MyDialogProps, any>{ export class MyDialog extends React.Component<MyDialogProps, { undefined?:undefined }>{
constructor(props: Readonly<MyDialogProps>) {
super(props);
this.state={
titleId:"my-dialog"
}
}
render() { render() {
return ( return (
<Dialog <Dialog
hideBackdrop={true} hideBackdrop={true}
open={this.props.open} open={this.props.open}
PaperComponent={(props)=> PaperComponent={(props)=>
<Draggable handle={"#"+this.state.titleId} cancel={'[class*="MuiDialogContent-root"]'}> <Draggable handle={"#"+this.props.titleId} cancel={'[class*="MuiDialogContent-root"]'}>
<Paper {...props} /> <Paper {...props} />
</Draggable>} </Draggable>}
aria-labelledby={this.state.titleId} aria-labelledby={this.props.titleId}
classes={{paper:"w-100"}} classes={{paper:"w-100"}}
> >
<CloseDialog menuName={this.props.menuName} onClose={()=>this.props.onClose()} titleId={this.state.titleId}/> <CloseDialog menuName={this.props.menuName} onClose={()=>this.props.onClose()} titleId={this.props.titleId}/>
<div className="p-3"> <div className="p-3">
{this.props.content} {this.props.content}

211
src/my/MyFriend.tsx
Unescape View File

@ -3,61 +3,34 @@ import {Button, Col, Container, FormControl, Image, ListGroup, Row,} from "react
import {Chat, User} from "../entity"; import {Chat, User} from "../entity";
import {Tooltip} from "@material-ui/core"; import {Tooltip} from "@material-ui/core";
import moment from "moment"; import moment from "moment";
import {MyInfo} from "./MyInfo";
import {MyDialog} from "./MyDialog";
/**
* 聊天窗头像名字
* @param props
* @constructor
*/
function UserPart(props:Readonly<any>) {
return (
<Col xs={4}>
<Image roundedCircle={true} src={props.headImg} className="chat-headImg"/>
<span className="d-block text-center user-name">{props.name}</span>
</Col>
)
}
/**
* 聊天窗内容
* @param props
* @constructor
*/
function ContentPart(props:Readonly<any>) {
return (
<Col xs={7}>
<h6 className="text-center">{moment(props.time).format("YYYY-MM-DD HH:mm:ss")}</h6>
<p>{props.content}</p>
</Col>
)
}
/**
* 一组信息
* @param props
* @constructor
*/
function GroupPart(props:Readonly<any>) {
if(props.flag){
return (
<Row>
<UserPart name={props.name} headImg={props.headImg}/>
<ContentPart content={props.content}/>
</Row>)
}else{
return (
<Row>
<ContentPart content={props.content}/>
<UserPart name={props.name} headImg={props.headImg}/>
</Row>)
}
}
const maxLength=150 const maxLength=150
/** /**
* 我的好友 * 我的好友
*/ */
export class MyFriend extends React.Component<any,any>{ export class MyFriend extends React.Component<{ user:string },
{
//好友列表
friendList:Array<User>;
//查找好友关键字
queryFriend:string;
//用户列表
userList:Array<User>;
//聊天记录
chatList:Array<Chat>;
//当前选中好友
friendIndex:number|null;
//发送内容
sendContent:String;
//查看用户信息
openUserInfo:boolean;
//查看用户ID
userId?:string;
}
>{
constructor(props: Readonly<any>) { constructor(props: Readonly<any>) {
@ -73,9 +46,11 @@ export class MyFriend extends React.Component<any,any>{
//聊天记录 //聊天记录
chatList:[], chatList:[],
//当前选中好友 //当前选中好友
friendIndex:-1, friendIndex:null,
//发送内容 //发送内容
sendContent:'' sendContent:'',
//查看用户信息
openUserInfo:false
} }
} }
@ -90,34 +65,34 @@ export class MyFriend extends React.Component<any,any>{
queryUser(keyword:string){ queryUser(keyword:string){
this.setState({ this.setState({
userList:[{ userList:[{
//用户姓名 headImg:"logo512.png",
userId:"admin",
name:"张三", name:"张三",
//用户年龄 age:Math.ceil(Math.random()*100)+1,
age:Math.floor(Math.random()*100)+1, mobile:1234567879,
//用户电话 email:"admin@qq.com",
mobile:15920722180, address:"上海高新区",
//发送时间 info:"个人简介",
time:new Date().getTime()
}, },
{ {
//用户姓名 headImg:"logo512.png",
name:"李四", userId:"admin",
//用户年龄 name:"张三",
age:Math.floor(Math.random()*100)+1, age:Math.ceil(Math.random()*100)+1,
//用户电话 mobile:1234567879,
mobile:15920722180, email:"admin@qq.com",
//发送时间 address:"上海高新区",
time:new Date().getTime() info:"个人简介",
}, },
{ {
//用户姓名 headImg:"logo512.png",
name:"王五", userId:"admin",
//用户年龄 name:"张三",
age:Math.floor(Math.random()*100)+1, age:Math.ceil(Math.random()*100)+1,
//用户电话 mobile:1234567879,
mobile:15920722180, email:"admin@qq.com",
//发送时间 address:"上海高新区",
time:new Date().getTime() info:"个人简介",
}] }]
}) })
} }
@ -126,15 +101,36 @@ export class MyFriend extends React.Component<any,any>{
loadMyFriend(keyword:string){ loadMyFriend(keyword:string){
this.setState({ this.setState({
friendList:[{ friendList:[{
name:"好友1", headImg:"logo512.png",
userId:"admin",
name:"张三",
age:Math.ceil(Math.random()*100)+1,
mobile:1234567879,
email:"admin@qq.com",
address:"上海高新区",
info:"个人简介",
status:true status:true
}, },
{ {
name:"好友2", headImg:"logo512.png",
userId:"admin",
name:"张三",
age:Math.ceil(Math.random()*100)+1,
mobile:1234567879,
email:"admin@qq.com",
address:"上海高新区",
info:"个人简介",
status:false status:false
}, },
{ {
name:"好友3", headImg:"logo512.png",
userId:"admin",
name:"张三",
age:Math.ceil(Math.random()*100)+1,
mobile:1234567879,
email:"admin@qq.com",
address:"上海高新区",
info:"个人简介",
status:false status:false
}] }]
}) })
@ -149,7 +145,16 @@ export class MyFriend extends React.Component<any,any>{
//发送人头像 //发送人头像
headImg:"logo512.png", headImg:"logo512.png",
//发送内容 //发送内容
content:"发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容" content:"发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容",
//发送时间
time:new Date().getTime(),
userId:"admin",
age:Math.ceil(Math.random()*100)+1,
mobile:1234567879,
email:"admin@qq.com",
address:"上海高新区",
info:"个人简介",
flag:false
}, },
{ {
//发送人名称 //发送人名称
@ -157,7 +162,16 @@ export class MyFriend extends React.Component<any,any>{
//发送人头像 //发送人头像
headImg:"logo512.png", headImg:"logo512.png",
//发送内容 //发送内容
content:"发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容" content:"发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容",
//发送时间
time:new Date().getTime(),
userId:"admin",
age:Math.ceil(Math.random()*100)+1,
mobile:1234567879,
email:"admin@qq.com",
address:"上海高新区",
info:"个人简介",
flag:false
}, },
{ {
//发送人名称 //发送人名称
@ -165,7 +179,16 @@ export class MyFriend extends React.Component<any,any>{
//发送人头像 //发送人头像
headImg:"logo512.png", headImg:"logo512.png",
//发送内容 //发送内容
content:"发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容" content:"发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容",
//发送时间
time:new Date().getTime(),
userId:"admin",
age:Math.ceil(Math.random()*100)+1,
mobile:1234567879,
email:"admin@qq.com",
address:"上海高新区",
info:"个人简介",
flag:true
}] }]
}) })
} }
@ -205,7 +228,7 @@ export class MyFriend extends React.Component<any,any>{
<ListGroup.Item key={"list"+index} className="d-flex justify-content-between" variant="info"> <ListGroup.Item key={"list"+index} className="d-flex justify-content-between" variant="info">
<span>{user.name}</span> <span>{user.name}</span>
<Tooltip title="查看用户信息" placement="right"> <Tooltip title="查看用户信息" placement="right">
<img src="user.svg" alt="查看用户信息" className="userIcon"/> <img src="user.svg" alt="查看用户信息" className="userIcon" onClick={()=>this.setState({openUserInfo:true,userId:user.userId})}/>
</Tooltip> </Tooltip>
</ListGroup.Item>)} </ListGroup.Item>)}
</ListGroup> </ListGroup>
@ -215,7 +238,27 @@ export class MyFriend extends React.Component<any,any>{
<Col xs={8}> <Col xs={8}>
<Container className="bg-light chat-history overflow-auto"> <Container className="bg-light chat-history overflow-auto">
{this.state.chatList.map((chat:Chat,index:number)=> {this.state.chatList.map((chat:Chat,index:number)=>
<GroupPart key={"group"+index} name={chat.name} headImg={chat.headImg} content={chat.content} flag={this.props.user===chat.name}/> this.props.user===chat.userId?
<Row>
<Col xs={4}>
<Image roundedCircle={true} src={chat.headImg} className="chat-headImg"/>
<span className="d-block text-center user-name">{chat.name}</span>
</Col>
<Col xs={7}>
<h6 className="text-center">{moment(chat.time).format("YYYY-MM-DD HH:mm:ss")}</h6>
<p>{chat.content}</p>
</Col>
</Row>:
<Row>
<Col xs={7}>
<h6 className="text-center">{moment(chat.time).format("YYYY-MM-DD HH:mm:ss")}</h6>
<p>{chat.content}</p>
</Col>
<Col xs={4}>
<Image roundedCircle={true} src={chat.headImg} className="chat-headImg"/>
<span className="d-block text-center user-name">{chat.name}</span>
</Col>
</Row>
)} )}
</Container> </Container>
<Container className={"bg-white chat-send p-3 border-info border "+(this.state.friendIndex!==-1?"":"d-none")}> <Container className={"bg-white chat-send p-3 border-info border "+(this.state.friendIndex!==-1?"":"d-none")}>
@ -242,6 +285,10 @@ export class MyFriend extends React.Component<any,any>{
</Container> </Container>
</Col> </Col>
</Row> </Row>
<MyDialog titleId="view-user" menuName="用户信息"
content={<MyInfo ownUserId={this.props.user} isOwn={false} isMyFriend={false} isAdd={true} userId={this.state.userId}/>}
open={this.state.openUserInfo} onClose={()=>this.setState({openUserInfo:false})}/>
</Container> </Container>
); );
} }

3
src/my/MyHelp.tsx
Unescape View File

@ -8,7 +8,7 @@ const classList="border-info border d-flex justify-content-center align-items-ce
/** /**
* 我的求助 * 我的求助
*/ */
export class MyHelp extends React.Component<any, { data:Array<MyHelpState> }>{ export class MyHelp extends React.Component<{ undefined?:undefined }, { data:Array<MyHelpState> }>{
constructor(props: Readonly<any>) { constructor(props: Readonly<any>) {
@ -181,6 +181,7 @@ export class MyHelp extends React.Component<any, { data:Array<MyHelpState> }>{
</Container> </Container>
</div> </div>
)} )}
</div> </div>
) )
} }

61
src/my/MyInfo.tsx
Unescape View File

@ -3,10 +3,18 @@ import {Button, Col, Container, Form, FormControl, Image, Row} from "react-boots
import {UserEdit} from "../entity"; import {UserEdit} from "../entity";
import {Input} from "../bootstrap/InputGroup"; import {Input} from "../bootstrap/InputGroup";
/** /**
* 个人信息 * 个人信息
*/ */
export class MyInfo extends React.Component<any, UserEdit>{ export class MyInfo extends React.Component<
{
isOwn:boolean;
ownUserId:string;
userId?:string;
isMyFriend:boolean;
isAdd:boolean;
}, UserEdit>{
constructor(props: Readonly<any>) { constructor(props: Readonly<any>) {
@ -96,8 +104,23 @@ export class MyInfo extends React.Component<any, UserEdit>{
} }
/**
* 添加好友
*/
addFriend(){
}
/**
* 同意好友邀请
*/
agreeFriend(){
}
render() { render() {
return ( return (
<Container> <Container>
<Row> <Row>
@ -157,18 +180,30 @@ export class MyInfo extends React.Component<any, UserEdit>{
:null :null
} }
<Row className="p-3"> {this.props.isOwn?
<Col className="text-center"> <Row className="p-3">
{this.state.contentEditable? <Col className="text-center">
<Button variant={"primary"} onClick={()=>this.doSave()}>保存信息</Button>: {this.state.contentEditable?
<Button variant={"info"} onClick={()=>this.openEdit()} disabled={this.state.modifyPassword}>编辑信息</Button>} <Button variant={"primary"} onClick={()=>this.doSave()}>保存信息</Button>:
</Col> <Button variant={"info"} onClick={()=>this.openEdit()} disabled={this.state.modifyPassword}>编辑信息</Button>}
<Col className="text-center"> </Col>
{this.state.modifyPassword? <Col className="text-center">
<Button variant={"light"} onClick={()=>this.modifyPwd()}>确认</Button>: {this.state.modifyPassword?
<Button variant={"light"} onClick={()=>this.openModifyPwd()} disabled={this.state.contentEditable}>修改密码</Button>} <Button variant={"light"} onClick={()=>this.modifyPwd()}>确认</Button>:
</Col> <Button variant={"light"} onClick={()=>this.openModifyPwd()} disabled={this.state.contentEditable}>修改密码</Button>}
</Row> </Col>
</Row>:
<Row className="p-3">
<Col className="text-center">
{this.props.isMyFriend?null:this.props.isAdd?
<Button variant={"primary"} onClick={()=>this.addFriend()}>添加好友</Button>
:
<Button variant={"primary"} onClick={()=>this.agreeFriend()}>同意</Button>
}
</Col>
</Row>
}
</Container> </Container>
) )
} }

27
src/my/MyLeaveWord.tsx
Unescape View File

@ -1,6 +1,9 @@
import React from "react"; import React from "react";
import {Button, Col, Container, Image, Row} from "react-bootstrap"; import {Button, Col, Container, Image, Row} from "react-bootstrap";
import {ActiveDetail, User} from "../entity"; import {ActiveDetail, User} from "../entity";
import {Tooltip} from "@material-ui/core";
import {MyDialog} from "./MyDialog";
import {MyInfo} from "./MyInfo";
enum LeaveWordType { enum LeaveWordType {
recommend, recommend,
@ -24,15 +27,17 @@ interface Type2 {
/** /**
* 我的留言 * 我的留言
*/ */
export class MyLeaveWord extends React.Component<any, { export class MyLeaveWord extends React.Component<{ user:string }, {
data:Array<Type1|Type2>; data:Array<Type1|Type2>;
openUserInfo:boolean;
userId?:string;
}>{ }>{
constructor(props: Readonly<any>) { constructor(props: Readonly<any>) {
super(props); super(props);
this.state={data:[]} this.state={data:[],openUserInfo:false}
} }
componentDidMount() { componentDidMount() {
@ -115,8 +120,9 @@ export class MyLeaveWord extends React.Component<any, {
/** /**
* 解析留言 * 解析留言
* @param data * @param data
* @param index
*/ */
getData(data:Type1|Type2){ getData(data:Type1|Type2,index:number){
let body let body
if("active" in data ){ if("active" in data ){
body=<Col> body=<Col>
@ -147,7 +153,7 @@ export class MyLeaveWord extends React.Component<any, {
} }
return ( return (
<Container className="mt-3 pt-2 pb-2 border-info border rounded-pill"> <Container key={"Container"+index} className="mt-3 pt-2 pb-2 border-info border rounded-pill">
<Row> <Row>
<Col> <Col>
<h3 className="text-center">{this.getType(data.type)}</h3> <h3 className="text-center">{this.getType(data.type)}</h3>
@ -156,10 +162,16 @@ export class MyLeaveWord extends React.Component<any, {
<Row> <Row>
<Col xs={3}> <Col xs={3}>
<Image src={data.user.headImg} className="leave-word-headImg"/> <Image src={data.user.headImg} className="leave-word-headImg"/>
<span className="d-block text-center user-name">{data.user.name}</span> <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> </Col>
{body} {body}
</Row> </Row>
</Container> </Container>
) )
} }
@ -168,7 +180,10 @@ export class MyLeaveWord extends React.Component<any, {
render() { render() {
return ( return (
<div className="overflow-auto my-leave-world-height"> <div className="overflow-auto my-leave-world-height">
{this.state.data.map(data =>this.getData(data))} {this.state.data.map((data,index) =>this.getData(data,index))}
<MyDialog titleId="view-user" menuName="用户信息"
content={<MyInfo ownUserId={this.props.user} isOwn={false} isMyFriend={false} isAdd={false} userId={this.state.userId}/>}
open={this.state.openUserInfo} onClose={()=>this.setState({openUserInfo:false})}/>
</div> </div>
); );
} }

8
src/my/MyMessage.tsx
Unescape View File

@ -13,7 +13,7 @@ enum Menu {
/** /**
* 个人信息 * 个人信息
*/ */
export class MyMessage extends React.Component<any, any>{ export class MyMessage extends React.Component<{ user:string }, { subMenu:Menu,page:JSX.Element }>{
constructor(props: Readonly<any>) { constructor(props: Readonly<any>) {
@ -21,7 +21,7 @@ export class MyMessage extends React.Component<any, any>{
this.state={ this.state={
subMenu:Menu.info, subMenu:Menu.info,
page:<MyInfo/> page:<MyInfo ownUserId={this.props.user} isMyFriend={false} isOwn={true} isAdd={false}/>
} }
} }
@ -30,13 +30,13 @@ export class MyMessage extends React.Component<any, any>{
this.setState({subMenu:menu}) this.setState({subMenu:menu})
switch (menu) { switch (menu) {
case Menu.info: case Menu.info:
this.setState({page:<MyInfo/>}) this.setState({page:<MyInfo ownUserId={this.props.user} isMyFriend={false} isOwn={true} isAdd={false}/>})
break break
case Menu.help: case Menu.help:
this.setState({page:<MyHelp/>}) this.setState({page:<MyHelp/>})
break break
case Menu.seekHelp: case Menu.seekHelp:
this.setState({page:<SeekHelp/>}) this.setState({page:<SeekHelp user={this.props.user}/>})
break break
} }
} }

25
src/my/SeekHelp.tsx
Unescape View File

@ -6,6 +6,8 @@ import Dialog from "@material-ui/core/Dialog";
import {CloseDialog} from "./CloseDialog"; import {CloseDialog} from "./CloseDialog";
import {Paper, Tooltip} from "@material-ui/core"; import {Paper, Tooltip} from "@material-ui/core";
import Draggable from "react-draggable"; import Draggable from "react-draggable";
import {MyDialog} from "./MyDialog";
import {MyInfo} from "./MyInfo";
/** /**
* 志愿者状态 * 志愿者状态
@ -21,11 +23,15 @@ const titleId="seek-help-dialog"
/** /**
* 我的帮助 * 我的帮助
*/ */
export class SeekHelp extends React.Component<any,{ export class SeekHelp extends React.Component<{ user:string },
data:Array<SeekHelpState>, {
open:boolean, data:Array<SeekHelpState>;
status?:VolunteerStatus, open:boolean;
volunteerList?:Array<User>}>{ status?:VolunteerStatus;
volunteerList?:Array<User>;
openUserInfo:boolean;
userId?:string;
}>{
constructor(props: Readonly<any>) { constructor(props: Readonly<any>) {
@ -33,7 +39,8 @@ export class SeekHelp extends React.Component<any,{
this.state={ this.state={
data:[], data:[],
open:false open:false,
openUserInfo:false
} }
} }
@ -142,12 +149,16 @@ export class SeekHelp extends React.Component<any,{
<ListGroup.Item key={"list"+index} className="d-flex justify-content-between" variant="info"> <ListGroup.Item key={"list"+index} className="d-flex justify-content-between" variant="info">
<span>{user.name}</span> <span>{user.name}</span>
<Tooltip title="查看用户信息" placement="right"> <Tooltip title="查看用户信息" placement="right">
<img src="user.svg" alt="查看用户信息" className="userIcon"/> <img src="user.svg" alt="查看用户信息" className="userIcon" onClick={()=>this.setState({openUserInfo:true,userId:user.userId})}/>
</Tooltip> </Tooltip>
</ListGroup.Item> </ListGroup.Item>
)} )}
</ListGroup> </ListGroup>
</Dialog> </Dialog>
<MyDialog titleId="view-user" menuName="用户信息"
content={<MyInfo ownUserId={this.props.user} isOwn={false} isMyFriend={false} isAdd={true} userId={this.state.userId}/>}
open={this.state.openUserInfo} onClose={()=>this.setState({openUserInfo:false})}/>
</div> </div>
) )
} }

2
src/sub/IndexMenu.tsx
Unescape View File

@ -6,7 +6,7 @@ import {Page} from "../Page";
/** /**
* 首页 * 首页
*/ */
export class IndexMenu extends React.Component<any, any>{ export class IndexMenu extends React.Component<{ undefined?:undefined }, any>{

2
src/sub/SendHelp.tsx
Unescape View File

@ -28,7 +28,7 @@ const recommendType=[RecommendType.no, RecommendType.choose,RecommendType.auto]
/** /**
* 我的求助 * 我的求助
*/ */
export class SendHelp extends React.Component<any, SendHelpState>{ export class SendHelp extends React.Component<{ undefined?:undefined }, SendHelpState>{
//存放活动背景图 //存放活动背景图
private fileImg: RefObject<any>; private fileImg: RefObject<any>;
//当前选中的好友索引 //当前选中的好友索引

14
src/sub/Volunteer.tsx
Unescape View File

@ -8,7 +8,19 @@ import {Address} from "../Address";
/** /**
* 志愿者信息 * 志愿者信息
*/ */
export class Volunteer extends React.Component<any, any>{ export class Volunteer extends React.Component<{ undefined?:undefined }, {
form:{
keyword:string;
address:string;
};
addressList:Array<{address:string}>;
volunteerList:Array<Array<VolunteerProps>>;
page:{
currentPage:number;
totalPage:number;
pageSize:number;
}
}>{
constructor(props: Readonly<any>) { constructor(props: Readonly<any>) {

Write Preview
Loading…
Cancel
Save