87 lines
3.2 KiB
TypeScript
87 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import { UserCircleIcon } from 'tdesign-icons-react';
|
|
import { Avatar, Button, Cell, CellGroup, Input, Popup } from 'tdesign-mobile-react';
|
|
import styles from './index.module.less';
|
|
|
|
export default function render() {
|
|
const { avatar, nickname, isLoggedIn, refreshing, mobile, mobileCount, showDrawer, oakDirty } = this.state;
|
|
const mobileText = mobileCount > 1 ? `${mobileCount}条手机号` : ( mobile || '未设置');
|
|
return (
|
|
<div className={styles['page-body']}>
|
|
<div className={styles.userInfo}>
|
|
{avatar ? (
|
|
<Avatar image={avatar} size="48px" />
|
|
) : (
|
|
<Avatar icon={<UserCircleIcon />} size="48px" />
|
|
)}
|
|
<span className="nickname">{nickname || '未设置'}</span>
|
|
{isLoggedIn ? (
|
|
<Button
|
|
theme="primary"
|
|
size="small"
|
|
disabled={refreshing}
|
|
loading={refreshing}
|
|
onClick={() =>
|
|
this.setState({
|
|
showDrawer: true,
|
|
})
|
|
}
|
|
>
|
|
{this.t('common:action.update')}
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
size="small"
|
|
disabled={refreshing}
|
|
loading={refreshing}
|
|
onClick={() => this.doLogin()}
|
|
>
|
|
{this.t('login')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<CellGroup>
|
|
<Cell
|
|
title="手机号"
|
|
arrow
|
|
note={mobileText}
|
|
onClick={() => this.goMyMobile()}
|
|
/>
|
|
</CellGroup>
|
|
<Popup
|
|
placement="bottom"
|
|
visible={showDrawer}
|
|
onVisibleChange={() => {
|
|
this.setState({ showDrawer: false });
|
|
this.resetUpdateData();
|
|
}}
|
|
>
|
|
<div style={{ backgroundColor: '#fff', padding: 10 }}>
|
|
<Input
|
|
label="昵称"
|
|
placeholder="请输入昵称"
|
|
value={nickname}
|
|
onChange={(value) => {
|
|
this.setUpdateData('0.user.nickname', value);
|
|
}}
|
|
/>
|
|
<div style={{ height: 15 }} />
|
|
<Button
|
|
size="large"
|
|
theme="primary"
|
|
disabled={!oakDirty}
|
|
block
|
|
onClick={async () => {
|
|
await this.execute('update', undefined, '0.user');
|
|
this.setState({ showDrawer: false });
|
|
this.resetUpdateData();
|
|
}}
|
|
>
|
|
{this.t('common:action.confirm')}
|
|
</Button>
|
|
</div>
|
|
</Popup>
|
|
</div>
|
|
);
|
|
}
|