Skip to content

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

fix:merge

parents 292c3f1a 0f16d3e7
Showing with 388 additions and 319 deletions
src/core/upload.js
......@@ -151,7 +151,7 @@ class Upload {
if (!string) return success();
const params = {
accessTypeEnum: "PUBLIC",
bizCode: 'CLOUD_CLASS_COMMON',
bizCode: 'CLOUD_CLASS_COURSE',
instId: User.getStoreId(),
resourceName: name,
}
......
src/modules/course-manage/AddLive.jsx
/*
* @Author: 吴文洁
* @Date: 2020-07-17 15:49:11
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2020-11-23 22:02:49
* @Last Modified by: chenshu
* @Last Modified time: 2021-03-24 14:13:04
* @Description: 大班互动-添加/编辑直播课
*/
......@@ -12,15 +12,20 @@ import { Button, message, Modal } from 'antd';
import ShowTips from "@/components/ShowTips";
import Breadcrumbs from "@/components/Breadcrumbs";
import Bus from '../../core/bus'
import AddLiveBasic from './components/AddLiveBasic';
import AddLiveClass from './components/AddLiveClass';
import AddLiveIntro from './components/AddLiveIntro';
import { randomString } from '@/domains/basic-domain/utils';
import Upload from '@/core/upload';
import PreviewCourseModal from './modal/PreviewCourseModal';
import SelectPrepareFileModal from '../prepare-lesson/modal/SelectPrepareFileModal';
import CourseService from "@/domains/course-domain/CourseService";
import moment from 'moment';
import User from '@/common/js/user';
import _ from "underscore";
import $ from 'jquery';
import './AddLive.less';
const defaultCover = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
......@@ -97,12 +102,8 @@ class AddLive extends React.Component {
needRecord: 'YES',
whetherVisitorsJoin:'NO',
liveCourseWarmMedia: {},
liveCourseMediaRequests: [{
contentType:"INTRO",
mediaType: 'TEXT',
mediaContent: '',
key: Math.random()
}]
introduce: '',
liveCourseMediaRequests: [],
},
}
}
......@@ -111,7 +112,24 @@ class AddLive extends React.Component {
const { type } = this.state;
if (type === 'edit') {
this.getCourseDetail();
}
}
this.initBus();
}
componentWillUnmount() {
this.removeBus();
}
initBus = () => {
Bus.bind('graphicsEditorImage', this.uploadImage)
}
removeBus = () => {
Bus.unbind('graphicsEditorImage', this.uploadImage)
}
uploadImage = () => {
this.setState({ showSelectImageModal: true })
}
getCourseDetail = () => {
......@@ -140,6 +158,7 @@ class AddLive extends React.Component {
let coverUrl;
let liveCourseMediaRequests = [];
let liveCourseWarmMedia;
let hasIntro = false;
courseMediaVOS.map((item) => {
switch (item.contentType){
case "COVER":
......@@ -150,7 +169,8 @@ class AddLive extends React.Component {
liveCourseWarmMedia = item;
break;
case "INTRO":
liveCourseMediaRequests = [...liveCourseMediaRequests,item]
hasIntro = true;
this.getTextDetail('introduce', item.mediaUrl);
break;
default:
break;
......@@ -200,6 +220,7 @@ class AddLive extends React.Component {
isEdit = false
}
this.setState({
loadintroduce: !hasIntro,
isEdit,
loading: false,
courseState,
......@@ -210,6 +231,21 @@ class AddLive extends React.Component {
})
}
getTextDetail = (key, url) => {
$.ajax({
data: {},
type: 'GET',
url,
contentType:'application/x-www-form-urlencoded; charset=UTF-8',
success: (res) => {
this.setState({ addLiveIntroInfo: { ...this.state.addLiveIntroInfo, [key]: res }, [`load${key}`]: true });
},
error: () => {
message.warning('获取简介失败')
}
})
}
// 修改基本信息
// 修改基本信息
handleChangeBasicInfo = (field, value) => {
......@@ -274,90 +310,99 @@ handleChangeBasicInfo = (field, value) => {
}
this.handleValidate(addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit).then((res) => {
if (!res) return;
const { type } = this.state;
const { courseName,coverUrl,coverId,categoryId} = addLiveBasicInfo;
const {
liveDate,
teacherId,
assistant,
timeHorizonEnd,
timeHorizonStart,
calendarTime,
} = addLiveClassInfo;
Upload.uploadTextToOSS(addLiveIntroInfo.introduce, `${randomString()}.txt`, (introduceId) => {
this.submitRemote({ introduceId, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, id });
}, () => message.warning('上传课程简介失败'));
})
}
let { startTime, endTime } = addLiveClassInfo;
const { liveCourseMediaRequests, needRecord,whetherVisitorsJoin,liveCourseWarmMedia} = addLiveIntroInfo;
submitRemote = ({ introduceId, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, id }) => {
const { type } = this.state;
const { courseName,coverUrl,coverId,categoryId} = addLiveBasicInfo;
const {
liveDate,
teacherId,
assistant,
timeHorizonEnd,
timeHorizonStart,
calendarTime,
} = addLiveClassInfo;
let { startTime, endTime } = addLiveClassInfo;
const { needRecord,whetherVisitorsJoin,liveCourseWarmMedia} = addLiveIntroInfo;
if(type === 'add') {
startTime = startTime;
endTime = endTime;
} else {
const _liveDate = moment(liveDate).format("YYYY-MM-DD");
const _timeHorizonStart = moment(timeHorizonStart).format('HH:mm');
const _timeHorizonEnd = moment(timeHorizonEnd).format('HH:mm');
startTime = moment(_liveDate + ' ' + _timeHorizonStart).format('x');
endTime = moment(_liveDate + ' ' + _timeHorizonEnd).format('x');
}
let coverObj ={
contentType:'COVER',
mediaContent:coverId,
mediaType:'PICTURE',
mediaUrl: coverUrl,
}
let scheduleMediaRequests = [];
if(coverId){
scheduleMediaRequests = [coverObj,...scheduleMediaRequests]
}
if(liveCourseWarmMedia && liveCourseWarmMedia.mediaUrl){
scheduleMediaRequests = [liveCourseWarmMedia,...scheduleMediaRequests]
}
const commonParams = {
adminIds:assistant,
calendarTime,
categoryId,
endTime,
needRecord,
startTime,
courseName: courseName.trim(),
storeId:User.getStoreId(),
teacherId:teacherId,
whetherVisitorsJoin,
scheduleMediaRequests
}
if(type === 'add') {
startTime = startTime;
endTime = endTime;
} else {
const _liveDate = moment(liveDate).format("YYYY-MM-DD");
const _timeHorizonStart = moment(timeHorizonStart).format('HH:mm');
const _timeHorizonEnd = moment(timeHorizonEnd).format('HH:mm');
startTime = moment(_liveDate + ' ' + _timeHorizonStart).format('x');
endTime = moment(_liveDate + ' ' + _timeHorizonEnd).format('x');
}
let coverObj ={
contentType:'COVER',
mediaContent:coverId,
mediaType:'PICTURE',
mediaUrl: coverUrl,
}
let scheduleMediaRequests = [...liveCourseMediaRequests];
if(coverId){
scheduleMediaRequests = [coverObj,...scheduleMediaRequests]
}
if(liveCourseWarmMedia && liveCourseWarmMedia.mediaUrl){
scheduleMediaRequests = [liveCourseWarmMedia,...scheduleMediaRequests]
}
const commonParams = {
adminIds:assistant,
calendarTime,
categoryId,
endTime,
needRecord,
startTime,
courseName: courseName.trim(),
storeId:User.getStoreId(),
teacherId:teacherId,
whetherVisitorsJoin,
scheduleMediaRequests
if (type === 'add') {
const params = {
...commonParams,
operatorId: User.getUserId(),
introduceId,
}
if (type === 'add') {
const params = {
...commonParams,
operatorId:User.getUserId(),
}
CourseService.createLiveCloudCourse(params).then((res) => {
if (res.success){
message.success("新建成功");
window.RCHistory.push({
pathname: `/live-course`,
});
}
});
CourseService.createLiveCloudCourse(params).then((res) => {
if (res.success){
message.success("新建成功");
window.RCHistory.push({
pathname: `/live-course`,
});
}
});
} else {
const params = {
...commonParams,
updateUserId:User.getUserId(),
liveCourseId: id,
}
CourseService.updateLiveCloudCourse(params).then((res) => {
if (res.success){
message.success("更新成功");
window.RCHistory.push({
pathname: `/live-course`,
});
}
});
} else {
const params = {
...commonParams,
updateUserId:User.getUserId(),
liveCourseId: id,
introduceId,
}
})
CourseService.updateLiveCloudCourse(params).then((res) => {
if (res.success){
message.success("更新成功");
window.RCHistory.push({
pathname: `/live-course`,
});
}
});
}
}
handleValidate = (addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit) => {
return new Promise((resolve) => {
const { type } = this.state;
......@@ -498,14 +543,33 @@ handleChangeBasicInfo = (field, value) => {
}
}
handleSelectImage = (file) => {
this.setState({
showSelectImageModal: false
})
const { ossUrl } = file;
const { addLiveIntroInfo } = this.state;
this.setState({
addLiveIntroInfo: {
...addLiveIntroInfo,
introduce: `${addLiveIntroInfo.introduce}<p><img style="max-width: 100%;" src="${ossUrl}" /><br/><p>`
}
});
}
render() {
const {
id, type,
addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo,
isEdit
id,
type,
addLiveBasicInfo,
addLiveClassInfo,
addLiveIntroInfo,
isEdit,
loadintroduce,
showSelectImageModal,
} = this.state;
console.log(loadintroduce, addLiveIntroInfo, 888888)
return (
<div className="page add-live-page">
<Breadcrumbs
......@@ -541,7 +605,7 @@ handleChangeBasicInfo = (field, value) => {
<div className="title">更多信息</div>
<AddLiveIntro
isEdit={isEdit}
data={addLiveIntroInfo}
data={{ ...addLiveIntroInfo, loadintroduce, id }}
onChange={this.handleChangeIntroInfo}
/>
</div>
......@@ -550,10 +614,25 @@ handleChangeBasicInfo = (field, value) => {
<div className="footer">
<Button onClick={this.handleGoBack}>取消</Button>
<Button onClick={this.handleShowPreviewModal}>预览课程介绍</Button>
<Button onClick={this.handleShowPreviewModal}>预览</Button>
<Button type="primary" onClick={_.debounce(() => this.handleSubmit(), 3000, true)}>保存</Button>
</div>
{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}
/>
}
{ this.state.previewLiveCourseModal }
{ this.state.lackConsumeStudentModal }
</div>
......
src/modules/course-manage/components/AddLiveIntro.jsx
/*
* @Author: 吴文洁
* @Date: 2020-07-16 11:05:17
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2020-11-24 14:29:52
* @Last Modified by: chenshu
* @Last Modified time: 2021-03-23 17:39:50
* @Description: 添加直播-简介
*/
import React from 'react';
import { Input, message, Upload, Radio, Row, Col, Button, Popover, Switch } from 'antd';
import Service from '@/common/js/service';
import EditorBox from '../components/EditorBox';
import GraphicsEditor from './GraphicsEditor';
import User from '@/common/js/user';
import UploadOss from '@/core/upload';
import './AddLiveIntro.less';
......@@ -138,32 +138,10 @@ class AddLiveIntro extends React.Component {
)
}
handleChangeIntro = (index, value, length) => {
const { liveCourseMediaRequests } = this.props.data;
console.log('index',index);
liveCourseMediaRequests[index].mediaContent = value;
liveCourseMediaRequests[index].mediaContentLength = length
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
changeIntro = (value) => {
this.props.onChange('introduce', value);
}
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 = ()=>{
if(this.props.data.whetherVisitorsJoin==="NO"){
this.props.onChange('whetherVisitorsJoin','YES')
......@@ -176,9 +154,8 @@ class AddLiveIntro extends React.Component {
}
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
console.log('liveCourseMediaRequests',liveCourseMediaRequests);
return (
<div className="add-live__intro-info">
<div className="playback" >
......@@ -195,7 +172,7 @@ class AddLiveIntro extends React.Component {
</Col>
</Row>
<Row>
<Col span={8}>
<Col span={24}>
<Radio value="NO">
手动录制
<span className="playback__text">讲师手动选择何时开始录制</span>
......@@ -266,50 +243,20 @@ class AddLiveIntro extends React.Component {
<div className="introduce">
<span className="label">直播课简介：</span>
<div className="content">
<div className="intro-list">
{
liveCourseMediaRequests.map((item, index) => {
if (item.mediaType === 'TEXT') {
return (
<div className="intro-list__item" key={item.key}>
<EditorBox
detail={{
content: item.mediaContent
}}
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 className="intro-list">
<div className="intro-list__item introduce-editor">
{(!id || loadintroduce) &&
<GraphicsEditor
id="intro"
isIntro={true}
detail={{
content: introduce
}}
onChange={(val) => { this.changeIntro(val) }}
/>
}
</div>
</div>
</div>
</div>
{/* 选择暖场图文件弹窗 */}
......
src/modules/course-manage/components/GraphicsEditor.jsx
......@@ -127,7 +127,6 @@ class GraphicsEditor extends React.Component {
'xmimage',
'xmvideo',
'table',
'code',
'splitLine',
'undo',
'redo',
......@@ -154,7 +153,10 @@ class GraphicsEditor extends React.Component {
return str
}
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 }, () => {
onChange(html, this.state.textLength);
})
......@@ -165,10 +167,10 @@ class GraphicsEditor extends React.Component {
render() {
const { editorId, textLength } = this.state;
const { limitLength = 1000 } = this.props;
return <div className="wang-editor-container ">
const { limitLength = 1000, isIntro } = this.props;
return <div className={`graphics-editor-container${isIntro ? ' introduce' : ''}`}>
<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>
}
}
......
src/modules/course-manage/components/GraphicsEditor.less
.wang-editor-container {
.graphics-editor-container {
border: 1px solid #E8E8E8;
border-radius: 4px;
width: 552px;
width: 702px;
height: 510px;
position: relative;
.w-e-text p,
......@@ -14,30 +15,38 @@
.w-e-text pre {
margin: 0;
}
.w-e-menu .w-e-panel-container {
margin-top: 0 !important;
.editor-box {
height: 100%;
}
.w-e-toolbar {
background-color: #fff !important;
border: none !important;
border-bottom: 1px solid #E8E8E8 !important;
width: 700px;
}
.w-e-text-container {
border: none !important;
height: 88px !important;
height: ~'calc(100% - 81px)' !important;
}
.editor-tips {
position: absolute;
top: 5px;
bottom: 5px;
right: 8px;
color: #f5222d;
color: #666;
z-index: 1;
}
.w-e-full-screen-editor {
.w-e-text-container {
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 {
courseCatalogList:[], //分类列表
categoryId:null, //分类的Id值
whetherVisitorsJoin: 'NO', // 是否允许游客加入
isContent: '',
isContent: true,
}
}
......@@ -82,11 +82,20 @@ class AddGraphicsCourse extends React.Component {
}
}
componentWillUnmount() {
this.removeBus();
}
initBus = () => {
Bus.bind('graphicsEditorImage', this.uploadImage)
Bus.bind('graphicsEditorVideo', this.uploadVideo)
}
removeBus = () => {
Bus.unbind('graphicsEditorImage', this.uploadImage)
Bus.unbind('graphicsEditorVideo', this.uploadVideo)
}
uploadImage = () => {
this.setState({ showSelectImageModal: true })
}
......@@ -104,17 +113,17 @@ class AddGraphicsCourse extends React.Component {
});
}
catalogChange= (value) => {
catalogChange= (value, options) => {
const changeValueLength = value.length;
switch (changeValueLength){
case 1:
this.setState({categoryId:value[0]});
this.setState({ categoryId: value[0], categoryName: options[0].categoryName });
break;
case 2:
this.setState({categoryId:value[1]});
this.setState({ categoryId: value[1], categoryName: `${options[0].categoryName}-${options[1].categoryName}` });
break;
default:
this.setState({categoryId:null});
this.setState({ categoryId: null, categoryName: '' });
break;
}
}
......@@ -155,7 +164,6 @@ class AddGraphicsCourse extends React.Component {
}
return item;
})
!hasIntro && this.setState({ loadintroduce: true })
let categoryName;
if( categoryTwoName ){
......@@ -164,6 +172,7 @@ class AddGraphicsCourse extends React.Component {
categoryName = `${categoryOneName}`;
}
this.setState({
loadintroduce: !hasIntro,
coverId,
coverUrl,
courseName,
......@@ -276,7 +285,6 @@ class AddGraphicsCourse extends React.Component {
courseMedia,
introduce,
}
const previewGraphicsModal = (
<PreviewGraphicsModal
courseBasicInfo={courseBasinInfo}
......@@ -300,7 +308,7 @@ class AddGraphicsCourse extends React.Component {
const { ossUrl } = file;
const { courseMedia } = this.state;
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 {
const { ossUrl } = file;
const { courseMedia, introduce, isContent } = this.state;
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 @@
* @Author: 吴文洁
* @Date: 2020-07-16 11:05:17
* @Last Modified by: chenshu
* @Last Modified time: 2021-03-22 17:43:10
* @Last Modified time: 2021-03-24 14:40:40
* @Description: 添加直播-简介
*/
......@@ -26,8 +26,9 @@ class AddGraphicsIntro extends React.Component {
this.state = {
showSelectFileModal: false,
diskList: [],
selectType:null
selectType: null,
}
this.isContent = true;
}
componentDidMount() {
......@@ -49,8 +50,10 @@ class AddGraphicsIntro extends React.Component {
clickEditor = (e) => {
if (e && e.target.closest('.content-editor')) {
this.isContent = true
console.log(11111111)
} else if (e && e.target.closest('.introduce-editor')) {
this.isContent = false
console.log(222222222)
}
}
......@@ -163,15 +166,15 @@ class AddGraphicsIntro extends React.Component {
</Col>
<Col span={21}>
<div className="desc">
<div>开启：此图文课将在用户店铺的图文课列表中出现</div>
<div>关闭：此图文课将在用户店铺的图文课列表中隐藏</div>
<div>开启：图文课将在用户学员表中展示</div>
<div>关闭：图文课将在用户学员表中隐藏</div>
</div>
</Col>
</Row>
</div>
</div>
<div className="introduce">
<span className="label">课程内容：</span>
<div className="introduce required">
<span className="label" style={{ marginTop: 5 }}>课程内容：</span>
<div className="content">
<div className="intro-list">
<div className="intro-list__item content-editor">
......
src/modules/course-manage/graphics-course/modal/WatchDataModal.jsx
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2020-05-19 11:01:31
* @Last Modified by: chenshu
* @Last Modified time: 2021-03-19 16:25:31
* @Last Modified time: 2021-03-24 15:13:38
* @Description 余额异常弹窗
*/
import React from 'react';
......@@ -107,7 +107,7 @@ class WatchDataModal extends React.Component {
}
},
{
title: '观看时长',
title: '观看总时长',
key: 'watchDuration',
dataIndex: 'watchDuration',
render: (val) => {
......@@ -119,7 +119,7 @@ class WatchDataModal extends React.Component {
key: 'progress',
dataIndex: 'progress',
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 {
const { courseBasicInfo, courseClassInfo = {}, courseIntroInfo, type,courseState,origin} = this.props;
const { coverUrl, courseName, scheduleVideoUrl,videoDuration} = courseBasicInfo;
const { liveDate, calendarTime,startTime,endTime,timeHorizonStart, timeHorizonEnd, teacherName } = courseClassInfo;
const { liveCourseMediaRequests } = courseIntroInfo;
const { introduce } = courseIntroInfo;
let liveDateStr, startTimeStr, endTimeStr;
......@@ -177,28 +177,12 @@ class PreviewCourseModal extends React.Component {
<div className="container__introduction__title">直播课简介</div>
}
<div className="container__introduction__list editor-box">
{
liveCourseMediaRequests.map((item, index) => {
if (item.mediaType === 'TEXT') {
return (
<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
className="intro-item text"
dangerouslySetInnerHTML={{
__html: introduce
}}
/>
</div>
</div>
</div>
......
src/modules/course-manage/modal/PreviewCourseModal.less
......@@ -122,19 +122,14 @@
margin-top: 13px;
}
.text {
color: #666;
line-height: 17px;
color: #666;
p {
font-size: 12px;
}
p {
font-size: 12px;
}
.picture {
img {
width: 100%;
}
img {
width: 100%;
}
}
}
......
src/modules/course-manage/modal/PreviewGraphicsModal.less
......@@ -81,20 +81,12 @@
.intro-item:not(:first-child) {
margin-top: 13px;
}
.text {
color: #666;
line-height: 17px;
p {
font-size: 12px;
}
color: #666;
p {
font-size: 12px;
}
.picture {
img {
width: 100%;
}
img {
max-width: 100%;
}
}
}
......
src/modules/course-manage/video-course/AddVideoCourse.jsx
......@@ -21,9 +21,13 @@ import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFile
import PreviewCourseModal from '../modal/PreviewCourseModal';
import StoreService from "@/domains/store-domain/storeService";
import CourseService from "@/domains/course-domain/CourseService";
import Service from '@/common/js/service';
import User from '@/common/js/user';
import _ from "underscore";
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 './AddVideoCourse.less';
......@@ -76,6 +80,7 @@ class AddVideoCourse extends React.Component {
whetherVisitorsJoin:'NO', // 是否允许游客加入
showSelectCoverModal:false,
cutImageBlob: null,
introduce: '',
}
}
......@@ -85,7 +90,21 @@ class AddVideoCourse extends React.Component {
if (pageType === 'edit') {
this.handleFetchScheudleDetail(id);
}
this.initBus()
}
initBus = () => {
Bus.bind('graphicsEditorImage', this.uploadIntroImage)
}
removeBus = () => {
Bus.unbind('graphicsEditorImage', this.uploadIntroImage)
}
uploadIntroImage = () => {
this.setState({ showSelectImageModal: true })
}
//获取分类列表
getCourseCatalogList = ()=>{
StoreService.getCourseCatalogList({current:1,size:1000}).then((res) => {
......@@ -132,6 +151,7 @@ class AddVideoCourse extends React.Component {
let scheduleMedia = [];
let scheduleVideoId;
let scheduleVideoUrl;
let hasIntro;
courseMediaVOS.map((item) => {
switch (item.contentType){
......@@ -147,7 +167,8 @@ class AddVideoCourse extends React.Component {
videoType = item.mediaType;
break;
case "INTRO":
scheduleMedia = [...scheduleMedia,item]
hasIntro = true;
this.getTextDetail('introduce', item.mediaUrl);
break;
default:
break;
......@@ -162,6 +183,7 @@ class AddVideoCourse extends React.Component {
categoryName = `${categoryOneName}`;
}
this.setState({
loadintroduce: !hasIntro,
coverId,
coverUrl,
videoType,
......@@ -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 = () => {
const {
......@@ -259,8 +293,8 @@ class AddVideoCourse extends React.Component {
scheduleVideoUrl,
courseName,
scheduleMedia,
videoDuration
videoDuration,
introduce,
} = this.state;
const courseBasinInfo = {
......@@ -270,7 +304,8 @@ class AddVideoCourse extends React.Component {
videoDuration
}
const courseIntroInfo = {
liveCourseMediaRequests: scheduleMedia
liveCourseMediaRequests: scheduleMedia,
introduce,
}
const previewCourseModal = (
......@@ -330,13 +365,14 @@ class AddVideoCourse extends React.Component {
scheduleVideoUrl,
categoryId,
shelfState,
whetherVisitorsJoin
whetherVisitorsJoin,
introduce,
} = this.state;
const commonParams = {
videoName,
videoDuration,
scheduleVideoId,
courseMediaId: scheduleVideoId,
scheduleMedia: scheduleMedia.filter(item => !!item.mediaContent),
categoryId,
courseName,
......@@ -344,33 +380,40 @@ class AddVideoCourse extends React.Component {
operatorId:User.getStoreUserId(),
storeId:User.getStoreId(),
shelfState,
whetherVisitorsJoin
whetherVisitorsJoin,
courseType: 'VOICE',
};
// 校验必填字段:课程名称, 课程视频
this.handleValidate(courseName, scheduleVideoId,categoryId, scheduleMedia).then((res) => {
if (!res) return;
if (pageType === 'add') {
CourseService.createVideoSchedule(commonParams).then((res) => {
if (!res) return;
message.success("新建成功");
window.RCHistory.push({
pathname: `/video-course`,
});
})
} else {
const editParams = {
courseId:id,
...commonParams,
}
CourseService.editVideoSchedule(editParams).then((res) => {
if (!res) return;
message.success("保存成功");
window.RCHistory.push({
pathname: `/video-course`,
});
Upload.uploadTextToOSS(introduce, `${randomString()}.txt`, (introduceId) => {
this.submitRemote({ id, pageType, commonParams: { ...commonParams, introduceId } })
});
});
}
submitRemote = ({ id, pageType, commonParams }) => {
if (pageType === 'add') {
Service.Hades('public/hades/createMediaCourse', commonParams).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) => {
......@@ -404,6 +447,17 @@ class AddVideoCourse extends React.Component {
handleSelectCover = (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) => {
......@@ -516,7 +570,11 @@ class AddVideoCourse extends React.Component {
showCutModal, showSelectFileModal, diskList,
imageFile, joinType, videoName, videoType,shelfState,
categoryName,courseCatalogList,whetherVisitorsJoin,
visible,showSelectCoverModal,hasImgReady,cutImageBlob
visible,showSelectCoverModal,hasImgReady,cutImageBlob,
introduce,
loadintroduce,
id,
showSelectImageModal,
} = this.state;
// 已选择的上课学员数量
......@@ -605,10 +663,12 @@ class AddVideoCourse extends React.Component {
<div className="intro-info mt16">
<AddVideoIntro
data={{
id,
liveCourseMediaRequests: scheduleMedia,
shelfState,
whetherVisitorsJoin,
label: '视频课简介'
introduce,
loadintroduce,
}}
onChange={this.handleChangeForm}
/>
......@@ -642,6 +702,21 @@ class AddVideoCourse extends React.Component {
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 &&
<SelectPrepareFileModal
key="basic"
......
src/modules/course-manage/video-course/components/AddVideoIntro.jsx
/*
* @Author: 吴文洁
* @Date: 2020-07-16 11:05:17
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2020-11-24 14:29:52
* @Last Modified by: chenshu
* @Last Modified time: 2021-03-23 18:12:05
* @Description: 添加直播-简介
*/
import React from 'react';
import { Input, message, Upload, Radio, Row, Col, Button, Popover, Switch } from 'antd';
import Service from '@/common/js/service';
import EditorBox from '../../components/EditorBox';
import GraphicsEditor from '../../components/GraphicsEditor';
import User from '@/common/js/user';
import UploadOss from '@/core/upload';
import './AddVideoIntro.less';
......@@ -144,6 +144,10 @@ class AddVideoIntro extends React.Component {
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
}
changeIntro = (value) => {
this.props.onChange('introduce', value);
}
handleAddIntroText = () => {
const { liveCourseMediaRequests } = this.props.data;
liveCourseMediaRequests.push({
......@@ -180,7 +184,7 @@ class AddVideoIntro extends React.Component {
}
render() {
const {data: { whetherVisitorsJoin,liveCourseMediaRequests = [], shelfState} } = this.props;
const {data: { whetherVisitorsJoin,liveCourseMediaRequests = [], shelfState, id, introduce, loadintroduce } } = this.props;
const {showSelectFileModal,selectType} = this.state
return (
<div className="add-video__intro-info">
......@@ -217,50 +221,20 @@ class AddVideoIntro extends React.Component {
<div className="introduce">
<span className="label">视频课简介：</span>
<div className="content">
<div className="intro-list">
{
liveCourseMediaRequests.map((item, index) => {
if (item.mediaType === 'TEXT') {
return (
<div className="intro-list__item" key={item.key}>
<EditorBox
detail={{
content: item.mediaContent
}}
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 className="intro-list">
<div className="intro-list__item introduce-editor">
{(!id || loadintroduce) &&
<GraphicsEditor
id="intro"
isIntro={true}
detail={{
content: introduce
}}
onChange={(val) => { this.changeIntro(val) }}
/>
}
</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