Skip to content

X
xiaomai-cloud-class-web
Commit ff6f70bb by chenshu
Options

feat:初始化页面

parent e1fa22c5
Showing with 169 additions and 44 deletions
src/modules/course-manage/components/GraphicsEditor.jsx
import React from 'react';
import E from 'wangeditor';
import Bus from '../../../core/bus';
import './GraphicsEditor.less';
const { BtnMenu } = E;
class ImageMenu extends BtnMenu {
constructor(editor) {
// data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
const $elem = E.$(
`<div class="w-e-menu" data-title="图片">
<i class="w-e-icon-image"></i>
</div>`
)
super($elem, editor)
}
// 菜单点击事件
clickHandler() {
Bus.trigger('graphicsEditorImage')
}
tryChangeActive() {
}
}
class VideoMenu extends BtnMenu {
constructor(editor) {
// data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
const $elem = E.$(
`<div class="w-e-menu" data-title="视频">
<i class="w-e-icon-play"></i>
</div>`
)
super($elem, editor)
}
// 菜单点击事件
clickHandler() {
Bus.trigger('graphicsEditorVideo')
}
tryChangeActive() {
}
}
class GraphicsEditor extends React.Component {
constructor(props) {
......@@ -11,6 +52,7 @@ class GraphicsEditor extends React.Component {
editorId: window.random_string(16),
textLength: 0,
}
this.editorInt = null;
}
componentDidMount() {
......@@ -18,6 +60,18 @@ class GraphicsEditor extends React.Component {
this.resetIndex(true);
}
componentWillReceiveProps(nextProps) {
const { content } = this.props.detail;
const { content: nextContent } = nextProps.detail;
const videoCount = ((content || '').match(/<iframe/g) || []).length;
const nextVideoCount = ((nextContent || '').match(/<iframe/g) || []).length;
const imageCount = ((content || '').match(/<img/g) || []).length;
const nextImageCount = ((nextContent || '').match(/<img/g) || []).length;
if ((videoCount !== nextVideoCount) || (imageCount !== nextImageCount)) {
this.editorInt && this.editorInt.txt.html(nextProps.detail.content);
}
}
componentWillUnmount() {
this.resetIndex();
}
......@@ -32,9 +86,11 @@ class GraphicsEditor extends React.Component {
renderEditor() {
const { editorId } = this.state;
const { detail, onChange, isIntro } = this.props;
const editorInt = new E(`#editor${editorId}`);
editorInt.config.showFullScreen = !isIntro
editorInt.config.menus = isIntro ?
this.editorInt = new E(`#editor${editorId}`);
this.editorInt.config.showFullScreen = !isIntro
this.editorInt.menus.extend('xmimage', ImageMenu);
this.editorInt.menus.extend('xmvideo', VideoMenu);
this.editorInt.config.menus = isIntro ?
[
'head',
'bold',
......@@ -48,7 +104,7 @@ class GraphicsEditor extends React.Component {
'list',
'justify',
'emoticon',
'image',
'xmimage',
]
: [
'head',
......@@ -68,8 +124,8 @@ class GraphicsEditor extends React.Component {
'justify',
'quote',
'emoticon',
'image',
'video',
'xmimage',
'xmvideo',
'table',
'code',
'splitLine',
......@@ -77,18 +133,18 @@ class GraphicsEditor extends React.Component {
'redo',
];
editorInt.config.emotions = [
this.editorInt.config.emotions = [
{
title: 'emoji',
type: 'emoji',
content: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '😊', '🙂', '🙃', '😉', '😓', '😅', '😪', '🤔', '😬', '🤐']
}
]
editorInt.config.zIndex = 1;
editorInt.config.pasteFilterStyle = false;
editorInt.config.pasteIgnoreImg = true;
this.editorInt.config.zIndex = 1;
this.editorInt.config.pasteFilterStyle = false;
this.editorInt.config.pasteIgnoreImg = true;
// 自定义处理粘贴的文本内容
editorInt.config.pasteTextHandle = function (content) {
this.editorInt.config.pasteTextHandle = function (content) {
if (content == '' && !content) return ''
var str = content
str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
......@@ -97,20 +153,19 @@ class GraphicsEditor extends React.Component {
str = str.replace(/\&nbsp\;/ig, ' ')
return str
}
editorInt.config.onchange = (html) => {
const textLength = editorInt.txt.text().replace(/\&nbsp\;/ig, ' ').length;
this.editorInt.config.onchange = (html) => {
const textLength = this.editorInt.txt.text().replace(/\&nbsp\;/ig, ' ').length;
this.setState({ textLength }, () => {
onChange(html, this.state.textLength);
})
}
editorInt.create();
editorInt.txt.html(detail.content);
this.editorInt.create();
this.editorInt.txt.html(detail.content);
}
render() {
const { editorId, textLength } = this.state;
const { limitLength = 1000 } = this.props;
return <div className="wang-editor-container ">
<div className="editor-box" id={`editor${editorId}`}></div>
{textLength > limitLength && <div className="editor-tips">超了{textLength - limitLength}个字</div>}
......
src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
......@@ -15,7 +15,7 @@ import { DISK_MAP, FileTypeIcon, FileVerifyMap } from '@/common/constants/academ
import { ImgCutModalNew } from '@/components';
import ShowTips from "@/components/ShowTips";
import Breadcrumbs from "@/components/Breadcrumbs";
import Bus from '../../../core/bus'
import AddGraphicsIntro from './components/AddGraphicsIntro';
import SelectStudent from '../modal/select-student';
import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal';
......@@ -59,13 +59,18 @@ class AddGraphicsCourse extends React.Component {
diskList: [], // 机构可见磁盘目录
selectedFileList: [], // 已经从资料云盘中勾选的文件
showCutModal: false, // 是否显示截图弹窗
showSelectFileModal: false,
showSelectVideoModal: false,
studentModal: false,
categoryName:null, //分类名称
courseCatalogList:[], //分类列表
categoryId:null, //分类的Id值
whetherVisitorsJoin: 'NO', // 是否允许游客加入
isContent: '',
}
}
componentDidMount() {
this.initBus()
}
componentWillMount() {
......@@ -76,6 +81,19 @@ class AddGraphicsCourse extends React.Component {
}
}
initBus = () => {
Bus.bind('graphicsEditorImage', this.uploadImage)
Bus.bind('graphicsEditorVideo', this.uploadVideo)
}
uploadImage = () => {
this.setState({ showSelectImageModal: true })
}
uploadVideo = () => {
this.setState({ showSelectVideoModal: true })
}
//获取分类列表
getCourseCatalogList = ()=>{
StoreService.getCourseCatalogList({current:1,size:1000}).then((res) => {
......@@ -194,7 +212,6 @@ class AddGraphicsCourse extends React.Component {
// 修改表单
handleChangeForm = (field, value, coverUrl) => {
console.log('field',value);
this.setState({
[field]: value,
coverUrl: coverUrl ? coverUrl : this.state.coverUrl
......@@ -274,22 +291,24 @@ class AddGraphicsCourse extends React.Component {
// 选择图文
handleSelectVideo = (file) => {
this.setState({
showSelectFileModal: false
showSelectVideoModal: false
})
const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file;
const videoDom = document.createElement('video');
videoDom.src = ossUrl;
videoDom.onloadedmetadata = () => {
const { ossUrl } = file;
const { courseMedia, introduce, isContent } = this.state;
this.setState({
size: folderSize,
videoName: folderName,
videoType: folderFormat,
detailUrl: ossUrl,
courseMediaId : resourceId,
videoDuration: videoDom.duration
[isContent ? 'courseMedia' : 'introduce']: `${isContent ? courseMedia : introduce}<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>`
});
}
handleSelectCover = (file) => {
this.setState({
showSelectImageModal: false
})
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>`
});
}
// 上传封面图
......@@ -404,7 +423,8 @@ class AddGraphicsCourse extends React.Component {
courseMedia,
introduce,
showCutModal,
showSelectFileModal,
showSelectVideoModal,
showSelectImageModal,
diskList,
imageFile,
videoType,
......@@ -413,7 +433,6 @@ class AddGraphicsCourse extends React.Component {
courseCatalogList,
whetherVisitorsJoin,
} = this.state;
// 已选择的上课学员数量
const hasSelectedStu = studentList.length;
......@@ -500,7 +519,7 @@ class AddGraphicsCourse extends React.Component {
</div>
{/* 选择备课文件弹窗 */}
{ showSelectFileModal &&
{ showSelectVideoModal &&
<SelectPrepareFileModal
operateType="select"
selectTypeList={['MP4']}
......@@ -510,15 +529,30 @@ class AddGraphicsCourse extends React.Component {
content: '为保障学员的观看体验，上传的图文大小不能超过2G',
}}
tooltip={'格式支持mp4，大小不超过2G'}
isOpen={showSelectFileModal}
isOpen={showSelectVideoModal}
diskList={diskList}
addVideo={true}
onClose={() => {
this.setState({ showSelectFileModal: false })
this.setState({ showSelectVideoModal: false })
}}
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.handleSelectCover}
/>
}
<ImgCutModalNew
title="裁剪"
width={550}
......
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-18 15:31:34
* @Last Modified time: 2021-03-19 15:44:56
* @Description: 添加直播-简介
*/
......@@ -30,6 +30,30 @@ class AddGraphicsIntro extends React.Component {
}
}
componentDidMount() {
this.bindClick();
}
componentWillUnmount() {
this.removeClick();
}
bindClick = () => {
window.addEventListener('click', this.clickEditor)
}
removeClick = () => {
window.removeEventListener('click', this.clickEditor)
}
clickEditor = (e) => {
if (e && e.target.closest('.content-editor')) {
this.isContent = true
} else if (e && e.target.closest('.introduce-editor')) {
this.isContent = false
}
}
// 上传封面图
handleShowImgCutModal = (event) => {
const imageFile = event.target.files[0];
......@@ -82,10 +106,12 @@ class AddGraphicsIntro extends React.Component {
}
changeDetail = (value) => {
this.props.onChange('isContent', !!this.isContent);
this.props.onChange('courseMedia', value);
}
changeIntro = (value) => {
this.props.onChange('isContent', !!this.isContent);
this.props.onChange('introduce', value);
}
......@@ -144,15 +170,16 @@ class AddGraphicsIntro extends React.Component {
<span className="label">课程内容：</span>
<div className="content">
<div className="intro-list">
<div className="intro-list__item">
{/* {(!id || courseMedia) && */}
<div className="intro-list__item content-editor">
{(!id || courseMedia) &&
<GraphicsEditor
id="content"
detail={{
content: courseMedia
}}
onChange={(val) => { this.changeDetail(val) }}
/>
{/* } */}
}
</div>
</div>
</div>
......@@ -161,16 +188,17 @@ class AddGraphicsIntro extends React.Component {
<span className="label">课程简介：</span>
<div className="content">
<div className="intro-list">
<div className="intro-list__item">
{/* {(!id || introduce) && */}
<div className="intro-list__item introduce-editor">
{(!id || introduce) &&
<GraphicsEditor
id="intro"
isIntro={true}
detail={{
content: introduce
}}
onChange={(val) => { this.changeIntro(val) }}
/>
{/* } */}
}
</div>
</div>
</div>
......
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-16 17:56:18
* @Last Modified time: 2021-03-19 16:05:26
* @Description 余额异常弹窗
*/
import React from 'react';
......@@ -113,6 +113,14 @@ class WatchDataModal extends React.Component {
render: (val) => {
return <span>{val ? dealTimeDuration(val) : "00:00:00" }</span>
}
},
{
title: '学习进度',
key: 'watchProgress',
dataIndex: 'watchProgress',
render: (val) => {
return <span>{val || 0}%</span>
}
}
];
return columns;
......
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