yexuejc007/PlayEdu-frontend
1
0
Fork 0
mirror of https://github.com/PlayEdu/frontend.git synced 2025-06-07 05:46:11 +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 (
<>
<Modal
title="修改密码"
centered
forceRender
open={open}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="float-left mt-24">
<Form
form={form}
name="change-password"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="请输入原密码"
name="old_password"
rules={[{ required: true, message: "请输入原密码!" }]}
{open ? (
<Modal
title="修改密码"
centered
forceRender
open={true}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
maskClosable={false}
>
<div className="float-left mt-24">
<Form
form={form}
name="change-password"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Input.Password
style={{ width: 200 }}
autoComplete="off"
placeholder="请输入原密码"
/>
</Form.Item>
<Form.Item
label="输入新密码"
name="new_password"
rules={[{ required: true, message: "请输入新密码!" }]}
>
<Input.Password
style={{ width: 200 }}
autoComplete="off"
placeholder="请输入新密码"
/>
</Form.Item>
<Form.Item
label="再次输入新密码"
name="again_new_password"
rules={[{ required: true, message: "再次输入新密码!" }]}
>
<Input.Password
style={{ width: 200 }}
autoComplete="off"
placeholder="再次输入新密码"
/>
</Form.Item>
</Form>
</div>
</Modal>
<Form.Item
label="请输入原密码"
name="old_password"
rules={[{ required: true, message: "请输入原密码!" }]}
>
<Input.Password
style={{ width: 200 }}
autoComplete="off"
placeholder="请输入原密码"
/>
</Form.Item>
<Form.Item
label="输入新密码"
name="new_password"
rules={[{ required: true, message: "请输入新密码!" }]}
>
<Input.Password
style={{ width: 200 }}
autoComplete="off"
placeholder="请输入新密码"
/>
</Form.Item>
<Form.Item
label="再次输入新密码"
name="again_new_password"
rules={[{ required: true, message: "再次输入新密码!" }]}
>
<Input.Password
style={{ width: 200 }}
autoComplete="off"
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 (
<>
<Modal
title="个人信息"
centered
forceRender
open={open}
width={416}
onCancel={() => onCancel()}
maskClosable={false}
footer={null}
>
<div className="mt-24">
<Form
form={form}
name="user-info"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
autoComplete="off"
>
<Form.Item
label="学员头像"
labelCol={{ style: { marginTop: 15, marginLeft: 52 } }}
{open ? (
<Modal
title="个人信息"
centered
forceRender
open={true}
width={416}
onCancel={() => onCancel()}
maskClosable={false}
footer={null}
>
<div className="mt-24">
<Form
form={form}
name="user-info"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
autoComplete="off"
>
<div className="d-flex">
{avatar && (
<Image
loading="lazy"
width={60}
height={60}
style={{ borderRadius: "50%" }}
src={avatar}
preview={false}
/>
)}
<div className="d-flex ml-16">
<Upload {...props} showUploadList={false}>
<Button>更换头像</Button>
</Upload>
<Form.Item
label="学员头像"
labelCol={{ style: { marginTop: 15, marginLeft: 52 } }}
>
<div className="d-flex">
{avatar && (
<Image
loading="lazy"
width={60}
height={60}
style={{ borderRadius: "50%" }}
src={avatar}
preview={false}
/>
)}
<div className="d-flex ml-16">
<Upload {...props} showUploadList={false}>
<Button>更换头像</Button>
</Upload>
</div>
</div>
</div>
</Form.Item>
{name && (
<Form.Item label="学员姓名">
<div>{name}</div>
</Form.Item>
)}
{idCard && (
<Form.Item label="身份证号" style={{ marginBottom: 16 }}>
<div>{idCard}</div>
</Form.Item>
)}
</Form>
</div>
</Modal>
{name && (
<Form.Item label="学员姓名">
<div>{name}</div>
</Form.Item>
)}
{idCard && (
<Form.Item label="身份证号" style={{ marginBottom: 16 }}>
<div>{idCard}</div>
</Form.Item>
)}
</Form>
</div>
</Modal>
) : null}
</>
);
};