mirror of
https://github.com/PlayEdu/backend
synced 2025-07-20 11:19:36 +08:00
选择、上传封面模块
This commit is contained in:
parent
b0709630cd
commit
52e6dc2e05
@ -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;
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user