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.
362 lines
15 KiB
362 lines
15 KiB
import React from "react";
|
|
import {Button, Col, Container, Form, FormControl, Image, Row} from "react-bootstrap";
|
|
import {User, 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";
|
|
import {Cookies} from "react-cookie";
|
|
import {user_type_cookie} from "../account/PropCookie";
|
|
|
|
/**
|
|
* 个人信息
|
|
*/
|
|
export class MyInfo extends React.Component<
|
|
{
|
|
//查看用户id
|
|
userId:string;
|
|
//查看本人
|
|
isOwn:boolean;
|
|
//是否添加好友
|
|
isAdd:boolean;
|
|
cookies?:Cookies;
|
|
}, { userEdit:UserEdit,userInfo?:User,result:JSX.Element|null }>{
|
|
|
|
private ages:Array<number>
|
|
|
|
constructor(props: Readonly<any>) {
|
|
super(props);
|
|
|
|
this.ages=this.createAge()
|
|
|
|
this.state={
|
|
userEdit:{
|
|
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(){
|
|
|
|
if(!this.props.userId){
|
|
return
|
|
}
|
|
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({
|
|
userInfo:res.info,
|
|
userEdit: {
|
|
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,
|
|
oldUserType:res.info?.userType,
|
|
|
|
contentEditable:false,
|
|
modifyPassword:false,
|
|
oldPassword:"",
|
|
newPassword:"",
|
|
confirmNewPwd:"",
|
|
}
|
|
});break
|
|
|
|
}
|
|
})
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.loadInfo()
|
|
}
|
|
|
|
/**
|
|
* 进入编辑模式
|
|
*/
|
|
openEdit(){
|
|
this.setState({
|
|
userEdit:{...this.state.userEdit,...{contentEditable:true}}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 进入修改密码
|
|
*/
|
|
openModifyPwd(){
|
|
this.setState({
|
|
userEdit:{...this.state.userEdit,...{ modifyPassword:true}}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 修改密码
|
|
*/
|
|
modifyPwd(){
|
|
this.setState({
|
|
userEdit:{...this.state.userEdit,...{ modifyPassword:false}}
|
|
})
|
|
|
|
let that=this
|
|
|
|
request(API.account.updatePwd,Method.POST, {
|
|
newPassword:this.state.userEdit.newPassword,
|
|
oldPassword:this.state.userEdit.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({
|
|
userEdit:{...this.state.userEdit,...{ contentEditable:false}}
|
|
})
|
|
|
|
let that=this
|
|
let isUpdateUserType=this.state.userEdit.userType!==this.state.userEdit.oldUserType
|
|
if(isUpdateUserType&&this.props.cookies){
|
|
this.props.cookies.set(user_type_cookie,this.state.userEdit.userType)
|
|
}
|
|
request(API.account.update,Method.POST, {
|
|
headImg:this.state.userEdit.headImg||"",
|
|
name:this.state.userEdit.name||"",
|
|
age:this.state.userEdit.age+""||"",
|
|
mobile:this.state.userEdit.mobile+""||"",
|
|
email:this.state.userEdit.email||"",
|
|
serviceAddress:this.state.userEdit.serviceAddress||"",
|
|
info:this.state.userEdit.info||"",
|
|
userType:this.state.userEdit.userType||"",
|
|
sex:this.state.userEdit.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:<div className="text-center">
|
|
<h3 className="text-info text-center">更新信息成功</h3>
|
|
{isUpdateUserType?<Button variant={"info"} onClick={()=>window.location.reload()}>点击立刻刷新用户身份</Button>:null}
|
|
</div>
|
|
})
|
|
break
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
|
|
/**
|
|
* 添加好友
|
|
*/
|
|
addFriend(){
|
|
let that=this
|
|
request(API.account.friend,Method.POST, {targetUserId:this.props.userId},new EmptyBodyTransform(),function (res:JSONResponse<SimpleMessage>) {
|
|
switch (res.customResult) {
|
|
case SimpleMessage.ok:
|
|
that.setState({
|
|
result:<h3 className="text-info text-center">成功发送邀请</h3>
|
|
});break
|
|
case SimpleMessage.fail:
|
|
that.setState({
|
|
result:<h3 className="text-danger text-center">发送好友邀请失败,请联系管理员</h3>
|
|
});break
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 同意好友邀请
|
|
*/
|
|
agreeFriend(){
|
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
<Container className="overflow-auto">
|
|
<Row>
|
|
<Col className="p-3 text-center">
|
|
<Image className="chat-headImg" src={this.state.userInfo?.headImg?prefix.image+this.state.userInfo.headImg:""}/>
|
|
</Col>
|
|
</Row>
|
|
{/*TODO 表单校验*/}
|
|
<Row>
|
|
<Col className="border-info border p-3 d-flex justify-content-center align-items-center">
|
|
{this.state.userInfo?.userId}
|
|
</Col>
|
|
<Col className="border-info border p-3 text-center">
|
|
{this.state.userEdit.contentEditable?
|
|
<FormControl value={this.state.userEdit.name} onChange={(e)=>this.setState({
|
|
userEdit:{...this.state.userEdit,...{ name:e.target.value}}
|
|
})}/>
|
|
:this.state.userInfo?.name}</Col>
|
|
<Col className="border-info border p-3 text-center">
|
|
{this.state.userEdit.contentEditable?
|
|
<FormControl as={"select"} value={this.state.userEdit.age} onChange={(e)=>this.setState({
|
|
userEdit:{...this.state.userEdit,...{ age:+e.target.value}}
|
|
})}>
|
|
{this.ages.map(value=><option key={value} value={value}>{value}</option>)}
|
|
</FormControl>
|
|
:this.state.userInfo?.age}</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col className="border-info border p-3 text-center">
|
|
{this.state.userEdit.contentEditable?
|
|
<FormControl value={this.state.userEdit.mobile} type={"number"} onChange={(e)=>this.setState({
|
|
userEdit:{...this.state.userEdit,...{ mobile:+e.target.value}}
|
|
})}/>
|
|
:this.state.userInfo?.mobile}
|
|
</Col>
|
|
<Col className="border-info border p-3 text-center">
|
|
{this.state.userEdit.contentEditable?
|
|
<FormControl value={this.state.userEdit.email} onChange={(e)=>this.setState({
|
|
userEdit:{...this.state.userEdit,...{ email:e.target.value}}
|
|
})}/>
|
|
:this.state.userInfo?.email}
|
|
</Col>
|
|
<Col className="border-info border p-3 text-center">
|
|
{this.state.userEdit.contentEditable?
|
|
<FormControl value={this.state.userEdit.sex} as={"select"} onChange={event => this.setState({
|
|
userEdit:{...this.state.userEdit,...{ sex:event.target.value}}
|
|
})}>
|
|
<option value={"man"}>男</option>
|
|
<option value={"women"}>女</option>
|
|
</FormControl>:this.state.userInfo?.sex==='man'?"男":"女"}
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col className="border-info border p-3 text-center">
|
|
{this.state.userEdit.contentEditable?
|
|
<Address col={12} value={this.state.userEdit.serviceAddress} onChange={(value:string)=>this.setState({
|
|
userEdit:{...this.state.userEdit,...{ serviceAddress:value}}
|
|
})}/>:this.state.userInfo?.serviceAddress}
|
|
</Col>
|
|
<Col className="border-info border p-3 text-center">
|
|
{this.state.userEdit.contentEditable?
|
|
<FormControl value={this.state.userEdit.userType} as={"select"} onChange={(e)=>this.setState({
|
|
userEdit:{...this.state.userEdit,...{ userType:e.target.value}}
|
|
})}>
|
|
<option value={UserType.seekHelp}>服务发起者</option>
|
|
<option value={UserType.help}>服务接受者</option>
|
|
</FormControl>:
|
|
this.state.userInfo?.userType===UserType.help?"等待前往帮助":"等待接受帮助"}
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col className="border-info border p-3 text-center my-info-desc">
|
|
{this.state.userEdit.contentEditable?
|
|
<FormControl value={this.state.userEdit.info} as={"textarea"} onChange={(e)=>this.setState({
|
|
userEdit:{...this.state.userEdit,...{ info:e.target.value}}
|
|
})}/>
|
|
:this.state.userInfo?.info}
|
|
</Col>
|
|
</Row>
|
|
{this.state.userEdit.modifyPassword?
|
|
<Row>
|
|
<Col>
|
|
<Form>
|
|
<Input name="oldPassword" type={"password"} desc="旧密码" onChange={(value:string)=>this.setState({
|
|
userEdit:{...this.state.userEdit,...{ oldPassword:value}}
|
|
})}/>
|
|
|
|
<Input name="newPassword" type={"password"} desc="新密码" onChange={(value:string)=>this.setState({
|
|
userEdit:{...this.state.userEdit,...{newPassword:value}}
|
|
})}/>
|
|
|
|
<Input name="confirmNewPwd" type={"password"} placeholder="请确认新密码" desc="新密码" onChange={(value:string)=>this.setState({
|
|
userEdit:{...this.state.userEdit,...{confirmNewPwd:value}}
|
|
})}/>
|
|
</Form>
|
|
</Col>
|
|
</Row>
|
|
:null
|
|
}
|
|
|
|
{this.props.isOwn?
|
|
<Row className="p-3">
|
|
<Col className="text-center">
|
|
{this.state.userEdit.contentEditable?
|
|
<Button variant={"primary"} onClick={()=>this.doSave()}>保存信息</Button>:
|
|
<Button variant={"info"} onClick={()=>this.openEdit()} disabled={this.state.userEdit.modifyPassword}>编辑信息</Button>}
|
|
</Col>
|
|
<Col className="text-center">
|
|
{this.state.userEdit.modifyPassword?
|
|
<Button variant={"light"} onClick={()=>this.modifyPwd()}>确认</Button>:
|
|
<Button variant={"light"} onClick={()=>this.openModifyPwd()} disabled={this.state.userEdit.contentEditable}>修改密码</Button>}
|
|
</Col>
|
|
</Row>:
|
|
<Row className="p-3">
|
|
<Col className="text-center">
|
|
{this.state.userInfo?.isMyFriend===undefined||this.state.userInfo.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>
|
|
)
|
|
}
|
|
}
|
|
|