选择、上传封面模块

This commit is contained in:
禺狨 2023-03-16 10:39:40 +08:00
parent b0709630cd
commit 52e6dc2e05
3 changed files with 138 additions and 13 deletions

View File

@ -62,6 +62,10 @@ code {
margin-left: 120px; margin-left: 120px;
} }
.ml-16 {
margin-left: 16px;
}
.mr-16 { .mr-16 {
margin-right: 16px; margin-right: 16px;
} }
@ -86,6 +90,10 @@ code {
margin-right: 24px; margin-right: 24px;
} }
.mb-28 {
margin-bottom: 28px;
}
.mt-50 { .mt-50 {
margin-top: 50px; margin-top: 50px;
} }
@ -94,6 +102,14 @@ code {
margin-bottom: 50px; margin-bottom: 50px;
} }
.helper-text {
height: 24px;
font-size: 12px;
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
line-height: 24px;
}
.float-left { .float-left {
width: 100%; width: 100%;
height: auto; height: auto;
@ -132,6 +148,10 @@ code {
flex-direction: column; flex-direction: column;
} }
.flex-1 {
flex: 1;
}
.c-admin { .c-admin {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;

View File

@ -0,0 +1,22 @@
.thumb-item {
width: 80px;
height: 60px;
cursor: pointer;
margin-right: 8px;
border-radius: 6px;
&:last-child {
margin-right: 0;
}
}
.thumb-item-avtive {
width: 80px;
height: 60px;
border: 2px solid #ff4d4f;
cursor: pointer;
margin-right: 8px;
border-radius: 8px;
&:last-child {
margin-right: 0;
}
}

View File

@ -9,11 +9,13 @@ import {
Input, Input,
Modal, Modal,
message, message,
Image,
} from "antd"; } from "antd";
import styles from "./create.module.less"; import styles from "./create.module.less";
import { course, department } from "../../../api/index"; import { course, department } from "../../../api/index";
import { UploadImageButton } from "../../../compenents"; import { UploadImageButton } from "../../../compenents";
import { ExclamationCircleFilled } from "@ant-design/icons"; import { ExclamationCircleFilled } from "@ant-design/icons";
import { getHost } from "../../../utils/index";
const { confirm } = Modal; const { confirm } = Modal;
@ -30,12 +32,16 @@ interface Option {
export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => { export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const defaultThumb1 = getHost() + "thumb/thumb1.png";
const defaultThumb2 = getHost() + "thumb/thumb2.png";
const defaultThumb3 = getHost() + "thumb/thumb3.png";
const [loading, setLoading] = useState<boolean>(true); const [loading, setLoading] = useState<boolean>(true);
const [departments, setDepartments] = useState<any>([]); const [departments, setDepartments] = useState<any>([]);
const [categories, setCategories] = useState<any>([]); const [categories, setCategories] = useState<any>([]);
const [thumb, setThumb] = useState<string>(""); const [thumb, setThumb] = useState<string>("");
const [type, setType] = useState<string>("open"); const [type, setType] = useState<string>("open");
const [chapterType, setChapterType] = useState(0); const [chapterType, setChapterType] = useState(0);
const [selThumb, setSelThumb] = useState(1);
useEffect(() => { useEffect(() => {
getParams(); getParams();
@ -45,14 +51,14 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
useEffect(() => { useEffect(() => {
form.setFieldsValue({ form.setFieldsValue({
title: "", title: "",
thumb: "", thumb: defaultThumb1,
dep_ids: [], dep_ids: [],
category_ids: [], category_ids: [],
type: "open", type: "open",
desc: "", desc: "",
hasChapter: 0, hasChapter: 0,
}); });
setThumb(""); setThumb(defaultThumb1);
}, [form, open]); }, [form, open]);
const getParams = () => { const getParams = () => {
@ -226,7 +232,83 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
name="thumb" name="thumb"
rules={[{ required: true, message: "请上传课程封面!" }]} rules={[{ required: true, message: "请上传课程封面!" }]}
> >
<div className="c-flex"> <div className="d-flex">
<Image
src={thumb}
width={160}
height={120}
style={{ borderRadius: 6 }}
preview={false}
/>
<div className="c-flex ml-8 flex-1">
<div className="d-flex mb-28">
<div
className={
selThumb === 1
? styles["thumb-item-avtive"]
: styles["thumb-item"]
}
onClick={() => {
setSelThumb(1);
setThumb(defaultThumb1);
form.setFieldsValue({
thumb: defaultThumb1,
});
}}
>
<Image
src={defaultThumb1}
width={80}
height={60}
style={{ borderRadius: 6 }}
preview={false}
/>
</div>
<div
className={
selThumb === 2
? styles["thumb-item-avtive"]
: styles["thumb-item"]
}
onClick={() => {
setSelThumb(2);
setThumb(defaultThumb2);
form.setFieldsValue({
thumb: defaultThumb2,
});
}}
>
<Image
src={defaultThumb2}
width={80}
height={60}
style={{ borderRadius: 6 }}
preview={false}
/>
</div>
<div
className={
selThumb === 3
? styles["thumb-item-avtive"]
: styles["thumb-item"]
}
onClick={() => {
setSelThumb(3);
setThumb(defaultThumb3);
form.setFieldsValue({
thumb: defaultThumb3,
});
}}
>
<Image
src={defaultThumb3}
width={80}
height={60}
style={{ borderRadius: 6 }}
preview={false}
/>
</div>
</div>
<div className="d-flex"> <div className="d-flex">
<UploadImageButton <UploadImageButton
onSelected={(url) => { onSelected={(url) => {
@ -234,10 +316,11 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
form.setFieldsValue({ thumb: url }); form.setFieldsValue({ thumb: url });
}} }}
></UploadImageButton> ></UploadImageButton>
<span className="helper-text ml-16">
推荐尺寸:400x300px
</span>
</div>
</div> </div>
{thumb && (
<img className="form-course-thumb mt-10" src={thumb} alt="" />
)}
</div> </div>
</Form.Item> </Form.Item>
<Form.Item label="课程简介" name="desc"> <Form.Item label="课程简介" name="desc">