95 lines
4.3 KiB
JavaScript
95 lines
4.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { List, Button, Popup, Dialog, Card, Input, Form } from 'antd-mobile';
|
|
import { MobileOutlined, DeleteOutlined } from '@ant-design/icons';
|
|
import Style from './mobile.module.less';
|
|
import Verify from '../../user/password/verify';
|
|
import MobileLogin from '../login';
|
|
export default function render(props) {
|
|
const { mobiles, allowRemove, tokenMobileId, allowCreate, onFinish, isRoot, creatingOne, verifyPassword } = props.data;
|
|
const { removeItem, recoverItem, execute, t, createMobile, cancelCreating, confirmCreating, updateCreatingMobile, checkNeedVerifyPassword, addMobile } = props.methods;
|
|
const [open, setOpen] = useState(false);
|
|
const [addOpen, setAddOpen] = useState(false);
|
|
const [inputMobile, setInputMobile] = useState('');
|
|
if (verifyPassword) {
|
|
return (<Verify onVerified={checkNeedVerifyPassword}/>);
|
|
}
|
|
return (<div className={Style.container}>
|
|
{mobiles && mobiles.length > 0 ? (<>
|
|
<List className={Style.list}>
|
|
{mobiles?.map((ele, index) => (<List.Item key={index} prefix={<MobileOutlined />} extra={allowRemove &&
|
|
tokenMobileId !== ele.id && (<div onClick={async () => {
|
|
if (!checkNeedVerifyPassword()) {
|
|
const result = await Dialog.confirm({
|
|
content: t('alertRemove'),
|
|
});
|
|
if (result) {
|
|
removeItem(ele.id);
|
|
try {
|
|
await execute();
|
|
}
|
|
catch (err) {
|
|
recoverItem(ele.id);
|
|
throw err;
|
|
}
|
|
}
|
|
}
|
|
}}>
|
|
<DeleteOutlined />
|
|
</div>)}>
|
|
{ele.mobile}
|
|
</List.Item>))}
|
|
</List>
|
|
<div style={{ flex: 1 }}/>
|
|
</>) : (<div className={Style.noData}>
|
|
<Card className={Style.card}>{t('noData')}</Card>
|
|
</div>)}
|
|
|
|
{allowCreate ? (<Button block size="large" color="primary" onClick={() => isRoot ? setAddOpen(true) : setOpen(true)}>
|
|
{isRoot ? t('common::action.add') : t('bind')}
|
|
</Button>) : null}
|
|
|
|
<Popup visible={open} showCloseButton={true} onClose={() => setOpen(false)} bodyStyle={{
|
|
borderTopLeftRadius: '8px',
|
|
borderTopRightRadius: '8px',
|
|
height: '60vh',
|
|
}}>
|
|
<MobileLogin callback={() => {
|
|
setOpen(false);
|
|
onFinish && onFinish();
|
|
}} oakPath="$mobile/me-mobile/login" oakAutoUnmount={true}/>
|
|
</Popup>
|
|
<Popup visible={addOpen} onMaskClick={() => {
|
|
setInputMobile('');
|
|
setAddOpen(false);
|
|
}} onClose={() => {
|
|
setInputMobile('');
|
|
setAddOpen(false);
|
|
}} destroyOnClose bodyStyle={{
|
|
borderTopLeftRadius: '8px',
|
|
borderTopRightRadius: '8px',
|
|
height: '60vh',
|
|
padding: 16,
|
|
boxSizing: 'border-box',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 12,
|
|
}}>
|
|
<div style={{ fontSize: 16, fontWeight: 600 }}>{`${t('common::action.add')}${t('mobile:name')}`}</div>
|
|
<Form layout='vertical'>
|
|
<Form.Item>
|
|
<Input autoFocus maxLength={11} placeholder={t('placeholder.mobile')} value={inputMobile} onChange={(val) => setInputMobile(val.trim())} clearable/>
|
|
</Form.Item>
|
|
</Form>
|
|
<Button color="primary" onClick={() => {
|
|
addMobile(inputMobile);
|
|
setInputMobile('');
|
|
setAddOpen(false);
|
|
}} disabled={inputMobile === ''} size="large" block style={{
|
|
marginTop: 10,
|
|
}}>
|
|
{t('common::action.confirm')}
|
|
</Button>
|
|
</Popup>
|
|
</div>);
|
|
}
|