Skip to content

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

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

parent b490f02c
Showing with 621 additions and 536 deletions
src/modules/course-manage/components/AddLiveBasic.less
...@@ -2,83 +2,78 @@ ...@@ -2,83 +2,78 @@
.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 { .img-content {
border-radius: 2px; margin-top: 8px;
background: #D6D6D6; margin-right: 20px;
font-size: 12px; width: 299px;
height: 18px; height: 169px;
width: 52px; position: relative;
text-align: center;
color: #FFF;
position: absolute;
top: 8px;
left: 8px;
}
}
.course-cover__wrap {
display: flex;
flex-direction: row;
}
.img-content {
margin-right: 20px;
width: 299px;
height: 169px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
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 {
margin-left: 14px;
color: #2966ff;
cursor: pointer;
.default-btn { &.disabled {
margin-left: 16px; color: #ccc;
color: #2966FF; cursor: not-allowed;
cursor: pointer; }
}
&.disabled { .ant-upload-list {
color: #CCC; display: none;
cursor: not-allowed;
} }
}
.ant-upload-list { .tips {
display: none; margin-top: 8px;
color: #999;
}
} }
} }
.tips {
margin-top: 8px;
color: #999;
}
} }
.course-catalog{ .course-catalog {
margin:20px 0 0 14px; 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;
height: 300px; height: 300px;
} }
\ No newline at end of file
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,14 +27,14 @@ ...@@ -28,14 +27,14 @@
.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;
&::before { &::before {
position: absolute; position: absolute;
content: '*'; content: '*';
...@@ -43,14 +42,14 @@ ...@@ -43,14 +42,14 @@
left: 5px; left: 5px;
top: 6px; top: 6px;
} }
&.label::before { &.label::before {
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;
...@@ -70,42 +69,101 @@ ...@@ -70,42 +69,101 @@
.flex { .flex {
display: flex; display: flex;
} }
.cover-url__wrap { .course-cover {
.img-content { margin-left: 14px;
width: 298px; display: flex;
height: 172px; margin-top: 24px;
img { &__wrap {
width: 100%; position: relative;
height: 100%;
object-fit: contain; .img-content {
border-radius: 4px; margin-top: 8px;
margin-right: 20px;
width: 299px;
height: 169px;
position: relative;
img {
width: 100%;
height: 100%;
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;
}
} }
}
.empty-img { .opt-btns {
width: 298px; .default-btn {
height: 172px; margin-left: 14px;
border: 1px dashed #EBEBEB; color: #2966ff;
border-radius: 4px; cursor: pointer;
padding: 12px;
color: #999; &.disabled {
padding: 52px 24px; color: #ccc;
text-align: center; cursor: not-allowed;
} }
}
.opt-btns {
margin-top: 8px; .ant-upload-list {
display: flex; display: none;
align-items: center; }
.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;
margin-left: 24px; margin-left: 24px;
...@@ -139,10 +197,10 @@ ...@@ -139,10 +197,10 @@
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;
} }
} }
} }
\ No newline at end of file
src/modules/course-manage/graphics-course/components/AddGraphicsIntro.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-07-16 11:05:17 * @Date: 2020-07-16 11:05:17
* @Last Modified by: chenshu * @Last Modified by: chenshu
* @Last Modified time: 2021-04-06 16:17:57 * @Last Modified time: 2021-04-06 16:17:57
* @Description: 添加直播-简介 * @Description: 添加直播-简介
...@@ -17,55 +17,53 @@ import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepare ...@@ -17,55 +17,53 @@ 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,
} };
} }
// 上传封面图 // 上传封面图
handleShowImgCutModal = (event) => { handleShowImgCutModal = (event) => {
const imageFile = event.target.files[0]; const imageFile = event.target.files[0];
if (!imageFile) return; if (!imageFile) return;
this.setState({ this.setState({
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 className="desc">
<div>开启：允许未绑定手机号的学员观看</div>
<div>关闭：仅限绑定了手机号的学员可以进入观看图文课</div>
</div>
</div>
</div> </div>
</div> </div>
<div className="store-show"> <div className='store-show'>
<span className="label">学院展示：</span> <span className='label'>学院展示：</span>
<div className="content"> <div className='content'>
<Row> <Switch checked={shelfState === 'YES' ? true : false} onChange={this.shelfStateChange} />
<Col span={3}> <div className='desc'>{shelfState === 'YES' ? '已开启，课程将在该学院的学员课程列表中显示' : '已关闭，课程将在该学院的学员课程列表中隐藏'}</div>
<Switch checked={shelfState==="YES"? true:false} onChange={this.shelfStateChange}/>
</Col>
<Col span={21}>
<div className="desc">
<div>开启：图文课将在学员学院图文课列表中展示</div>
<div>关闭：图文课将在学员学院图文课列表中隐藏</div>
</div>
</Col>
</Row>
</div> </div>
</div> </div>
<div className="introduce required"> <div className='introduce required'>
<span className="label" style={{ marginTop: 5 }}>课程内容：</span> <span className='label' style={{ marginTop: 5 }}>
<div className="content"> 课程内容：
<div className="intro-list"> </span>
<div className="intro-list__item content-editor"> <div className='content'>
{(!id || loadcourseMedia) && <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
...@@ -2,275 +2,277 @@ ...@@ -2,275 +2,277 @@
.w-e-full-screen-editor { .w-e-full-screen-editor {
background: #fff !important; background: #fff !important;
} }
.playback { .playback {
margin-bottom: 10px; margin-bottom: 10px;
.require { .require {
color: #EC4B35; color: #ec4b35;
}
&__text {
color: #999;
}
} }
.label{ &__text {
display:inline-block; color: #999;
text-align:right;
width:85px;
} }
.playback, }
.introduce { .label {
display: inline-block;
text-align: right;
width: 85px;
}
.playback,
.introduce {
display: flex;
flex-direction: row;
}
.allow-tourist-join {
display: flex;
.content {
display: flex; display: flex;
flex-direction: row;
} }
.allow-tourist-join{ .desc {
display:flex; margin-left: 16px;
.content{ font-size: 14px;
display:flex; color: #999;
} display: inline-block;
.desc{
margin-left:16px;
font-size:14px;
color:#999;
display:inline-block;
}
}
.store-show{
display:flex;
margin-top:16px;
margin-bottom:16px;
.desc{
margin-left:16px;
font-size:14px;
color:#999;
display:inline-block;
}
}
.radio {
display: block;
height: 30px;
line-height: 30px;
} }
.interactive-playback { }
.store-show {
display: flex;
margin-top: 16px;
margin-bottom: 16px;
.content {
display: flex; display: flex;
margin-bottom: 20px;
}
textarea.ant-input {
min-height: 80px;
} }
.desc {
.intro-list__item { margin-left: 16px;
display: flex; font-size: 14px;
margin-bottom: 16px; color: #999;
position: relative; display: inline-block;
&.picture {
width: 550px;
padding: 16px;
border: 1px solid #EEE;
border-radius: 4px;
.img__wrap {
width: 299px;
height: 168px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
.little-icon {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
right: -20px;
.iconfont {
width: 20px;
height: 20px;
line-height: 20px;
font-size: 20px;
color: #999;
margin-bottom: 4px;
cursor: pointer;
&.close {
margin-top: 8px;
background-image: url('https://image.xiaomaiketang.com/xm/eesMPhNP3e.png');
background-size: 100% 100%;
}
}
}
} }
}
.operate { .radio {
display: flex; display: block;
align-items: center; height: 30px;
justify-content: center; line-height: 30px;
}
.interactive-playback {
display: flex;
margin-bottom: 20px;
}
textarea.ant-input {
min-height: 80px;
}
.intro-list__item {
display: flex;
margin-bottom: 16px;
position: relative;
&.picture {
width: 550px; width: 550px;
height: 80px;
line-height: 80px;
padding: 16px; padding: 16px;
margin-top: 16px; border: 1px solid #eee;
border: 1px dashed #EBEBEB;
border-radius: 4px; border-radius: 4px;
.ant-upload { .img__wrap {
vertical-align: middle; width: 299px;
height: 168px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
} }
}
&__item {
display: flex; .little-icon {
flex-direction: column; display: flex;
flex-direction: column;
position: absolute;
top: 0;
right: -20px;
.iconfont {
width: 20px;
height: 20px;
line-height: 20px;
font-size: 20px;
color: #999;
margin-bottom: 4px;
cursor: pointer; cursor: pointer;
&:not(:last-child) { &.close {
margin-right: 82px; margin-top: 8px;
} background-image: url('https://image.xiaomaiketang.com/xm/eesMPhNP3e.png');
background-size: 100% 100%;
.iconfont {
font-size: 22px;
line-height: 22px;
color: #BFBFBF;
text-align: center;
}
.text {
color: #999;
line-height: 20px;
margin-top: 4px;
} }
} }
} }
}
.tips {
color: #999; .operate {
margin-top: 16px; display: flex;
margin-bottom: 8px; align-items: center;
} justify-content: center;
.checkExample { width: 550px;
width: 60px; height: 80px;
color: #FF7519; line-height: 80px;
cursor: pointer; padding: 16px;
margin-top: 16px;
border: 1px dashed #ebebeb;
border-radius: 4px;
.ant-upload {
vertical-align: middle;
} }
.warmup {
margin-bottom: 17px; &__item {
display: flex; display: flex;
flex-direction: column;
cursor: pointer;
&:not(:last-child) {
margin-right: 82px;
}
.iconfont {
font-size: 22px;
line-height: 22px;
color: #bfbfbf;
text-align: center;
}
.text {
color: #999;
line-height: 20px;
margin-top: 4px;
}
} }
.course-cover__wrap { }
display: flex;
flex-direction: row; .tips {
color: #999;
margin-top: 16px;
margin-bottom: 8px;
}
.checkExample {
width: 60px;
color: #ff7519;
cursor: pointer;
}
.warmup {
margin-bottom: 17px;
display: flex;
}
.course-cover__wrap {
display: flex;
flex-direction: row;
}
.img-content {
position: relative;
margin-right: 20px;
width: 300px;
height: 170px;
img {
width: 100%;
height: 100%;
object-fit: contain;
} }
.img-content { .img-delete-wrap {
position: relative; opacity: 0;
margin-right: 20px; position: absolute;
width: 300px; top: 0;
height: 170px; left: 0;
width: 100%;
height: 100%;
img { img {
width: 100%;
height: 100%;
object-fit: contain;
}
.img-delete-wrap {
opacity: 0;
position: absolute; position: absolute;
top: 0; left: 50%;
left: 0; top: 50%;
width: 100%; width: 40px;
height: 100%; height: 40px;
img { transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
width: 40px;
height: 40px;
transform: translate(-50%, -50%);
}
&:hover {
opacity: 1;
cursor: pointer;
}
} }
} &:hover {
.opt-btns { opacity: 1;
.default-btn {
margin-left: 16px;
color: #FF7519;
cursor: pointer; cursor: pointer;
&.disabled {
color: #CCC;
cursor: not-allowed;
}
} }
} }
} }
.example-wrap { .opt-btns {
font-family: PingFangSC-Regular, PingFang SC; .default-btn {
text-align: center; margin-left: 16px;
.title { color: #ff7519;
margin-bottom: 6px; cursor: pointer;
font-size: 14px;
color: #333333; &.disabled {
} color: #ccc;
.text { cursor: not-allowed;
margin-bottom: 16px; }
font-size: 12px;
color: #999999;
}
img {
width: 180px;
} }
} }
.check-record-rule { }
width: 120px; .example-wrap {
color: #FF7519; font-family: PingFangSC-Regular, PingFang SC;
cursor: pointer; text-align: center;
z-index: 2; .title {
margin-bottom: 6px;
font-size: 14px;
color: #333333;
} }
.record-rule-wrap { .text {
text-align: left; margin-bottom: 16px;
ul { font-size: 12px;
margin-top: 10px; color: #999999;
padding-left: 34px; }
list-style-type: disc; img {
li { width: 180px;
color: #999; }
} }
} .check-record-rule {
.text { width: 120px;
color: #ff7519;
cursor: pointer;
z-index: 2;
}
.record-rule-wrap {
text-align: left;
ul {
margin-top: 10px;
padding-left: 34px;
list-style-type: disc;
li {
color: #999; color: #999;
} }
} }
.text {
.auto-send-class-report { color: #999;
.label { }
width: 57px; }
height: 12px;
font-size: 14px; .auto-send-class-report {
font-weight: 400; .label {
color: #666666; width: 57px;
line-height: 12px; height: 12px;
} font-size: 14px;
.open-text, .close-text { font-weight: 400;
width: 572px; color: #666666;
font-size: 14px; line-height: 12px;
font-weight: 400; }
color: #999999; .open-text,
line-height: 20px; .close-text {
margin-left: 100px; width: 572px;
margin-top: 5px; font-size: 14px;
} font-weight: 400;
.open-text { color: #999999;
margin-top: 8px; line-height: 20px;
} margin-left: 100px;
.close-text { margin-top: 5px;
margin-bottom: 16px; }
} .open-text {
} margin-top: 8px;
\ No newline at end of file }
.close-text {
margin-bottom: 16px;
}
}
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;
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
} }
.required { .required {
position: relative; position: relative;
&::before { &::before {
position: absolute; position: absolute;
content: '*'; content: '*';
...@@ -69,14 +69,14 @@ ...@@ -69,14 +69,14 @@
left: 5px; left: 5px;
top: 6px; top: 6px;
} }
&.label::before { &.label::before {
top: 0; top: 0;
} }
} }
.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 {
...@@ -146,62 +146,59 @@ ...@@ -146,62 +146,59 @@
.course-cover { .course-cover {
display: flex; display: flex;
margin-top: 16px; margin-top: 16px;
&__wrap { &__wrap {
position: relative; position: relative;
.tag { .img-content {
border-radius: 2px; margin-top: 8px;
background: #D6D6D6; margin-right: 20px;
font-size: 12px; width: 299px;
height: 18px; height: 169px;
width: 52px; position: relative;
text-align: center;
color: #FFF; img {
position: absolute; width: 100%;
top: 8px; height: 100%;
left: 8px; object-fit: contain;
} border-radius: 4px;
} }
.course-cover__wrap { .tag {
display: flex; border-radius: 2px;
flex-direction: row; background: #d6d6d6;
} font-size: 12px;
height: 18px;
.img-content { width: 52px;
margin-right: 20px; text-align: center;
width: 299px; color: #fff;
height: 169px; position: absolute;
top: 8px;
img { left: 8px;
width: 100%;
height: 100%;
object-fit: contain;
}
}
.opt-btns {
.default-btn {
margin-left: 16px;
color: #2966FF;
cursor: pointer;
&.disabled {
color: #CCC;
cursor: not-allowed;
} }
} }
.ant-upload-list { .opt-btns {
display: none; .default-btn {
margin-left: 14px;
color: #2966ff;
cursor: pointer;
&.disabled {
color: #ccc;
cursor: not-allowed;
}
}
.ant-upload-list {
display: none;
}
.tips {
margin-top: 8px;
color: #999;
}
} }
} }
.tips {
margin-top: 8px;
color: #999;
}
} }
.select-student { .select-student {
...@@ -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;
...@@ -250,4 +247,4 @@ ...@@ -250,4 +247,4 @@
position: absolute; position: absolute;
left: 20000px; left: 20000px;
} }
} }
\ No newline at end of file
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 className='instro-text'>{enableState === 'YES' ? '已开启，培训计划可正常分享给学员学习' : '已关闭，培训计划暂不进行分享和学习'}</div>
</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