You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
303 lines
11 KiB
303 lines
11 KiB
import React from "react";
|
|
import {Button, Col, Container, Form, FormControl, Image, Row} from "react-bootstrap";
|
|
import {UserEdit, UserType} from "../entity";
|
|
import {Input} from "../ui/InputGroup";
|
|
import {API, JSONResponse, Method, prefix, request} from "../interface";
|
|
import {
|
|
EmptyBodyTransform,
|
|
FindUserInfo,
|
|
FindUserInfoTransform,
|
|
ModifyPwdMessage,
|
|
ModifyPwdTransform,
|
|
SimpleMessage
|
|
} from "../result";
|
|
import {MyDialog} from "../ui/MyDialog";
|
|
import {Address} from "../ui/Address";
|
|
|
|
/**
|
|
* 个人信息
|
|
*/
|
|
export class MyInfo extends React.Component<
|
|
{
|
|
userId:string;
|
|
isOwn:boolean;
|
|
isMyFriend:boolean;
|
|
isAdd:boolean;
|
|
onUserUpdate?:Function;
|
|
}, UserEdit>{
|
|
|
|
private ages:Array<number>
|
|
|
|
constructor(props: Readonly<any>) {
|
|
super(props);
|
|
|
|
this.ages=this.createAge()
|
|
|
|
this.state={
|
|
contentEditable:false,
|
|
modifyPassword:false,
|
|
oldPassword:"",
|
|
newPassword:"",
|
|
confirmNewPwd:"",
|
|
result:null
|
|
}
|
|
}
|
|
|
|
|
|
createAge(){
|
|
let age=[]
|
|
for(let i=18;i<100;i++){
|
|
age.push(i)
|
|
}
|
|
return age
|
|
}
|
|
|
|
/**
|
|
* 加载用户信息
|
|
*/
|
|
loadInfo(){
|
|
|
|
let that=this
|
|
|
|
request(API.account.find+"/"+this.props.userId,Method.GET, {},new FindUserInfoTransform(),function(res:FindUserInfo){
|
|
switch (res.customResult) {
|
|
case SimpleMessage.fail:
|
|
that.setState({
|
|
result:<h3 className="text-danger text-center">获取用户信息失败，请联系管理员</h3>
|
|
});break
|
|
case SimpleMessage.ok:
|
|
that.setState({
|
|
headImg:res.info?.headImg,
|
|
userId:res.info?.userId,
|
|
name:res.info?.name,
|
|
age:res.info?.age,
|
|
mobile:res.info?.mobile,
|
|
email:res.info?.email,
|
|
serviceAddress:res.info?.serviceAddress,
|
|
info:res.info?.info,
|
|
userType:res.info?.userType,
|
|
sex:res.info?.sex
|
|
});break
|
|
|
|
}
|
|
})
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.loadInfo()
|
|
}
|
|
|
|
/**
|
|
* 进入编辑模式
|
|
*/
|
|
openEdit(){
|
|
this.setState({
|
|
contentEditable:true
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 进入修改密码
|
|
*/
|
|
openModifyPwd(){
|
|
this.setState({
|
|
modifyPassword:true
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 修改密码
|
|
*/
|
|
modifyPwd(){
|
|
this.setState({
|
|
modifyPassword:false
|
|
})
|
|
|
|
let that=this
|
|
|
|
request(API.account.updatePwd,Method.POST, {
|
|
newPassword:this.state.newPassword,
|
|
oldPassword:this.state.oldPassword
|
|
},new ModifyPwdTransform(),function (res:JSONResponse<ModifyPwdMessage>) {
|
|
switch (res.customResult) {
|
|
case ModifyPwdMessage.fail:
|
|
that.setState({
|
|
result:<h3 className="text-danger text-center">修改密码失败，请联系管理员</h3>
|
|
});break
|
|
case ModifyPwdMessage.pwd_fail:
|
|
that.setState({
|
|
result:<h3 className="text-danger text-center">修改密码失败，原密码错误</h3>
|
|
});break
|
|
case ModifyPwdMessage.ok:
|
|
that.setState({
|
|
result:<h3 className="text-info text-center">修改密码成功</h3>
|
|
});break
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 保存信息
|
|
*/
|
|
doSave(){
|
|
this.setState({
|
|
contentEditable:false
|
|
})
|
|
|
|
let that=this
|
|
|
|
request(API.account.update,Method.POST, {
|
|
headImg:this.state.headImg||"",
|
|
name:this.state.name||"",
|
|
age:this.state.age+""||"",
|
|
mobile:this.state.mobile+""||"",
|
|
email:this.state.email||"",
|
|
serviceAddress:this.state.serviceAddress||"",
|
|
info:this.state.info||"",
|
|
userType:this.state.userType||"",
|
|
sex:this.state.sex||""
|
|
},new EmptyBodyTransform(),function (res:JSONResponse<SimpleMessage>) {
|
|
switch (res.customResult) {
|
|
case SimpleMessage.fail:
|
|
that.setState({
|
|
result:<h3 className="text-danger text-center">更新信息失败，请联系管理员</h3>
|
|
});break
|
|
case SimpleMessage.ok:
|
|
that.loadInfo();
|
|
//TODO 更新用户身份
|
|
that.setState({
|
|
result:<h3 className="text-info text-center">更新信息成功</h3>
|
|
})
|
|
break
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
|
|
/**
|
|
* 添加好友
|
|
*/
|
|
addFriend(){
|
|
|
|
}
|
|
|
|
/**
|
|
* 同意好友邀请
|
|
*/
|
|
agreeFriend(){
|
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
<Container className="overflow-auto">
|
|
<Row>
|
|
<Col className="p-3 text-center">
|
|
<Image className="chat-headImg" src={this.state.headImg?prefix.image+this.state.headImg:""}/>
|
|
</Col>
|
|
</Row>
|
|
{/*TODO 表单校验*/}
|
|
<Row>
|
|
<Col className="border-info border p-3 d-flex justify-content-center align-items-center">
|
|
{this.state.userId}
|
|
</Col>
|
|
<Col className="border-info border p-3 text-center">
|
|
{this.state.contentEditable?
|
|
<FormControl value={this.state.name} onChange={(e)=>this.setState({name:e.target.value})}/>
|
|
:this.state.name}</Col>
|
|
<Col className="border-info border p-3 text-center">
|
|
{this.state.contentEditable?
|
|
<FormControl as={"select"} value={this.state.age} onChange={(e)=>this.setState({age:+e.target.value})}>
|
|
{this.ages.map(value=><option key={value} value={value}>{value}</option>)}
|
|
</FormControl>
|
|
:this.state.age}</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col className="border-info border p-3 text-center">
|
|
{this.state.contentEditable?
|
|
<FormControl value={this.state.mobile} type={"number"} onChange={(e)=>this.setState({mobile:+e.target.value})}/>
|
|
:this.state.mobile}
|
|
</Col>
|
|
<Col className="border-info border p-3 text-center">
|
|
{this.state.contentEditable?
|
|
<FormControl value={this.state.email} onChange={(e)=>this.setState({email:e.target.value})}/>
|
|
:this.state.email}
|
|
</Col>
|
|
<Col className="border-info border p-3 text-center">
|
|
{this.state.contentEditable?
|
|
<FormControl value={this.state.sex} as={"select"} onChange={event => this.setState({sex:event.target.value})}>
|
|
<option value={"man"}>男</option>
|
|
<option value={"women"}>女</option>
|
|
</FormControl>:this.state.sex==='man'?"男":"女"}
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col className="border-info border p-3 text-center">
|
|
{this.state.contentEditable?
|
|
<Address col={12} value={this.state.serviceAddress} onChange={(value:string)=>this.setState({serviceAddress:value})}/>:this.state.serviceAddress}
|
|
</Col>
|
|
<Col className="border-info border p-3 text-center">
|
|
{this.state.contentEditable?
|
|
<FormControl value={this.state.userType} as={"select"} onChange={(e)=>this.setState({userType:e.target.value})}>
|
|
<option value={UserType.seekHelp}>服务发起者</option>
|
|
<option value={UserType.help}>服务接受者</option>
|
|
</FormControl>:
|
|
this.state.userType===UserType.help?"等待前往帮助":"等待接受帮助"}
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col className="border-info border p-3 text-center my-info-desc">
|
|
{this.state.contentEditable?
|
|
<FormControl value={this.state.info} as={"textarea"} onChange={(e)=>this.setState({info:e.target.value})}/>
|
|
:this.state.info}
|
|
</Col>
|
|
</Row>
|
|
{this.state.modifyPassword?
|
|
<Row>
|
|
<Col>
|
|
<Form>
|
|
<Input name="oldPassword" type={"password"} desc="旧密码" onChange={(value:string)=>this.setState({oldPassword:value})}/>
|
|
|
|
<Input name="newPassword" type={"password"} desc="新密码" onChange={(value:string)=>this.setState({newPassword:value})}/>
|
|
|
|
<Input name="confirmNewPwd" type={"password"} placeholder="请确认新密码" desc="新密码" onChange={(value:string)=>this.setState({confirmNewPwd:value})}/>
|
|
</Form>
|
|
</Col>
|
|
</Row>
|
|
:null
|
|
}
|
|
|
|
{this.props.isOwn?
|
|
<Row className="p-3">
|
|
<Col className="text-center">
|
|
{this.state.contentEditable?
|
|
<Button variant={"primary"} onClick={()=>this.doSave()}>保存信息</Button>:
|
|
<Button variant={"info"} onClick={()=>this.openEdit()} disabled={this.state.modifyPassword}>编辑信息</Button>}
|
|
</Col>
|
|
<Col className="text-center">
|
|
{this.state.modifyPassword?
|
|
<Button variant={"light"} onClick={()=>this.modifyPwd()}>确认</Button>:
|
|
<Button variant={"light"} onClick={()=>this.openModifyPwd()} disabled={this.state.contentEditable}>修改密码</Button>}
|
|
</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>
|
|
}
|
|
|
|
<MyDialog content={this.state.result} open={this.state.result!==null} titleId="myinfo-dialog" menuName="用户提示" onClose={()=>this.setState({
|
|
result:null
|
|
})}/>
|
|
</Container>
|
|
)
|
|
}
|
|
}
|
|
|