feat: dev 新增我的账户，修改昵称和密码
huoyong.msb
5 years ago
parent
6e1f76b8d3
commit
022ad46b81
@ -0,0 +1,58 @@
|
||||
import React, { useState } from 'react'
|
||||
import { useDispatch } from 'react-redux'
|
||||
import { TextField, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@material-ui/core'
|
||||
import { doUpdateAccount } from 'actions/account'
|
||||
|
||||
|
||||
function EditMyAccountDialog({ handleClose }: { handleClose: (isOk: boolean) => void }) {
|
||||
const [pwd, setPwd] = useState('')
|
||||
const [name, setName] = useState('')
|
||||
const dispatch = useDispatch()
|
||||
|
||||
const onSubmit = () => {
|
||||
dispatch(doUpdateAccount({ fullname: name, password: pwd }, isOk => {
|
||||
if (isOk) {
|
||||
handleClose(true)
|
||||
}
|
||||
}))
|
||||
}
|
||||
return (
|
||||
<Dialog open={true} onClose={() => handleClose(false)} style={{ width: 600 }}>
|
||||
<DialogTitle>修改资料</DialogTitle>
|
||||
<DialogContent>
|
||||
<TextField
|
||||
autoFocus={true}
|
||||
margin="dense"
|
||||
label="修改密码"
|
||||
type="password"
|
||||
fullWidth={true}
|
||||
placeholder="不修改留空即可"
|
||||
onChange={e => setPwd(e.target.value)}
|
||||
value={pwd}
|
||||
/>
|
||||
<TextField
|
||||
autoFocus={true}
|
||||
margin="dense"
|
||||
label="修改昵称"
|
||||
fullWidth={true}
|
||||
placeholder="不修改留空即可"
|
||||
onChange={e => setName(e.target.value)}
|
||||
value={name}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => handleClose(false)} color="secondary">
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
onClick={onSubmit}
|
||||
>
|
||||
确认
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditMyAccountDialog
|
||||
@ -0,0 +1,80 @@
|
||||
import React, { useState } from 'react'
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import { RootState } from 'actions/types'
|
||||
import { makeStyles, Theme, Card, CardActionArea, CardContent, Typography, CardActions, Button } from '@material-ui/core'
|
||||
import EditMyAccountDialog from './EditMyAccountDialog'
|
||||
import { logout, fetchLoginInfo } from 'actions/account'
|
||||
|
||||
const useStyles = makeStyles(({ palette, spacing }: Theme) => ({
|
||||
root: {
|
||||
margin: spacing(2),
|
||||
},
|
||||
dialog: {
|
||||
},
|
||||
card: {
|
||||
minWidth: 375,
|
||||
maxWidth: 500,
|
||||
maxHeight: `calc(100% - ${spacing(4)}px)`,
|
||||
overflowY: 'auto',
|
||||
},
|
||||
media: {
|
||||
objectFit: 'cover',
|
||||
height: 250,
|
||||
},
|
||||
title: {
|
||||
marginTop: spacing(1),
|
||||
color: palette.primary.main,
|
||||
},
|
||||
dialogPapaer: {
|
||||
margin: spacing(2),
|
||||
},
|
||||
}))
|
||||
|
||||
function MyAccountView() {
|
||||
const me = useSelector((state: RootState) => state.auth)
|
||||
const classes = useStyles()
|
||||
const [editing, setEditing] = useState(false)
|
||||
const dispatch = useDispatch()
|
||||
const onEditSubmit = (isOk: boolean) => {
|
||||
setEditing(false)
|
||||
if (isOk) {
|
||||
dispatch(fetchLoginInfo())
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<Card className={classes.card}>
|
||||
<CardActionArea>
|
||||
<CardContent>
|
||||
<Typography gutterBottom={true} variant="h6" component="h6" className={classes.title}>
|
||||
{me.fullname}
|
||||
</Typography>
|
||||
<Typography component="p">
|
||||
这个家伙很懒还没有写签名....我们也不支持 。。。
|
||||
</Typography>
|
||||
<Typography gutterBottom={true} variant="subtitle1" component="h6" className={classes.title} >
|
||||
昵称
|
||||
</Typography>
|
||||
<Typography component="p">
|
||||
{me.fullname}
|
||||
</Typography>
|
||||
<Typography gutterBottom={true} variant="subtitle1" component="h6" className={classes.title} >
|
||||
账号 / 邮箱
|
||||
</Typography>
|
||||
<Typography component="p">
|
||||
{me.email}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
<CardActions>
|
||||
<Button size="small" color="primary" onClick={() => setEditing(true)}>修改资料</Button>
|
||||
<Button size="small" color="primary" onClick={() => dispatch(logout())}>退出登陆</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
{editing && <EditMyAccountDialog handleClose={onEditSubmit} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MyAccountView
|
||||
@ -0,0 +1,26 @@
|
||||
import { IRSAA } from 'redux-api-middleware'
|
||||
import { put, take } from 'redux-saga/effects'
|
||||
import { AnyAction } from 'redux'
|
||||
import { MSG_TYPE, showMessage } from 'actions/common'
|
||||
|
||||
export function createCommonDoActionSaga(
|
||||
fetchActionCreator: (params: object) => { [x: string]: IRSAA },
|
||||
fetchSuccessActionType: string,
|
||||
_fetchErrorActionType?: string,
|
||||
hideSuccessMsg?: boolean,
|
||||
msg?: string
|
||||
) {
|
||||
return function*(action: AnyDoAction) {
|
||||
const { cb, params } = action.payload
|
||||
yield put(fetchActionCreator(params) as AnyAction)
|
||||
const retAction: TCommonDoAction = yield take(fetchSuccessActionType)
|
||||
if (retAction.payload.isOk) {
|
||||
if (!hideSuccessMsg || retAction.payload.errMsg) {
|
||||
yield put(showMessage(`${msg || '操作成功！'}${retAction.payload.errMsg || ''}`, MSG_TYPE.SUCCESS))
|
||||
}
|
||||
} else {
|
||||
yield put(showMessage(`操作失败: ${retAction.payload.errMsg}`, MSG_TYPE.ERROR))
|
||||
}
|
||||
cb && cb(retAction.payload.isOk, retAction.payload.isOk ? retAction.payload.data : null)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue