feat: into
This commit is contained in:
188
projects/translate-h5/src/view/home/addArchives/index.tsx
Normal file
188
projects/translate-h5/src/view/home/addArchives/index.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
import MainLayout from "@/layout/main/mainLayout";
|
||||
import styles from "./index.module.less";
|
||||
import archivesAvatarPng from "@/assets/translate/archives-avatar.png";
|
||||
import catDogPng from "@/assets/translate/cat-dog.png";
|
||||
import archivesVarietyPng from "@/assets/translate/archives-variety.png";
|
||||
import archivesWeightPng from "@/assets/translate/archives-weight.png";
|
||||
import archivesDatePng from "@/assets/translate/archives-date.png";
|
||||
import { useState } from "react";
|
||||
import { Image, Button, Popup, Space } from "antd-mobile";
|
||||
import { CloseOutline } from "antd-mobile-icons";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import { Delete } from "@icon-park/react";
|
||||
|
||||
interface DefinedProps {
|
||||
visible: boolean;
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
showBottom?: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
function MyPopup(props: DefinedProps) {
|
||||
const { visible, title, children, onClose, showBottom = false } = props;
|
||||
return (
|
||||
<Popup
|
||||
visible={visible}
|
||||
closeOnMaskClick={true}
|
||||
className={styles.xpopup}
|
||||
onMaskClick={onClose}
|
||||
>
|
||||
<div className={styles.popupHeader}>
|
||||
<h3>{title}</h3>
|
||||
<span onClick={onClose}>
|
||||
<CloseOutline style={{ fontSize: "16px" }} />
|
||||
</span>
|
||||
</div>
|
||||
<div>{children}</div>
|
||||
|
||||
{showBottom && (
|
||||
<div className={styles.popupBottom}>
|
||||
<div className={styles.popupButton}>
|
||||
<Button
|
||||
onClick={onClose}
|
||||
block
|
||||
size="large"
|
||||
shape="rounded"
|
||||
className={styles.cancelButton}
|
||||
>
|
||||
取 消
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles.popupButton}>
|
||||
<Button
|
||||
onClick={onClose}
|
||||
block
|
||||
size="large"
|
||||
shape="rounded"
|
||||
className={styles.confirmButton}
|
||||
>
|
||||
确 定
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Popup>
|
||||
);
|
||||
}
|
||||
|
||||
function Add() {
|
||||
const [visibleVariety, setVisibleVariety] = useState<boolean>(false);
|
||||
const [visibleWeight, setVisibleWeight] = useState<boolean>(false);
|
||||
const [visibleDate, setVisibleDate] = useState<boolean>(false);
|
||||
const [searchParams] = useSearchParams();
|
||||
const flag = searchParams.get("flag");
|
||||
|
||||
const right = (
|
||||
<div style={{ fontSize: 16 }}>
|
||||
<Space style={{ "--gap": "16px" }}>
|
||||
<Delete fill="#FF4D4F" />
|
||||
</Space>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<MainLayout
|
||||
navBarRight={right}
|
||||
isShowNavBar={true}
|
||||
title={flag === "add" ? "添加档案" : "编辑档案"}
|
||||
>
|
||||
<div className={styles.archives}>
|
||||
<div className={styles.archivesAvatar}>
|
||||
<Image src={archivesAvatarPng} width={80} height={80} />
|
||||
</div>
|
||||
<div className={styles.archivesInfo}>
|
||||
{flag === "add" && <Image src={catDogPng} />}
|
||||
|
||||
<div className={styles.archivesFrom}>
|
||||
<div className={styles.archivesFromItem}>
|
||||
<div>昵称*</div>
|
||||
<div className={`${styles.archivesFromInput} ${flag === "edit" && styles.editInput}`}>
|
||||
{flag === "add" ? "请输入昵称" : "钱多多"}
|
||||
</div>
|
||||
</div>
|
||||
<div onClick={() => setVisibleVariety(true)} className={styles.archivesFromItem}>
|
||||
<div>品种*</div>
|
||||
<div className={`${styles.archivesFromInput} ${flag === "edit" && styles.editInput}`}>
|
||||
{flag === "add" ? "请选择" : "布偶猫"}
|
||||
{">"}
|
||||
</div>
|
||||
</div>
|
||||
<div onClick={() => setVisibleWeight(true)} className={styles.archivesFromItem}>
|
||||
<div>体重*</div>
|
||||
<div className={`${styles.archivesFromInput} ${flag === "edit" && styles.editInput}`}>
|
||||
{flag === "add" ? "请选择" : "45kg"}
|
||||
{">"}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.archivesFromItem}>
|
||||
<div>性别*</div>
|
||||
<div className={styles.archivesFromInput}>
|
||||
<div className={styles.archivesTag}>未知</div>
|
||||
<div className={styles.archivesTag}>弟弟</div>
|
||||
<div className={`${styles.archivesTag} ${flag === "edit" && styles.active}`}>
|
||||
妹妹
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div onClick={() => setVisibleDate(true)} className={styles.archivesFromItem}>
|
||||
<div>出生日期*</div>
|
||||
<div className={`${styles.archivesFromInput} ${flag === "edit" && styles.editInput}`}>
|
||||
{flag === "add" ? "请选择" : "2018-12-01"}
|
||||
{">"}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.archivesFromItem}>
|
||||
<div>绝育情况*</div>
|
||||
<div className={styles.archivesFromInput}>
|
||||
<div className={styles.archivesTag}>未知</div>
|
||||
<div className={styles.archivesTag}>已绝育</div>
|
||||
<div className={`${styles.archivesTag} ${flag === "edit" && styles.active}`}>
|
||||
未绝育
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.archivesFromItem}>
|
||||
<Button block shape="rounded" className={styles.saveButton}>
|
||||
保存
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MyPopup
|
||||
title="选择品种"
|
||||
visible={visibleVariety}
|
||||
onClose={() => {
|
||||
setVisibleVariety(false);
|
||||
}}
|
||||
>
|
||||
<Image src={archivesVarietyPng}></Image>
|
||||
</MyPopup>
|
||||
|
||||
<MyPopup
|
||||
title="您宝贝的体重是？"
|
||||
visible={visibleWeight}
|
||||
onClose={() => {
|
||||
setVisibleWeight(false);
|
||||
}}
|
||||
showBottom={true}
|
||||
>
|
||||
<Image src={archivesWeightPng}></Image>
|
||||
</MyPopup>
|
||||
<MyPopup
|
||||
title="选择日期"
|
||||
visible={visibleDate}
|
||||
onClose={() => {
|
||||
setVisibleDate(false);
|
||||
}}
|
||||
showBottom={true}
|
||||
>
|
||||
<Image src={archivesDatePng}></Image>
|
||||
</MyPopup>
|
||||
</MainLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Add;
|
||||
Reference in New Issue
Block a user