feat:初始化页面

package.json

@@ -96,7 +96,7 @@
     "underscore": "^1.10.2",
     "url-loader": "2.3.0",
     "video-react": "0.14.1",
-    "wangeditor": "^3.1.1",
+    "wangeditor": "^4.6.9",
     "webpack": "4.42.0",
     "webpack-dev-server": "3.11.0",
     "webpack-manifest-plugin": "2.2.0",

src/core/upload.js

@@ -146,6 +146,36 @@ class Upload {
       xhr.send(fd);
     })
   }
+
+  static uploadTextToOSS(string, name, success, error) {
+    if (!string) return success();
+    const params = {
+      accessTypeEnum: "PUBLIC",
+      bizCode: 'CLOUD_CLASS_COMMON',
+      instId: User.getStoreId(),
+      resourceName: name,
+    }
+    Service.Hades('/public/hades/ossAuthority', params).then((res) => {
+      const { resourceId, accessId, policy, callback, signature,key, host } = res.result;
+      const xhr = new XMLHttpRequest();
+      const formData = new FormData();
+      formData.append("OSSAccessKeyId", accessId);
+      formData.append("policy", policy);
+      formData.append("callback", callback);
+      formData.append("Signature", signature);
+      formData.append("key", key);
+      formData.append("file", new Blob([string]));
+      formData.append("success_action_status", 200);
+      xhr.open("POST", host);
+      xhr.onload = () => {
+        success(resourceId);
+      };
+      xhr.onerror = () => {
+        error();
+      }
+      xhr.send(formData);
+    })
+  }
 }
 
 export default Upload;
\ No newline at end of file

src/modules/course-manage/components/EditorBox.jsx

@@ -21,7 +21,7 @@ class EditorBox extends React.Component {
     const { editorId } = this.state;
     const { detail, onChange } = this.props;
     const editorInt = new E(`#editor${editorId}`);
-    editorInt.customConfig.menus = [
+    editorInt.config.menus = [
       // 'head',  // 标题
       'bold',  // 粗体
       // 'fontSize',  // 字号
@@ -36,18 +36,18 @@ class EditorBox extends React.Component {
       'emoticon',  // 表情
     ]
 
-    editorInt.customConfig.emotions = [
+    editorInt.config.emotions = [
       {
         title: 'emoji',
         type: 'emoji',
         content: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '😊', '🙂', '🙃', '😉', '😓', '😅', '😪', '🤔', '😬', '🤐']
       }
     ]
-    editorInt.customConfig.zIndex = 1;
-    editorInt.customConfig.pasteFilterStyle = false;
-    editorInt.customConfig.pasteIgnoreImg = true;
+    editorInt.config.zIndex = 1;
+    editorInt.config.pasteFilterStyle = false;
+    editorInt.config.pasteIgnoreImg = true;
     // 自定义处理粘贴的文本内容
-    editorInt.customConfig.pasteTextHandle = function (content) {
+    editorInt.config.pasteTextHandle = function (content) {
       if (content == '' && !content) return ''
       var str = content
       str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
@@ -56,7 +56,7 @@ class EditorBox extends React.Component {
       str = str.replace(/\&nbsp\;/ig, ' ')
       return str
     }
-    editorInt.customConfig.onchange = (html) => {
+    editorInt.config.onchange = (html) => {
       const textLength = editorInt.txt.text().replace(/\&nbsp\;/ig, ' ').length;
       this.setState({ textLength }, () => {
         onChange(html, this.state.textLength);
@@ -64,7 +64,6 @@ class EditorBox extends React.Component {
     }
     editorInt.create();
     editorInt.txt.html(detail.content);
-    editorInt.change && editorInt.change();
   }
 
   render() {

src/modules/course-manage/components/GraphicsEditor.jsx

+import React from 'react';
+import E from 'wangeditor';
+import './GraphicsEditor.less';
+
+
+
+class GraphicsEditor extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      editorId: window.random_string(16),
+      textLength: 0,
+    }
+  }
+
+  componentDidMount() {
+    this.renderEditor()
+    this.resetIndex(true);
+  }
+
+  componentWillUnmount() {
+    this.resetIndex();
+  }
+
+  resetIndex = (bool) => {
+    const topDom = document.querySelector('.top-container');
+    const leftDom = document.querySelector('.left-container');
+    topDom.style.zIndex = bool ? 'auto' : 112;
+    leftDom.style.zIndex = bool ? 'auto' : 2;
+  }
+
+  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 ?
+      [
+        'head',
+        'bold',
+        'fontSize',
+        'fontName',
+        'italic',
+        'underline',
+        'strikeThrough',
+        'foreColor',
+        'backColor',
+        'list',
+        'justify',
+        'emoticon',
+        'image',
+      ]
+      : [
+        'head',
+        'bold',
+        'fontSize',
+        'fontName',
+        'italic',
+        'underline',
+        'strikeThrough',
+        'indent',
+        'lineHeight',
+        'foreColor',
+        'backColor',
+        'link',
+        'list',
+        'todo',
+        'justify',
+        'quote',
+        'emoticon',
+        'image',
+        'video',
+        'table',
+        'code',
+        'splitLine',
+        'undo',
+        'redo',
+      ];
+
+    editorInt.config.emotions = [
+      {
+        title: 'emoji',
+        type: 'emoji',
+        content: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '😊', '🙂', '🙃', '😉', '😓', '😅', '😪', '🤔', '😬', '🤐']
+      }
+    ]
+    editorInt.config.zIndex = 1;
+    editorInt.config.pasteFilterStyle = false;
+    editorInt.config.pasteIgnoreImg = true;
+    // 自定义处理粘贴的文本内容
+    editorInt.config.pasteTextHandle = function (content) {
+      if (content == '' && !content) return ''
+      var str = content
+      str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
+      str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
+      str = str.replace(/[ | ]*\n/g, '\n')
+      str = str.replace(/\&nbsp\;/ig, ' ')
+      return str
+    }
+    editorInt.config.onchange = (html) => {
+      const textLength = editorInt.txt.text().replace(/\&nbsp\;/ig, ' ').length;
+      this.setState({ textLength }, () => {
+        onChange(html, this.state.textLength);
+      })
+    }
+    editorInt.create();
+    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>}
+    </div>
+  }
+}
+
+export default GraphicsEditor;

src/modules/course-manage/components/GraphicsEditor.less

+.wang-editor-container {
+  border: 1px solid #E8E8E8;
+  border-radius: 4px;
+  width: 552px;
+  position: relative;
+
+  .w-e-text p,
+  .w-e-text h1,
+  .w-e-text h2,
+  .w-e-text h3,
+  .w-e-text h4,
+  .w-e-text h5,
+  .w-e-text table,
+  .w-e-text pre {
+    margin: 0;
+  }
+  
+  .w-e-toolbar {
+    background-color: #fff !important;
+    border: none !important;
+    border-bottom: 1px solid #E8E8E8 !important;
+  }
+
+  .w-e-text-container {
+    border: none !important;
+    height: 88px !important;
+  }
+
+  .editor-tips {
+    position: absolute;
+    top: 5px;
+    right: 8px;
+    color: #f5222d;
+  }
+}
\ No newline at end of file

src/modules/course-manage/components/LiveCourseList.jsx

 /*
  * @Author: 吴文洁 
  * @Date: 2020-07-14 15:43:00 
- * @Last Modified by: mikey.zhaopeng
- * @Last Modified time: 2020-11-23 20:23:12
+ * @Last Modified by: chenshu
+ * @Last Modified time: 2021-03-16 17:37:23
  * @Description: 大班直播、互动班课的直播课列表
  */
 
@@ -83,6 +83,7 @@ class LiveCourseList extends React.Component {
         needStr={needStr}
         data={shareData}
         type="liveClass"
+        title="直播课"
         close={() => {
           this.setState({
             shareLiveModal:  null

src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx

@@ -9,20 +9,23 @@
 
 import React from 'react';
 import { Button, Input, Radio, message, Modal,Cascader} from 'antd';
+import $ from 'jquery';
 
 import { DISK_MAP, FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum';
 import { ImgCutModalNew } from '@/components';
 import ShowTips from "@/components/ShowTips";
 import Breadcrumbs from "@/components/Breadcrumbs";
 
-import AddVideoIntro from './components/AddVideoIntro';
+import AddGraphicsIntro from './components/AddGraphicsIntro';
 import SelectStudent from '../modal/select-student';
 import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal';
-import PreviewCourseModal from '../modal/PreviewCourseModal';
+import PreviewGraphicsModal from '../modal/PreviewGraphicsModal';
 import StoreService from "@/domains/store-domain/storeService";
-import CourseService from "@/domains/course-domain/CourseService";
+import Service from '@/common/js/service';
+import { randomString } from '@/domains/basic-domain/utils';
 import User from '@/common/js/user';
 import _ from "underscore";
+import Upload from '@/core/upload';
 import './AddGraphicsCourse.less';
 
 const EDIT_BOX_KEY = Math.random();
@@ -30,14 +33,8 @@ const fieldNames  = { label: 'categoryName', value: 'id', children: 'sonCategory
 
 //添加课程时课程默认的一些值
 const defaultShelfState = 'YES';
-const defaultScheduleMedia = [{          
-  contentType:'INTRO',
-  mediaType: 'TEXT',
-  mediaContent: '',
-  key: EDIT_BOX_KEY
-}]
 const whetherVisitorsJoin = 'NO'
-
+const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
 
 class AddGraphicsCourse extends React.Component {
 
@@ -52,17 +49,13 @@ class AddGraphicsCourse extends React.Component {
       pageType,                  // 页面类型: add->新建 edit->编辑
       imageFile: null,           // 需要被截取的图片
       courseName: null,        // 图文课名称
-      scheduleVideoId: null,     // 图文课链接
+      courseMedia: '',
+      introduce: '',
+      courseMediaId: null,     // 图文课链接
       coverId: null,             // 图文封面的recourceId
-      coverUrl: 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png',            // 图文课封面
+      coverUrl: defaultCoverUrl,            // 图文课封面
       studentList: [],           // 上课学员列表
       shelfState:'YES',          //是否开启店铺展示
-      scheduleMedia: [{          // 图文课媒体资源
-        contentType:"INTRO",
-        mediaType: 'TEXT',
-        mediaContent: '',
-        key: EDIT_BOX_KEY
-      }],
       diskList: [],              // 机构可见磁盘目录
       selectedFileList: [],      // 已经从资料云盘中勾选的文件
       showCutModal: false,       // 是否显示截图弹窗
@@ -71,19 +64,18 @@ class AddGraphicsCourse extends React.Component {
       categoryName:null, //分类名称
       courseCatalogList:[], //分类列表
       categoryId:null, //分类的Id值
-      whetherVisitorsJoin:'NO' // 是否允许游客加入
+      whetherVisitorsJoin: 'NO', // 是否允许游客加入
     }
   }
 
   componentWillMount() {
-    // this.handleFetchDiskList();
     const { id, pageType } = this.state;
     this.getCourseCatalogList();
     if (pageType === 'edit') {
       this.handleFetchScheudleDetail(id);
-      // this.handleFetchStudentList(id);
     }
   }
+
   //获取分类列表
   getCourseCatalogList = ()=>{
     StoreService.getCourseCatalogList({current:1,size:1000}).then((res) => {
@@ -109,20 +101,12 @@ class AddGraphicsCourse extends React.Component {
   }
   // 获取图文课详情
   handleFetchScheudleDetail = (courseId) => {
-    CourseService.videoScheduleDetail({
+    Service.Hades('public/hades/mediaCourseDetail',{
       courseId
     }).then((res) => {
       const { result = {} } = res || {};
       const {
-        // coverId,
-        // coverUrl,
-        // videoType,
-        // videoDuration,
-        // videoName,
-        // scheduleMedia,
         courseName,
-        // scheduleVideoId,
-        // scheduleVideoUrl,
         shelfState,
         whetherVisitorsJoin,
         courseMediaVOS,
@@ -131,13 +115,7 @@ class AddGraphicsCourse extends React.Component {
         categoryId
       } = result;
         let coverId;
-        let coverUrl;
-        let videoType;
-        let videoDuration;
-        let videoName;
-        let scheduleMedia = [];
-        let scheduleVideoId;
-        let scheduleVideoUrl;
+        let coverUrl = this.state.coverUrl;
         
         courseMediaVOS.map((item) => {
           switch (item.contentType){
@@ -146,17 +124,13 @@ class AddGraphicsCourse extends React.Component {
               coverUrl = item.mediaUrl;
             break;
             case "SCHEDULE":
-              videoDuration = item.videoDuration;
-              videoName = item.mediaName;
-              scheduleVideoId = item.mediaContent;
-              scheduleVideoUrl = item.mediaUrl;
-              videoType = item.mediaType;
-            break;
+              this.getTextDetail('courseMedia', item.mediaUrl);
+              break;
             case "INTRO":
-              scheduleMedia = [...scheduleMedia,item]
-            break;  
+              this.getTextDetail('introduce', item.mediaUrl);
+              break;  
             default:
-            break;
+              break;
           }
           return item;
         })
@@ -170,13 +144,7 @@ class AddGraphicsCourse extends React.Component {
       this.setState({
         coverId,
         coverUrl,
-        videoType,
-        videoName,
-        videoDuration,
-        scheduleMedia,
         courseName,
-        scheduleVideoId,
-        scheduleVideoUrl,
         shelfState,
         whetherVisitorsJoin,
         categoryName,
@@ -185,6 +153,17 @@ class AddGraphicsCourse 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 });
+      }
+  })
+  }
 
   handleGoBack = () => {
     const {
@@ -192,13 +171,12 @@ class AddGraphicsCourse extends React.Component {
       videoName,
       videoDuration,
       courseName,
-      scheduleMedia, 
-      scheduleVideoId,
+      courseMediaId,
       categoryId,
       shelfState,
       whetherVisitorsJoin
     } = this.state;
-    if(videoName || videoDuration || scheduleVideoId  || !_.isEqual(scheduleMedia, defaultScheduleMedia) || categoryId || courseName || coverId ||  shelfState !== defaultShelfState || whetherVisitorsJoin !== whetherVisitorsJoin ){
+    if(videoName || videoDuration || courseMediaId || categoryId || courseName || coverId ||  shelfState !== defaultShelfState || whetherVisitorsJoin !== whetherVisitorsJoin ){
       Modal.confirm({
         title: '确认要返回吗?',
         content: '返回后，本次编辑的内容将不被保存。',
@@ -262,37 +240,35 @@ class AddGraphicsCourse extends React.Component {
   handleShowPreviewModal = () => {
     const {
       coverUrl,
-      scheduleVideoUrl,
       courseName,
-      scheduleMedia,
-      videoDuration
-
+      courseMedia,
+      introduce,
+      categoryName,
     } = this.state;
 
     const courseBasinInfo = {
       coverUrl,
-      scheduleVideoUrl,
       courseName,
-      videoDuration
+      categoryName
     }
     const courseIntroInfo = {
-      liveCourseMediaRequests: scheduleMedia
+      courseMedia,
+      introduce,
     }
 
-    const previewCourseModal = (
-      <PreviewCourseModal
-        type="videoCourse"
+    const previewGraphicsModal = (
+      <PreviewGraphicsModal
         courseBasicInfo={courseBasinInfo}
         courseIntroInfo={courseIntroInfo}
         close={() => {
           this.setState({
-            previewCourseModal: null
+            previewGraphicsModal: null
           })
         }}
       />
     );
 
-    this.setState({ previewCourseModal });
+    this.setState({ previewGraphicsModal });
   }
   
   // 选择图文
@@ -309,8 +285,8 @@ class AddGraphicsCourse extends React.Component {
         size: folderSize,
         videoName: folderName,
         videoType: folderFormat,
-        scheduleVideoUrl: ossUrl,
-        scheduleVideoId : resourceId,
+        detailUrl: ossUrl,
+        courseMediaId : resourceId,
         videoDuration: videoDom.duration
       });
     }
@@ -327,99 +303,115 @@ class AddGraphicsCourse extends React.Component {
   }
   // 保存
   handleSubmit = () => {
-    const { instId, adminId } = window.currentUserInstInfo;
-    
     const {
       id,
-      size,
       coverId,
-      coverUrl,
       pageType,
-      joinType,
-      videoName,
-      videoDuration,
-      studentList,
       courseName,
-      scheduleMedia, 
-      scheduleVideoId,
-      scheduleVideoUrl,
+      courseMedia,
+      introduce,
       categoryId,
       shelfState,
-      whetherVisitorsJoin
+      whetherVisitorsJoin,
     } = this.state;
 
     const commonParams = {
-      videoName,
-      videoDuration, 
-      scheduleVideoId,
-      scheduleMedia: scheduleMedia.filter(item => !!item.mediaContent),
       categoryId,
       courseName,
       coverId,
       operatorId:User.getStoreUserId(),
       storeId:User.getStoreId(),
       shelfState,
-      whetherVisitorsJoin
+      whetherVisitorsJoin,
+      courseType: 'PICTURE',
     };
     // 校验必填字段:课程名称, 课程图文
-    this.handleValidate(courseName, scheduleVideoId,categoryId, scheduleMedia).then((res) => {
+    this.handleValidate(courseName, courseMedia, categoryId).then((res) => {
       if (!res) return;
-      if (pageType === 'add') {
-        CourseService.createVideoSchedule(commonParams).then((res) => {
-          if (!res) return;
-          message.success("新建成功");
-          window.RCHistory.goBack();
-        })
-      } else {
-        const editParams = {
-          courseId:id,
-          ...commonParams,
-        }
-        CourseService.editVideoSchedule(editParams).then((res) => {
-          if (!res) return;
-          message.success("保存成功");
-          window.RCHistory.goBack();
-        });
-      }
+      Upload.uploadTextToOSS(courseMedia, `${randomString()}.txt`, (courseMediaId) => {
+        Upload.uploadTextToOSS(introduce, `${randomString()}.txt`, (introduceId) => {
+          this.submitRemote({
+            id,
+            pageType,
+            commonParams,
+            courseMediaId,
+            introduceId,
+          });
+        }, () => message.warning('上传课程简介失败'));
+      }, () => message.warning('上传课程内容失败'));
     });
   }
 
-  handleValidate = (courseName, scheduleVideoId,categoryId,scheduleMedia) => {
+  submitRemote = (data) => {
+    const { id, pageType, commonParams, courseMediaId, introduceId } = data;
+    commonParams.courseMediaId = courseMediaId;
+    commonParams.introduceId = introduceId;
+    if (pageType === 'add') {
+      Service.Hades('public/hades/createMediaCourse', commonParams).then((res) => {
+        if (!res) return;
+        message.success("新建成功");
+        window.RCHistory.goBack();
+      })
+    } else {
+      const editParams = {
+        courseId:id,
+        ...commonParams,
+      }
+      Service.Hades('public/hades/editMediaCourse', editParams).then((res) => {
+        if (!res) return;
+        message.success("保存成功");
+        window.RCHistory.goBack();
+      });
+    }
+  }
+
+  handleValidate = (courseName, courseMedia, categoryId) => {
     return new Promise((resolve) => {
       if (!courseName) {
         message.warning('请输入课程名称');
         resolve(false);
         return false
-      }  
-      if (!scheduleVideoId) {
-        message.warning('请上传图文');
+      }
+      if (!courseMedia) {
+        message.warning('请输入课程内容');
         resolve(false);
         return false
-      }  
+      }
       if(!categoryId){
         message.warning('请选择课程分类');
         resolve(false);
         return false
       }
-      const textMedia = scheduleMedia.filter((item) => item.mediaType === 'TEXT');
-      for (let i = 0, len = textMedia.length; i < len; i++) {
-        if (textMedia[i].mediaContentLength && textMedia[i].mediaContentLength.length > 1000) {
-          message.warning(`第${i+1}个文字简介的字数超过了1000个字`);
-          resolve(false);
-          return false
-        }
-      }
+      // const textMedia = scheduleMedia.filter((item) => item.mediaType === 'TEXT');
+      // for (let i = 0, len = textMedia.length; i < len; i++) {
+      //   if (textMedia[i].mediaContentLength && textMedia[i].mediaContentLength.length > 1000) {
+      //     message.warning(`第${i+1}个文字简介的字数超过了1000个字`);
+      //     resolve(false);
+      //     return false
+      //   }
+      // }
       resolve(true);
     });
   }
 
   render() {
     const {
-      pageType,courseName, scheduleVideoId, coverId,
-      coverUrl, scheduleVideoUrl, studentList, scheduleMedia,
-      showCutModal, showSelectFileModal, diskList,
-      imageFile, joinType, videoName, videoType,shelfState,
-      categoryName,courseCatalogList,whetherVisitorsJoin 
+      id,
+      pageType,
+      courseName,
+      coverUrl,
+      studentList,
+      courseMedia,
+      introduce,
+      showCutModal,
+      showSelectFileModal,
+      diskList,
+      imageFile,
+      videoType,
+      shelfState,
+      categoryName,
+      courseCatalogList,
+      whetherVisitorsJoin,
     } = this.state;
 
     // 已选择的上课学员数量
@@ -471,7 +463,7 @@ class AddGraphicsCourse extends React.Component {
                       currentInputFile: this.refs.picInputFile
                     });
                     this.refs.picInputFile.click()
-                  }}>{`${(pageType === 'add' && (!scheduleVideoId && !coverUrl)) ? '上传' : '修改'}封面`}</Button>
+                  }}>{`${(pageType === 'add' && !coverUrl) ? '上传' : '修改'}封面`}</Button>
                   <div className="tips">建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
                 </div>
               </div>
@@ -486,9 +478,11 @@ class AddGraphicsCourse extends React.Component {
               }
             </div>
             <div className="intro-info mt16">
-              <AddVideoIntro
+              <AddGraphicsIntro
                 data={{
-                  liveCourseMediaRequests: scheduleMedia,
+                  id,
+                  courseMedia,
+                  introduce,
                   shelfState,
                   whetherVisitorsJoin,
                   label: '图文课简介'
@@ -543,7 +537,7 @@ class AddGraphicsCourse extends React.Component {
           onClose={() => this.setState({ showCutModal: false })}
           reUpload={() => { this.state.currentInputFile.click() }}
         />
-        { this.state.previewCourseModal }
+        { this.state.previewGraphicsModal }
       </div>
     )
   }

src/modules/course-manage/graphics-course/components/AddVideoIntro.jsx → src/modules/course-manage/graphics-course/components/AddGraphicsIntro.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-16 16:20:19
  * @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';
+import './AddGraphicsIntro.less';
 import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
 import { DISK_MAP } from '@/common/constants/academic/lessonEnum';
 import { ImgCutModalNew } from '@/components';
 
 
 const { TextArea } = Input;
-const defaultCover = 'https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/1599635741526.png';
-class AddVideoIntro extends React.Component {
+class AddGraphicsIntro extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      warmUrl: defaultCover,
       showSelectFileModal: false,
       diskList: [],
       selectType:null
@@ -60,108 +58,37 @@ class AddVideoIntro extends React.Component {
       }
       this.props.onChange('liveCourseWarmMedia', liveCourseWarmMedia);
     }else{
-        // 最多添加九图片
-        const { liveCourseMediaRequests } = this.props.data;
-
-        const list = _.filter(liveCourseMediaRequests, (item) => {
-          return item.mediaType == "PICTURE";
-        });
-        if (list.length > 8) {
-          message.warning("最多添加9张图片");
-          return;
-        }
-        liveCourseMediaRequests.push({
-          contentType: 'INTRO',
-          size: folderSize,
-          mediaName: folderName,
-          mediaContent: resourceId,
-          mediaType: 'PICTURE',
-          mediaUrl: ossUrl,
-        });
-        this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
+      // 最多添加九图片
+      const { liveCourseMediaRequests } = this.props.data;
+
+      const list = _.filter(liveCourseMediaRequests, (item) => {
+        return item.mediaType == "PICTURE";
+      });
+      if (list.length > 8) {
+        message.warning("最多添加9张图片");
+        return;
+      }
+      liveCourseMediaRequests.push({
+        contentType: 'INTRO',
+        size: folderSize,
+        mediaName: folderName,
+        mediaContent: resourceId,
+        mediaType: 'PICTURE',
+        mediaUrl: ossUrl,
+      });
+      this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
     }
    
   }
- 
-  // 删除简介
-  handleDeleteIntro = (index) => {
-    const { liveCourseMediaRequests } = this.props.data;
-    liveCourseMediaRequests.splice(index, 1);
-    this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
-  }
-
-  // 上移简介
-  handleMoveUpIntro = (index) => {
-    const { liveCourseMediaRequests } = this.props.data;
-    const prevItem = liveCourseMediaRequests[index];
-    const nextItem = liveCourseMediaRequests[index + 1];
-
-    liveCourseMediaRequests.splice(index, 2, nextItem, prevItem);
-    this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
-  }
 
-  // 下移简介
-  handleMoveDownIntro = (index) => {
-    const { liveCourseMediaRequests } = this.props.data;
-    const prevItem = liveCourseMediaRequests[index - 1];
-    const nextItem = liveCourseMediaRequests[index];
-
-    liveCourseMediaRequests.splice(index - 1, 2, nextItem, prevItem);
-    this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
-  }
-
-  renderLittleIcon = (index) => {
-    const { liveCourseMediaRequests } = this.props.data;
-    return (
-      <div className="little-icon">
-        <span
-          className="icon iconfont close"
-          onClick={() => { this.handleDeleteIntro(index); }}
-        ></span>
-
-        {
-          index > 0 &&
-          <span
-            className="icon iconfont"
-            onClick={() => { this.handleMoveDownIntro(index); }}
-          >&#xe6d1;</span>
-        }
-        {
-          index !== liveCourseMediaRequests.length - 1 &&
-          <span
-            className="icon iconfont"
-            onClick={() => { this.handleMoveUpIntro(index); }}
-          >&#xe6cf;</span>
-        }
-      </div>
-    )
+  changeDetail = (value) => {
+    this.props.onChange('courseMedia', value);
   }
 
-  handleChangeIntro = (index, value, length) => {
-    const { liveCourseMediaRequests } = this.props.data;
-    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')
@@ -169,6 +96,7 @@ class AddVideoIntro extends React.Component {
       this.props.onChange('whetherVisitorsJoin','NO')
     }
   }
+
   shelfStateChange = ()=>{
     if(this.props.data.shelfState==="NO"){
       this.props.onChange('shelfState','YES')
@@ -176,12 +104,10 @@ class AddVideoIntro extends React.Component {
       this.props.onChange('shelfState','NO')
     }
   }
-  componentWillMount() {
-  
-  }
+
   render() {
-    const {data: { whetherVisitorsJoin,liveCourseMediaRequests = [], shelfState} } = this.props;
-    const {showSelectFileModal,selectType} = this.state
+    const {data: { id, whetherVisitorsJoin, courseMedia, introduce, shelfState } } = this.props;
+    const { showSelectFileModal, selectType } = this.state;
     return (
       <div className="add-video__intro-info">
         <div className="allow-tourist-join">
@@ -215,52 +141,38 @@ class AddVideoIntro extends React.Component {
           </div>
         </div>
         <div className="introduce">
-          <span className="label">视频课简介：</span>
+          <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">
+                {(!id || courseMedia) &&
+                  <GraphicsEditor
+                    detail={{
+                      content: courseMedia
+                    }}
+                    onChange={(val) => { this.changeDetail(val) }}
+                  />
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="introduce">
+          <span className="label">课程简介：</span>
+          <div className="content">
+            <div className="intro-list">
+              <div className="intro-list__item">
+                {(!id || introduce) &&
+                  <GraphicsEditor
+                    isIntro={true}
+                    detail={{
+                      content: introduce
+                    }}
+                    onChange={(val) => { this.changeIntro(val) }}
+                  />
+                }
               </div>
-        
+            </div>
           </div>
         </div>
         {/* 选择暖场图文件弹窗 */}
@@ -282,4 +194,4 @@ class AddVideoIntro extends React.Component {
   }
 }
 
-export default AddVideoIntro;
+export default AddGraphicsIntro;

src/modules/course-manage/graphics-course/components/AddVideoIntro.less → src/modules/course-manage/graphics-course/components/AddGraphicsIntro.less

 .add-video__intro-info {
+  .w-e-full-screen-editor {
+    background: #fff !important;
+  }
     .playback {
       margin-bottom: 10px;
       .require {

src/modules/course-manage/graphics-course/components/GraphicsCourseList.jsx

@@ -24,6 +24,7 @@ import User from '@/common/js/user'
 import './GraphicsCourseList.less';
 
 const ENV = process.env.DEPLOY_ENV || 'dev';
+const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
 
 class GraphicsCourseList extends React.Component {
 
@@ -45,8 +46,6 @@ class GraphicsCourseList extends React.Component {
   
   // 观看数据弹窗
   handleShowWatchDataModal = (record) => {
-    console.log('111');
-    console.log("record",record);
     const watchDataModal = (
       <WatchDataModal
         type='videoCourseList'
@@ -75,7 +74,7 @@ class GraphicsCourseList extends React.Component {
           return (
             <div className="record__item">
               {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
-              <img className="course-cover" src={coverUrl || `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`} />
+              <img className="course-cover" src={coverUrl || defaultCoverUrl} />
               { record.courseName.length > 25?
                 <Tooltip title={record.courseName}>
                   <div className="course-name">{record.courseName}</div>
@@ -204,14 +203,14 @@ class GraphicsCourseList extends React.Component {
             className="operate__item"
             key="plan"
             onClick={() => {
-              RCHistory.push(`/create-video-course?type=edit&id=${item.id}`);
+              RCHistory.push(`/create-graphics-course?type=edit&id=${item.id}`);
             }}
           >关联培训计划</div>
           <div
             className="operate__item"
             key="edit"
             onClick={() => {
-              RCHistory.push(`/create-video-course?type=edit&id=${item.id}`);
+              RCHistory.push(`/create-graphics-course?type=edit&id=${item.id}`);
             }}
           >编辑</div>
           <div
@@ -277,7 +276,7 @@ class GraphicsCourseList extends React.Component {
     const { id, scheduleVideoUrl } = record;
 
     const _appId =  appId;
-    const htmlUrl = `${LIVE_SHARE}video_detail/${id}?id=${User.getStoreId()}`;
+    const htmlUrl = `${LIVE_SHARE}graphics_detail/${id}?id=${User.getStoreId()}`;
     const longUrl = htmlUrl;
     const { coverUrl, courseName } = record;
     const shareData = {
@@ -286,12 +285,13 @@ class GraphicsCourseList extends React.Component {
       scheduleVideoUrl,
       courseName,
     };
-
+    
     const shareLiveModal = (
       <ShareLiveModal
         needStr={needStr}
         data={shareData}
         type="videoClass"
+        title="图文课"
         close={() => {
           this.setState({
             shareLiveModal:  null

src/modules/course-manage/graphics-course/index.jsx

 import React from 'react';
 
 import GraphicsCourseFilter from './components/GraphicsCourseFilter';
-import GraphicsCourseOpt from './components/VieoCourseOpt';
+import GraphicsCourseOpt from './components/GraphicsCourseOpt';
 import GraphicsCourseList from './components/GraphicsCourseList';
-import CourseService from "@/domains/course-domain/CourseService";
+import Service from '@/common/js/service';
 import User from '@/common/js/user'
 
 class GraphicsCourse extends React.Component {
@@ -14,6 +14,7 @@ class GraphicsCourse extends React.Component {
       query: {
         size: 10,
         current: 1,
+        courseType: 'PICTURE',
         storeId:User.getStoreId()
       },
       dataSource: [],    // 视频课列表
@@ -35,15 +36,22 @@ class GraphicsCourse extends React.Component {
 
     // 更新请求参数
     this.setState({ query });
-
-    CourseService.videoSchedulePage(query).then((res) => {
+    Service.Hades('public/hades/mediaCoursePage', query).then((res) => {
       const { result = {} } = res || {};
       const { records = [], total = 0 } = result;
       this.setState({
         dataSource: records,
         totalCount: Number(total)
       });
-    });
+    })
+    // CourseService.videoSchedulePage(query).then((res) => {
+    //   const { result = {} } = res || {};
+    //   const { records = [], total = 0 } = result;
+    //   this.setState({
+    //     dataSource: records,
+    //     totalCount: Number(total)
+    //   });
+    // });
   }
 
   render() {

src/modules/course-manage/graphics-course/modal/WatchDataModal.jsx

 /*
  * @Author: 吴文洁 
  * @Date: 2020-05-19 11:01:31 
- * @Last Modified by: 吴文洁
- * @Last Modified time: 2020-05-25 16:50:47
+ * @Last Modified by: chenshu
+ * @Last Modified time: 2021-03-16 17:56:18
  * @Description 余额异常弹窗
  */
 import React from 'react';
 import {Table, Modal,Input} from 'antd';
 import { PageControl } from "@/components";
-import CourseService from "@/domains/course-domain/CourseService";
+import Service from "@/common/js/service";
 import User from '@/common/js/user'
 import './WatchDataModal.less';
 import dealTimeDuration from "../../utils/dealTimeDuration";
@@ -46,7 +46,7 @@ class WatchDataModal extends React.Component {
       courseId:id,
       storeId:User.getStoreId()
     }
-    CourseService.videoWatchInfo(params).then((res) => {
+    Service.Hades('public/hades/mediaCourseWatchInfo', params).then((res) => {
       const { result = {} } = res ;
       const { records = [], total = 0 } = result;
       this.setState({
@@ -122,7 +122,7 @@ class WatchDataModal extends React.Component {
     const { visible,size,dataSource,totalCount,query} = this.state;
     return (
         <Modal
-          title="视频课观看数据"
+          title="图文课观看数据"
           visible={visible}
           footer={null}
           onCancel={this.onClose}

src/modules/course-manage/modal/PreviewGraphicsModal.jsx

+import React from 'react';
+import { Modal } from 'antd';
+import './PreviewGraphicsModal.less';
+
+const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
+
+class PreviewGraphicsModal extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      type: 'detail',
+    }
+  }
+
+  render() {
+    const { courseBasicInfo, courseIntroInfo } = this.props;
+    const { coverUrl, courseName, categoryName } = courseBasicInfo;
+    const { courseMedia, introduce } = courseIntroInfo;
+    const { type } = this.state;
+    return (
+      <Modal
+        title="预览"
+        visible={true}
+        width={680}
+        onCancel={this.props.close}
+        footer={null}
+        maskClosable={false}
+        closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
+        className="preview-live-graphics-modal"
+      >
+        <div className="container__wrap">
+          <div className="container">
+            <div className="container__header">
+              <img src={coverUrl || defaultCoverUrl} className="course-cover" />
+            </div>
+            <div className="container__body">
+              <div className="title__name">{courseName}</div>
+              <div className="title__categery">课程分类：{categoryName}</div>
+            </div> 
+            
+            <div className="container__introduction">
+              <div className="title">
+                <span 
+                  className={`title-word${type === 'detail' ? ' selected' : ''}`}
+                  onClick={() => this.setState({ type: 'detail' })}
+                >图文详情</span>
+                <span 
+                  className={`title-word${type === 'introduction' ? ' selected' : ''}`}
+                  onClick={() => this.setState({ type: 'introduction' })}
+                >图文简介</span>
+              </div>
+              <div className="container__introduction__list editor-box">
+                <div
+                  className="intro-item text"
+                  dangerouslySetInnerHTML={{
+                    __html: type === 'detail' ? courseMedia : introduce
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Modal>
+    )
+  }
+}
+
+export default PreviewGraphicsModal;

src/modules/course-manage/modal/PreviewGraphicsModal.less

+.preview-live-graphics-modal {
+  .ant-modal-body {
+    background-image: url('https://image.xiaomaiketang.com/xm/xZWdziTCAf.png');
+    background-size: 100% 100%;
+  }
+  .container__wrap {
+    width: 340px;
+    height: 618px;
+    padding: 67px 46px 48px 47px;
+    margin: auto;
+    background-image: url('https://image.xiaomaiketang.com/xm/DHMzHiGc2E.png');
+    background-size: 100% 100%;
+  }
+
+  .container {
+    overflow: scroll;
+    height: 100%;;
+
+    .course-cover, .course-url {
+      width: 100%;
+      height: 141px;
+      background: #000;
+    }
+
+    &__body {
+      background-color: #FFF;
+      padding: 7px 0 11px 0;;
+
+      .title__name {
+        color: #333333;
+        font-weight: 500;
+      }
+      .title__categery {
+        font-size: 12px;
+        color: #999999;
+      }
+    }
+
+    &__introduction {
+      margin-top: 10px;
+      padding: 12px 0;
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        width: 241px;
+        top: -10px;
+        height: 10px;
+        background: #F4F6FA;
+      }
+      .title {
+        height: 24px;
+        display: flex;
+        align-items: center;
+        font-size: 12px;
+        color: #333333;
+        padding: 0 10px;
+        border-bottom: 1px solid #E8E8E8;
+        .title-word {
+          position: relative;
+          margin-right: 15px;
+          cursor: pointer;
+        }
+        .selected {
+          color: #FFB714;
+          &::after {
+            content: '';
+            position: absolute;
+            bottom: -4px;
+            width: 20px;
+            height: 1px;
+            background: #FFB714;
+            left: 50%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+
+      &__list {
+        margin-top: 12px;
+        .intro-item:not(:first-child) {
+          margin-top: 13px;
+        }
+
+        .text {
+          color: #666;
+          line-height: 17px;
+
+          p {
+            font-size: 12px;
+          }
+        }
+
+        .picture {
+          img {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

src/modules/course-manage/modal/ShareLiveModal.jsx

 /*
  * @Author: 吴文洁 
  * @Date: 2020-07-20 19:12:49 
- * @Last Modified by: 吴文洁
- * @Last Modified time: 2020-07-20 20:25:13
+ * @Last Modified by: chenshu
+ * @Last Modified time: 2021-03-16 17:41:40
  * @Description: 大班直播分享弹窗
  */
 
@@ -130,16 +130,16 @@ class ShareLiveModal extends React.Component {
   }
   
   render() {
-    const { needStr, data, type } = this.props;
+    const { needStr, data, type, title } = this.props;
     const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data;
     const { shareUrl ,imgData,showImg,time} = this.state;
 
     // 判断是否是默认图, 默认图不需要在URL后面增加字符串
     const isDefaultCover = coverUrl === DEFAULT_COVER;
-
+    
     let coverImgSrc = coverUrl;
     if(type === 'videoClass'){
-      if(!coverUrl || isDefaultCover){
+      if((!coverUrl || isDefaultCover) && title !== '图文课'){
         coverImgSrc = `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring`
       }
     }else{
@@ -153,7 +153,7 @@ class ShareLiveModal extends React.Component {
     return (
 
       <Modal
-        title={type === 'videoClass' ? '分享视频课' : '分享直播课'}
+        title={`分享${title}`}
         width={680}
         visible={true}
         footer={null}
@@ -197,10 +197,10 @@ class ShareLiveModal extends React.Component {
         <div className="share-poster right__item">
           <div className="title">① 海报分享</div>
           { type === "liveClass" && 
-            <div className="sub-title">用户可通过微信扫描海报二维码，观看直播</div>
+            <div className="sub-title">用户可通过微信扫描海报二维码，观看{title}</div>
           }
           { type === "videoClass" && 
-            <div className="sub-title">用户可通过微信识别二维码，报名观看视频</div>
+            <div className="sub-title">用户可通过微信识别二维码，报名观看{title}</div>
           }
 
           <div className="content" onClick={this.handleDownloadPoster}>下载海报</div>
@@ -209,10 +209,10 @@ class ShareLiveModal extends React.Component {
         <div className="share-url right__item">
           <div className="title">② 链接分享</div>
           { type === "liveClass" && 
-            <div className="sub-title">用户可通过微信打开以下链接，观看直播</div>
+            <div className="sub-title">用户可通过微信打开以下链接，观看{title}</div>
           }
             { type === "videoClass" && 
-            <div className="sub-title">用户可通过打开链接，报名观看视频</div>
+            <div className="sub-title">用户可通过打开链接，报名观看{title}</div>
           }
           <div className="content url-content">
             <div className="share-url" id="shareUrl">{shareUrl}</div>

src/modules/course-manage/video-course/components/VideoCourseList.jsx

@@ -311,6 +311,7 @@ class VideoCourseList extends React.Component {
         needStr={needStr}
         data={shareData}
         type="videoClass"
+        title="视频课"
         close={() => {
           this.setState({
             shareLiveModal:  null