fix:merge

5e3e3165 · chenshu · 292c3f1a · 0f16d3e7 · 5e3e3165 · 5e3e3165
Commit 5e3e3165 authored Mar 24, 2021 by chenshu
13 changed files
--- a/src/core/upload.js
+++ b/src/core/upload.js
@@ -151,7 +151,7 @@ class Upload {
    if (!string) return success();
    const params = {
      accessTypeEnum: "PUBLIC",
-      bizCode: 'CLOUD_CLASS_COMMON',
+      bizCode: 'CLOUD_CLASS_COURSE',
      instId: User.getStoreId(),
      resourceName: name,
    }

--- a/src/modules/course-manage/AddLive.jsx
+++ b/src/modules/course-manage/AddLive.jsx
 /*
 * @Author: 吴文洁 
 * @Date: 2020-07-17 15:49:11 
- * @Last Modified by: mikey.zhaopeng
+ * @Last Modified by: chenshu
- * @Last Modified time: 2020-11-23 22:02:49
+ * @Last Modified time: 2021-03-24 14:13:04
 * @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,8 @@ class AddLive extends React.Component {
        needRecord: 'YES',
        whetherVisitorsJoin:'NO',
        liveCourseWarmMedia: {},
-        liveCourseMediaRequests: [{
+        introduce: '',
-          contentType:"INTRO",
+        liveCourseMediaRequests: [],
-          mediaType: 'TEXT',
-          mediaContent: '',
-          key: Math.random()
-        }]
      },
    }
  }
@@ -111,7 +112,24 @@ class AddLive extends React.Component {
    const { type } = this.state;
    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 +158,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 +169,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 +220,7 @@ class AddLive extends React.Component {
          isEdit = false
        }
        this.setState({
+          loadintroduce: !hasIntro,
          isEdit,
          loading: false,
          courseState,
@@ -210,6 +231,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,90 +310,99 @@ handleChangeBasicInfo = (field, value) => {
    }
    this.handleValidate(addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit).then((res)  => {
      if (!res) return;
-      const { type } = this.state;
+      Upload.uploadTextToOSS(addLiveIntroInfo.introduce, `${randomString()}.txt`, (introduceId) => {
-      const { courseName,coverUrl,coverId,categoryId} = addLiveBasicInfo;
+        this.submitRemote({ introduceId, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, id });
-      const {
+      }, () => message.warning('上传课程简介失败'));
-        liveDate,
+    })
-        teacherId,
+  }
-        assistant,
-        timeHorizonEnd,
-        timeHorizonStart,
-        calendarTime,
-      } = addLiveClassInfo;
-      let { startTime, endTime } = addLiveClassInfo;
+  submitRemote = ({ introduceId, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, id }) => {
-      const { liveCourseMediaRequests, needRecord,whetherVisitorsJoin,liveCourseWarmMedia} = addLiveIntroInfo;
+    const { type } = this.state;
+    const { courseName,coverUrl,coverId,categoryId} = addLiveBasicInfo;
+    const {
+      liveDate,
+      teacherId,
+      assistant,
+      timeHorizonEnd,
+      timeHorizonStart,
+      calendarTime,
+    } = addLiveClassInfo;
+    let { startTime, endTime } = addLiveClassInfo;
+    const { needRecord,whetherVisitorsJoin,liveCourseWarmMedia} = addLiveIntroInfo;
+    if(type === 'add') {
+      startTime = startTime;
+      endTime = endTime;
+    } else {
+      const _liveDate = moment(liveDate).format("YYYY-MM-DD");
+      const _timeHorizonStart = moment(timeHorizonStart).format('HH:mm');
+      const _timeHorizonEnd = moment(timeHorizonEnd).format('HH:mm');
+      startTime = moment(_liveDate + ' ' + _timeHorizonStart).format('x');
+      endTime = moment(_liveDate + ' ' + _timeHorizonEnd).format('x');
+    }
+    let coverObj ={
+      contentType:'COVER',
+      mediaContent:coverId,
+      mediaType:'PICTURE',
+      mediaUrl: coverUrl,
+    }
+    let scheduleMediaRequests = [];
+    if(coverId){
+      scheduleMediaRequests = [coverObj,...scheduleMediaRequests]
+    }
+    if(liveCourseWarmMedia && liveCourseWarmMedia.mediaUrl){
+      scheduleMediaRequests = [liveCourseWarmMedia,...scheduleMediaRequests]
+    }
+    const commonParams = {
+      adminIds:assistant,
+      calendarTime,
+      categoryId,
+      endTime,
+      needRecord,
+      startTime,
+      courseName: courseName.trim(),
+      storeId:User.getStoreId(),
+      teacherId:teacherId,
+      whetherVisitorsJoin,
+      scheduleMediaRequests
+    }
-      if(type === 'add') {
+    if (type === 'add') {
-        startTime = startTime;
+      const params = {
-        endTime = endTime;
+        ...commonParams,
-      } else {
+        operatorId: User.getUserId(),
-        const _liveDate = moment(liveDate).format("YYYY-MM-DD");
+        introduceId,
-        const _timeHorizonStart = moment(timeHorizonStart).format('HH:mm');
-        const _timeHorizonEnd = moment(timeHorizonEnd).format('HH:mm');
-        startTime = moment(_liveDate + ' ' + _timeHorizonStart).format('x');
-        endTime = moment(_liveDate + ' ' + _timeHorizonEnd).format('x');
-      }
-      let coverObj ={
-        contentType:'COVER',
-        mediaContent:coverId,
-        mediaType:'PICTURE',
-        mediaUrl: coverUrl,
-      }
-      let scheduleMediaRequests = [...liveCourseMediaRequests];
-      if(coverId){
-        scheduleMediaRequests = [coverObj,...scheduleMediaRequests]
-      }
-      if(liveCourseWarmMedia && liveCourseWarmMedia.mediaUrl){
-        scheduleMediaRequests = [liveCourseWarmMedia,...scheduleMediaRequests]
-      }
-      const commonParams = {
-        adminIds:assistant,
-        calendarTime,
-        categoryId,
-        endTime,
-        needRecord,
-        startTime,
-        courseName: courseName.trim(),
-        storeId:User.getStoreId(),
-        teacherId:teacherId,
-        whetherVisitorsJoin,
-        scheduleMediaRequests
      }
-      if (type === 'add') {
+      CourseService.createLiveCloudCourse(params).then((res) => {
-        const params = {
+        if (res.success){
-          ...commonParams,
+          message.success("新建成功");
-          operatorId:User.getUserId(),
+          window.RCHistory.push({
-        }
+            pathname: `/live-course`,
+          });
-        CourseService.createLiveCloudCourse(params).then((res) => {
+        }  
-          if (res.success){
+      });
-            message.success("新建成功");
-            window.RCHistory.push({
-              pathname: `/live-course`,
-            });
-          }  
-        });
-      } else {
+    } else {
-        const params = {
+      const params = {
-          ...commonParams,
+        ...commonParams,
-          updateUserId:User.getUserId(),
+        updateUserId:User.getUserId(),
-          liveCourseId: id,
+        liveCourseId: id,
-        }
+        introduceId,
-        CourseService.updateLiveCloudCourse(params).then((res) => {
-          if (res.success){
-            message.success("更新成功");
-            window.RCHistory.push({
-              pathname: `/live-course`,
-            });
-          }
-        });
      }
-    })
+      CourseService.updateLiveCloudCourse(params).then((res) => {
+        if (res.success){
+          message.success("更新成功");
+          window.RCHistory.push({
+            pathname: `/live-course`,
+          });
+        }
+      });
+    }
  }
  handleValidate = (addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit) => {
    return new Promise((resolve) => {
      const { type } = this.state;
@@ -498,14 +543,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,
+      id,
-      addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo,
+      type,
-      isEdit
+      addLiveBasicInfo,
+      addLiveClassInfo,
+      addLiveIntroInfo,
+      isEdit,
+      loadintroduce,
+      showSelectImageModal,
    } = this.state;
+    console.log(loadintroduce, addLiveIntroInfo, 888888)
    return (
      <div className="page add-live-page">
        <Breadcrumbs
@@ -541,7 +605,7 @@ handleChangeBasicInfo = (field, value) => {
              <div className="title">更多信息</div>
              <AddLiveIntro
                isEdit={isEdit}
-                data={addLiveIntroInfo}
+                data={{ ...addLiveIntroInfo, loadintroduce, id }}
                onChange={this.handleChangeIntroInfo}
              />
            </div>
@@ -550,10 +614,25 @@ handleChangeBasicInfo = (field, value) => {
        <div className="footer">
          <Button onClick={this.handleGoBack}>取消</Button>
-          <Button onClick={this.handleShowPreviewModal}>预览课程介绍</Button>
+          <Button onClick={this.handleShowPreviewModal}>预览</Button>
          <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>

--- a/src/modules/course-manage/components/AddLiveIntro.jsx
+++ b/src/modules/course-manage/components/AddLiveIntro.jsx
 /*
 * @Author: 吴文洁 
 * @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 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) => {
+  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 = ()=>{
    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" >
@@ -195,7 +172,7 @@ class AddLiveIntro extends React.Component {
                </Col>
              </Row>
              <Row>
-                <Col span={8}>
+                <Col span={24}>
                  <Radio value="NO">
                    手动录制
                    <span className="playback__text">讲师手动选择何时开始录制</span>
@@ -266,50 +243,20 @@ class AddLiveIntro extends React.Component {
        <div className="introduce">
          <span className="label">直播课简介：</span>
          <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>
        {/* 选择暖场图文件弹窗 */}

--- a/src/modules/course-manage/components/GraphicsEditor.jsx
+++ b/src/modules/course-manage/components/GraphicsEditor.jsx
@@ -127,7 +127,6 @@ class GraphicsEditor extends React.Component {
        'xmimage',
        'xmvideo',
        'table',
-        'code',
        'splitLine',
        'undo',
        'redo',
@@ -154,7 +153,10 @@ class GraphicsEditor extends React.Component {
      return str
    }
    this.editorInt.config.onchange = (html) => {
-      const textLength = this.editorInt.txt.text().replace(/\&nbsp\;/ig, ' ').length;
+      const videoCount = ((html || '').match(/<iframe/g) || []).length;
+      const imageCount = ((html || '').match(/<img/g) || []).length;
+      const textLength = this.editorInt.txt.text().replace(/\&nbsp\;/ig, ' ').length + videoCount + imageCount;
+      console.log(html, 777777)
      this.setState({ textLength }, () => {
        onChange(html, this.state.textLength);
      })
@@ -165,10 +167,10 @@ class GraphicsEditor extends React.Component {
  render() {
    const { editorId, textLength } = this.state;
-    const { limitLength = 1000 } = this.props;
+    const { limitLength = 1000, isIntro } = this.props;
-    return <div className="wang-editor-container ">
+    return <div className={`graphics-editor-container${isIntro ? ' introduce' : ''}`}>
      <div className="editor-box" id={`editor${editorId}`}></div>
-      {textLength > limitLength && <div className="editor-tips">超了{textLength - limitLength}个字</div>}
+      <div className="editor-tips">({textLength}/100000)</div>
    </div>
  }
 }

--- a/src/modules/course-manage/components/GraphicsEditor.less
+++ b/src/modules/course-manage/components/GraphicsEditor.less
-.wang-editor-container {
+.graphics-editor-container {
  border: 1px solid #E8E8E8;
  border-radius: 4px;
-  width: 552px;
+  width: 702px;
+  height: 510px;
  position: relative;
  .w-e-text p,
@@ -14,30 +15,38 @@
  .w-e-text pre {
    margin: 0;
  }
-  .w-e-menu .w-e-panel-container {
+  .editor-box {
-    margin-top: 0 !important;
+    height: 100%;
  }
  .w-e-toolbar {
    background-color: #fff !important;
    border: none !important;
    border-bottom: 1px solid #E8E8E8 !important;
+    width: 700px;
  }
  .w-e-text-container {
    border: none !important;
-    height: 88px !important;
+    height: ~'calc(100% - 81px)' !important;
  }
  .editor-tips {
    position: absolute;
-    top: 5px;
+    bottom: 5px;
    right: 8px;
-    color: #f5222d;
+    color: #666;
+    z-index: 1;
  }
  .w-e-full-screen-editor {
    .w-e-text-container {
      height: ~'calc(100vh - 81px)' !important;
    }
  }
+  &.introduce {
+    height: 200px;
+    .w-e-text-container {
+      height: ~'calc(100% - 41px)' !important;
+    }
+  }
 }
\ No newline at end of file
--- a/src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
+++ b/src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
@@ -66,7 +66,7 @@ class AddGraphicsCourse extends React.Component {
      courseCatalogList:[], //分类列表
      categoryId:null, //分类的Id值
      whetherVisitorsJoin: 'NO', // 是否允许游客加入
-      isContent: '',
+      isContent: true,
    }
  }
@@ -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 })
  }
@@ -104,17 +113,17 @@ class AddGraphicsCourse extends React.Component {
    });
  }
-  catalogChange= (value) => {
+  catalogChange= (value, options) => {
    const changeValueLength = value.length;
    switch (changeValueLength){
      case 1:
-        this.setState({categoryId:value[0]});   
+        this.setState({ categoryId: value[0], categoryName: options[0].categoryName });
      break;
      case 2:
-        this.setState({categoryId:value[1]});
+        this.setState({ categoryId: value[1], categoryName: `${options[0].categoryName}-${options[1].categoryName}` });
      break;
      default:
-        this.setState({categoryId:null});
+        this.setState({ categoryId: null, categoryName: '' });
      break;    
    }
  }
@@ -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,
@@ -276,7 +285,6 @@ class AddGraphicsCourse extends React.Component {
      courseMedia,
      introduce,
    }
    const previewGraphicsModal = (
      <PreviewGraphicsModal
        courseBasicInfo={courseBasinInfo}
@@ -300,7 +308,7 @@ class AddGraphicsCourse extends React.Component {
    const { ossUrl } = file;
    const { courseMedia } = this.state;
    this.setState({
-      courseMedia: `${courseMedia}<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>`
+      courseMedia: `${courseMedia}<p style="width: 100%;padding-top: 56.25%;position: relative;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="${ossUrl}"></iframe><br/></p><p><br/></p>`
    });
  }
@@ -311,7 +319,7 @@ class AddGraphicsCourse extends React.Component {
    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>`
+      [isContent ? 'courseMedia' : 'introduce']: `${isContent ? courseMedia : introduce}<p><img style="max-width: 100%;" src="${ossUrl}" /><br/><p>`
    });
  }

--- 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-22 17:43:10
+ * @Last Modified time: 2021-03-24 14:40:40
 * @Description: 添加直播-简介
 */
@@ -26,8 +26,9 @@ class AddGraphicsIntro extends React.Component {
    this.state = {
      showSelectFileModal: false,
      diskList: [],
-      selectType:null
+      selectType: null,
    }
+    this.isContent = true;
  }
  componentDidMount() {
@@ -49,8 +50,10 @@ class AddGraphicsIntro extends React.Component {
  clickEditor = (e) => {
    if (e && e.target.closest('.content-editor')) {
      this.isContent = true
+      console.log(11111111)
    } else if (e && e.target.closest('.introduce-editor')) {
      this.isContent = false
+      console.log(222222222)
    }
  }
@@ -163,15 +166,15 @@ class AddGraphicsIntro extends React.Component {
                </Col>  
                <Col span={21}>
                  <div className="desc">
-                    <div>开启：此图文课将在用户店铺的图文课列表中出现</div>
+                    <div>开启：图文课将在用户学员表中展示</div>
-                    <div>关闭：此图文课将在用户店铺的图文课列表中隐藏</div>
+                    <div>关闭：图文课将在用户学员表中隐藏</div>
                  </div>
                </Col> 
              </Row>
          </div>
        </div>
-        <div className="introduce">
+        <div className="introduce required">
-          <span className="label">课程内容：</span>
+          <span className="label" style={{ marginTop: 5 }}>课程内容：</span>
          <div className="content">
            <div className="intro-list">
              <div className="intro-list__item content-editor">

--- 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-19 16:25:31
+ * @Last Modified time: 2021-03-24 15:13:38
 * @Description 余额异常弹窗
 */
 import React from 'react';
@@ -107,7 +107,7 @@ class WatchDataModal extends React.Component {
        }
      },
      {
-        title: '观看时长',
+        title: '观看总时长',
        key: 'watchDuration',
        dataIndex: 'watchDuration',
        render: (val) => {
@@ -119,7 +119,7 @@ class WatchDataModal extends React.Component {
        key: 'progress',
        dataIndex: 'progress',
        render: (val) => {
-          return  <span>{val || 0}%</span>
+          return  <span>{val === 100 ? '已完成' : `${val || 0}%`}</span>
        }
      }
    ];

--- a/src/modules/course-manage/modal/PreviewCourseModal.jsx
+++ b/src/modules/course-manage/modal/PreviewCourseModal.jsx
@@ -76,7 +76,7 @@ class PreviewCourseModal extends React.Component {
    const { courseBasicInfo, courseClassInfo = {}, courseIntroInfo, type,courseState,origin} = this.props;
    const { coverUrl, courseName, scheduleVideoUrl,videoDuration} = courseBasicInfo;
    const { liveDate, calendarTime,startTime,endTime,timeHorizonStart, timeHorizonEnd, teacherName } = courseClassInfo;
-    const { liveCourseMediaRequests } = courseIntroInfo;
+    const { introduce } = courseIntroInfo;
    let liveDateStr, startTimeStr, endTimeStr;
@@ -177,28 +177,12 @@ class PreviewCourseModal extends React.Component {
                <div className="container__introduction__title">直播课简介</div>
              }
              <div className="container__introduction__list editor-box">
-                {
+                <div
-                  liveCourseMediaRequests.map((item, index) => {
+                  className="intro-item text"
-                    if (item.mediaType === 'TEXT') {
+                  dangerouslySetInnerHTML={{
-                      return (
+                    __html: introduce
-                        <div
+                  }}
-                          className="intro-item text"
+                />
-                          dangerouslySetInnerHTML={{
-                            __html: item.mediaContent
-                          }}
-                        />
-                      )
-                    }
-                    if (item.mediaType === 'PICTURE') {
-                      return (
-                        <div className="intro-item picture">
-                          <img src={item.mediaUrl}  />
-                        </div>
-                      )
-                    }
-                  })
-                }
              </div>
            </div>
          </div>

--- a/src/modules/course-manage/modal/PreviewCourseModal.less
+++ b/src/modules/course-manage/modal/PreviewCourseModal.less
@@ -122,19 +122,14 @@
          margin-top: 13px;
        }
-        .text {
+        color: #666;
-          color: #666;
-          line-height: 17px;
-          p {
+        p {
-            font-size: 12px;
+          font-size: 12px;
-          }
        }
-        .picture {
+        img {
-          img {
+          width: 100%;
-            width: 100%;
-          }
        }
      }
    }

--- a/src/modules/course-manage/modal/PreviewGraphicsModal.less
+++ b/src/modules/course-manage/modal/PreviewGraphicsModal.less
@@ -81,20 +81,12 @@
        .intro-item:not(:first-child) {
          margin-top: 13px;
        }
+        color: #666;
-        .text {
+        p {
-          color: #666;
+          font-size: 12px;
-          line-height: 17px;
-          p {
-            font-size: 12px;
-          }
        }
+        img {
-        .picture {
+          max-width: 100%;
-          img {
-            width: 100%;
-          }
        }
      }
    }

--- a/src/modules/course-manage/video-course/AddVideoCourse.jsx
+++ b/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 {
@@ -259,8 +293,8 @@ class AddVideoCourse extends React.Component {
      scheduleVideoUrl,
      courseName,
      scheduleMedia,
-      videoDuration
+      videoDuration,
+      introduce,
    } = this.state;
    const courseBasinInfo = {
@@ -270,7 +304,8 @@ class AddVideoCourse extends React.Component {
      videoDuration
    }
    const courseIntroInfo = {
-      liveCourseMediaRequests: scheduleMedia
+      liveCourseMediaRequests: scheduleMedia,
+      introduce,
    }
    const previewCourseModal = (
@@ -330,13 +365,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,33 +380,40 @@ 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;
-      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) => {
@@ -404,6 +447,17 @@ class AddVideoCourse extends React.Component {
  handleSelectCover = (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) => {
@@ -516,7 +570,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 +663,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 +702,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"

--- a/src/modules/course-manage/video-course/components/AddVideoIntro.jsx
+++ b/src/modules/course-manage/video-course/components/AddVideoIntro.jsx
 /*
 * @Author: 吴文洁 
 * @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: 添加直播-简介
 */
 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">
@@ -217,50 +221,20 @@ class AddVideoIntro extends React.Component {
        <div className="introduce">
          <span className="label">视频课简介：</span>
          <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>
        {/* 选择暖场图文件弹窗 */}