feat:初始化页面

ff6f70bb · chenshu · e1fa22c5 · ff6f70bb · ff6f70bb · ff6f70bb
Commit ff6f70bb authored Mar 19, 2021 by chenshu
4 changed files
--- a/src/modules/course-manage/components/GraphicsEditor.jsx
+++ b/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}`);
+    this.editorInt = new E(`#editor${editorId}`);
-    editorInt.config.showFullScreen = !isIntro
+    this.editorInt.config.showFullScreen = !isIntro
-    editorInt.config.menus = 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',
+        'xmimage',
-        'video',
+        '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;
+    this.editorInt.config.zIndex = 1;
-    editorInt.config.pasteFilterStyle = false;
+    this.editorInt.config.pasteFilterStyle = false;
-    editorInt.config.pasteIgnoreImg = true;
+    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) => {
+    this.editorInt.config.onchange = (html) => {
-      const textLength = editorInt.txt.text().replace(/\&nbsp\;/ig, ' ').length;
+      const textLength = this.editorInt.txt.text().replace(/\&nbsp\;/ig, ' ').length;
      this.setState({ textLength }, () => {
        onChange(html, this.state.textLength);
      })
    }
-    editorInt.create();
+    this.editorInt.create();
-    editorInt.txt.html(detail.content);
+    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>}

--- a/src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
+++ b/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,15 +59,20 @@ 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() {
    const { id, pageType } = this.state;
    this.getCourseCatalogList();
@@ -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 { ossUrl } = file;
+    const { courseMedia, introduce, isContent } = this.state;
+    this.setState({
+      [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>`
+    });
+  }
-    const videoDom = document.createElement('video');
+  handleSelectCover = (file) => {
-    videoDom.src = ossUrl;
+    this.setState({
-    videoDom.onloadedmetadata = () => {
+      showSelectImageModal: false
-      this.setState({
+    })
-        size: folderSize,
+    const { ossUrl } = file;
-        videoName: folderName,
+    const { courseMedia, introduce, isContent } = this.state;
-        videoType: folderFormat,
+    this.setState({
-        detailUrl: ossUrl,
+      [isContent ? 'courseMedia' : 'introduce']: `${isContent ? courseMedia : introduce}<p><img style="max-width: 100%;" src="${ossUrl}" /><br><p>`
-        courseMediaId : resourceId,
+    });
-        videoDuration: videoDom.duration
-      });
-    }
  }
  // 上传封面图
@@ -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}

--- a/src/modules/course-manage/graphics-course/components/AddGraphicsIntro.jsx
+++ b/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">
+              <div className="intro-list__item content-editor">
-                {/* {(!id || courseMedia) && */}
+                {(!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">
+              <div className="intro-list__item introduce-editor">
-                {/* {(!id || introduce) && */}
+                {(!id || introduce) &&
                  <GraphicsEditor
+                    id="intro"
                    isIntro={true}
                    detail={{
                      content: introduce
                    }}
                    onChange={(val) => { this.changeIntro(val) }}
                  />
-                {/* } */}
+                }
              </div>
            </div>
          </div>

--- a/src/modules/course-manage/graphics-course/modal/WatchDataModal.jsx
+++ b/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;