Skip to content

X
xiaomai-cloud-class-web
Commit 94f36a3e by chenshu
Options

feat:初始化页面

parent 1b3ed6eb
Showing with 593 additions and 315 deletions
package.json
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
"underscore": "^1.10.2", "underscore": "^1.10.2",
"url-loader": "2.3.0", "url-loader": "2.3.0",
"video-react": "0.14.1", "video-react": "0.14.1",
"wangeditor": "^3.1.1", "wangeditor": "^4.6.9",
"webpack": "4.42.0", "webpack": "4.42.0",
"webpack-dev-server": "3.11.0", "webpack-dev-server": "3.11.0",
"webpack-manifest-plugin": "2.2.0", "webpack-manifest-plugin": "2.2.0",
......
src/core/upload.js
...@@ -146,6 +146,36 @@ class Upload { ...@@ -146,6 +146,36 @@ class Upload {
xhr.send(fd); xhr.send(fd);
}) })
} }
static uploadTextToOSS(string, name, success, error) {
if (!string) return success();
const params = {
accessTypeEnum: "PUBLIC",
bizCode: 'CLOUD_CLASS_COMMON',
instId: User.getStoreId(),
resourceName: name,
}
Service.Hades('/public/hades/ossAuthority', params).then((res) => {
const { resourceId, accessId, policy, callback, signature,key, host } = res.result;
const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append("OSSAccessKeyId", accessId);
formData.append("policy", policy);
formData.append("callback", callback);
formData.append("Signature", signature);
formData.append("key", key);
formData.append("file", new Blob([string]));
formData.append("success_action_status", 200);
xhr.open("POST", host);
xhr.onload = () => {
success(resourceId);
};
xhr.onerror = () => {
error();
}
xhr.send(formData);
})
}
} }
export default Upload; export default Upload;
\ No newline at end of file
src/modules/course-manage/components/EditorBox.jsx
...@@ -21,7 +21,7 @@ class EditorBox extends React.Component { ...@@ -21,7 +21,7 @@ class EditorBox extends React.Component {
const { editorId } = this.state; const { editorId } = this.state;
const { detail, onChange } = this.props; const { detail, onChange } = this.props;
const editorInt = new E(`#editor${editorId}`); const editorInt = new E(`#editor${editorId}`);
editorInt.customConfig.menus = [ editorInt.config.menus = [
// 'head', // 标题 // 'head', // 标题
'bold', // 粗体 'bold', // 粗体
// 'fontSize', // 字号 // 'fontSize', // 字号
...@@ -36,18 +36,18 @@ class EditorBox extends React.Component { ...@@ -36,18 +36,18 @@ class EditorBox extends React.Component {
'emoticon', // 表情 'emoticon', // 表情
] ]
editorInt.customConfig.emotions = [ editorInt.config.emotions = [
{ {
title: 'emoji', title: 'emoji',
type: 'emoji', type: 'emoji',
content: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '😊', '🙂', '🙃', '😉', '😓', '😅', '😪', '🤔', '😬', '🤐'] content: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '😊', '🙂', '🙃', '😉', '😓', '😅', '😪', '🤔', '😬', '🤐']
} }
] ]
editorInt.customConfig.zIndex = 1; editorInt.config.zIndex = 1;
editorInt.customConfig.pasteFilterStyle = false; editorInt.config.pasteFilterStyle = false;
editorInt.customConfig.pasteIgnoreImg = true; editorInt.config.pasteIgnoreImg = true;
// 自定义处理粘贴的文本内容 // 自定义处理粘贴的文本内容
editorInt.customConfig.pasteTextHandle = function (content) { editorInt.config.pasteTextHandle = function (content) {
if (content == '' && !content) return '' if (content == '' && !content) return ''
var str = content var str = content
str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '') str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
...@@ -56,7 +56,7 @@ class EditorBox extends React.Component { ...@@ -56,7 +56,7 @@ class EditorBox extends React.Component {
str = str.replace(/\&nbsp\;/ig, ' ') str = str.replace(/\&nbsp\;/ig, ' ')
return str return str
} }
editorInt.customConfig.onchange = (html) => { editorInt.config.onchange = (html) => {
const textLength = editorInt.txt.text().replace(/\&nbsp\;/ig, ' ').length; const textLength = editorInt.txt.text().replace(/\&nbsp\;/ig, ' ').length;
this.setState({ textLength }, () => { this.setState({ textLength }, () => {
onChange(html, this.state.textLength); onChange(html, this.state.textLength);
...@@ -64,7 +64,6 @@ class EditorBox extends React.Component { ...@@ -64,7 +64,6 @@ class EditorBox extends React.Component {
} }
editorInt.create(); editorInt.create();
editorInt.txt.html(detail.content); editorInt.txt.html(detail.content);
editorInt.change && editorInt.change();
} }
render() { render() {
......
src/modules/course-manage/components/GraphicsEditor.jsx 0 → 100644
import React from 'react';
import E from 'wangeditor';
import './GraphicsEditor.less';
class GraphicsEditor extends React.Component {
constructor(props) {
super(props)
this.state = {
editorId: window.random_string(16),
textLength: 0,
}
}
componentDidMount() {
this.renderEditor()
this.resetIndex(true);
}
componentWillUnmount() {
this.resetIndex();
}
resetIndex = (bool) => {
const topDom = document.querySelector('.top-container');
const leftDom = document.querySelector('.left-container');
topDom.style.zIndex = bool ? 'auto' : 112;
leftDom.style.zIndex = bool ? 'auto' : 2;
}
renderEditor() {
const { editorId } = this.state;
const { detail, onChange, isIntro } = this.props;
const editorInt = new E(`#editor${editorId}`);
editorInt.config.showFullScreen = !isIntro
editorInt.config.menus = isIntro ?
[
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'foreColor',
'backColor',
'list',
'justify',
'emoticon',
'image',
]
: [
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'indent',
'lineHeight',
'foreColor',
'backColor',
'link',
'list',
'todo',
'justify',
'quote',
'emoticon',
'image',
'video',
'table',
'code',
'splitLine',
'undo',
'redo',
];
editorInt.config.emotions = [
{
title: 'emoji',
type: 'emoji',
content: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '😊', '🙂', '🙃', '😉', '😓', '😅', '😪', '🤔', '😬', '🤐']
}
]
editorInt.config.zIndex = 1;
editorInt.config.pasteFilterStyle = false;
editorInt.config.pasteIgnoreImg = true;
// 自定义处理粘贴的文本内容
editorInt.config.pasteTextHandle = function (content) {
if (content == '' && !content) return ''
var str = content
str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
str = str.replace(/[ | ]*\n/g, '\n')
str = str.replace(/\&nbsp\;/ig, ' ')
return str
}
editorInt.config.onchange = (html) => {
const textLength = editorInt.txt.text().replace(/\&nbsp\;/ig, ' ').length;
this.setState({ textLength }, () => {
onChange(html, this.state.textLength);
})
}
editorInt.create();
editorInt.txt.html(detail.content);
}
render() {
const { editorId, textLength } = this.state;
const { limitLength = 1000 } = this.props;
return <div className="wang-editor-container ">
<div className="editor-box" id={`editor${editorId}`}></div>
{textLength > limitLength && <div className="editor-tips">超了{textLength - limitLength}个字</div>}
</div>
}
}
export default GraphicsEditor;
src/modules/course-manage/components/GraphicsEditor.less 0 → 100644
.wang-editor-container {
border: 1px solid #E8E8E8;
border-radius: 4px;
width: 552px;
position: relative;
.w-e-text p,
.w-e-text h1,
.w-e-text h2,
.w-e-text h3,
.w-e-text h4,
.w-e-text h5,
.w-e-text table,
.w-e-text pre {
margin: 0;
}
.w-e-toolbar {
background-color: #fff !important;
border: none !important;
border-bottom: 1px solid #E8E8E8 !important;
}
.w-e-text-container {
border: none !important;
height: 88px !important;
}
.editor-tips {
position: absolute;
top: 5px;
right: 8px;
color: #f5222d;
}
}
\ No newline at end of file
src/modules/course-manage/components/LiveCourseList.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-07-14 15:43:00 * @Date: 2020-07-14 15:43:00
* @Last Modified by: mikey.zhaopeng * @Last Modified by: chenshu
* @Last Modified time: 2020-11-23 20:23:12 * @Last Modified time: 2021-03-16 17:37:23
* @Description: 大班直播、互动班课的直播课列表 * @Description: 大班直播、互动班课的直播课列表
*/ */
...@@ -83,6 +83,7 @@ class LiveCourseList extends React.Component { ...@@ -83,6 +83,7 @@ class LiveCourseList extends React.Component {
needStr={needStr} needStr={needStr}
data={shareData} data={shareData}
type="liveClass" type="liveClass"
title="直播课"
close={() => { close={() => {
this.setState({ this.setState({
shareLiveModal: null shareLiveModal: null
......
src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
...@@ -9,20 +9,23 @@ ...@@ -9,20 +9,23 @@
import React from 'react'; import React from 'react';
import { Button, Input, Radio, message, Modal,Cascader} from 'antd'; import { Button, Input, Radio, message, Modal,Cascader} from 'antd';
import $ from 'jquery';
import { DISK_MAP, FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum'; import { DISK_MAP, FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum';
import { ImgCutModalNew } from '@/components'; import { ImgCutModalNew } from '@/components';
import ShowTips from "@/components/ShowTips"; import ShowTips from "@/components/ShowTips";
import Breadcrumbs from "@/components/Breadcrumbs"; import Breadcrumbs from "@/components/Breadcrumbs";
import AddVideoIntro from './components/AddVideoIntro'; import AddGraphicsIntro from './components/AddGraphicsIntro';
import SelectStudent from '../modal/select-student'; import SelectStudent from '../modal/select-student';
import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal'; import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal';
import PreviewCourseModal from '../modal/PreviewCourseModal'; import PreviewGraphicsModal from '../modal/PreviewGraphicsModal';
import StoreService from "@/domains/store-domain/storeService"; import StoreService from "@/domains/store-domain/storeService";
import CourseService from "@/domains/course-domain/CourseService"; import Service from '@/common/js/service';
import { randomString } from '@/domains/basic-domain/utils';
import User from '@/common/js/user'; import User from '@/common/js/user';
import _ from "underscore"; import _ from "underscore";
import Upload from '@/core/upload';
import './AddGraphicsCourse.less'; import './AddGraphicsCourse.less';
const EDIT_BOX_KEY = Math.random(); const EDIT_BOX_KEY = Math.random();
...@@ -30,14 +33,8 @@ const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategory ...@@ -30,14 +33,8 @@ const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategory
//添加课程时课程默认的一些值 //添加课程时课程默认的一些值
const defaultShelfState = 'YES'; const defaultShelfState = 'YES';
const defaultScheduleMedia = [{
contentType:'INTRO',
mediaType: 'TEXT',
mediaContent: '',
key: EDIT_BOX_KEY
}]
const whetherVisitorsJoin = 'NO' const whetherVisitorsJoin = 'NO'
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
class AddGraphicsCourse extends React.Component { class AddGraphicsCourse extends React.Component {
...@@ -52,17 +49,13 @@ class AddGraphicsCourse extends React.Component { ...@@ -52,17 +49,13 @@ class AddGraphicsCourse extends React.Component {
pageType, // 页面类型: add->新建 edit->编辑 pageType, // 页面类型: add->新建 edit->编辑
imageFile: null, // 需要被截取的图片 imageFile: null, // 需要被截取的图片
courseName: null, // 图文课名称 courseName: null, // 图文课名称
scheduleVideoId: null, // 图文课链接 courseMedia: '',
introduce: '',
courseMediaId: null, // 图文课链接
coverId: null, // 图文封面的recourceId coverId: null, // 图文封面的recourceId
coverUrl: 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png', // 图文课封面 coverUrl: defaultCoverUrl, // 图文课封面
studentList: [], // 上课学员列表 studentList: [], // 上课学员列表
shelfState:'YES', //是否开启店铺展示 shelfState:'YES', //是否开启店铺展示
scheduleMedia: [{ // 图文课媒体资源
contentType:"INTRO",
mediaType: 'TEXT',
mediaContent: '',
key: EDIT_BOX_KEY
}],
diskList: [], // 机构可见磁盘目录 diskList: [], // 机构可见磁盘目录
selectedFileList: [], // 已经从资料云盘中勾选的文件 selectedFileList: [], // 已经从资料云盘中勾选的文件
showCutModal: false, // 是否显示截图弹窗 showCutModal: false, // 是否显示截图弹窗
...@@ -71,19 +64,18 @@ class AddGraphicsCourse extends React.Component { ...@@ -71,19 +64,18 @@ class AddGraphicsCourse extends React.Component {
categoryName:null, //分类名称 categoryName:null, //分类名称
courseCatalogList:[], //分类列表 courseCatalogList:[], //分类列表
categoryId:null, //分类的Id值 categoryId:null, //分类的Id值
whetherVisitorsJoin:'NO' // 是否允许游客加入 whetherVisitorsJoin: 'NO', // 是否允许游客加入
} }
} }
componentWillMount() { componentWillMount() {
// this.handleFetchDiskList();
const { id, pageType } = this.state; const { id, pageType } = this.state;
this.getCourseCatalogList(); this.getCourseCatalogList();
if (pageType === 'edit') { if (pageType === 'edit') {
this.handleFetchScheudleDetail(id); this.handleFetchScheudleDetail(id);
// this.handleFetchStudentList(id);
} }
} }
//获取分类列表 //获取分类列表
getCourseCatalogList = ()=>{ getCourseCatalogList = ()=>{
StoreService.getCourseCatalogList({current:1,size:1000}).then((res) => { StoreService.getCourseCatalogList({current:1,size:1000}).then((res) => {
...@@ -109,20 +101,12 @@ class AddGraphicsCourse extends React.Component { ...@@ -109,20 +101,12 @@ class AddGraphicsCourse extends React.Component {
} }
// 获取图文课详情 // 获取图文课详情
handleFetchScheudleDetail = (courseId) => { handleFetchScheudleDetail = (courseId) => {
CourseService.videoScheduleDetail({ Service.Hades('public/hades/mediaCourseDetail',{
courseId courseId
}).then((res) => { }).then((res) => {
const { result = {} } = res || {}; const { result = {} } = res || {};
const { const {
// coverId,
// coverUrl,
// videoType,
// videoDuration,
// videoName,
// scheduleMedia,
courseName, courseName,
// scheduleVideoId,
// scheduleVideoUrl,
shelfState, shelfState,
whetherVisitorsJoin, whetherVisitorsJoin,
courseMediaVOS, courseMediaVOS,
...@@ -131,13 +115,7 @@ class AddGraphicsCourse extends React.Component { ...@@ -131,13 +115,7 @@ class AddGraphicsCourse extends React.Component {
categoryId categoryId
} = result; } = result;
let coverId; let coverId;
let coverUrl; let coverUrl = this.state.coverUrl;
let videoType;
let videoDuration;
let videoName;
let scheduleMedia = [];
let scheduleVideoId;
let scheduleVideoUrl;
courseMediaVOS.map((item) => { courseMediaVOS.map((item) => {
switch (item.contentType){ switch (item.contentType){
...@@ -146,17 +124,13 @@ class AddGraphicsCourse extends React.Component { ...@@ -146,17 +124,13 @@ class AddGraphicsCourse extends React.Component {
coverUrl = item.mediaUrl; coverUrl = item.mediaUrl;
break; break;
case "SCHEDULE": case "SCHEDULE":
videoDuration = item.videoDuration; this.getTextDetail('courseMedia', item.mediaUrl);
videoName = item.mediaName; break;
scheduleVideoId = item.mediaContent;
scheduleVideoUrl = item.mediaUrl;
videoType = item.mediaType;
break;
case "INTRO": case "INTRO":
scheduleMedia = [...scheduleMedia,item] this.getTextDetail('introduce', item.mediaUrl);
break; break;
default: default:
break; break;
} }
return item; return item;
}) })
...@@ -170,13 +144,7 @@ class AddGraphicsCourse extends React.Component { ...@@ -170,13 +144,7 @@ class AddGraphicsCourse extends React.Component {
this.setState({ this.setState({
coverId, coverId,
coverUrl, coverUrl,
videoType,
videoName,
videoDuration,
scheduleMedia,
courseName, courseName,
scheduleVideoId,
scheduleVideoUrl,
shelfState, shelfState,
whetherVisitorsJoin, whetherVisitorsJoin,
categoryName, categoryName,
...@@ -185,6 +153,17 @@ class AddGraphicsCourse extends React.Component { ...@@ -185,6 +153,17 @@ class AddGraphicsCourse extends React.Component {
}) })
} }
getTextDetail = (key, url) => {
$.ajax({
data: {},
type: 'GET',
url,
contentType:'application/x-www-form-urlencoded; charset=UTF-8',
success: (res) => {
this.setState({ [key]: res });
}
})
}
handleGoBack = () => { handleGoBack = () => {
const { const {
...@@ -192,13 +171,12 @@ class AddGraphicsCourse extends React.Component { ...@@ -192,13 +171,12 @@ class AddGraphicsCourse extends React.Component {
videoName, videoName,
videoDuration, videoDuration,
courseName, courseName,
scheduleMedia, courseMediaId,
scheduleVideoId,
categoryId, categoryId,
shelfState, shelfState,
whetherVisitorsJoin whetherVisitorsJoin
} = this.state; } = this.state;
if(videoName || videoDuration || scheduleVideoId || !_.isEqual(scheduleMedia, defaultScheduleMedia) || categoryId || courseName || coverId || shelfState !== defaultShelfState || whetherVisitorsJoin !== whetherVisitorsJoin ){ if(videoName || videoDuration || courseMediaId || categoryId || courseName || coverId || shelfState !== defaultShelfState || whetherVisitorsJoin !== whetherVisitorsJoin ){
Modal.confirm({ Modal.confirm({
title: '确认要返回吗?', title: '确认要返回吗?',
content: '返回后，本次编辑的内容将不被保存。', content: '返回后，本次编辑的内容将不被保存。',
...@@ -262,37 +240,35 @@ class AddGraphicsCourse extends React.Component { ...@@ -262,37 +240,35 @@ class AddGraphicsCourse extends React.Component {
handleShowPreviewModal = () => { handleShowPreviewModal = () => {
const { const {
coverUrl, coverUrl,
scheduleVideoUrl,
courseName, courseName,
scheduleMedia, courseMedia,
videoDuration introduce,
categoryName,
} = this.state; } = this.state;
const courseBasinInfo = { const courseBasinInfo = {
coverUrl, coverUrl,
scheduleVideoUrl,
courseName, courseName,
videoDuration categoryName
} }
const courseIntroInfo = { const courseIntroInfo = {
liveCourseMediaRequests: scheduleMedia courseMedia,
introduce,
} }
const previewCourseModal = ( const previewGraphicsModal = (
<PreviewCourseModal <PreviewGraphicsModal
type="videoCourse"
courseBasicInfo={courseBasinInfo} courseBasicInfo={courseBasinInfo}
courseIntroInfo={courseIntroInfo} courseIntroInfo={courseIntroInfo}
close={() => { close={() => {
this.setState({ this.setState({
previewCourseModal: null previewGraphicsModal: null
}) })
}} }}
/> />
); );
this.setState({ previewCourseModal }); this.setState({ previewGraphicsModal });
} }
// 选择图文 // 选择图文
...@@ -309,8 +285,8 @@ class AddGraphicsCourse extends React.Component { ...@@ -309,8 +285,8 @@ class AddGraphicsCourse extends React.Component {
size: folderSize, size: folderSize,
videoName: folderName, videoName: folderName,
videoType: folderFormat, videoType: folderFormat,
scheduleVideoUrl: ossUrl, detailUrl: ossUrl,
scheduleVideoId : resourceId, courseMediaId : resourceId,
videoDuration: videoDom.duration videoDuration: videoDom.duration
}); });
} }
...@@ -327,99 +303,115 @@ class AddGraphicsCourse extends React.Component { ...@@ -327,99 +303,115 @@ class AddGraphicsCourse extends React.Component {
} }
// 保存 // 保存
handleSubmit = () => { handleSubmit = () => {
const { instId, adminId } = window.currentUserInstInfo;
const { const {
id, id,
size,
coverId, coverId,
coverUrl,
pageType, pageType,
joinType,
videoName,
videoDuration,
studentList,
courseName, courseName,
scheduleMedia, courseMedia,
scheduleVideoId, introduce,
scheduleVideoUrl,
categoryId, categoryId,
shelfState, shelfState,
whetherVisitorsJoin whetherVisitorsJoin,
} = this.state; } = this.state;
const commonParams = { const commonParams = {
videoName,
videoDuration,
scheduleVideoId,
scheduleMedia: scheduleMedia.filter(item => !!item.mediaContent),
categoryId, categoryId,
courseName, courseName,
coverId, coverId,
operatorId:User.getStoreUserId(), operatorId:User.getStoreUserId(),
storeId:User.getStoreId(), storeId:User.getStoreId(),
shelfState, shelfState,
whetherVisitorsJoin whetherVisitorsJoin,
courseType: 'PICTURE',
}; };
// 校验必填字段:课程名称, 课程图文 // 校验必填字段:课程名称, 课程图文
this.handleValidate(courseName, scheduleVideoId,categoryId, scheduleMedia).then((res) => { this.handleValidate(courseName, courseMedia, categoryId).then((res) => {
if (!res) return; if (!res) return;
if (pageType === 'add') { Upload.uploadTextToOSS(courseMedia, `${randomString()}.txt`, (courseMediaId) => {
CourseService.createVideoSchedule(commonParams).then((res) => { Upload.uploadTextToOSS(introduce, `${randomString()}.txt`, (introduceId) => {
if (!res) return; this.submitRemote({
message.success("新建成功"); id,
window.RCHistory.goBack(); pageType,
}) commonParams,
} else { courseMediaId,
const editParams = { introduceId,
courseId:id, });
...commonParams, }, () => message.warning('上传课程简介失败'));
} }, () => message.warning('上传课程内容失败'));
CourseService.editVideoSchedule(editParams).then((res) => {
if (!res) return;
message.success("保存成功");
window.RCHistory.goBack();
});
}
}); });
} }
handleValidate = (courseName, scheduleVideoId,categoryId,scheduleMedia) => { submitRemote = (data) => {
const { id, pageType, commonParams, courseMediaId, introduceId } = data;
commonParams.courseMediaId = courseMediaId;
commonParams.introduceId = introduceId;
if (pageType === 'add') {
Service.Hades('public/hades/createMediaCourse', commonParams).then((res) => {
if (!res) return;
message.success("新建成功");
window.RCHistory.goBack();
})
} else {
const editParams = {
courseId:id,
...commonParams,
}
Service.Hades('public/hades/editMediaCourse', editParams).then((res) => {
if (!res) return;
message.success("保存成功");
window.RCHistory.goBack();
});
}
}
handleValidate = (courseName, courseMedia, categoryId) => {
return new Promise((resolve) => { return new Promise((resolve) => {
if (!courseName) { if (!courseName) {
message.warning('请输入课程名称'); message.warning('请输入课程名称');
resolve(false); resolve(false);
return false return false
} }
if (!scheduleVideoId) { if (!courseMedia) {
message.warning('请上传图文'); message.warning('请输入课程内容');
resolve(false); resolve(false);
return false return false
} }
if(!categoryId){ if(!categoryId){
message.warning('请选择课程分类'); message.warning('请选择课程分类');
resolve(false); resolve(false);
return false return false
} }
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) {
message.warning(`第${i+1}个文字简介的字数超过了1000个字`); // message.warning(`第${i+1}个文字简介的字数超过了1000个字`);
resolve(false); // resolve(false);
return false // return false
} // }
} // }
resolve(true); resolve(true);
}); });
} }
render() { render() {
const { const {
pageType,courseName, scheduleVideoId, coverId, id,
coverUrl, scheduleVideoUrl, studentList, scheduleMedia, pageType,
showCutModal, showSelectFileModal, diskList, courseName,
imageFile, joinType, videoName, videoType,shelfState, coverUrl,
categoryName,courseCatalogList,whetherVisitorsJoin studentList,
courseMedia,
introduce,
showCutModal,
showSelectFileModal,
diskList,
imageFile,
videoType,
shelfState,
categoryName,
courseCatalogList,
whetherVisitorsJoin,
} = this.state; } = this.state;
// 已选择的上课学员数量 // 已选择的上课学员数量
...@@ -471,7 +463,7 @@ class AddGraphicsCourse extends React.Component { ...@@ -471,7 +463,7 @@ class AddGraphicsCourse extends React.Component {
currentInputFile: this.refs.picInputFile currentInputFile: this.refs.picInputFile
}); });
this.refs.picInputFile.click() this.refs.picInputFile.click()
}}>{`${(pageType === 'add' && (!scheduleVideoId && !coverUrl)) ? '上传' : '修改'}封面`}</Button> }}>{`${(pageType === 'add' && !coverUrl) ? '上传' : '修改'}封面`}</Button>
<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> </div>
...@@ -486,9 +478,11 @@ class AddGraphicsCourse extends React.Component { ...@@ -486,9 +478,11 @@ class AddGraphicsCourse extends React.Component {
} }
</div> </div>
<div className="intro-info mt16"> <div className="intro-info mt16">
<AddVideoIntro <AddGraphicsIntro
data={{ data={{
liveCourseMediaRequests: scheduleMedia, id,
courseMedia,
introduce,
shelfState, shelfState,
whetherVisitorsJoin, whetherVisitorsJoin,
label: '图文课简介' label: '图文课简介'
...@@ -543,7 +537,7 @@ class AddGraphicsCourse extends React.Component { ...@@ -543,7 +537,7 @@ class AddGraphicsCourse extends React.Component {
onClose={() => this.setState({ showCutModal: false })} onClose={() => this.setState({ showCutModal: false })}
reUpload={() => { this.state.currentInputFile.click() }} reUpload={() => { this.state.currentInputFile.click() }}
/> />
{ this.state.previewCourseModal } { this.state.previewGraphicsModal }
</div> </div>
) )
} }
......
src/modules/course-manage/graphics-course/components/AddVideoIntro.jsx → 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: mikey.zhaopeng * @Last Modified by: chenshu
* @Last Modified time: 2020-11-24 14:29:52 * @Last Modified time: 2021-03-16 16:20:19
* @Description: 添加直播-简介 * @Description: 添加直播-简介
*/ */
import React from 'react'; import React from 'react';
import { Input, message, Upload, Radio, Row, Col, Button, Popover, Switch } from 'antd'; import { Input, message, Upload, Radio, Row, Col, Button, Popover, Switch } from 'antd';
import Service from '@/common/js/service'; import Service from '@/common/js/service';
import EditorBox from '../../components/EditorBox'; import GraphicsEditor from '../../components/GraphicsEditor';
import User from '@/common/js/user'; import User from '@/common/js/user';
import UploadOss from '@/core/upload'; import UploadOss from '@/core/upload';
import './AddVideoIntro.less'; import './AddGraphicsIntro.less';
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal'; import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
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;
const defaultCover = 'https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/1599635741526.png'; class AddGraphicsIntro extends React.Component {
class AddVideoIntro extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
warmUrl: defaultCover,
showSelectFileModal: false, showSelectFileModal: false,
diskList: [], diskList: [],
selectType:null selectType:null
...@@ -60,108 +58,37 @@ class AddVideoIntro extends React.Component { ...@@ -60,108 +58,37 @@ class AddVideoIntro extends React.Component {
} }
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({
contentType: 'INTRO', contentType: 'INTRO',
size: folderSize, size: folderSize,
mediaName: folderName, mediaName: folderName,
mediaContent: resourceId, mediaContent: resourceId,
mediaType: 'PICTURE', mediaType: 'PICTURE',
mediaUrl: ossUrl, mediaUrl: ossUrl,
}); });
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests); this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
} }
} }
// 删除简介
handleDeleteIntro = (index) => {
const { liveCourseMediaRequests } = this.props.data;
liveCourseMediaRequests.splice(index, 1);
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
}
// 上移简介
handleMoveUpIntro = (index) => {
const { liveCourseMediaRequests } = this.props.data;
const prevItem = liveCourseMediaRequests[index];
const nextItem = liveCourseMediaRequests[index + 1];
liveCourseMediaRequests.splice(index, 2, nextItem, prevItem);
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
}
// 下移简介 changeDetail = (value) => {
handleMoveDownIntro = (index) => { this.props.onChange('courseMedia', value);
const { liveCourseMediaRequests } = this.props.data;
const prevItem = liveCourseMediaRequests[index - 1];
const nextItem = liveCourseMediaRequests[index];
liveCourseMediaRequests.splice(index - 1, 2, nextItem, prevItem);
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
}
renderLittleIcon = (index) => {
const { liveCourseMediaRequests } = this.props.data;
return (
<div className="little-icon">
<span
className="icon iconfont close"
onClick={() => { this.handleDeleteIntro(index); }}
></span>
{
index > 0 &&
<span
className="icon iconfont"
onClick={() => { this.handleMoveDownIntro(index); }}
>&#xe6d1;</span>
}
{
index !== liveCourseMediaRequests.length - 1 &&
<span
className="icon iconfont"
onClick={() => { this.handleMoveUpIntro(index); }}
>&#xe6cf;</span>
}
</div>
)
} }
handleChangeIntro = (index, value, length) => { changeIntro = (value) => {
const { liveCourseMediaRequests } = this.props.data; this.props.onChange('introduce', value);
liveCourseMediaRequests[index].mediaContent = value;
liveCourseMediaRequests[index].mediaContentLength = length
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
} }
handleAddIntroText = () => {
const { liveCourseMediaRequests } = this.props.data;
liveCourseMediaRequests.push({
contentType:"INTRO",
mediaType: 'TEXT',
mediaContent: '',
key: Math.random()
});
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
}
handleUpload = (Blob) => {
this.setState({
showSelectFileModal: true,
selectType:'INTRO'
})
}
whetherVisitorsJoinChange = ()=>{ whetherVisitorsJoinChange = ()=>{
if(this.props.data.whetherVisitorsJoin==="NO"){ if(this.props.data.whetherVisitorsJoin==="NO"){
this.props.onChange('whetherVisitorsJoin','YES') this.props.onChange('whetherVisitorsJoin','YES')
...@@ -169,6 +96,7 @@ class AddVideoIntro extends React.Component { ...@@ -169,6 +96,7 @@ class AddVideoIntro extends React.Component {
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')
...@@ -176,12 +104,10 @@ class AddVideoIntro extends React.Component { ...@@ -176,12 +104,10 @@ class AddVideoIntro extends React.Component {
this.props.onChange('shelfState','NO') this.props.onChange('shelfState','NO')
} }
} }
componentWillMount() {
}
render() { render() {
const {data: { whetherVisitorsJoin,liveCourseMediaRequests = [], shelfState} } = this.props; const {data: { id, whetherVisitorsJoin, courseMedia, introduce, shelfState } } = this.props;
const {showSelectFileModal,selectType} = this.state const { showSelectFileModal, selectType } = this.state;
return ( return (
<div className="add-video__intro-info"> <div className="add-video__intro-info">
<div className="allow-tourist-join"> <div className="allow-tourist-join">
...@@ -215,52 +141,38 @@ class AddVideoIntro extends React.Component { ...@@ -215,52 +141,38 @@ class AddVideoIntro extends React.Component {
</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">
liveCourseMediaRequests.map((item, index) => { {(!id || courseMedia) &&
if (item.mediaType === 'TEXT') { <GraphicsEditor
return ( detail={{
<div className="intro-list__item" key={item.key}> content: courseMedia
<EditorBox }}
detail={{ onChange={(val) => { this.changeDetail(val) }}
content: item.mediaContent />
}} }
onChange={(val, length) => { this.handleChangeIntro(index, val, length) }} </div>
/> </div>
{this.renderLittleIcon(index)} </div>
</div> </div>
) <div className="introduce">
} <span className="label">课程简介：</span>
<div className="content">
if (item.mediaType === 'PICTURE') { <div className="intro-list">
return ( <div className="intro-list__item">
<div className="intro-list__item picture" key={index}> {(!id || introduce) &&
<div className="img__wrap"> <GraphicsEditor
<img src={item.mediaUrl} /> isIntro={true}
</div> detail={{
{this.renderLittleIcon(index)} content: introduce
</div> }}
) onChange={(val) => { this.changeIntro(val) }}
} />
}) }
}
</div>
<div className="operate">
<div className="operate__item" onClick={this.handleAddIntroText}>
<span className="icon iconfont">&#xe639;</span>
<span className="text">文字</span>
</div>
<div className="operate__item" onClick={this.handleUpload}>
<span className="icon iconfont">&#xe63b;</span>
<span className="text">图片</span>
</div>
</div>
<div className="tips">
• 图片支持jpeg、jpg、png、gif格式
</div> </div>
</div>
</div> </div>
</div> </div>
{/* 选择暖场图文件弹窗 */} {/* 选择暖场图文件弹窗 */}
...@@ -282,4 +194,4 @@ class AddVideoIntro extends React.Component { ...@@ -282,4 +194,4 @@ class AddVideoIntro extends React.Component {
} }
} }
export default AddVideoIntro; export default AddGraphicsIntro;
src/modules/course-manage/graphics-course/components/AddVideoIntro.less → src/modules/course-manage/graphics-course/components/AddGraphicsIntro.less
.add-video__intro-info { .add-video__intro-info {
.w-e-full-screen-editor {
background: #fff !important;
}
.playback { .playback {
margin-bottom: 10px; margin-bottom: 10px;
.require { .require {
......
src/modules/course-manage/graphics-course/components/GraphicsCourseList.jsx
...@@ -24,6 +24,7 @@ import User from '@/common/js/user' ...@@ -24,6 +24,7 @@ import User from '@/common/js/user'
import './GraphicsCourseList.less'; import './GraphicsCourseList.less';
const ENV = process.env.DEPLOY_ENV || 'dev'; const ENV = process.env.DEPLOY_ENV || 'dev';
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
class GraphicsCourseList extends React.Component { class GraphicsCourseList extends React.Component {
...@@ -45,8 +46,6 @@ class GraphicsCourseList extends React.Component { ...@@ -45,8 +46,6 @@ class GraphicsCourseList extends React.Component {
// 观看数据弹窗 // 观看数据弹窗
handleShowWatchDataModal = (record) => { handleShowWatchDataModal = (record) => {
console.log('111');
console.log("record",record);
const watchDataModal = ( const watchDataModal = (
<WatchDataModal <WatchDataModal
type='videoCourseList' type='videoCourseList'
...@@ -75,7 +74,7 @@ class GraphicsCourseList extends React.Component { ...@@ -75,7 +74,7 @@ class GraphicsCourseList extends React.Component {
return ( return (
<div className="record__item"> <div className="record__item">
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */} {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<img className="course-cover" src={coverUrl || `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`} /> <img className="course-cover" src={coverUrl || defaultCoverUrl} />
{ record.courseName.length > 25? { record.courseName.length > 25?
<Tooltip title={record.courseName}> <Tooltip title={record.courseName}>
<div className="course-name">{record.courseName}</div> <div className="course-name">{record.courseName}</div>
...@@ -204,14 +203,14 @@ class GraphicsCourseList extends React.Component { ...@@ -204,14 +203,14 @@ class GraphicsCourseList extends React.Component {
className="operate__item" className="operate__item"
key="plan" key="plan"
onClick={() => { onClick={() => {
RCHistory.push(`/create-video-course?type=edit&id=${item.id}`); RCHistory.push(`/create-graphics-course?type=edit&id=${item.id}`);
}} }}
>关联培训计划</div> >关联培训计划</div>
<div <div
className="operate__item" className="operate__item"
key="edit" key="edit"
onClick={() => { onClick={() => {
RCHistory.push(`/create-video-course?type=edit&id=${item.id}`); RCHistory.push(`/create-graphics-course?type=edit&id=${item.id}`);
}} }}
>编辑</div> >编辑</div>
<div <div
...@@ -277,7 +276,7 @@ class GraphicsCourseList extends React.Component { ...@@ -277,7 +276,7 @@ class GraphicsCourseList extends React.Component {
const { id, scheduleVideoUrl } = record; const { id, scheduleVideoUrl } = record;
const _appId = appId; const _appId = appId;
const htmlUrl = `${LIVE_SHARE}video_detail/${id}?id=${User.getStoreId()}`; const htmlUrl = `${LIVE_SHARE}graphics_detail/${id}?id=${User.getStoreId()}`;
const longUrl = htmlUrl; const longUrl = htmlUrl;
const { coverUrl, courseName } = record; const { coverUrl, courseName } = record;
const shareData = { const shareData = {
...@@ -286,12 +285,13 @@ class GraphicsCourseList extends React.Component { ...@@ -286,12 +285,13 @@ class GraphicsCourseList extends React.Component {
scheduleVideoUrl, scheduleVideoUrl,
courseName, courseName,
}; };
const shareLiveModal = ( const shareLiveModal = (
<ShareLiveModal <ShareLiveModal
needStr={needStr} needStr={needStr}
data={shareData} data={shareData}
type="videoClass" type="videoClass"
title="图文课"
close={() => { close={() => {
this.setState({ this.setState({
shareLiveModal: null shareLiveModal: null
......
src/modules/course-manage/graphics-course/index.jsx
import React from 'react'; import React from 'react';
import GraphicsCourseFilter from './components/GraphicsCourseFilter'; import GraphicsCourseFilter from './components/GraphicsCourseFilter';
import GraphicsCourseOpt from './components/VieoCourseOpt'; import GraphicsCourseOpt from './components/GraphicsCourseOpt';
import GraphicsCourseList from './components/GraphicsCourseList'; import GraphicsCourseList from './components/GraphicsCourseList';
import CourseService from "@/domains/course-domain/CourseService"; import Service from '@/common/js/service';
import User from '@/common/js/user' import User from '@/common/js/user'
class GraphicsCourse extends React.Component { class GraphicsCourse extends React.Component {
...@@ -14,6 +14,7 @@ class GraphicsCourse extends React.Component { ...@@ -14,6 +14,7 @@ class GraphicsCourse extends React.Component {
query: { query: {
size: 10, size: 10,
current: 1, current: 1,
courseType: 'PICTURE',
storeId:User.getStoreId() storeId:User.getStoreId()
}, },
dataSource: [], // 视频课列表 dataSource: [], // 视频课列表
...@@ -35,15 +36,22 @@ class GraphicsCourse extends React.Component { ...@@ -35,15 +36,22 @@ class GraphicsCourse extends React.Component {
// 更新请求参数 // 更新请求参数
this.setState({ query }); this.setState({ query });
Service.Hades('public/hades/mediaCoursePage', query).then((res) => {
CourseService.videoSchedulePage(query).then((res) => {
const { result = {} } = res || {}; const { result = {} } = res || {};
const { records = [], total = 0 } = result; const { records = [], total = 0 } = result;
this.setState({ this.setState({
dataSource: records, dataSource: records,
totalCount: Number(total) totalCount: Number(total)
}); });
}); })
// CourseService.videoSchedulePage(query).then((res) => {
// const { result = {} } = res || {};
// const { records = [], total = 0 } = result;
// this.setState({
// dataSource: records,
// totalCount: Number(total)
// });
// });
} }
render() { render() {
......
src/modules/course-manage/graphics-course/modal/WatchDataModal.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-05-19 11:01:31 * @Date: 2020-05-19 11:01:31
* @Last Modified by: 吴文洁 * @Last Modified by: chenshu
* @Last Modified time: 2020-05-25 16:50:47 * @Last Modified time: 2021-03-16 17:56:18
* @Description 余额异常弹窗 * @Description 余额异常弹窗
*/ */
import React from 'react'; import React from 'react';
import {Table, Modal,Input} from 'antd'; import {Table, Modal,Input} from 'antd';
import { PageControl } from "@/components"; import { PageControl } from "@/components";
import CourseService from "@/domains/course-domain/CourseService"; import Service from "@/common/js/service";
import User from '@/common/js/user' import User from '@/common/js/user'
import './WatchDataModal.less'; import './WatchDataModal.less';
import dealTimeDuration from "../../utils/dealTimeDuration"; import dealTimeDuration from "../../utils/dealTimeDuration";
...@@ -46,7 +46,7 @@ class WatchDataModal extends React.Component { ...@@ -46,7 +46,7 @@ class WatchDataModal extends React.Component {
courseId:id, courseId:id,
storeId:User.getStoreId() storeId:User.getStoreId()
} }
CourseService.videoWatchInfo(params).then((res) => { Service.Hades('public/hades/mediaCourseWatchInfo', params).then((res) => {
const { result = {} } = res ; const { result = {} } = res ;
const { records = [], total = 0 } = result; const { records = [], total = 0 } = result;
this.setState({ this.setState({
...@@ -122,7 +122,7 @@ class WatchDataModal extends React.Component { ...@@ -122,7 +122,7 @@ class WatchDataModal extends React.Component {
const { visible,size,dataSource,totalCount,query} = this.state; const { visible,size,dataSource,totalCount,query} = this.state;
return ( return (
<Modal <Modal
title="视频课观看数据" title="图文课观看数据"
visible={visible} visible={visible}
footer={null} footer={null}
onCancel={this.onClose} onCancel={this.onClose}
......
src/modules/course-manage/modal/PreviewGraphicsModal.jsx 0 → 100644
import React from 'react';
import { Modal } from 'antd';
import './PreviewGraphicsModal.less';
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
class PreviewGraphicsModal extends React.Component {
constructor(props) {
super(props);
this.state = {
type: 'detail',
}
}
render() {
const { courseBasicInfo, courseIntroInfo } = this.props;
const { coverUrl, courseName, categoryName } = courseBasicInfo;
const { courseMedia, introduce } = courseIntroInfo;
const { type } = this.state;
return (
<Modal
title="预览"
visible={true}
width={680}
onCancel={this.props.close}
footer={null}
maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
className="preview-live-graphics-modal"
>
<div className="container__wrap">
<div className="container">
<div className="container__header">
<img src={coverUrl || defaultCoverUrl} className="course-cover" />
</div>
<div className="container__body">
<div className="title__name">{courseName}</div>
<div className="title__categery">课程分类：{categoryName}</div>
</div>
<div className="container__introduction">
<div className="title">
<span
className={`title-word${type === 'detail' ? ' selected' : ''}`}
onClick={() => this.setState({ type: 'detail' })}
>图文详情</span>
<span
className={`title-word${type === 'introduction' ? ' selected' : ''}`}
onClick={() => this.setState({ type: 'introduction' })}
>图文简介</span>
</div>
<div className="container__introduction__list editor-box">
<div
className="intro-item text"
dangerouslySetInnerHTML={{
__html: type === 'detail' ? courseMedia : introduce
}}
/>
</div>
</div>
</div>
</div>
</Modal>
)
}
}
export default PreviewGraphicsModal;
src/modules/course-manage/modal/PreviewGraphicsModal.less 0 → 100644
.preview-live-graphics-modal {
.ant-modal-body {
background-image: url('https://image.xiaomaiketang.com/xm/xZWdziTCAf.png');
background-size: 100% 100%;
}
.container__wrap {
width: 340px;
height: 618px;
padding: 67px 46px 48px 47px;
margin: auto;
background-image: url('https://image.xiaomaiketang.com/xm/DHMzHiGc2E.png');
background-size: 100% 100%;
}
.container {
overflow: scroll;
height: 100%;;
.course-cover, .course-url {
width: 100%;
height: 141px;
background: #000;
}
&__body {
background-color: #FFF;
padding: 7px 0 11px 0;;
.title__name {
color: #333333;
font-weight: 500;
}
.title__categery {
font-size: 12px;
color: #999999;
}
}
&__introduction {
margin-top: 10px;
padding: 12px 0;
position: relative;
&::after {
content: '';
position: absolute;
width: 241px;
top: -10px;
height: 10px;
background: #F4F6FA;
}
.title {
height: 24px;
display: flex;
align-items: center;
font-size: 12px;
color: #333333;
padding: 0 10px;
border-bottom: 1px solid #E8E8E8;
.title-word {
position: relative;
margin-right: 15px;
cursor: pointer;
}
.selected {
color: #FFB714;
&::after {
content: '';
position: absolute;
bottom: -4px;
width: 20px;
height: 1px;
background: #FFB714;
left: 50%;
transform: translateX(-50%);
}
}
}
&__list {
margin-top: 12px;
.intro-item:not(:first-child) {
margin-top: 13px;
}
.text {
color: #666;
line-height: 17px;
p {
font-size: 12px;
}
}
.picture {
img {
width: 100%;
}
}
}
}
}
}
\ No newline at end of file
src/modules/course-manage/modal/ShareLiveModal.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-07-20 19:12:49 * @Date: 2020-07-20 19:12:49
* @Last Modified by: 吴文洁 * @Last Modified by: chenshu
* @Last Modified time: 2020-07-20 20:25:13 * @Last Modified time: 2021-03-16 17:41:40
* @Description: 大班直播分享弹窗 * @Description: 大班直播分享弹窗
*/ */
...@@ -130,16 +130,16 @@ class ShareLiveModal extends React.Component { ...@@ -130,16 +130,16 @@ class ShareLiveModal extends React.Component {
} }
render() { render() {
const { needStr, data, type } = this.props; const { needStr, data, type, title } = this.props;
const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data; const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data;
const { shareUrl ,imgData,showImg,time} = this.state; const { shareUrl ,imgData,showImg,time} = this.state;
// 判断是否是默认图, 默认图不需要在URL后面增加字符串 // 判断是否是默认图, 默认图不需要在URL后面增加字符串
const isDefaultCover = coverUrl === DEFAULT_COVER; const isDefaultCover = coverUrl === DEFAULT_COVER;
let coverImgSrc = coverUrl; let coverImgSrc = coverUrl;
if(type === 'videoClass'){ if(type === 'videoClass'){
if(!coverUrl || isDefaultCover){ if((!coverUrl || isDefaultCover) && title !== '图文课'){
coverImgSrc = `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring` coverImgSrc = `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring`
} }
}else{ }else{
...@@ -153,7 +153,7 @@ class ShareLiveModal extends React.Component { ...@@ -153,7 +153,7 @@ class ShareLiveModal extends React.Component {
return ( return (
<Modal <Modal
title={type === 'videoClass' ? '分享视频课' : '分享直播课'} title={`分享${title}`}
width={680} width={680}
visible={true} visible={true}
footer={null} footer={null}
...@@ -197,10 +197,10 @@ class ShareLiveModal extends React.Component { ...@@ -197,10 +197,10 @@ class ShareLiveModal extends React.Component {
<div className="share-poster right__item"> <div className="share-poster right__item">
<div className="title">① 海报分享</div> <div className="title">① 海报分享</div>
{ type === "liveClass" && { type === "liveClass" &&
<div className="sub-title">用户可通过微信扫描海报二维码，观看直播</div> <div className="sub-title">用户可通过微信扫描海报二维码，观看{title}</div>
} }
{ type === "videoClass" && { type === "videoClass" &&
<div className="sub-title">用户可通过微信识别二维码，报名观看视频</div> <div className="sub-title">用户可通过微信识别二维码，报名观看{title}</div>
} }
<div className="content" onClick={this.handleDownloadPoster}>下载海报</div> <div className="content" onClick={this.handleDownloadPoster}>下载海报</div>
...@@ -209,10 +209,10 @@ class ShareLiveModal extends React.Component { ...@@ -209,10 +209,10 @@ class ShareLiveModal extends React.Component {
<div className="share-url right__item"> <div className="share-url right__item">
<div className="title">② 链接分享</div> <div className="title">② 链接分享</div>
{ type === "liveClass" && { type === "liveClass" &&
<div className="sub-title">用户可通过微信打开以下链接，观看直播</div> <div className="sub-title">用户可通过微信打开以下链接，观看{title}</div>
} }
{ type === "videoClass" && { type === "videoClass" &&
<div className="sub-title">用户可通过打开链接，报名观看视频</div> <div className="sub-title">用户可通过打开链接，报名观看{title}</div>
} }
<div className="content url-content"> <div className="content url-content">
<div className="share-url" id="shareUrl">{shareUrl}</div> <div className="share-url" id="shareUrl">{shareUrl}</div>
......
src/modules/course-manage/video-course/components/VideoCourseList.jsx
...@@ -311,6 +311,7 @@ class VideoCourseList extends React.Component { ...@@ -311,6 +311,7 @@ class VideoCourseList extends React.Component {
needStr={needStr} needStr={needStr}
data={shareData} data={shareData}
type="videoClass" type="videoClass"
title="视频课"
close={() => { close={() => {
this.setState({ this.setState({
shareLiveModal: null shareLiveModal: null
......
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