Skip to content

X
xiaomai-cloud-class-web
Commit 62f7ae6b by chenshu
Options

feat:初始化

parent b11a9005
Showing with 140 additions and 106 deletions
src/modules/course-manage/offline-course/AddGraphicsCourse.jsx → src/modules/course-manage/offline-course/AddOfflineCourse.jsx
......@@ -3,7 +3,7 @@
* @Date: 2020-08-05 10:07:47
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-29 14:08:47
* @Description: 图文课新增/编辑页
* @Description: 线下课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......@@ -25,7 +25,7 @@ import { randomString } from '@/domains/basic-domain/utils';
import User from '@/common/js/user';
import _ from "underscore";
import Upload from '@/core/upload';
import './AddGraphicsCourse.less';
import './AddOfflineCourse.less';
const EDIT_BOX_KEY = Math.random();
const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' };
......@@ -36,7 +36,7 @@ const whetherVisitorsJoin = 'NO'
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
let cutFlag = false;
class AddGraphicsCourse extends React.Component {
class AddOfflineCourse extends React.Component {
constructor(props) {
super(props);
......@@ -45,15 +45,15 @@ class AddGraphicsCourse extends React.Component {
const pageType = getParameterByName("type");
this.state = {
id, // 图文课ID,编辑的时候从URL上带过来
id, // 线下课ID,编辑的时候从URL上带过来
pageType, // 页面类型: add->新建 edit->编辑
imageFile: null, // 需要被截取的图片
courseName: null, // 图文课名称
courseName: null, // 线下课名称
courseMedia: '',
introduce: '',
courseMediaId: null, // 图文课链接
coverId: null, // 图文封面的recourceId
coverUrl: defaultCoverUrl, // 图文课封面
courseMediaId: null, // 线下课链接
coverId: null, // 线下封面的recourceId
coverUrl: defaultCoverUrl, // 线下课封面
studentList: [], // 上课学员列表
shelfState:'YES', //是否开启学院展示
diskList: [], // 机构可见磁盘目录
......@@ -78,13 +78,13 @@ class AddGraphicsCourse extends React.Component {
}
initBus = () => {
Bus.bind('graphicsEditorImage', this.uploadImage)
Bus.bind('graphicsEditorVideo', this.uploadVideo)
Bus.bind('offlineEditorImage', this.uploadImage)
Bus.bind('offlineEditorVideo', this.uploadVideo)
}
removeBus = () => {
Bus.unbind('graphicsEditorImage', this.uploadImage)
Bus.unbind('graphicsEditorVideo', this.uploadVideo)
Bus.unbind('offlineEditorImage', this.uploadImage)
Bus.unbind('offlineEditorVideo', this.uploadVideo)
}
uploadImage = () => {
......@@ -118,7 +118,7 @@ class AddGraphicsCourse extends React.Component {
break;
}
}
// 获取图文课详情
// 获取线下课详情
handleFetchScheudleDetail = (courseId) => {
Service.Hades('public/hades/mediaCourseDetail',{
courseId
......@@ -207,13 +207,13 @@ class AddGraphicsCourse extends React.Component {
icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>,
onOk: () => {
window.RCHistory.push({
pathname: `/graphics-course`,
pathname: `/offline-course`,
});
}
});
}else{
window.RCHistory.push({
pathname: `/graphics-course`,
pathname: `/offline-course`,
});
}
}
......@@ -431,7 +431,7 @@ class AddGraphicsCourse extends React.Component {
whetherVisitorsJoin,
courseType: 'PICTURE',
};
// 校验必填字段:课程名称, 课程图文
// 校验必填字段:课程名称, 课程线下
this.handleValidate(courseName, courseMedia, categoryId).then((res) => {
if (!res) return;
Upload.uploadTextToOSS(courseMedia, `${randomString()}.txt`, (courseMediaId) => {
......@@ -457,7 +457,7 @@ class AddGraphicsCourse extends React.Component {
if (!res) return;
message.success("新建成功");
window.RCHistory.push({
pathname: `/graphics-course`,
pathname: `/offline-course`,
});
})
} else {
......@@ -469,7 +469,7 @@ class AddGraphicsCourse extends React.Component {
if (!res) return;
message.success("保存成功");
window.RCHistory.push({
pathname: `/graphics-course`,
pathname: `/offline-course`,
});
});
}
......@@ -532,11 +532,12 @@ class AddGraphicsCourse extends React.Component {
const hasSelectedStu = studentList.length;
const courseWareIcon = FileVerifyMap[videoType] ? FileTypeIcon[FileVerifyMap[videoType].type] : FileTypeIcon[videoType];
const isDefaultCover = coverUrl === defaultCoverUrl;
return (
<div className="page add-video-course-page">
<div className="page add-offline-course-page">
<Breadcrumbs
navList={pageType === "add" ? "新建图文课" : "编辑图文课"}
navList={pageType === "add" ? "新建线下课" : "编辑线下课"}
goBack={this.handleGoBack}
/>
......@@ -546,56 +547,55 @@ class AddGraphicsCourse extends React.Component {
</div>
<div className="form">
<div className="course-name required">
<span className="label">课程名称：</span>
<Input
value={courseName}
placeholder="请输入图文课的名称（40字以内）"
maxLength={40}
style={{ width: 240 }}
onChange={(e) => { this.handleChangeForm('courseName', e.target.value)}}
/>
</div>
<div className="cover-url flex mt16">
<div className="label">封面图：</div>
<div className="cover-url__wrap">
<div className="img-content">
<img src={coverUrl} />
</div>
<div className="opt-btns">
<Button onClick={() => {
this.setState({
showSelectCoverModal: true
});
}}>{`${(pageType === 'add' && !coverUrl) ? '上传' : '修改'}封面`}</Button>
<div className="tips">建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
<div className="basic-info__wrap">
<div className="title">基本信息</div>
<div className="course-name required">
<span className="label">课程名称：</span>
<Input
value={courseName}
placeholder="请输入线下课的名称（40字以内）"
maxLength={40}
style={{ width: 240 }}
onChange={(e) => { this.handleChangeForm('courseName', e.target.value)}}
/>
</div>
<div className="course-cover">
<span className="label">封面图：</span>
<div className="course-cover__wrap">
<div className="img-content">
{
isDefaultCover && <span className="tag">默认图</span>
}
<img src={coverUrl} />
</div>
<div className="opt-btns">
<Button onClick={() => {
this.setState({
showSelectFileModal: true
})
}}>上传图片</Button>
<span
className={`default-btn ${isDefaultCover ? 'disabled' : ''}`}
onClick={this.handleResetCoverUrl}
>使用默认图</span>
<div className="tips">建议尺寸1280*720px，图片支持jpg、jpeg、png格式。</div>
</div>
</div>
</div>
</div>
<div className="course-catalog required">
<span className="label">课程分类：</span>
{ (pageType === 'add') &&
<Cascader defaultValue={[categoryName]} options={courseCatalogList} displayRender={ label => label.join('-')} fieldNames={fieldNames} onChange={this.catalogChange} style={{ width: 240 }} placeholder="请选择课程分类" suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}/>
}
{ (pageType === 'edit' && categoryName ) &&
<Cascader defaultValue={[categoryName]} options={courseCatalogList} displayRender={ label => label.join('-')} fieldNames={fieldNames} onChange={this.catalogChange} style={{ width: 240 }} placeholder="请选择课程分类" suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}/>
}
<div className="course-catalog required">
<span className="label">课程分类：</span>
{ (pageType === 'add') &&
<Cascader defaultValue={[categoryName]} options={courseCatalogList} displayRender={ label => label.join('-')} fieldNames={fieldNames} onChange={this.catalogChange} style={{ width: 240 }} placeholder="请选择课程分类" suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}/>
}
{ (pageType === 'edit' && categoryName ) &&
<Cascader defaultValue={[categoryName]} options={courseCatalogList} displayRender={ label => label.join('-')} fieldNames={fieldNames} onChange={this.catalogChange} style={{ width: 240 }} placeholder="请选择课程分类" suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}/>
}
</div>
</div>
<div className="intro-info mt16">
<AddGraphicsIntro
data={{
id,
courseMedia,
introduce,
shelfState,
whetherVisitorsJoin,
loadcourseMedia,
loadintroduce,
}}
onChange={this.handleChangeForm}
/>
</div>
</div>
</div>
......@@ -686,4 +686,4 @@ class AddGraphicsCourse extends React.Component {
}
}
export default AddGraphicsCourse;
export default AddOfflineCourse;
src/modules/course-manage/offline-course/AddGraphicsCourse.less → src/modules/course-manage/offline-course/AddOfflineCourse.less
.add-video-course-page {
.add-offline-course-page {
position:relative !important;
.box{
margin-bottom:66px !important;
......@@ -28,6 +28,16 @@
.form {
margin-top: 16px;
padding: 0 16px;
.basic-info__wrap {
.title {
font-size: 16px;
color: #333;
font-weight: 500;
line-height: 22px;
margin-bottom: 16px;
margin-left: -16px;
}
}
.label{
display:inline-block;
text-align:right;
......@@ -70,39 +80,66 @@
.flex {
display: flex;
}
.cover-url__wrap {
.course-cover {
display: flex;
margin-top: 16px;
&__wrap {
position: relative;
.tag {
border-radius: 2px;
background: #D6D6D6;
font-size: 12px;
height: 18px;
width: 52px;
text-align: center;
color: #FFF;
position: absolute;
top: 8px;
left: 8px;
}
}
.course-cover__wrap {
display: flex;
flex-direction: row;
}
.img-content {
width: 298px;
height: 172px;
margin-right: 20px;
width: 299px;
height: 169px;
img {
width: 100%;
height: 100%;
object-fit: contain;
border: 1px solid #E8e8e8;
}
}
.empty-img {
width: 298px;
height: 172px;
border: 1px dashed #EBEBEB;
border-radius: 4px;
padding: 12px;
color: #999;
padding: 52px 24px;
text-align: center;
}
.opt-btns {
margin-top: 8px;
display: flex;
align-items: center;
.tips {
margin-left: 12px;
color: #999;
.default-btn {
margin-left: 16px;
color: #5289FA;
cursor: pointer;
&.disabled {
color: #CCC;
cursor: not-allowed;
}
}
.ant-upload-list {
display: none;
}
}
.tips {
margin-top: 8px;
color: #999;
}
}
.select-student {
......
src/modules/course-manage/offline-course/components/OfflineCourseOpt.jsx
......@@ -19,7 +19,7 @@ export default function OfflineCourseOpt() {
<Button
type="primary"
onClick={() => {
RCHistory.push('/create-graphics-course?type=add');
RCHistory.push('/create-offline-course?type=add');
}}
className="mr12"
>新建线下课</Button>
......
src/modules/course-manage/offline-course/index.jsx
......@@ -14,20 +14,19 @@ class OfflineCoursePage extends React.Component {
query: {
size: 10,
current: 1,
courseType: 'PICTURE',
storeId:User.getStoreId()
},
dataSource: [], // 视频课列表
totalCount: 0, // 视频课数据总条数
dataSource: [], // 线下课列表
totalCount: 0, // 线下课数据总条数
}
}
componentWillMount() {
// 获取视频课列表
// 获取线下课列表
this.handleFetchScheduleList();
}
// 获取视频课列表
// 获取线下课列表
handleFetchScheduleList = (_query = {}) => {
const query = {
...this.state.query,
......@@ -36,7 +35,7 @@ class OfflineCoursePage extends React.Component {
// 更新请求参数
this.setState({ query });
Service.Hades('public/hades/mediaCoursePage', query).then((res) => {
Service.Hades('public/hades/getOfflineCoursePage', query).then((res) => {
const { result = {} } = res || {};
const { records = [], total = 0 } = result;
this.setState({
......@@ -44,14 +43,6 @@ class OfflineCoursePage extends React.Component {
totalCount: Number(total)
});
})
// CourseService.videoSchedulePage(query).then((res) => {
// const { result = {} } = res || {};
// const { records = [], total = 0 } = result;
// this.setState({
// dataSource: records,
// totalCount: Number(total)
// });
// });
}
render() {
......@@ -69,7 +60,7 @@ class OfflineCoursePage extends React.Component {
{/* 操作模块 */}
<OfflineCourseOpt />
{/* 视频课列表模块 */}
{/* 线下课列表模块 */}
<OfflineCourseList
query={query}
dataSource={dataSource}
......
src/routes/config/mainRoutes.tsx
......@@ -20,6 +20,7 @@ import GraphicsCoursePage from '@/modules/course-manage/graphics-course'
import OfflineCoursePage from '@/modules/course-manage/offline-course'
import AddVideoCoursePage from '@/modules/course-manage/video-course/AddVideoCourse'
import AddGraphicsCoursePage from '@/modules/course-manage/graphics-course/AddGraphicsCourse'
import AddOfflineCoursePage from '@/modules/course-manage/offline-course/AddOfflineCourse'
// import DataList from '@/modules/course-manage/DataList/DataList';
// import ClassBook from '@/modules/resource-disk';
import ResourceDisk from '@/modules/resource-disk';
......@@ -118,6 +119,11 @@ const mainRoutes = [
name: "创建图文课",
},
{
path: "/create-offline-course",
component: AddOfflineCoursePage,
name: "创建线下课",
},
{
path: "/resource-disk",
component: ResourceDisk,
name: "资料云盘",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment