48 lines
2.3 KiB
JavaScript
48 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
import { List, Tag, Avatar, FloatingBubble } from 'antd-mobile';
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
import Style from './mobile.module.less';
|
|
export default function render(props) {
|
|
const { stateColor, userArr, isRoot } = props.data;
|
|
const { onCellClicked, t, goNewUser } = props.methods;
|
|
return (<div className={Style.container}>
|
|
<List>
|
|
{userArr?.map((ele, index) => {
|
|
return (<List.Item key={index} onClick={() => onCellClicked(ele.id)} prefix={<Avatar className={Style.avatar} src={ele.avatar}/>} title={<div>{ele.name || '--'}</div>} description={<div className={Style.description}>
|
|
<div className={Style.row}>
|
|
<span className={Style.label}>
|
|
昵称:
|
|
</span>
|
|
<span className={Style.value}>
|
|
{ele.nickname || '--'}
|
|
</span>
|
|
</div>
|
|
<div className={Style.row}>
|
|
<span className={Style.label}>
|
|
手机号:
|
|
</span>
|
|
<span className={Style.value}>
|
|
{ele.mobile || '--'}
|
|
</span>
|
|
</div>
|
|
<Tag color={stateColor[ele.userState]}>
|
|
{ele.userState
|
|
? t(`user:v.userState.${ele.userState}`)
|
|
: '未知'}
|
|
</Tag>
|
|
</div>}></List.Item>);
|
|
})}
|
|
</List>
|
|
|
|
{isRoot && (<FloatingBubble axis="x" magnetic="x" style={{
|
|
'--initial-position-bottom': '24px',
|
|
'--initial-position-right': '24px',
|
|
'--edge-distance': '24px',
|
|
}} onClick={() => {
|
|
goNewUser();
|
|
}}>
|
|
<PlusOutlined />
|
|
</FloatingBubble>)}
|
|
</div>);
|
|
}
|