50 lines
2.0 KiB
JavaScript
50 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import { List, Tag, Avatar } from 'antd-mobile';
|
|
import Style from './mobile.module.less';
|
|
import ActionPanel from 'oak-frontend-base/es/components/func/actionPanel';
|
|
export default function render(props) {
|
|
const { nickname, avatar, name, userState, idState, gender, userStateColor, userStateStr, idStateColor, idStateStr, mobileText, executableActions, actionDescriptions, birth, mobileUpdatable, } = props.data;
|
|
const { t, onActionClick, onMobileItemClicked } = props.methods;
|
|
return (<div className={Style.container}>
|
|
<div className={Style['avatar_container']}>
|
|
<Avatar className={Style.avatar} src={avatar || ''}/>
|
|
</div>
|
|
<List className={Style.list}>
|
|
|
|
<List.Item extra={nickname || t('unset')}>
|
|
{t('user:attr.nickname')}
|
|
</List.Item>
|
|
|
|
<List.Item extra={name || t('unset')}>
|
|
{t('user:attr.name')}
|
|
</List.Item>
|
|
|
|
<List.Item extra={gender ? t(`user:v.gender.${gender}`) : t('unset')}>
|
|
{t('user:attr.gender')}
|
|
</List.Item>
|
|
|
|
<List.Item extra={birth || t('unset')}>
|
|
{t('user:attr.birth')}
|
|
</List.Item>
|
|
|
|
<List.Item extra={mobileText}>
|
|
{t('mobile')}
|
|
</List.Item>
|
|
|
|
<List.Item extra={<Tag color={userStateColor}>
|
|
{userStateStr}
|
|
</Tag>}>
|
|
{t('user:attr.userState')}
|
|
</List.Item>
|
|
|
|
<List.Item extra={<Tag color={idStateColor}>
|
|
{idStateStr}
|
|
</Tag>}>
|
|
{t('user:attr.idState')}
|
|
</List.Item>
|
|
</List>
|
|
<div style={{ flex: 1 }}/>
|
|
<ActionPanel actions={executableActions} actionDescriptions={actionDescriptions} onActionClick={(action) => onActionClick(action)}/>
|
|
</div>);
|
|
}
|