Skip to content

X
xiaomai-cloud-class-web
Commit 1e2f3e0e by yuananting
Options

fix:课程改造统一修改（简介、开关、封面图）

parent b490f02c
Showing with 346 additions and 258 deletions
src/modules/course-manage/components/AddLiveBasic.less
...@@ -2,41 +2,25 @@ ...@@ -2,41 +2,25 @@
.label { .label {
width: 100px; width: 100px;
text-align: right; text-align: right;
display:inline-block; display: inline-block;
.require { .require {
color: #EC4B35; color: #ec4b35;
} }
} }
.course-cover { .course-cover {
margin-left: 14px; margin-left: 14px;
display: flex; display: flex;
margin-top: 16px; margin-top: 24px;
&__wrap { &__wrap {
position: relative; 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 { .img-content {
margin-top: 8px;
margin-right: 20px; margin-right: 20px;
width: 299px; width: 299px;
height: 169px; height: 169px;
position: relative;
img { img {
width: 100%; width: 100%;
...@@ -44,17 +28,28 @@ ...@@ -44,17 +28,28 @@
object-fit: contain; object-fit: contain;
border-radius: 4px; border-radius: 4px;
} }
.tag {
border-radius: 2px;
background: #d6d6d6;
font-size: 12px;
height: 18px;
width: 52px;
text-align: center;
color: #fff;
position: absolute;
top: 8px;
left: 8px;
}
} }
.opt-btns { .opt-btns {
.default-btn { .default-btn {
margin-left: 16px; margin-left: 14px;
color: #2966FF; color: #2966ff;
cursor: pointer; cursor: pointer;
&.disabled { &.disabled {
color: #CCC; color: #ccc;
cursor: not-allowed; cursor: not-allowed;
} }
} }
...@@ -62,21 +57,21 @@ ...@@ -62,21 +57,21 @@
.ant-upload-list { .ant-upload-list {
display: none; display: none;
} }
}
.tips { .tips {
margin-top: 8px; margin-top: 8px;
color: #999; color: #999;
} }
} }
.course-catalog{
margin:20px 0 0 14px;
} }
}
.course-catalog {
margin: 20px 0 0 14px;
}
} }
.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled){ .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) {
font-weight:normal !important; font-weight: normal !important;
color:#2966FF !important; color: #2966ff !important;
} }
#imgCutModalNew { #imgCutModalNew {
width: 500px; width: 500px;
......
src/modules/course-manage/components/GraphicsEditor.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: yuananting * @Author: yuananting
* @Date: 2021-07-05 10:47:19 * @Date: 2021-07-05 10:47:19
* @LastEditors: yuananting * @LastEditors: yuananting
* @LastEditTime: 2021-07-05 11:00:28 * @LastEditTime: 2021-07-06 17:36:02
* @Description: 描述一下咯 * @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
...@@ -49,7 +49,7 @@ class GraphicsEditor extends React.Component { ...@@ -49,7 +49,7 @@ class GraphicsEditor extends React.Component {
renderEditor() { renderEditor() {
const { editorId } = this.state; const { editorId } = this.state;
const { detail, onChange, isIntro, maxLimit } = this.props; const { detail, onChange, isIntro, maxLimit, editorType } = this.props;
class ImageMenu extends BtnMenu { class ImageMenu extends BtnMenu {
constructor(editor) { constructor(editor) {
// data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述 // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
...@@ -158,9 +158,7 @@ class GraphicsEditor extends React.Component { ...@@ -158,9 +158,7 @@ class GraphicsEditor extends React.Component {
const imageCount = ((html || '').match(/<img/g) || []).length; const imageCount = ((html || '').match(/<img/g) || []).length;
const textLength = this.editorInt.txt.text().replace(/\&nbsp\;/gi, ' ').length + videoCount + imageCount; const textLength = this.editorInt.txt.text().replace(/\&nbsp\;/gi, ' ').length + videoCount + imageCount;
this.setState({ textLength }, () => { this.setState({ textLength }, () => {
if (textLength > maxLimit) { Bus.trigger('editorLimit', textLength, editorType);
// message.warning('超过字数限定');
}
onChange(html, this.state.textLength); onChange(html, this.state.textLength);
}); });
}; };
......
src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:07:47 * @Date: 2020-08-05 10:07:47
* @LastEditors: fusanqiasng * @LastEditors: yuananting
* @LastEditTime: 2021-06-16 18:16:14 * @LastEditTime: 2021-07-06 18:26:14
* @Description: 图文课新增/编辑页 * @Description: 图文课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -26,6 +26,7 @@ import User from '@/common/js/user'; ...@@ -26,6 +26,7 @@ import User from '@/common/js/user';
import _ from 'underscore'; import _ from 'underscore';
import Upload from '@/core/upload'; import Upload from '@/core/upload';
import './AddGraphicsCourse.less'; import './AddGraphicsCourse.less';
import Bus from '@/core/bus';
const EDIT_BOX_KEY = Math.random(); const EDIT_BOX_KEY = Math.random();
const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' }; const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' };
...@@ -33,7 +34,7 @@ const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryL ...@@ -33,7 +34,7 @@ const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryL
//添加课程时课程默认的一些值 //添加课程时课程默认的一些值
const defaultShelfState = 'YES'; const defaultShelfState = 'YES';
const whetherVisitorsJoin = 'NO'; const whetherVisitorsJoin = 'NO';
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png'; const defaultCover = 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png';
let cutFlag = false; let cutFlag = false;
class AddGraphicsCourse extends React.Component { class AddGraphicsCourse extends React.Component {
...@@ -52,7 +53,7 @@ class AddGraphicsCourse extends React.Component { ...@@ -52,7 +53,7 @@ class AddGraphicsCourse extends React.Component {
introduce: '', introduce: '',
courseMediaId: null, // 图文课链接 courseMediaId: null, // 图文课链接
coverId: null, // 图文封面的recourceId coverId: null, // 图文封面的recourceId
coverUrl: defaultCoverUrl, // 图文课封面 coverUrl: defaultCover, // 图文课封面
studentList: [], // 上课学员列表 studentList: [], // 上课学员列表
shelfState: 'YES', //是否开启学院展示 shelfState: 'YES', //是否开启学院展示
selectedFileList: [], // 已经从资料云盘中勾选的文件 selectedFileList: [], // 已经从资料云盘中勾选的文件
...@@ -72,6 +73,11 @@ class AddGraphicsCourse extends React.Component { ...@@ -72,6 +73,11 @@ class AddGraphicsCourse extends React.Component {
if (pageType === 'edit') { if (pageType === 'edit') {
this.handleFetchScheudleDetail(id); this.handleFetchScheudleDetail(id);
} }
Bus.bind('editorLimit', (textLength, editorType) => {
this.setState({
[editorType]: textLength,
});
});
} }
initBus = () => { initBus = () => {
...@@ -393,11 +399,11 @@ class AddGraphicsCourse extends React.Component { ...@@ -393,11 +399,11 @@ class AddGraphicsCourse extends React.Component {
//过期判断 //过期判断
if (User.getExpirationTime() && moment().valueOf() > Number(User.getExpirationTime())) { if (User.getExpirationTime() && moment().valueOf() > Number(User.getExpirationTime())) {
Modal.warning({ Modal.warning({
title:"服务已到期", title: '服务已到期',
content: "当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买", content: '当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买',
okText: "我知道了" okText: '我知道了',
}) });
return return;
} }
const { id, coverId, pageType, courseName, courseMedia, introduce, categoryId, shelfState, whetherVisitorsJoin } = this.state; const { id, coverId, pageType, courseName, courseMedia, introduce, categoryId, shelfState, whetherVisitorsJoin } = this.state;
...@@ -466,6 +472,7 @@ class AddGraphicsCourse extends React.Component { ...@@ -466,6 +472,7 @@ class AddGraphicsCourse extends React.Component {
}; };
handleValidate = (courseName, courseMedia, categoryId) => { handleValidate = (courseName, courseMedia, categoryId) => {
const { graphicsCourseIntor, graphicsCourseContent } = this.state;
return new Promise((resolve) => { return new Promise((resolve) => {
if (!courseName) { if (!courseName) {
message.warning('请输入课程名称'); message.warning('请输入课程名称');
...@@ -482,6 +489,18 @@ class AddGraphicsCourse extends React.Component { ...@@ -482,6 +489,18 @@ class AddGraphicsCourse extends React.Component {
resolve(false); resolve(false);
return false; return false;
} }
if (graphicsCourseContent > 1000) {
message.warning('课程内容超过字数限定');
resolve(false);
return;
}
if (graphicsCourseIntor > 1000) {
message.warning('课程简介超过字数限定');
resolve(false);
return;
}
// const textMedia = scheduleMedia.filter((item) => item.mediaType === 'TEXT'); // const textMedia = scheduleMedia.filter((item) => item.mediaType === 'TEXT');
// for (let i = 0, len = textMedia.length; i < len; i++) { // for (let i = 0, len = textMedia.length; i < len; i++) {
// if (textMedia[i].mediaContentLength && textMedia[i].mediaContentLength.length > 1000) { // if (textMedia[i].mediaContentLength && textMedia[i].mediaContentLength.length > 1000) {
...@@ -494,6 +513,17 @@ class AddGraphicsCourse extends React.Component { ...@@ -494,6 +513,17 @@ class AddGraphicsCourse extends React.Component {
}); });
}; };
// 使用默认封面图
handleResetCoverUrl = () => {
const { coverUrl } = this.state;
const isDefaultCover = coverUrl === defaultCover;
// 如果已经是默认图的话，不做任何任何处理
if (isDefaultCover) return;
this.setState({ coverUrl: defaultCover, coverId: null }, () => {
message.success('已替换为默认图');
});
};
render() { render() {
const { const {
id, id,
...@@ -521,6 +551,8 @@ class AddGraphicsCourse extends React.Component { ...@@ -521,6 +551,8 @@ class AddGraphicsCourse extends React.Component {
const hasSelectedStu = studentList.length; const hasSelectedStu = studentList.length;
const courseWareIcon = FileVerifyMap[videoType] ? FileTypeIcon[FileVerifyMap[videoType].type] : FileTypeIcon[videoType]; const courseWareIcon = FileVerifyMap[videoType] ? FileTypeIcon[FileVerifyMap[videoType].type] : FileTypeIcon[videoType];
// 当前是否使用的是默认图片
const isDefaultCover = coverUrl === defaultCover;
return ( return (
<div className='page add-graphics-course-page'> <div className='page add-graphics-course-page'>
...@@ -547,19 +579,39 @@ class AddGraphicsCourse extends React.Component { ...@@ -547,19 +579,39 @@ class AddGraphicsCourse extends React.Component {
<div className='cover-url flex mt16'> <div className='cover-url flex mt16'>
<div className='label'>封面图：</div> <div className='label'>封面图：</div>
<div className='cover-url__wrap'> {/* <div className='cover-url__wrap'>
<div className='opt-btns'>
<Button
onClick={() => {
this.setState({
showSelectCoverModal: true,
});
}}>{`${pageType === 'add' && !coverUrl ? '上传' : '修改'}封面`}</Button>
<div className='tips'></div>
</div>
<div className='img-content'> <div className='img-content'>
<img src={coverUrl} /> <img src={coverUrl} />
</div> </div>
</div> */}
<div className='course-cover__wrap'>
<div className='opt-btns'> <div className='opt-btns'>
<Button <Button
onClick={() => { onClick={() => {
this.setState({ this.setState({
showSelectCoverModal: true, showSelectCoverModal: true,
}); });
}}>{`${pageType === 'add' && !coverUrl ? '上传' : '修改'}封面`}</Button> }}>
上传图片
</Button>
<span className={`default-btn ${isDefaultCover ? 'disabled' : ''}`} onClick={this.handleResetCoverUrl}>
使用默认图
</span>
<div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div> <div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
</div> </div>
<div className='img-content'>
{isDefaultCover && <span className='tag'>默认图</span>}
<img src={coverUrl} />
</div>
</div> </div>
</div> </div>
<div className='course-catalog required'> <div className='course-catalog required'>
......
src/modules/course-manage/graphics-course/AddGraphicsCourse.less
.add-graphics-course-page { .add-graphics-course-page {
position:relative !important; position: relative !important;
.box{ .box {
margin-bottom:52px !important; margin-bottom: 52px !important;
} }
.ant-radio-group { .ant-radio-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.radio-item { .radio-item {
margin-bottom: 12px; margin-bottom: 12px;
...@@ -28,10 +27,10 @@ ...@@ -28,10 +27,10 @@
.form { .form {
margin-top: 16px; margin-top: 16px;
padding: 0 16px; padding: 0 16px;
.label{ .label {
display:inline-block; display: inline-block;
text-align:right; text-align: right;
width:85px; width: 85px;
} }
.required { .required {
position: relative; position: relative;
...@@ -48,9 +47,9 @@ ...@@ -48,9 +47,9 @@
top: 0; top: 0;
} }
} }
.course-catalog{ .course-catalog {
margin-bottom:16px; margin-bottom: 16px;
margin-top:16px; margin-top: 16px;
} }
.course-ware { .course-ware {
display: flex; display: flex;
...@@ -71,10 +70,20 @@ ...@@ -71,10 +70,20 @@
display: flex; display: flex;
} }
.cover-url__wrap { .course-cover {
margin-left: 14px;
display: flex;
margin-top: 24px;
&__wrap {
position: relative;
.img-content { .img-content {
width: 298px; margin-top: 8px;
height: 172px; margin-right: 20px;
width: 299px;
height: 169px;
position: relative;
img { img {
width: 100%; width: 100%;
...@@ -82,29 +91,78 @@ ...@@ -82,29 +91,78 @@
object-fit: contain; object-fit: contain;
border-radius: 4px; border-radius: 4px;
} }
} .tag {
.empty-img { border-radius: 2px;
width: 298px; background: #d6d6d6;
height: 172px; font-size: 12px;
border: 1px dashed #EBEBEB; height: 18px;
border-radius: 4px; width: 52px;
padding: 12px;
color: #999;
padding: 52px 24px;
text-align: center; text-align: center;
color: #fff;
position: absolute;
top: 8px;
left: 8px;
}
} }
.opt-btns { .opt-btns {
margin-top: 8px; .default-btn {
display: flex; margin-left: 14px;
align-items: center; color: #2966ff;
cursor: pointer;
&.disabled {
color: #ccc;
cursor: not-allowed;
}
}
.ant-upload-list {
display: none;
}
.tips { .tips {
margin-left: 12px; margin-top: 8px;
color: #999; color: #999;
} }
} }
} }
}
// .cover-url__wrap {
// .img-content {
// width: 298px;
// height: 172px;
// img {
// width: 100%;
// height: 100%;
// object-fit: contain;
// border-radius: 4px;
// }
// }
// .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;
// }
// }
// }
.select-student { .select-student {
align-items: center; align-items: center;
...@@ -139,7 +197,7 @@ ...@@ -139,7 +197,7 @@
justify-content: flex-end; justify-content: flex-end;
padding-right: 72px; padding-right: 72px;
background: #fff; background: #fff;
border-top: 1px solid #E8E8E8; border-top: 1px solid #e8e8e8;
z-index: 999; z-index: 999;
.ant-btn { .ant-btn {
margin-left: 10px; margin-left: 10px;
......
src/modules/course-manage/graphics-course/components/AddGraphicsIntro.jsx
...@@ -17,17 +17,15 @@ import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepare ...@@ -17,17 +17,15 @@ import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepare
import { DISK_MAP } from '@/common/constants/academic/lessonEnum'; import { DISK_MAP } from '@/common/constants/academic/lessonEnum';
import { ImgCutModalNew } from '@/components'; import { ImgCutModalNew } from '@/components';
const { TextArea } = Input; const { TextArea } = Input;
class AddGraphicsIntro extends React.Component { class AddGraphicsIntro extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
showSelectFileModal: false, showSelectFileModal: false,
diskList: [], diskList: [],
selectType: null, selectType: null,
} };
} }
// 上传封面图 // 上传封面图
...@@ -38,34 +36,34 @@ class AddGraphicsIntro extends React.Component { ...@@ -38,34 +36,34 @@ class AddGraphicsIntro extends React.Component {
imageFile, imageFile,
showCutModal: true, showCutModal: true,
}); });
} };
// 选择暖场资源 // 选择暖场资源
handleSelectVideo = (file) => { handleSelectVideo = (file) => {
const { selectType } = this.state; const { selectType } = this.state;
this.setState({ this.setState({
showSelectFileModal: false showSelectFileModal: false,
}) });
const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file; const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file;
if(selectType === 'WARMUP'){ if (selectType === 'WARMUP') {
const liveCourseWarmMedia = { const liveCourseWarmMedia = {
contentType: 'WARMUP', contentType: 'WARMUP',
mediaType: folderFormat === 'MP4' ? 'VIDEO' : 'PICTURE', mediaType: folderFormat === 'MP4' ? 'VIDEO' : 'PICTURE',
mediaContent: resourceId, mediaContent: resourceId,
mediaUrl: ossUrl, mediaUrl: ossUrl,
mediaName: folderName, mediaName: folderName,
size: folderSize size: folderSize,
} };
this.props.onChange('liveCourseWarmMedia', liveCourseWarmMedia); this.props.onChange('liveCourseWarmMedia', liveCourseWarmMedia);
}else{ } else {
// 最多添加九图片 // 最多添加九图片
const { liveCourseMediaRequests } = this.props.data; const { liveCourseMediaRequests } = this.props.data;
const list = _.filter(liveCourseMediaRequests, (item) => { const list = _.filter(liveCourseMediaRequests, (item) => {
return item.mediaType == "PICTURE"; return item.mediaType == 'PICTURE';
}); });
if (list.length > 8) { if (list.length > 8) {
message.warning("最多添加9张图片"); message.warning('最多添加9张图片');
return; return;
} }
liveCourseMediaRequests.push({ liveCourseMediaRequests.push({
...@@ -78,121 +76,116 @@ class AddGraphicsIntro extends React.Component { ...@@ -78,121 +76,116 @@ class AddGraphicsIntro extends React.Component {
}); });
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests); this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
} }
};
}
changeDetail = (value) => { changeDetail = (value) => {
this.props.onChange('courseMedia', value); this.props.onChange('courseMedia', value);
} };
changeIntro = (value) => { changeIntro = (value) => {
this.props.onChange('introduce', value); this.props.onChange('introduce', value);
} };
whetherVisitorsJoinChange = ()=>{ whetherVisitorsJoinChange = () => {
if(this.props.data.whetherVisitorsJoin==="NO"){ if (this.props.data.whetherVisitorsJoin === 'NO') {
this.props.onChange('whetherVisitorsJoin','YES') this.props.onChange('whetherVisitorsJoin', 'YES');
}else{ } else {
this.props.onChange('whetherVisitorsJoin','NO') this.props.onChange('whetherVisitorsJoin', 'NO');
}
} }
};
shelfStateChange = ()=>{ shelfStateChange = () => {
if(this.props.data.shelfState==="NO"){ if (this.props.data.shelfState === 'NO') {
this.props.onChange('shelfState','YES') this.props.onChange('shelfState', 'YES');
}else{ } else {
this.props.onChange('shelfState','NO') this.props.onChange('shelfState', 'NO');
}
} }
};
render() { render() {
const {data: { id, whetherVisitorsJoin, courseMedia, introduce, shelfState, loadcourseMedia, loadintroduce } } = this.props; const {
data: { id, whetherVisitorsJoin, courseMedia, introduce, shelfState, loadcourseMedia, loadintroduce },
} = this.props;
const { showSelectFileModal, selectType } = this.state; const { showSelectFileModal, selectType } = this.state;
return ( return (
<div className="add-graphic__intro-info"> <div className='add-graphic__intro-info'>
<div className="allow-tourist-join"> <div className='allow-tourist-join'>
<span className="label">观看设置：</span> <span className='label'>观看设置：</span>
<div className="content"> <div className='content'>
<div> <Switch checked={whetherVisitorsJoin === 'NO' ? true : false} onChange={this.whetherVisitorsJoinChange} />
<Switch checked={whetherVisitorsJoin==="YES"? true:false} onChange={this.whetherVisitorsJoinChange}/> <div className='desc'>{whetherVisitorsJoin === 'NO' ? '已开启，学员需绑定手机号才可观看' : '已关闭，学员无需绑定手机号即可观看'}</div>
</div> </div>
<div> </div>
<div className="desc"> <div className='store-show'>
<div>开启：允许未绑定手机号的学员观看</div> <span className='label'>学院展示：</span>
<div>关闭：仅限绑定了手机号的学员可以进入观看图文课</div> <div className='content'>
</div> <Switch checked={shelfState === 'YES' ? true : false} onChange={this.shelfStateChange} />
</div> <div className='desc'>{shelfState === 'YES' ? '已开启，课程将在该学院的学员课程列表中显示' : '已关闭，课程将在该学院的学员课程列表中隐藏'}</div>
</div> </div>
</div> </div>
<div className="store-show"> <div className='introduce required'>
<span className="label">学院展示：</span> <span className='label' style={{ marginTop: 5 }}>
<div className="content"> 课程内容：
<Row> </span>
<Col span={3}> <div className='content'>
<Switch checked={shelfState==="YES"? true:false} onChange={this.shelfStateChange}/> <div className='intro-list'>
</Col> <div className='intro-list__item content-editor'>
<Col span={21}> {(!id || loadcourseMedia) && (
<div className="desc">
<div>开启：图文课将在学员学院图文课列表中展示</div>
<div>关闭：图文课将在学员学院图文课列表中隐藏</div>
</div>
</Col>
</Row>
</div>
</div>
<div className="introduce required">
<span className="label" style={{ marginTop: 5 }}>课程内容：</span>
<div className="content">
<div className="intro-list">
<div className="intro-list__item content-editor">
{(!id || loadcourseMedia) &&
<GraphicsEditor <GraphicsEditor
id="content" id='content'
maxLimit={1000}
editorType={'graphicsCourseContent'}
detail={{ detail={{
content: courseMedia content: courseMedia,
}}
onChange={(val) => {
this.changeDetail(val);
}} }}
onChange={(val) => { this.changeDetail(val) }}
/> />
} )}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="introduce"> <div className='introduce'>
<span className="label">课程简介：</span> <span className='label'>课程简介：</span>
<div className="content"> <div className='content'>
<div className="intro-list"> <div className='intro-list'>
<div className="intro-list__item introduce-editor"> <div className='intro-list__item introduce-editor'>
{(!id || loadintroduce) && {(!id || loadintroduce) && (
<GraphicsEditor <GraphicsEditor
id="intro" id='intro'
isIntro={true} isIntro={true}
maxLimit={1000}
editorType={'graphicsCourseIntor'}
detail={{ detail={{
content: introduce content: introduce,
}}
onChange={(val) => {
this.changeIntro(val);
}} }}
onChange={(val) => { this.changeIntro(val) }}
/> />
} )}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/* 选择暖场图文件弹窗 */} {/* 选择暖场图文件弹窗 */}
{ showSelectFileModal && {showSelectFileModal && (
<SelectPrepareFileModal <SelectPrepareFileModal
operateType="select" operateType='select'
accept={selectType==="INTRO"?"image/jpeg,image/png,image/jpg":"video/mp4,image/jpeg,image/png,image/jpg"} accept={selectType === 'INTRO' ? 'image/jpeg,image/png,image/jpg' : 'video/mp4,image/jpeg,image/png,image/jpg'}
selectTypeList={ selectType==="INTRO" ? ['JPG', 'JPEG', 'PNG']: ['MP4', 'JPG', 'JPEG', 'PNG'] } selectTypeList={selectType === 'INTRO' ? ['JPG', 'JPEG', 'PNG'] : ['MP4', 'JPG', 'JPEG', 'PNG']}
tooltip={ selectType==="INTRO"?'支持文件类型：jpg、jpeg、png':'支持文件类型：jpg、jpeg、png、mp4'} tooltip={selectType === 'INTRO' ? '支持文件类型：jpg、jpeg、png' : '支持文件类型：jpg、jpeg、png、mp4'}
isOpen={showSelectFileModal} isOpen={showSelectFileModal}
onClose={() => { onClose={() => {
this.setState({ showSelectFileModal: false }) this.setState({ showSelectFileModal: false });
}} }}
onSelect={this.handleSelectVideo} onSelect={this.handleSelectVideo}
/> />
} )}
</div> </div>
) );
} }
} }
......
src/modules/course-manage/graphics-course/components/AddGraphicsIntro.less
...@@ -5,43 +5,46 @@ ...@@ -5,43 +5,46 @@
.playback { .playback {
margin-bottom: 10px; margin-bottom: 10px;
.require { .require {
color: #EC4B35; color: #ec4b35;
} }
&__text { &__text {
color: #999; color: #999;
} }
} }
.label{ .label {
display:inline-block; display: inline-block;
text-align:right; text-align: right;
width:85px; width: 85px;
} }
.playback, .playback,
.introduce { .introduce {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.allow-tourist-join{ .allow-tourist-join {
display:flex; display: flex;
.content{ .content {
display:flex; display: flex;
} }
.desc{ .desc {
margin-left:16px; margin-left: 16px;
font-size:14px; font-size: 14px;
color:#999; color: #999;
display:inline-block; display: inline-block;
} }
} }
.store-show{ .store-show {
display:flex; display: flex;
margin-top:16px; margin-top: 16px;
margin-bottom:16px; margin-bottom: 16px;
.desc{ .content {
margin-left:16px; display: flex;
font-size:14px; }
color:#999; .desc {
display:inline-block; margin-left: 16px;
font-size: 14px;
color: #999;
display: inline-block;
} }
} }
.radio { .radio {
...@@ -65,7 +68,7 @@ ...@@ -65,7 +68,7 @@
&.picture { &.picture {
width: 550px; width: 550px;
padding: 16px; padding: 16px;
border: 1px solid #EEE; border: 1px solid #eee;
border-radius: 4px; border-radius: 4px;
.img__wrap { .img__wrap {
...@@ -114,7 +117,7 @@ ...@@ -114,7 +117,7 @@
line-height: 80px; line-height: 80px;
padding: 16px; padding: 16px;
margin-top: 16px; margin-top: 16px;
border: 1px dashed #EBEBEB; border: 1px dashed #ebebeb;
border-radius: 4px; border-radius: 4px;
.ant-upload { .ant-upload {
...@@ -133,7 +136,7 @@ ...@@ -133,7 +136,7 @@
.iconfont { .iconfont {
font-size: 22px; font-size: 22px;
line-height: 22px; line-height: 22px;
color: #BFBFBF; color: #bfbfbf;
text-align: center; text-align: center;
} }
...@@ -152,7 +155,7 @@ ...@@ -152,7 +155,7 @@
} }
.checkExample { .checkExample {
width: 60px; width: 60px;
color: #FF7519; color: #ff7519;
cursor: pointer; cursor: pointer;
} }
.warmup { .warmup {
...@@ -197,21 +200,19 @@ ...@@ -197,21 +200,19 @@
} }
} }
.opt-btns { .opt-btns {
.default-btn { .default-btn {
margin-left: 16px; margin-left: 16px;
color: #FF7519; color: #ff7519;
cursor: pointer; cursor: pointer;
&.disabled { &.disabled {
color: #CCC; color: #ccc;
cursor: not-allowed; cursor: not-allowed;
} }
} }
} }
}
} .example-wrap {
.example-wrap {
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
text-align: center; text-align: center;
.title { .title {
...@@ -227,14 +228,14 @@ ...@@ -227,14 +228,14 @@
img { img {
width: 180px; width: 180px;
} }
} }
.check-record-rule { .check-record-rule {
width: 120px; width: 120px;
color: #FF7519; color: #ff7519;
cursor: pointer; cursor: pointer;
z-index: 2; z-index: 2;
} }
.record-rule-wrap { .record-rule-wrap {
text-align: left; text-align: left;
ul { ul {
margin-top: 10px; margin-top: 10px;
...@@ -247,9 +248,9 @@ ...@@ -247,9 +248,9 @@
.text { .text {
color: #999; color: #999;
} }
} }
.auto-send-class-report { .auto-send-class-report {
.label { .label {
width: 57px; width: 57px;
height: 12px; height: 12px;
...@@ -258,7 +259,8 @@ ...@@ -258,7 +259,8 @@
color: #666666; color: #666666;
line-height: 12px; line-height: 12px;
} }
.open-text, .close-text { .open-text,
.close-text {
width: 572px; width: 572px;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
...@@ -273,4 +275,4 @@ ...@@ -273,4 +275,4 @@
.close-text { .close-text {
margin-bottom: 16px; margin-bottom: 16px;
} }
} }
\ No newline at end of file
src/modules/course-manage/offline-course/AddOfflineCourse.less
.add-offline-course-page { .add-offline-course-page {
position:relative !important; position: relative !important;
.box{ .box {
margin-bottom:52px !important; margin-bottom: 52px !important;
} }
.ant-radio-group { .ant-radio-group {
display: flex; display: flex;
...@@ -39,18 +39,18 @@ ...@@ -39,18 +39,18 @@
position: relative; position: relative;
padding-left: 14px; padding-left: 14px;
&::before { &::before {
content: ""; content: '';
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 4px; width: 4px;
height: 10px; height: 10px;
background: #2966FF; background: #2966ff;
} }
} }
} }
.label{ .label {
display: inline-block; display: inline-block;
text-align: right; text-align: right;
width: 120px; width: 120px;
...@@ -75,8 +75,8 @@ ...@@ -75,8 +75,8 @@
} }
} }
.course-catalog { .course-catalog {
margin-bottom:16px; margin-bottom: 16px;
margin-top:16px; margin-top: 16px;
display: flex; display: flex;
.switch-box { .switch-box {
.switch-item { .switch-item {
...@@ -110,19 +110,19 @@ ...@@ -110,19 +110,19 @@
.select-day { .select-day {
margin-bottom: 4px; margin-bottom: 4px;
.mark-day { .mark-day {
color: #2966FF; color: #2966ff;
} }
} }
} }
.allow-tourist-join{ .allow-tourist-join {
display:flex; display: flex;
margin-bottom:16px; margin-bottom: 16px;
.desc { .desc {
color:#999; color: #999;
margin-left:12px; margin-left: 12px;
} }
.content{ .content {
display:flex; display: flex;
} }
} }
.course-ware { .course-ware {
...@@ -150,45 +150,41 @@ ...@@ -150,45 +150,41 @@
&__wrap { &__wrap {
position: relative; 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 { .img-content {
margin-top: 8px;
margin-right: 20px; margin-right: 20px;
width: 299px; width: 299px;
height: 169px; height: 169px;
position: relative;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
border-radius: 4px;
}
.tag {
border-radius: 2px;
background: #d6d6d6;
font-size: 12px;
height: 18px;
width: 52px;
text-align: center;
color: #fff;
position: absolute;
top: 8px;
left: 8px;
} }
} }
.opt-btns { .opt-btns {
.default-btn { .default-btn {
margin-left: 16px; margin-left: 14px;
color: #2966FF; color: #2966ff;
cursor: pointer; cursor: pointer;
&.disabled { &.disabled {
color: #CCC; color: #ccc;
cursor: not-allowed; cursor: not-allowed;
} }
} }
...@@ -196,13 +192,14 @@ ...@@ -196,13 +192,14 @@
.ant-upload-list { .ant-upload-list {
display: none; display: none;
} }
}
.tips { .tips {
margin-top: 8px; margin-top: 8px;
color: #999; color: #999;
} }
} }
}
}
.select-student { .select-student {
align-items: center; align-items: center;
...@@ -236,7 +233,7 @@ ...@@ -236,7 +233,7 @@
justify-content: flex-end; justify-content: flex-end;
padding-right: 72px; padding-right: 72px;
background: #fff; background: #fff;
border-top: 1px solid #E8E8E8; border-top: 1px solid #e8e8e8;
z-index: 999; z-index: 999;
.ant-btn { .ant-btn {
margin-left: 10px; margin-left: 10px;
......
src/modules/plan-manage/components/BasicInfo.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: yuananting * @Author: yuananting
* @Date: 2021-07-05 10:48:08 * @Date: 2021-07-05 10:48:08
* @LastEditors: yuananting * @LastEditors: yuananting
* @LastEditTime: 2021-07-05 11:01:19 * @LastEditTime: 2021-07-06 19:49:14
* @Description: 描述一下咯 * @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
...@@ -284,19 +284,13 @@ class BasicInfo extends React.Component { ...@@ -284,19 +284,13 @@ class BasicInfo extends React.Component {
<div className='wether-use'> <div className='wether-use'>
<span className='label'>是否启用：</span> <span className='label'>是否启用：</span>
<div className='content'> <div className='content'>
<div>
<Switch <Switch
checked={enableState === 'YES' ? true : false} checked={enableState === 'YES' ? true : false}
onChange={() => { onChange={() => {
this.enableStateChange(); this.enableStateChange();
}} }}
/> />
</div> <div className='instro-text'>{enableState === 'YES' ? '已开启，培训计划可正常分享给学员学习' : '已关闭，培训计划暂不进行分享和学习'}</div>
<div>
<div className='instro-text'>
<div>{enableState === 'YES' ? '已开启，培训计划可正常分享给学员学习' : '已关闭，培训计划暂不进行分享和学习'}</div>
</div>
</div>
</div> </div>
</div> </div>
<div className='view-range'> <div className='view-range'>
......
src/modules/plan-manage/components/BasicInfo.less
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
} }
.opt-btns { .opt-btns {
.default-btn { .default-btn {
margin: 0 8px; margin-left: 14px;
color: #2966ff; color: #2966ff;
cursor: pointer; cursor: pointer;
&.disabled { &.disabled {
......
src/modules/plan-manage/modal/UserLearnDetailModal.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: yuananting * @Author: yuananting
* @Date: 2021-07-05 10:50:30 * @Date: 2021-07-05 10:50:30
* @LastEditors: yuananting * @LastEditors: yuananting
* @LastEditTime: 2021-07-06 14:57:09 * @LastEditTime: 2021-07-06 15:16:47
* @Description: 描述一下咯 * @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
...@@ -269,7 +269,7 @@ class UserLearnDetailModal extends React.Component { ...@@ -269,7 +269,7 @@ class UserLearnDetailModal extends React.Component {
</div> </div>
); );
}, },
rowExpandable: (record) => record.courseChapterList && record.courseChapterList.length !== 0, rowExpandable: (record) => record.courseChapterList && record.courseChapterList.length > 1,
}} }}
/> />
</div> </div>
......
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