102 lines
2.7 KiB
TypeScript
102 lines
2.7 KiB
TypeScript
/**
|
|
* Title: 地产详情
|
|
* Routes:
|
|
* - ./src/pages/routes
|
|
*/
|
|
import React from 'react';
|
|
import { connect, DispatchProp } from 'dva';
|
|
import { formatMessage } from 'umi-plugin-locale';
|
|
import { Button, Modal, Input } from 'antd';
|
|
import Header from '@/components/Header';
|
|
import AccountItem from '@/components/AccountItem';
|
|
import { UserModelState } from '@/models/user';
|
|
|
|
import styles from './style.less';
|
|
import { AccountModelState } from './model';
|
|
|
|
const AccountPage: React.FC<DispatchProp & UserModelState & AccountModelState> = ({
|
|
dispatch,
|
|
user,
|
|
nameEditable,
|
|
nameInput,
|
|
nameSubmitting,
|
|
}) => {
|
|
|
|
const onLogout = () => {
|
|
Modal.confirm({
|
|
title: formatMessage({ id: 'account.confirm' }),
|
|
onOk: () => dispatch({ type: 'user/logout' }),
|
|
okText: formatMessage({ id: 'common.ok' }),
|
|
cancelText: formatMessage({ id: 'common.cancel' }),
|
|
centered: true,
|
|
});
|
|
};
|
|
|
|
const editNameModal = (
|
|
<Modal
|
|
title={formatMessage({ id: 'common.modify' })}
|
|
visible={nameEditable}
|
|
onCancel={() => dispatch({ type: 'account/onUpdateState', nameEditable: false })}
|
|
onOk={() => dispatch({ type: 'account/changeName' })}
|
|
okText={formatMessage({ id: 'common.ok' })}
|
|
cancelText={formatMessage({ id: 'common.cancel' })}
|
|
confirmLoading={nameSubmitting}
|
|
>
|
|
<Input
|
|
size="large"
|
|
placeholder={formatMessage({ id: 'account.nickname' })}
|
|
value={nameInput}
|
|
onChange={e => dispatch({ type: 'account/onUpdateState', nameInput: e.target.value })}
|
|
/>
|
|
</Modal>
|
|
);
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Header
|
|
className={styles.header}
|
|
title={formatMessage({ id: 'account.title' })}
|
|
/>
|
|
{user && <div className={styles.content}>
|
|
<AccountItem
|
|
className="group"
|
|
title="account.nickname"
|
|
message={user.nickname}
|
|
showGo={false}
|
|
onClick={() => dispatch({
|
|
type: 'account/onUpdateState',
|
|
nameEditable: true,
|
|
nameInput: user.nickname,
|
|
})}
|
|
/>
|
|
<AccountItem
|
|
className="group"
|
|
title="account.phone"
|
|
message={user.phone}
|
|
/>
|
|
<AccountItem
|
|
className="group"
|
|
title="account.email"
|
|
message={user.email}
|
|
/>
|
|
<AccountItem
|
|
className="group"
|
|
title="account.loginPwd"
|
|
/>
|
|
<Button
|
|
className={styles.logout}
|
|
size="large"
|
|
onClick={onLogout}
|
|
>
|
|
{formatMessage({ id: 'account.logout' })}
|
|
</Button>
|
|
</div>}
|
|
{editNameModal}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default connect(
|
|
({ user, account }: any) => ({ ...user, ...account }),
|
|
)(AccountPage);
|