59 lines
2.5 KiB
JavaScript
59 lines
2.5 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { List, Button, Modal, Row, Col } from 'antd';
|
|
import { MobileOutlined, DeleteOutlined } from '@ant-design/icons';
|
|
import MobileLogin from '../login';
|
|
export default function render(props) {
|
|
const { mobiles, allowRemove, tokenMobileId, showBack = false } = props.data;
|
|
const { goAddMobile, removeItem, recoverItem, execute } = props.methods;
|
|
const [open, setOpen] = useState(false);
|
|
const eventLoggedIn = `user:info:login:${Date.now()}`;
|
|
return (<>
|
|
<Button type="primary" onClick={() => {
|
|
setOpen(true);
|
|
}} style={{ marginBottom: 16 }}>
|
|
绑定
|
|
</Button>
|
|
<Row>
|
|
<Col xs={24} sm={12}>
|
|
<List bordered>
|
|
{mobiles?.map((ele, index) => (<List.Item key={index} extra={allowRemove &&
|
|
tokenMobileId !== ele.id && (<div onClick={() => {
|
|
const modal = Modal.confirm({
|
|
title: `确认删除吗？删除后无法用此号码登录`,
|
|
okText: '确定',
|
|
cancelText: '取消',
|
|
onOk: async (e) => {
|
|
removeItem(ele.id);
|
|
try {
|
|
await execute();
|
|
}
|
|
catch (err) {
|
|
recoverItem(ele.id);
|
|
throw err;
|
|
}
|
|
modal.destroy();
|
|
},
|
|
onCancel: (e) => {
|
|
modal.destroy();
|
|
},
|
|
});
|
|
}}>
|
|
<DeleteOutlined />
|
|
</div>)}>
|
|
<List.Item.Meta avatar={<MobileOutlined />} title={ele.mobile}></List.Item.Meta>
|
|
</List.Item>))}
|
|
</List>
|
|
</Col>
|
|
</Row>
|
|
<Modal title="绑定手机号" open={open} destroyOnClose={true} footer={null} onCancel={() => {
|
|
setOpen(false);
|
|
}}>
|
|
<div style={{ padding: 16 }}>
|
|
<MobileLogin callback={() => {
|
|
setOpen(false);
|
|
}} oakPath="$mobile/me-mobile/login" oakAutoUnmount={true}/>
|
|
</div>
|
|
</Modal>
|
|
</>);
|
|
}
|