Skip to content

X
xiaomai-cloud-class-web
Commit 5e3e3165 by chenshu
Options

fix:merge

parents 292c3f1a 0f16d3e7
Showing with 216 additions and 226 deletions
src/core/upload.js
...@@ -151,7 +151,7 @@ class Upload { ...@@ -151,7 +151,7 @@ class Upload {
if (!string) return success(); if (!string) return success();
const params = { const params = {
accessTypeEnum: "PUBLIC", accessTypeEnum: "PUBLIC",
bizCode: 'CLOUD_CLASS_COMMON', bizCode: 'CLOUD_CLASS_COURSE',
instId: User.getStoreId(), instId: User.getStoreId(),
resourceName: name, resourceName: name,
} }
......
src/modules/course-manage/components/AddLiveIntro.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-23 17:39:50
* @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 './GraphicsEditor';
import User from '@/common/js/user'; import User from '@/common/js/user';
import UploadOss from '@/core/upload'; import UploadOss from '@/core/upload';
import './AddLiveIntro.less'; import './AddLiveIntro.less';
...@@ -138,32 +138,10 @@ class AddLiveIntro extends React.Component { ...@@ -138,32 +138,10 @@ class AddLiveIntro extends React.Component {
) )
} }
handleChangeIntro = (index, value, length) => { changeIntro = (value) => {
const { liveCourseMediaRequests } = this.props.data; this.props.onChange('introduce', value);
console.log('index',index);
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')
...@@ -176,9 +154,8 @@ class AddLiveIntro extends React.Component { ...@@ -176,9 +154,8 @@ class AddLiveIntro extends React.Component {
} }
render() { render() {
const {liveType, isXiaomai, isEdit, data: { introduction, needRecord,whetherVisitorsJoin,liveCourseMediaRequests = [], liveCourseWarmMedia = {} } } = this.props; const {liveType, isXiaomai, isEdit, data: { id, introduce, needRecord,whetherVisitorsJoin, loadintroduce, liveCourseWarmMedia = {} } } = this.props;
const { showCutModal, warmUrl, showSelectFileModal, diskList, imageFile,selectType} = this.state const { showCutModal, warmUrl, showSelectFileModal, diskList, imageFile,selectType} = this.state
console.log('liveCourseMediaRequests',liveCourseMediaRequests);
return ( return (
<div className="add-live__intro-info"> <div className="add-live__intro-info">
<div className="playback" > <div className="playback" >
...@@ -195,7 +172,7 @@ class AddLiveIntro extends React.Component { ...@@ -195,7 +172,7 @@ class AddLiveIntro extends React.Component {
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span={8}> <Col span={24}>
<Radio value="NO"> <Radio value="NO">
手动录制 手动录制
<span className="playback__text">讲师手动选择何时开始录制</span> <span className="playback__text">讲师手动选择何时开始录制</span>
...@@ -266,50 +243,20 @@ class AddLiveIntro extends React.Component { ...@@ -266,50 +243,20 @@ class AddLiveIntro extends React.Component {
<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">
liveCourseMediaRequests.map((item, index) => { {(!id || loadintroduce) &&
if (item.mediaType === 'TEXT') { <GraphicsEditor
return ( id="intro"
<div className="intro-list__item" key={item.key}> isIntro={true}
<EditorBox detail={{
detail={{ content: introduce
content: item.mediaContent }}
}} onChange={(val) => { this.changeIntro(val) }}
onChange={(val, length) => { this.handleChangeIntro(index, val, length) }} />
/> }
{this.renderLittleIcon(index)}
</div>
)
}
if (item.mediaType === 'PICTURE') {
return (
<div className="intro-list__item picture" key={index}>
<div className="img__wrap">
<img src={item.mediaUrl} />
</div>
{this.renderLittleIcon(index)}
</div>
)
}
})
}
</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>
{/* 选择暖场图文件弹窗 */} {/* 选择暖场图文件弹窗 */}
......
src/modules/course-manage/components/GraphicsEditor.jsx
...@@ -127,7 +127,6 @@ class GraphicsEditor extends React.Component { ...@@ -127,7 +127,6 @@ class GraphicsEditor extends React.Component {
'xmimage', 'xmimage',
'xmvideo', 'xmvideo',
'table', 'table',
'code',
'splitLine', 'splitLine',
'undo', 'undo',
'redo', 'redo',
...@@ -154,7 +153,10 @@ class GraphicsEditor extends React.Component { ...@@ -154,7 +153,10 @@ class GraphicsEditor extends React.Component {
return str return str
} }
this.editorInt.config.onchange = (html) => { this.editorInt.config.onchange = (html) => {
const textLength = this.editorInt.txt.text().replace(/\&nbsp\;/ig, ' ').length; const videoCount = ((html || '').match(/<iframe/g) || []).length;
const imageCount = ((html || '').match(/<img/g) || []).length;
const textLength = this.editorInt.txt.text().replace(/\&nbsp\;/ig, ' ').length + videoCount + imageCount;
console.log(html, 777777)
this.setState({ textLength }, () => { this.setState({ textLength }, () => {
onChange(html, this.state.textLength); onChange(html, this.state.textLength);
}) })
...@@ -165,10 +167,10 @@ class GraphicsEditor extends React.Component { ...@@ -165,10 +167,10 @@ class GraphicsEditor extends React.Component {
render() { render() {
const { editorId, textLength } = this.state; const { editorId, textLength } = this.state;
const { limitLength = 1000 } = this.props; const { limitLength = 1000, isIntro } = this.props;
return <div className="wang-editor-container "> return <div className={`graphics-editor-container${isIntro ? ' introduce' : ''}`}>
<div className="editor-box" id={`editor${editorId}`}></div> <div className="editor-box" id={`editor${editorId}`}></div>
{textLength > limitLength && <div className="editor-tips">超了{textLength - limitLength}个字</div>} <div className="editor-tips">({textLength}/100000)</div>
</div> </div>
} }
} }
......
src/modules/course-manage/components/GraphicsEditor.less
.wang-editor-container { .graphics-editor-container {
border: 1px solid #E8E8E8; border: 1px solid #E8E8E8;
border-radius: 4px; border-radius: 4px;
width: 552px; width: 702px;
height: 510px;
position: relative; position: relative;
.w-e-text p, .w-e-text p,
...@@ -14,30 +15,38 @@ ...@@ -14,30 +15,38 @@
.w-e-text pre { .w-e-text pre {
margin: 0; margin: 0;
} }
.w-e-menu .w-e-panel-container { .editor-box {
margin-top: 0 !important; height: 100%;
} }
.w-e-toolbar { .w-e-toolbar {
background-color: #fff !important; background-color: #fff !important;
border: none !important; border: none !important;
border-bottom: 1px solid #E8E8E8 !important; border-bottom: 1px solid #E8E8E8 !important;
width: 700px;
} }
.w-e-text-container { .w-e-text-container {
border: none !important; border: none !important;
height: 88px !important; height: ~'calc(100% - 81px)' !important;
} }
.editor-tips { .editor-tips {
position: absolute; position: absolute;
top: 5px; bottom: 5px;
right: 8px; right: 8px;
color: #f5222d; color: #666;
z-index: 1;
} }
.w-e-full-screen-editor { .w-e-full-screen-editor {
.w-e-text-container { .w-e-text-container {
height: ~'calc(100vh - 81px)' !important; height: ~'calc(100vh - 81px)' !important;
} }
} }
&.introduce {
height: 200px;
.w-e-text-container {
height: ~'calc(100% - 41px)' !important;
}
}
} }
\ No newline at end of file
src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
...@@ -66,7 +66,7 @@ class AddGraphicsCourse extends React.Component { ...@@ -66,7 +66,7 @@ class AddGraphicsCourse extends React.Component {
courseCatalogList:[], //分类列表 courseCatalogList:[], //分类列表
categoryId:null, //分类的Id值 categoryId:null, //分类的Id值
whetherVisitorsJoin: 'NO', // 是否允许游客加入 whetherVisitorsJoin: 'NO', // 是否允许游客加入
isContent: '', isContent: true,
} }
} }
...@@ -82,11 +82,20 @@ class AddGraphicsCourse extends React.Component { ...@@ -82,11 +82,20 @@ class AddGraphicsCourse extends React.Component {
} }
} }
componentWillUnmount() {
this.removeBus();
}
initBus = () => { initBus = () => {
Bus.bind('graphicsEditorImage', this.uploadImage) Bus.bind('graphicsEditorImage', this.uploadImage)
Bus.bind('graphicsEditorVideo', this.uploadVideo) Bus.bind('graphicsEditorVideo', this.uploadVideo)
} }
removeBus = () => {
Bus.unbind('graphicsEditorImage', this.uploadImage)
Bus.unbind('graphicsEditorVideo', this.uploadVideo)
}
uploadImage = () => { uploadImage = () => {
this.setState({ showSelectImageModal: true }) this.setState({ showSelectImageModal: true })
} }
...@@ -104,17 +113,17 @@ class AddGraphicsCourse extends React.Component { ...@@ -104,17 +113,17 @@ class AddGraphicsCourse extends React.Component {
}); });
} }
catalogChange= (value) => { catalogChange= (value, options) => {
const changeValueLength = value.length; const changeValueLength = value.length;
switch (changeValueLength){ switch (changeValueLength){
case 1: case 1:
this.setState({categoryId:value[0]}); this.setState({ categoryId: value[0], categoryName: options[0].categoryName });
break; break;
case 2: case 2:
this.setState({categoryId:value[1]}); this.setState({ categoryId: value[1], categoryName: `${options[0].categoryName}-${options[1].categoryName}` });
break; break;
default: default:
this.setState({categoryId:null}); this.setState({ categoryId: null, categoryName: '' });
break; break;
} }
} }
...@@ -155,7 +164,6 @@ class AddGraphicsCourse extends React.Component { ...@@ -155,7 +164,6 @@ class AddGraphicsCourse extends React.Component {
} }
return item; return item;
}) })
!hasIntro && this.setState({ loadintroduce: true })
let categoryName; let categoryName;
if( categoryTwoName ){ if( categoryTwoName ){
...@@ -164,6 +172,7 @@ class AddGraphicsCourse extends React.Component { ...@@ -164,6 +172,7 @@ class AddGraphicsCourse extends React.Component {
categoryName = `${categoryOneName}`; categoryName = `${categoryOneName}`;
} }
this.setState({ this.setState({
loadintroduce: !hasIntro,
coverId, coverId,
coverUrl, coverUrl,
courseName, courseName,
...@@ -276,7 +285,6 @@ class AddGraphicsCourse extends React.Component { ...@@ -276,7 +285,6 @@ class AddGraphicsCourse extends React.Component {
courseMedia, courseMedia,
introduce, introduce,
} }
const previewGraphicsModal = ( const previewGraphicsModal = (
<PreviewGraphicsModal <PreviewGraphicsModal
courseBasicInfo={courseBasinInfo} courseBasicInfo={courseBasinInfo}
...@@ -300,7 +308,7 @@ class AddGraphicsCourse extends React.Component { ...@@ -300,7 +308,7 @@ class AddGraphicsCourse extends React.Component {
const { ossUrl } = file; const { ossUrl } = file;
const { courseMedia } = this.state; const { courseMedia } = this.state;
this.setState({ this.setState({
courseMedia: `${courseMedia}<p style="width: 100%;padding-top: 56.25%;position: relative;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="${ossUrl}" /><br><p>` courseMedia: `${courseMedia}<p style="width: 100%;padding-top: 56.25%;position: relative;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="${ossUrl}"></iframe><br/></p><p><br/></p>`
}); });
} }
...@@ -311,7 +319,7 @@ class AddGraphicsCourse extends React.Component { ...@@ -311,7 +319,7 @@ class AddGraphicsCourse extends React.Component {
const { ossUrl } = file; const { ossUrl } = file;
const { courseMedia, introduce, isContent } = this.state; const { courseMedia, introduce, isContent } = this.state;
this.setState({ this.setState({
[isContent ? 'courseMedia' : 'introduce']: `${isContent ? courseMedia : introduce}<p><img style="max-width: 100%;" src="${ossUrl}" /><br><p>` [isContent ? 'courseMedia' : 'introduce']: `${isContent ? courseMedia : introduce}<p><img style="max-width: 100%;" src="${ossUrl}" /><br/><p>`
}); });
} }
......
src/modules/course-manage/graphics-course/components/AddGraphicsIntro.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @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-03-22 17:43:10 * @Last Modified time: 2021-03-24 14:40:40
* @Description: 添加直播-简介 * @Description: 添加直播-简介
*/ */
...@@ -26,8 +26,9 @@ class AddGraphicsIntro extends React.Component { ...@@ -26,8 +26,9 @@ class AddGraphicsIntro extends React.Component {
this.state = { this.state = {
showSelectFileModal: false, showSelectFileModal: false,
diskList: [], diskList: [],
selectType:null selectType: null,
} }
this.isContent = true;
} }
componentDidMount() { componentDidMount() {
...@@ -49,8 +50,10 @@ class AddGraphicsIntro extends React.Component { ...@@ -49,8 +50,10 @@ class AddGraphicsIntro extends React.Component {
clickEditor = (e) => { clickEditor = (e) => {
if (e && e.target.closest('.content-editor')) { if (e && e.target.closest('.content-editor')) {
this.isContent = true this.isContent = true
console.log(11111111)
} else if (e && e.target.closest('.introduce-editor')) { } else if (e && e.target.closest('.introduce-editor')) {
this.isContent = false this.isContent = false
console.log(222222222)
} }
} }
...@@ -163,15 +166,15 @@ class AddGraphicsIntro extends React.Component { ...@@ -163,15 +166,15 @@ class AddGraphicsIntro extends React.Component {
</Col> </Col>
<Col span={21}> <Col span={21}>
<div className="desc"> <div className="desc">
<div>开启：此图文课将在用户店铺的图文课列表中出现</div> <div>开启：图文课将在用户学员表中展示</div>
<div>关闭：此图文课将在用户店铺的图文课列表中隐藏</div> <div>关闭：图文课将在用户学员表中隐藏</div>
</div> </div>
</Col> </Col>
</Row> </Row>
</div> </div>
</div> </div>
<div className="introduce"> <div className="introduce required">
<span className="label">课程内容：</span> <span className="label" style={{ marginTop: 5 }}>课程内容：</span>
<div className="content"> <div className="content">
<div className="intro-list"> <div className="intro-list">
<div className="intro-list__item content-editor"> <div className="intro-list__item content-editor">
......
src/modules/course-manage/graphics-course/modal/WatchDataModal.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-05-19 11:01:31 * @Date: 2020-05-19 11:01:31
* @Last Modified by: chenshu * @Last Modified by: chenshu
* @Last Modified time: 2021-03-19 16:25:31 * @Last Modified time: 2021-03-24 15:13:38
* @Description 余额异常弹窗 * @Description 余额异常弹窗
*/ */
import React from 'react'; import React from 'react';
...@@ -107,7 +107,7 @@ class WatchDataModal extends React.Component { ...@@ -107,7 +107,7 @@ class WatchDataModal extends React.Component {
} }
}, },
{ {
title: '观看时长', title: '观看总时长',
key: 'watchDuration', key: 'watchDuration',
dataIndex: 'watchDuration', dataIndex: 'watchDuration',
render: (val) => { render: (val) => {
...@@ -119,7 +119,7 @@ class WatchDataModal extends React.Component { ...@@ -119,7 +119,7 @@ class WatchDataModal extends React.Component {
key: 'progress', key: 'progress',
dataIndex: 'progress', dataIndex: 'progress',
render: (val) => { render: (val) => {
return <span>{val || 0}%</span> return <span>{val === 100 ? '已完成' : `${val || 0}%`}</span>
} }
} }
]; ];
......
src/modules/course-manage/modal/PreviewCourseModal.jsx
...@@ -76,7 +76,7 @@ class PreviewCourseModal extends React.Component { ...@@ -76,7 +76,7 @@ class PreviewCourseModal extends React.Component {
const { courseBasicInfo, courseClassInfo = {}, courseIntroInfo, type,courseState,origin} = this.props; const { courseBasicInfo, courseClassInfo = {}, courseIntroInfo, type,courseState,origin} = this.props;
const { coverUrl, courseName, scheduleVideoUrl,videoDuration} = courseBasicInfo; const { coverUrl, courseName, scheduleVideoUrl,videoDuration} = courseBasicInfo;
const { liveDate, calendarTime,startTime,endTime,timeHorizonStart, timeHorizonEnd, teacherName } = courseClassInfo; const { liveDate, calendarTime,startTime,endTime,timeHorizonStart, timeHorizonEnd, teacherName } = courseClassInfo;
const { liveCourseMediaRequests } = courseIntroInfo; const { introduce } = courseIntroInfo;
let liveDateStr, startTimeStr, endTimeStr; let liveDateStr, startTimeStr, endTimeStr;
...@@ -177,28 +177,12 @@ class PreviewCourseModal extends React.Component { ...@@ -177,28 +177,12 @@ class PreviewCourseModal extends React.Component {
<div className="container__introduction__title">直播课简介</div> <div className="container__introduction__title">直播课简介</div>
} }
<div className="container__introduction__list editor-box"> <div className="container__introduction__list editor-box">
{ <div
liveCourseMediaRequests.map((item, index) => { className="intro-item text"
if (item.mediaType === 'TEXT') { dangerouslySetInnerHTML={{
return ( __html: introduce
<div }}
className="intro-item text" />
dangerouslySetInnerHTML={{
__html: item.mediaContent
}}
/>
)
}
if (item.mediaType === 'PICTURE') {
return (
<div className="intro-item picture">
<img src={item.mediaUrl} />
</div>
)
}
})
}
</div> </div>
</div> </div>
</div> </div>
......
src/modules/course-manage/modal/PreviewCourseModal.less
...@@ -122,19 +122,14 @@ ...@@ -122,19 +122,14 @@
margin-top: 13px; margin-top: 13px;
} }
.text { color: #666;
color: #666;
line-height: 17px;
p { p {
font-size: 12px; font-size: 12px;
}
} }
.picture { img {
img { width: 100%;
width: 100%;
}
} }
} }
} }
......
src/modules/course-manage/modal/PreviewGraphicsModal.less
...@@ -81,20 +81,12 @@ ...@@ -81,20 +81,12 @@
.intro-item:not(:first-child) { .intro-item:not(:first-child) {
margin-top: 13px; margin-top: 13px;
} }
color: #666;
.text { p {
color: #666; font-size: 12px;
line-height: 17px;
p {
font-size: 12px;
}
} }
img {
.picture { max-width: 100%;
img {
width: 100%;
}
} }
} }
} }
......
src/modules/course-manage/video-course/AddVideoCourse.jsx
...@@ -21,9 +21,13 @@ import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFile ...@@ -21,9 +21,13 @@ import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFile
import PreviewCourseModal from '../modal/PreviewCourseModal'; import PreviewCourseModal from '../modal/PreviewCourseModal';
import StoreService from "@/domains/store-domain/storeService"; import StoreService from "@/domains/store-domain/storeService";
import CourseService from "@/domains/course-domain/CourseService"; 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 _ from "underscore"; import _ from "underscore";
import Upload from '@/core/upload'; import Upload from '@/core/upload';
import { randomString } from '@/domains/basic-domain/utils';
import $ from 'jquery';
import Bus from '../../../core/bus'
// import PhotoClip from 'photoclip'; // import PhotoClip from 'photoclip';
import './AddVideoCourse.less'; import './AddVideoCourse.less';
...@@ -76,6 +80,7 @@ class AddVideoCourse extends React.Component { ...@@ -76,6 +80,7 @@ class AddVideoCourse extends React.Component {
whetherVisitorsJoin:'NO', // 是否允许游客加入 whetherVisitorsJoin:'NO', // 是否允许游客加入
showSelectCoverModal:false, showSelectCoverModal:false,
cutImageBlob: null, cutImageBlob: null,
introduce: '',
} }
} }
...@@ -85,7 +90,21 @@ class AddVideoCourse extends React.Component { ...@@ -85,7 +90,21 @@ class AddVideoCourse extends React.Component {
if (pageType === 'edit') { if (pageType === 'edit') {
this.handleFetchScheudleDetail(id); this.handleFetchScheudleDetail(id);
} }
this.initBus()
} }
initBus = () => {
Bus.bind('graphicsEditorImage', this.uploadIntroImage)
}
removeBus = () => {
Bus.unbind('graphicsEditorImage', this.uploadIntroImage)
}
uploadIntroImage = () => {
this.setState({ showSelectImageModal: true })
}
//获取分类列表 //获取分类列表
getCourseCatalogList = ()=>{ getCourseCatalogList = ()=>{
StoreService.getCourseCatalogList({current:1,size:1000}).then((res) => { StoreService.getCourseCatalogList({current:1,size:1000}).then((res) => {
...@@ -132,6 +151,7 @@ class AddVideoCourse extends React.Component { ...@@ -132,6 +151,7 @@ class AddVideoCourse extends React.Component {
let scheduleMedia = []; let scheduleMedia = [];
let scheduleVideoId; let scheduleVideoId;
let scheduleVideoUrl; let scheduleVideoUrl;
let hasIntro;
courseMediaVOS.map((item) => { courseMediaVOS.map((item) => {
switch (item.contentType){ switch (item.contentType){
...@@ -147,7 +167,8 @@ class AddVideoCourse extends React.Component { ...@@ -147,7 +167,8 @@ class AddVideoCourse extends React.Component {
videoType = item.mediaType; videoType = item.mediaType;
break; break;
case "INTRO": case "INTRO":
scheduleMedia = [...scheduleMedia,item] hasIntro = true;
this.getTextDetail('introduce', item.mediaUrl);
break; break;
default: default:
break; break;
...@@ -162,6 +183,7 @@ class AddVideoCourse extends React.Component { ...@@ -162,6 +183,7 @@ class AddVideoCourse extends React.Component {
categoryName = `${categoryOneName}`; categoryName = `${categoryOneName}`;
} }
this.setState({ this.setState({
loadintroduce: !hasIntro,
coverId, coverId,
coverUrl, coverUrl,
videoType, videoType,
...@@ -179,6 +201,18 @@ class AddVideoCourse extends React.Component { ...@@ -179,6 +201,18 @@ class AddVideoCourse 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, [`load${key}`]: true });
}
})
}
handleGoBack = () => { handleGoBack = () => {
const { const {
...@@ -259,8 +293,8 @@ class AddVideoCourse extends React.Component { ...@@ -259,8 +293,8 @@ class AddVideoCourse extends React.Component {
scheduleVideoUrl, scheduleVideoUrl,
courseName, courseName,
scheduleMedia, scheduleMedia,
videoDuration videoDuration,
introduce,
} = this.state; } = this.state;
const courseBasinInfo = { const courseBasinInfo = {
...@@ -270,7 +304,8 @@ class AddVideoCourse extends React.Component { ...@@ -270,7 +304,8 @@ class AddVideoCourse extends React.Component {
videoDuration videoDuration
} }
const courseIntroInfo = { const courseIntroInfo = {
liveCourseMediaRequests: scheduleMedia liveCourseMediaRequests: scheduleMedia,
introduce,
} }
const previewCourseModal = ( const previewCourseModal = (
...@@ -330,13 +365,14 @@ class AddVideoCourse extends React.Component { ...@@ -330,13 +365,14 @@ class AddVideoCourse extends React.Component {
scheduleVideoUrl, scheduleVideoUrl,
categoryId, categoryId,
shelfState, shelfState,
whetherVisitorsJoin whetherVisitorsJoin,
introduce,
} = this.state; } = this.state;
const commonParams = { const commonParams = {
videoName, videoName,
videoDuration, videoDuration,
scheduleVideoId, courseMediaId: scheduleVideoId,
scheduleMedia: scheduleMedia.filter(item => !!item.mediaContent), scheduleMedia: scheduleMedia.filter(item => !!item.mediaContent),
categoryId, categoryId,
courseName, courseName,
...@@ -344,33 +380,40 @@ class AddVideoCourse extends React.Component { ...@@ -344,33 +380,40 @@ class AddVideoCourse extends React.Component {
operatorId:User.getStoreUserId(), operatorId:User.getStoreUserId(),
storeId:User.getStoreId(), storeId:User.getStoreId(),
shelfState, shelfState,
whetherVisitorsJoin whetherVisitorsJoin,
courseType: 'VOICE',
}; };
// 校验必填字段:课程名称, 课程视频 // 校验必填字段:课程名称, 课程视频
this.handleValidate(courseName, scheduleVideoId,categoryId, scheduleMedia).then((res) => { this.handleValidate(courseName, scheduleVideoId,categoryId, scheduleMedia).then((res) => {
if (!res) return; if (!res) return;
if (pageType === 'add') { Upload.uploadTextToOSS(introduce, `${randomString()}.txt`, (introduceId) => {
CourseService.createVideoSchedule(commonParams).then((res) => { this.submitRemote({ id, pageType, commonParams: { ...commonParams, introduceId } })
if (!res) return; });
message.success("新建成功"); });
window.RCHistory.push({ }
pathname: `/video-course`,
}); submitRemote = ({ id, pageType, commonParams }) => {
}) if (pageType === 'add') {
} else { Service.Hades('public/hades/createMediaCourse', commonParams).then((res) => {
const editParams = { if (!res) return;
courseId:id, message.success("新建成功");
...commonParams, window.RCHistory.push({
} pathname: `/video-course`,
CourseService.editVideoSchedule(editParams).then((res) => {
if (!res) return;
message.success("保存成功");
window.RCHistory.push({
pathname: `/video-course`,
});
}); });
})
} else {
const editParams = {
courseId:id,
...commonParams,
} }
}); Service.Hades('public/hades/editMediaCourse', editParams).then((res) => {
if (!res) return;
message.success("保存成功");
window.RCHistory.push({
pathname: `/video-course`,
});
});
}
} }
handleValidate = (courseName, scheduleVideoId,categoryId,scheduleMedia) => { handleValidate = (courseName, scheduleVideoId,categoryId,scheduleMedia) => {
...@@ -404,6 +447,17 @@ class AddVideoCourse extends React.Component { ...@@ -404,6 +447,17 @@ class AddVideoCourse extends React.Component {
handleSelectCover = (file)=> { handleSelectCover = (file)=> {
this.uploadImage(file); this.uploadImage(file);
} }
handleSelectImage = (file) => {
this.setState({
showSelectImageModal: false
})
const { ossUrl } = file;
const { introduce } = this.state;
this.setState({
introduce: `${introduce}<p><img style="max-width: 100%;" src="${ossUrl}" /><br/><p>`
});
}
//上传图片 //上传图片
uploadImage = (imageFile) => { uploadImage = (imageFile) => {
...@@ -516,7 +570,11 @@ class AddVideoCourse extends React.Component { ...@@ -516,7 +570,11 @@ class AddVideoCourse extends React.Component {
showCutModal, showSelectFileModal, diskList, showCutModal, showSelectFileModal, diskList,
imageFile, joinType, videoName, videoType,shelfState, imageFile, joinType, videoName, videoType,shelfState,
categoryName,courseCatalogList,whetherVisitorsJoin, categoryName,courseCatalogList,whetherVisitorsJoin,
visible,showSelectCoverModal,hasImgReady,cutImageBlob visible,showSelectCoverModal,hasImgReady,cutImageBlob,
introduce,
loadintroduce,
id,
showSelectImageModal,
} = this.state; } = this.state;
// 已选择的上课学员数量 // 已选择的上课学员数量
...@@ -605,10 +663,12 @@ class AddVideoCourse extends React.Component { ...@@ -605,10 +663,12 @@ class AddVideoCourse extends React.Component {
<div className="intro-info mt16"> <div className="intro-info mt16">
<AddVideoIntro <AddVideoIntro
data={{ data={{
id,
liveCourseMediaRequests: scheduleMedia, liveCourseMediaRequests: scheduleMedia,
shelfState, shelfState,
whetherVisitorsJoin, whetherVisitorsJoin,
label: '视频课简介' introduce,
loadintroduce,
}} }}
onChange={this.handleChangeForm} onChange={this.handleChangeForm}
/> />
...@@ -642,6 +702,21 @@ class AddVideoCourse extends React.Component { ...@@ -642,6 +702,21 @@ class AddVideoCourse extends React.Component {
onSelect={this.handleSelectVideo} onSelect={this.handleSelectVideo}
/> />
} }
{showSelectImageModal &&
<SelectPrepareFileModal
key="basic"
operateType="select"
multiple={false}
accept="image/jpeg,image/png,image/jpg"
selectTypeList={['JPG', 'JPEG', 'PNG']}
tooltip='支持文件类型：jpg、jpeg、png'
isOpen={showSelectImageModal}
onClose={() => {
this.setState({ showSelectImageModal: false })
}}
onSelect={this.handleSelectImage}
/>
}
{showSelectCoverModal && {showSelectCoverModal &&
<SelectPrepareFileModal <SelectPrepareFileModal
key="basic" key="basic"
......
src/modules/course-manage/video-course/components/AddVideoIntro.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-23 18:12:05
* @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 './AddVideoIntro.less';
...@@ -144,6 +144,10 @@ class AddVideoIntro extends React.Component { ...@@ -144,6 +144,10 @@ class AddVideoIntro extends React.Component {
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests); this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
} }
changeIntro = (value) => {
this.props.onChange('introduce', value);
}
handleAddIntroText = () => { handleAddIntroText = () => {
const { liveCourseMediaRequests } = this.props.data; const { liveCourseMediaRequests } = this.props.data;
liveCourseMediaRequests.push({ liveCourseMediaRequests.push({
...@@ -180,7 +184,7 @@ class AddVideoIntro extends React.Component { ...@@ -180,7 +184,7 @@ class AddVideoIntro extends React.Component {
} }
render() { render() {
const {data: { whetherVisitorsJoin,liveCourseMediaRequests = [], shelfState} } = this.props; const {data: { whetherVisitorsJoin,liveCourseMediaRequests = [], shelfState, id, introduce, loadintroduce } } = 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">
...@@ -217,50 +221,20 @@ class AddVideoIntro extends React.Component { ...@@ -217,50 +221,20 @@ class AddVideoIntro extends React.Component {
<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">
liveCourseMediaRequests.map((item, index) => { {(!id || loadintroduce) &&
if (item.mediaType === 'TEXT') { <GraphicsEditor
return ( id="intro"
<div className="intro-list__item" key={item.key}> isIntro={true}
<EditorBox detail={{
detail={{ content: introduce
content: item.mediaContent }}
}} onChange={(val) => { this.changeIntro(val) }}
onChange={(val, length) => { this.handleChangeIntro(index, val, length) }} />
/> }
{this.renderLittleIcon(index)}
</div>
)
}
if (item.mediaType === 'PICTURE') {
return (
<div className="intro-list__item picture" key={index}>
<div className="img__wrap">
<img src={item.mediaUrl} />
</div>
{this.renderLittleIcon(index)}
</div>
)
}
})
}
</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>
{/* 选择暖场图文件弹窗 */} {/* 选择暖场图文件弹窗 */}
......
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