Skip to content

X
xiaomai-cloud-class-web
Commit 13a2beac by chenshu
Options

fix:优化样式

parent e0c2dd51
Showing with 216 additions and 134 deletions
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-23 19:18:11
* @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,7 @@ class AddLive extends React.Component {
needRecord: 'YES',
whetherVisitorsJoin:'NO',
liveCourseWarmMedia: {},
liveCourseMediaRequests: [{
contentType:"INTRO",
mediaType: 'TEXT',
mediaContent: '',
key: Math.random()
}]
introduce: '',
},
}
}
......@@ -112,6 +112,23 @@ class AddLive extends React.Component {
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 +157,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 +168,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 +219,7 @@ class AddLive extends React.Component {
isEdit = false
}
this.setState({
loadintroduce: !hasIntro,
isEdit,
loading: false,
courseState,
......@@ -210,6 +230,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,6 +309,13 @@ handleChangeBasicInfo = (field, value) => {
}
this.handleValidate(addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit).then((res) => {
if (!res) return;
Upload.uploadTextToOSS(addLiveIntroInfo.introduce, `${randomString()}.txt`, (introduceId) => {
this.submitRemote({ introduceId, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, id });
}, () => message.warning('上传课程简介失败'));
})
}
submitRemote = ({ introduceId, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, id }) => {
const { type } = this.state;
const { courseName,coverUrl,coverId,categoryId} = addLiveBasicInfo;
const {
......@@ -286,7 +328,7 @@ handleChangeBasicInfo = (field, value) => {
} = addLiveClassInfo;
let { startTime, endTime } = addLiveClassInfo;
const { liveCourseMediaRequests, needRecord,whetherVisitorsJoin,liveCourseWarmMedia} = addLiveIntroInfo;
const { needRecord,whetherVisitorsJoin,liveCourseWarmMedia} = addLiveIntroInfo;
if(type === 'add') {
startTime = startTime;
......@@ -305,7 +347,7 @@ handleChangeBasicInfo = (field, value) => {
mediaType:'PICTURE',
mediaUrl: coverUrl,
}
let scheduleMediaRequests = [...liveCourseMediaRequests];
let scheduleMediaRequests = [];
if(coverId){
scheduleMediaRequests = [coverObj,...scheduleMediaRequests]
}
......@@ -329,7 +371,8 @@ handleChangeBasicInfo = (field, value) => {
if (type === 'add') {
const params = {
...commonParams,
operatorId:User.getUserId(),
operatorId: User.getUserId(),
introduceId,
}
CourseService.createLiveCloudCourse(params).then((res) => {
......@@ -346,6 +389,7 @@ handleChangeBasicInfo = (field, value) => {
...commonParams,
updateUserId:User.getUserId(),
liveCourseId: id,
introduceId,
}
CourseService.updateLiveCloudCourse(params).then((res) => {
if (res.success){
......@@ -356,8 +400,8 @@ handleChangeBasicInfo = (field, value) => {
}
});
}
})
}
handleValidate = (addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit) => {
return new Promise((resolve) => {
const { type } = this.state;
......@@ -498,14 +542,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 +604,7 @@ handleChangeBasicInfo = (field, value) => {
<div className="title">更多信息</div>
<AddLiveIntro
isEdit={isEdit}
data={addLiveIntroInfo}
data={{ ...addLiveIntroInfo, loadintroduce, id }}
onChange={this.handleChangeIntroInfo}
/>
</div>
......@@ -554,6 +617,21 @@ handleChangeBasicInfo = (field, value) => {
<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
......@@ -2,14 +2,14 @@
* @Author: 吴文洁
* @Date: 2020-07-16 11:05:17
* @Last Modified by: chenshu
* @Last Modified time: 2021-03-23 16:34:11
* @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" >
......@@ -267,49 +244,19 @@ class AddLiveIntro extends React.Component {
<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
<div className="intro-list__item introduce-editor">
{(!id || loadintroduce) &&
<GraphicsEditor
id="intro"
isIntro={true}
detail={{
content: item.mediaContent
content: introduce
}}
onChange={(val, length) => { this.handleChangeIntro(index, val, length) }}
onChange={(val) => { this.changeIntro(val) }}
/>
{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>
{/* 选择暖场图文件弹窗 */}
......
src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
......@@ -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 })
}
......@@ -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,
......
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 {
......@@ -330,13 +364,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,13 +379,21 @@ 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;
Upload.uploadTextToOSS(introduce, `${randomString()}.txt`, (introduceId) => {
this.submitRemote({ id, pageType, commonParams: { ...commonParams, introduceId } })
});
});
}
submitRemote = ({ id, pageType, commonParams }) => {
if (pageType === 'add') {
CourseService.createVideoSchedule(commonParams).then((res) => {
Service.Hades('public/hades/createMediaCourse', commonParams).then((res) => {
if (!res) return;
message.success("新建成功");
window.RCHistory.push({
......@@ -362,7 +405,7 @@ class AddVideoCourse extends React.Component {
courseId:id,
...commonParams,
}
CourseService.editVideoSchedule(editParams).then((res) => {
Service.Hades('public/hades/editMediaCourse', editParams).then((res) => {
if (!res) return;
message.success("保存成功");
window.RCHistory.push({
......@@ -370,7 +413,6 @@ class AddVideoCourse extends React.Component {
});
});
}
});
}
handleValidate = (courseName, scheduleVideoId,categoryId,scheduleMedia) => {
......@@ -405,6 +447,17 @@ class AddVideoCourse extends React.Component {
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) => {
const { folderName } = imageFile;
......@@ -516,7 +569,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 +662,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 +701,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">
......@@ -218,49 +222,19 @@ class AddVideoIntro extends React.Component {
<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
<div className="intro-list__item introduce-editor">
{(!id || loadintroduce) &&
<GraphicsEditor
id="intro"
isIntro={true}
detail={{
content: item.mediaContent
content: introduce
}}
onChange={(val, length) => { this.handleChangeIntro(index, val, length) }}
onChange={(val) => { this.changeIntro(val) }}
/>
{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>
{/* 选择暖场图文件弹窗 */}
......
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