yexuejc007/PlayEdu-frontend
1
0
Fork 0
mirror of https://github.com/PlayEdu/frontend.git synced 2025-06-08 05:04:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

弹窗组件open外置并使用三元运算

Browse Source
This commit is contained in:
unknown 2023-08-03 09:44:16 +08:00
parent 9425cae0da
commit 565df9891d
2 changed files with 111 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
src/compenents/change-password/index.tsx
View File

@ -40,63 +40,65 @@ export const ChangePasswordModel: React.FC<PropInterface> = ({
return ( return (
<> <>
<Modal {open ? (
title="修改密码" <Modal
centered title="修改密码"
forceRender centered
open={open} forceRender
width={416} open={true}
onOk={() => form.submit()} width={416}
onCancel={() => onCancel()} onOk={() => form.submit()}
maskClosable={false} onCancel={() => onCancel()}
> maskClosable={false}
<div className="float-left mt-24"> >
<Form <div className="float-left mt-24">
form={form} <Form
name="change-password" form={form}
labelCol={{ span: 8 }} name="change-password"
wrapperCol={{ span: 16 }} labelCol={{ span: 8 }}
initialValues={{ remember: true }} wrapperCol={{ span: 16 }}
onFinish={onFinish} initialValues={{ remember: true }}
onFinishFailed={onFinishFailed} onFinish={onFinish}
autoComplete="off" onFinishFailed={onFinishFailed}
> autoComplete="off"
<Form.Item
label="请输入原密码"
name="old_password"
rules={[{ required: true, message: "请输入原密码!" }]}
> >
<Input.Password <Form.Item
style={{ width: 200 }} label="请输入原密码"
autoComplete="off" name="old_password"
placeholder="请输入原密码" rules={[{ required: true, message: "请输入原密码!" }]}
/> >
</Form.Item> <Input.Password
<Form.Item style={{ width: 200 }}
label="输入新密码" autoComplete="off"
name="new_password" placeholder="请输入原密码"
rules={[{ required: true, message: "请输入新密码!" }]} />
> </Form.Item>
<Input.Password <Form.Item
style={{ width: 200 }} label="输入新密码"
autoComplete="off" name="new_password"
placeholder="请输入新密码" rules={[{ required: true, message: "请输入新密码!" }]}
/> >
</Form.Item> <Input.Password
<Form.Item style={{ width: 200 }}
label="再次输入新密码" autoComplete="off"
name="again_new_password" placeholder="请输入新密码"
rules={[{ required: true, message: "再次输入新密码!" }]} />
> </Form.Item>
<Input.Password <Form.Item
style={{ width: 200 }} label="再次输入新密码"
autoComplete="off" name="again_new_password"
placeholder="再次输入新密码" rules={[{ required: true, message: "再次输入新密码!" }]}
/> >
</Form.Item> <Input.Password
</Form> style={{ width: 200 }}
</div> autoComplete="off"
</Modal> placeholder="再次输入新密码"
/>
</Form.Item>
</Form>
</div>
</Modal>
) : null}
</> </>
); );
}; };

104
src/compenents/user-info/index.tsx
View File

@ -75,60 +75,62 @@ export const UserInfoModel: React.FC<PropInterface> = ({ open, onCancel }) => {
return ( return (
<> <>
<Modal {open ? (
title="个人信息" <Modal
centered title="个人信息"
forceRender centered
open={open} forceRender
width={416} open={true}
onCancel={() => onCancel()} width={416}
maskClosable={false} onCancel={() => onCancel()}
footer={null} maskClosable={false}
> footer={null}
<div className="mt-24"> >
<Form <div className="mt-24">
form={form} <Form
name="user-info" form={form}
labelCol={{ span: 8 }} name="user-info"
wrapperCol={{ span: 16 }} labelCol={{ span: 8 }}
initialValues={{ remember: true }} wrapperCol={{ span: 16 }}
autoComplete="off" initialValues={{ remember: true }}
> autoComplete="off"
<Form.Item
label="学员头像"
labelCol={{ style: { marginTop: 15, marginLeft: 52 } }}
> >
<div className="d-flex"> <Form.Item
{avatar && ( label="学员头像"
<Image labelCol={{ style: { marginTop: 15, marginLeft: 52 } }}
loading="lazy" >
width={60} <div className="d-flex">
height={60} {avatar && (
style={{ borderRadius: "50%" }} <Image
src={avatar} loading="lazy"
preview={false} width={60}
/> height={60}
)} style={{ borderRadius: "50%" }}
<div className="d-flex ml-16"> src={avatar}
<Upload {...props} showUploadList={false}> preview={false}
<Button>更换头像</Button> />
</Upload> )}
<div className="d-flex ml-16">
<Upload {...props} showUploadList={false}>
<Button>更换头像</Button>
</Upload>
</div>
</div> </div>
</div>
</Form.Item>
{name && (
<Form.Item label="学员姓名">
<div>{name}</div>
</Form.Item> </Form.Item>
)} {name && (
{idCard && ( <Form.Item label="学员姓名">
<Form.Item label="身份证号" style={{ marginBottom: 16 }}> <div>{name}</div>
<div>{idCard}</div> </Form.Item>
</Form.Item> )}
)} {idCard && (
</Form> <Form.Item label="身份证号" style={{ marginBottom: 16 }}>
</div> <div>{idCard}</div>
</Modal> </Form.Item>
)}
</Form>
</div>
</Modal>
) : null}
</> </>
); );
}; };