Skip to content

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

fix:优化样式

parent e0c2dd51
Showing with 149 additions and 145 deletions
src/modules/course-manage/components/AddLiveIntro.jsx
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
* @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-23 16:34:11 * @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" >
...@@ -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/graphics-course/AddGraphicsCourse.jsx
...@@ -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 })
} }
...@@ -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,
......
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 {
...@@ -330,13 +364,14 @@ class AddVideoCourse extends React.Component { ...@@ -330,13 +364,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 +379,40 @@ class AddVideoCourse extends React.Component { ...@@ -344,33 +379,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 +446,17 @@ class AddVideoCourse extends React.Component { ...@@ -404,6 +446,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 +569,11 @@ class AddVideoCourse extends React.Component { ...@@ -516,7 +569,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 +662,12 @@ class AddVideoCourse extends React.Component { ...@@ -605,10 +662,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 +701,21 @@ class AddVideoCourse extends React.Component { ...@@ -642,6 +701,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