111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
import { InboxOutlined } from "@ant-design/icons";
|
|
import { Col, Form, Input, message, Row, Upload, UploadProps } from "antd";
|
|
import { useEffect, useState } from "react";
|
|
import "./index.less";
|
|
const { Dragger } = Upload;
|
|
|
|
interface IProps {
|
|
onChange: Function;
|
|
styles?: React.CSSProperties;
|
|
}
|
|
|
|
const BasicForm = (props: IProps) => {
|
|
const [preview, setPreivew] = useState({
|
|
course_cover_url: "",
|
|
course_title: "",
|
|
course_summary: "",
|
|
});
|
|
const [form] = Form.useForm();
|
|
|
|
const onValuesChange = (_: any, all: any) =>
|
|
setPreivew((p) => ({ ...p, ...all }));
|
|
|
|
const coverDragger: UploadProps = {
|
|
name: "file",
|
|
multiple: true,
|
|
action: "/api/vod/course/cover/upload",
|
|
onChange(info) {
|
|
const { status } = info.file;
|
|
if (status !== "uploading") console.log(info.file, info.fileList);
|
|
if (status === "done") {
|
|
const { code, data } = info.file.response;
|
|
if (code === 10000) {
|
|
message.success(`${info.file.name} 文件上传成功`);
|
|
const { MediaUrl } = data;
|
|
setPreivew((p) => ({ ...p, course_cover_url: MediaUrl }));
|
|
}
|
|
} else if (status === "error") {
|
|
message.error(`${info.file.name} 文件上传失败`);
|
|
}
|
|
},
|
|
onDrop(e) {
|
|
console.log("Dropped files", e.dataTransfer.files);
|
|
},
|
|
};
|
|
|
|
useEffect(() => props.onChange(preview), [preview]);
|
|
|
|
return (
|
|
<div style={{ ...props.styles }}>
|
|
<Row style={{ marginBottom: 24 }}>
|
|
<Col span={24}>
|
|
<div
|
|
className="preview-course"
|
|
style={{
|
|
backgroundImage: !preview.course_cover_url
|
|
? `linear-gradient(
|
|
to right,
|
|
#e95659,
|
|
#e15084,
|
|
#c55aaa,
|
|
#976bc4,
|
|
#5678ce
|
|
)`
|
|
: `url(${preview.course_cover_url})`,
|
|
}}
|
|
>
|
|
<div className="mask">
|
|
<p className="title">
|
|
{!preview.course_title ? "标题" : preview.course_title}
|
|
</p>
|
|
<p className="summary">
|
|
{!preview.course_summary ? "摘要" : preview.course_summary}{" "}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
<Row gutter={24}>
|
|
<Col span={12}>
|
|
<Dragger {...coverDragger} maxCount={1}>
|
|
<p className="ant-upload-drag-icon">
|
|
<InboxOutlined />
|
|
</p>
|
|
<p className="ant-upload-text">上传课程封面图</p>
|
|
<p className="ant-upload-hint">点击或拖拽文件到此处</p>
|
|
</Dragger>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form form={form} onValuesChange={onValuesChange}>
|
|
<Form.Item name="course_title" rules={[{ required: true }]}>
|
|
<Input size="large" type="text" placeholder="标题" />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="course_summary"
|
|
rules={[{ required: true }]}
|
|
style={{ marginBottom: 0 }}
|
|
>
|
|
<Input.TextArea
|
|
placeholder="摘要"
|
|
style={{ height: 130, resize: "none" }}
|
|
/>
|
|
</Form.Item>
|
|
</Form>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BasicForm;
|