feat:解决合并代码后的冲突

732ffe01 · zhangleyuan · 01db1047 · 00b7ddf6 · 732ffe01 · 732ffe01
Commit 732ffe01 authored Jul 18, 2021 by zhangleyuan
81 changed files
--- a/src/bu-components/PreviewCourseModal.less
+++ b/src/bu-components/PreviewCourseModal.less
@@ -13,8 +13,9 @@
  }
  .container {
-    overflow: scroll;
+    overflow-y: auto;
-    height: 100%;;
+    overflow-x: hidden;
+    height: 100%;
    .course-cover, .course-url {
      width: 100%;

--- a/src/bu-components/PreviewFileModal.less
+++ b/src/bu-components/PreviewFileModal.less
@@ -33,6 +33,7 @@
            }
        }
        .operate{
+            display:inline-block;
            margin-top:24px;
            .btn {
                padding:5px 12px;

--- a/src/bu-components/UploadProgressModal.jsx
+++ b/src/bu-components/UploadProgressModal.jsx
@@ -98,7 +98,6 @@ class UploadProgressModal extends React.Component {
    // 开始上传之前初始化OssClient
    this.initOssClient(id, resourceName).then((result) => {
      const { ossClient, resourceId, callBack, callbackBody, ossUri } = result;
-      console.log('type',type);
      ossClient.multipartUpload(ossUri, fileContent, {
        callback: {
          url: callBack,

--- a/src/common/constants/academic/lessonEnum.js
+++ b/src/common/constants/academic/lessonEnum.js
@@ -44,6 +44,10 @@ const FileVerifyMap = {
    type: "word",
    maxSize: 100
  },
+  "application/wps-writer": {
+    type: "word",
+    maxSize: 100,
+  },
  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": {
    type: "word",
    maxSize: 100
@@ -133,12 +137,13 @@ const FileTypeIcon = {
  PPTX: "https://image.xiaomaiketang.com/xm/847pFAdYGW.png",
  PDF: "https://image.xiaomaiketang.com/xm/rrEJMNkhTG.png",
  MP3: "https://image.xiaomaiketang.com/xm/ykjnSWDyQ6.png",
-  MP4: "https://image.xiaomaiketang.com/xm/whSYMTdR57.png",
+  MP4: "https://image.xiaomaiketang.com/xm/yK3ASiS8ch.png",
  JPG: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png",
  JPEG: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png",
  PNG: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png",
  GIF: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png",
  BMP: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png",
+  VIDEO: 'https://image.xiaomaiketang.com/xm/yK3ASiS8ch.png'
 };
 const UploadIcon = "https://image.xiaomaiketang.com/xm/4DXNrZWWsd.png";

--- a/src/components/ContactWidget.less
+++ b/src/components/ContactWidget.less
-.ant-popover .ant-popover-content .ant-popover-inner {
+.contact-widget-popover .ant-popover-content .ant-popover-inner {
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
    .ant-popover-inner-content {
      padding: 0;

--- a/src/components/ContactWidget.tsx
+++ b/src/components/ContactWidget.tsx
@@ -27,6 +27,7 @@ function Content() {
 export default function ContactWidget(props:ContactWidgetProps) {
    return <Popover 
+            className="contact-widget-popover"
            placement={props.placement} 
            arrowPointAtCenter 
            content={Content}

--- a/src/core/function.js
+++ b/src/core/function.js
@@ -1156,3 +1156,15 @@ window.XMShowClassName = (date, itemName) => {
  }
  return 'new-icon'
 }
+// 格式化时间段为时分
+window.formatDuration = function (time) {
+  const diff = Math.floor(time % 3600);
+  let hours = Math.floor(time / 3600);
+  let mins = Math.floor(diff / 60);
+  let seconds = Math.floor(time % 60);
+  hours = hours < 10 ? ("0" + hours) : hours;
+  mins = mins < 10 ? ("0" + mins) : mins;
+  seconds = seconds < 10 ? ("0" + seconds) : seconds;
+  return hours + ":" + mins + ":" + seconds;
+};
\ No newline at end of file
--- a/src/data-source/aidTool/request-apis.ts
+++ b/src/data-source/aidTool/request-apis.ts
 /*
 * @Author: yuananting
 * @Date: 2021-03-03 15:13:12
- * @LastEditors: Please set LastEditors
+ * @LastEditors: yuananting
- * @LastEditTime: 2021-06-22 14:31:46
+ * @LastEditTime: 2021-07-09 16:58:34
 * @Description: 助学工具接口
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -88,3 +88,7 @@ export function batchQueryQuestionDetails(params: object) {
 export function queryQuestionPageListWithContent(params: object) {
  return Service.Hades('public/hades/queryQuestionPageListWithContent', params);
 }
+export function queryCategoryTreeByPackage(params: object) {
+  return Service.Hades('public/externalHades/queryPackageCategory', params);
+}
\ No newline at end of file
--- a/src/data-source/base/request-apis.ts
+++ b/src/data-source/base/request-apis.ts
@@ -2,7 +2,7 @@
 * @Author: wufan
 * @Date: 2020-12-01 17:21:21
 * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-06-22 14:56:34
+ * @LastEditTime: 2021-07-09 15:33:33
 * @Description: Description
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -62,6 +62,9 @@ export function saveYoZoFileVersionId(params: object) {
 export function yoZoUpload(ossUrl:String,appId:String,uploadSign:String){
  return axios.post(`https://dmc.yozocloud.cn/api/file/http?fileUrl=${ossUrl}&appId=${appId}&sign=${uploadSign}`)
 }
+export function saveFileVersionIdByCourseChapter(params: object) {
+  return Service.Hades('public/hades/saveFileVersionIdByCourseChapter', params);
+}
 export const getOssClient = (
  data: object,
  instId: string,

--- a/src/data-source/course/request-api.ts
+++ b/src/data-source/course/request-api.ts
 /*
 * @Author: wufan
 * @Date: 2020-12-12 11:57:10
- * @LastEditors: zangsuyun
+ * @LastEditors: wufan
- * @LastEditTime: 2021-03-22 13:54:20
+ * @LastEditTime: 2021-07-05 15:07:13
 * @Description: Description
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -57,7 +57,7 @@ export function getLiveCloudCourseBasePage(params: object) {
  return Service.Hades("public/courseCloud/getLiveCloudCourseBasePage", params);
 }
-//视频课相关接口
+//线上课相关接口
 export function changeVideoShelfState(params: object) {
  return Service.Hades("public/hades/changeVideoShelfState", params);
 }
@@ -73,6 +73,9 @@ export function editVideoSchedule(params: object) {
 export function userWatchInfo(params: object) {
  return Service.Hades("public/hades/userWatchInfo", params);
 }
+export function lineDetailWatchInfo(params: object) {
+  return Service.Hades("public/hades/lineDetailWatchInfo", params);
+}
 export function videoScheduleDetail(params: object) {
  return Service.Hades("public/hades/videoScheduleDetail", params);
 }

--- a/src/data-source/knowledge/request-api.ts
+++ b/src/data-source/knowledge/request-api.ts
@@ -81,7 +81,7 @@ class KnowledgeAPI {
  exportPicLearnSync = (params: object) => {
    return Service.Hades("public/knowledge/exportPicLearnSync", params);
  }
-  // 视频课观看记录导出
+  // 线上课观看记录导出
  exportVideoLearnSync = (params: object) => {
    return Service.Hades("public/knowledge/exportVideoLearnSync", params);
  }

--- a/src/data-source/plan/request-apis.ts
+++ b/src/data-source/plan/request-apis.ts
 /*
 * @Author: zhangleyuan
 * @Date: 2021-02-21 16:08:38
- * @LastEditors: zhangleyuan
+ * @LastEditors: yuananting
- * @LastEditTime: 2021-03-09 12:54:31
+ * @LastEditTime: 2021-07-06 11:26:27
 * @Description: 描述一下
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
-import Service from "@/common/js/service";
+import Service from '@/common/js/service';
 export function getTrainingPlanPage(params: object) {
-  return Service.Hades("public/hades/getTrainingPlanPage", params);
+  return Service.Hades('public/hades/getTrainingPlanPage', params);
 }
 export function createTrainingPlan(params: object) {
-  return Service.Hades("public/hades/createTrainingPlan", params);
+  return Service.Hades('public/hades/createTrainingPlan', params);
 }
 export function updateStateTrainingPlan(params: object) {
-  return Service.Hades("public/hades/updateStateTrainingPlan", params);
+  return Service.Hades('public/hades/updateStateTrainingPlan', params);
 }
 export function getTrainingPlanDetail(params: object) {
-  return Service.Hades("public/hades/getTrainingPlanDetail", params);
+  return Service.Hades('public/hades/getTrainingPlanDetail', params);
 }
 export function updateTrainingPlan(params: object) {
-  return Service.Hades("public/hades/updateTrainingPlan", params);
+  return Service.Hades('public/hades/updateTrainingPlan', params);
 }
 export function deleteTrainingPlan(params: object) {
-  return Service.Hades("public/hades/deleteTrainingPlan", params);
+  return Service.Hades('public/hades/deleteTrainingPlan', params);
 }
 export function getPlanUserRecordPage(params: object) {
-  return Service.Hades("public/hades/getPlanUserRecordPage", params);
+  return Service.Hades('public/hades/getPlanUserRecordPage', params);
 }
 export function getPlanCustomerRecordPage(params: object) {
-  return Service.Hades("public/hades/getPlanCustomerRecordPage", params);
+  return Service.Hades('public/hades/getPlanCustomerRecordPage', params);
 }
 export function getPlanCustomerDetail(params: object) {
-  return Service.Hades("public/hades/getPlanCustomerDetail", params);
+  return Service.Hades('public/customerHades/getPlanCustomerDetail', params);
 }
 export function getPlanCustomerAboutUser(params: object) {
-  return Service.Hades("public/hades/getPlanCustomerAboutUser", params);
+  return Service.Hades('public/hades/getPlanCustomerAboutUser', params);
 }
 export function removePlanCustomer(params: object) {
-  return Service.Hades("public/hades/removePlanCustomer", params);
+  return Service.Hades('public/hades/removePlanCustomer', params);
 }
 export function getStorePlanAll(params: object) {
-  return Service.Hades("public/hades/getStorePlanAll", params);
+  return Service.Hades('public/hades/getStorePlanAll', params);
 }
 export function getTrainingCourseAutoCancel(params: object) {
-  return Service.Hades("public/hades/getTrainingCourseAutoCancel", params);
+  return Service.Hades('public/hades/getTrainingCourseAutoCancel', params);
 }
--- a/src/domains/aid-tool-domain/AidToolService.ts
+++ b/src/domains/aid-tool-domain/AidToolService.ts
 /*
 * @Author: yuananting
 * @Date: 2021-03-11 11:34:37
- * @LastEditors: fusanqiasng
+ * @LastEditors: yuananting
- * @LastEditTime: 2021-06-16 09:56:46
+ * @LastEditTime: 2021-07-09 16:54:54
 * @Description: 助学工具接口
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
 import {
  queryExternalCategoryTree,
+  queryCategoryTreeByPackage,
  queryCategoryTree,
  addCategory,
  delCategory,
@@ -38,6 +39,11 @@ export default class AidToolService {
    return queryExternalCategoryTree(parmas);
  }
+  // 课程分类树（按课程包）
+  static queryCategoryTreeByPackage(params: any) {
+    return queryCategoryTreeByPackage(params);
+  }
  // 获取题目分类树
  static queryCategoryTree(params: any) {
    return queryCategoryTree(params);

--- a/src/domains/basic-domain/baseService.ts
+++ b/src/domains/basic-domain/baseService.ts
@@ -2,12 +2,12 @@
 * @Author: wufan
 * @Date: 2020-12-01 17:20:49
 * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-06-22 14:57:01
+ * @LastEditTime: 2021-07-09 15:33:59
 * @Description: Description
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
-import { getUserStore, getUserPermission ,logout,getStoreUser,sendBizAuthCode,editUserPhone,checkBizAuthCode,sendNewPhoneAuthCode,sendLoginAuthCode,login,getLastedVersion, getEnterpriseUser,getWXWorkLoginNoCheck,getLesseeVersionMsg,getYoZoSign,saveYoZoFileVersionId,yoZoUpload} from '@/data-source/base/request-apis';
+import { getUserStore, getUserPermission ,logout,getStoreUser,sendBizAuthCode,editUserPhone,checkBizAuthCode,sendNewPhoneAuthCode,sendLoginAuthCode,login,getLastedVersion, getEnterpriseUser,getWXWorkLoginNoCheck,getLesseeVersionMsg,getYoZoSign,saveYoZoFileVersionId,yoZoUpload,saveFileVersionIdByCourseChapter} from '@/data-source/base/request-apis';
 export default class StoreService {
    // 获取员工列表 
@@ -73,4 +73,7 @@ export default class StoreService {
  static yoZoUpload(ossUrl:String,appId:String,uploadSign:String){
    return yoZoUpload(ossUrl,appId,uploadSign);
  }
+  static saveFileVersionIdByCourseChapter(params: any){
+    return saveFileVersionIdByCourseChapter(params);
+  }
 }
\ No newline at end of file
--- a/src/domains/course-domain/CourseService.ts
+++ b/src/domains/course-domain/CourseService.ts
@@ -9,7 +9,8 @@
 import {
  fetchLecturerData, getCategoryTree, knowledgeMediaCoursePage, fetchUserData, exportStudentCourseData, exportPlayBackCourseData, fetchPlaybackList, createLiveCloudCourse, getLiveCloudCoursePage,
  getLiveCloudCourseDetail, updateLiveCloudCourse, turnOnOrOffLiveCloudCourse, delLiveCloudCourse, changeVideoShelfState, createVideoSchedule, delVideoSchedule,
-  editVideoSchedule, userWatchInfo, videoSchedulePage, videoScheduleDetail, videoWatchInfo, getQrcode, getLiveCloudCourseBasePage, videoScheduleBasePage, relatedCourseToPlan
+  editVideoSchedule, userWatchInfo, videoSchedulePage, videoScheduleDetail, videoWatchInfo, getQrcode, getLiveCloudCourseBasePage, videoScheduleBasePage, relatedCourseToPlan,
+  lineDetailWatchInfo
 } from '@/data-source/course/request-api';
 export default class courseService {
@@ -85,6 +86,9 @@ export default class courseService {
  static videoWatchInfo(params: any) {
    return videoWatchInfo(params);
  }
+  static lineDetailWatchInfo(params: any) {
+    return lineDetailWatchInfo(params);
+  }
  static getLiveCloudCourseBasePage(params: any) {
    return getLiveCloudCourseBasePage(params);
  }

--- a/src/domains/resource-disk/constants.ts
+++ b/src/domains/resource-disk/constants.ts
 /*
 * @Author: 吴文洁
 * @Date: 2020-08-20 09:21:40
- * @LastEditors: zhangleyuan
+ * @LastEditors: yuananting
- * @LastEditTime: 2021-03-04 17:16:30
+ * @LastEditTime: 2021-07-15 11:48:58
 * @Description: 
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 */
@@ -77,6 +77,10 @@ const FILR_VERIFY_MAP = {
    type: "word",
    maxSize: 100
  },
+  "application/wps-writer": {
+    type: "word",
+    maxSize: 100,
+  },
  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": {
    type: "word",
    maxSize: 100

--- a/src/index.html
+++ b/src/index.html
 <!--
 * @Author: 吴文洁
 * @Date: 2020-08-24 12:20:57
- * @LastEditors: wufan
+ * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-07-15 16:41:14
+ * @LastEditTime: 2021-07-18 10:22:35
 * @Description: 
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 -->

--- a/src/modules/course-manage/AddLive.jsx
+++ b/src/modules/course-manage/AddLive.jsx
@@ -7,12 +7,12 @@
 */
 import React from 'react';
-import { withRouter } from "react-router-dom";
+import { withRouter } from 'react-router-dom';
 import { Button, message, Modal } from 'antd';
-import ShowTips from "@/components/ShowTips";
+import ShowTips from '@/components/ShowTips';
-import Breadcrumbs from "@/components/Breadcrumbs";
+import Breadcrumbs from '@/components/Breadcrumbs';
-import Bus from '../../core/bus'
+import Bus from '../../core/bus';
 import AddLiveBasic from './components/AddLiveBasic';
 import AddLiveClass from './components/AddLiveClass';
@@ -20,10 +20,10 @@ import AddLiveIntro from './components/AddLiveIntro';
 import { randomString } from '@/domains/basic-domain/utils';
 import Upload from '@/core/upload';
 import PreviewCourseModal from './modal/PreviewCourseModal';
-import CourseService from "@/domains/course-domain/CourseService";
+import CourseService from '@/domains/course-domain/CourseService';
 import moment from 'moment';
 import User from '@/common/js/user';
-import _ from "underscore";
+import _ from 'underscore';
 import $ from 'jquery';
 import './AddLive.less';
@@ -31,14 +31,14 @@ const defaultCover = 'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png';
 const defaultBasicInfo = {
  courseName: null, // 课程名称
  coverUrl: defaultCover,
-  coverId:null,
+  coverId: null,
-  categoryId:null,
+  categoryId: null,
-  categoryName:null,
+  categoryName: null,
 };
 const defaultClassInfo = {
  teacherId: null, //讲师的Id
-  assistant:[], //助教
+  assistant: [], //助教
  teacherName: null,
  liveDate: null,
  timeHorizonStart: null,
@@ -50,61 +50,63 @@ const defaultClassInfo = {
 const defaultIntroInfo = {
  needRecord: 'YES',
-  whetherVisitorsJoin:'NO',
+  whetherVisitorsJoin: 'NO',
  liveCourseWarmMedia: {},
  // 讲师简介
-  liveCourseMediaRequests: [{
+  liveCourseMediaRequests: [
-    contentType:"INTRO",
+    {
+      contentType: 'INTRO',
      mediaType: 'TEXT',
      mediaContent: '',
-    key: Math.random()
+      key: Math.random(),
-  }], 
+    },
-}
+  ],
+};
 class AddLive extends React.Component {
  constructor(props) {
    super(props);
-    const id = getParameterByName("id");
+    const id = getParameterByName('id');
-    const type = getParameterByName("type");
+    const type = getParameterByName('type');
    this.state = {
      id,
      type,
      loading: false,
      isEdit: true,
-      courseState:'UN_START',
+      courseState: 'UN_START',
      // 直播课基本信息
      addLiveBasicInfo: {
        courseName: null, // 课程名称
        coverUrl: defaultCover,
-        coverId:null,
+        coverId: null,
-        categoryId:null,
+        categoryId: null,
-        categoryName:null,
+        categoryName: null,
      },
      // 直播课上课信息
      addLiveClassInfo: {
        teacherId: null,
        teacherName: null,
-        assistant:[],
+        assistant: [],
-        assistantStoreUserId:[],
+        assistantStoreUserId: [],
-        assistantNames:[],
+        assistantNames: [],
        liveDate: null,
        timeHorizonStart: null,
        timeHorizonEnd: null,
        calendarTime: [], // 批量排课
        startTime: new Date().getTime() + 300000, // 批量开始时分
-        endTime: new Date().getTime() + 300000 // 批量结束时分
+        endTime: new Date().getTime() + 300000, // 批量结束时分
      },
      // 直播课简介
      addLiveIntroInfo: {
        needRecord: 'YES',
-        whetherVisitorsJoin:'NO',
+        whetherVisitorsJoin: 'NO',
        liveCourseWarmMedia: {},
        introduce: '',
        liveCourseMediaRequests: [],
      },
-    }
+    };
  }
  componentDidMount() {
@@ -112,13 +114,18 @@ class AddLive extends React.Component {
    if (type === 'edit') {
      this.getCourseDetail();
    }
+    Bus.bind('editorLimit', (editorTextLength) => {
+      this.setState({
+        editorTextLength,
+      });
+    });
  }
  getCourseDetail = () => {
    let { isEdit } = this.state;
    this.setState({ loading: true });
    CourseService.getLiveCloudCourseDetail({
-        liveCourseId: this.state.id
+      liveCourseId: this.state.id,
    }).then((res) => {
      const {
        teacherId,
@@ -134,7 +141,7 @@ class AddLive extends React.Component {
        categoryId,
        categoryName,
        admins,
-          courseState
+        courseState,
      } = res.result;
      let coverId;
      let coverUrl;
@@ -142,15 +149,15 @@ class AddLive extends React.Component {
      let liveCourseWarmMedia;
      let hasIntro = false;
      courseMediaVOS.map((item) => {
-          switch (item.contentType){
+        switch (item.contentType) {
-            case "COVER":
+          case 'COVER':
            coverId = item.mediaContent;
            coverUrl = item.mediaUrl;
            break;
-            case "WARMUP":
+          case 'WARMUP':
            liveCourseWarmMedia = item;
            break;
-            case "INTRO":
+          case 'INTRO':
            hasIntro = true;
            this.getTextDetail('introduce', item.mediaUrl);
            break;
@@ -159,22 +166,22 @@ class AddLive extends React.Component {
        }
        return item;
-        })
+      });
      const addLiveBasicInfo = {
        courseName,
        coverUrl: coverUrl || defaultCover,
        coverId,
        categoryId,
-          categoryName
+        categoryName,
      };
      const liveDate = startTime;
      const timeHorizonStart = startTime;
      const timeHorizonEnd = endTime;
-        const assistant = _.pluck(admins, "adminId");
+      const assistant = _.pluck(admins, 'adminId');
-        const assistantStoreUserId =  _.pluck(admins, "adminStoreUserId"); //编辑时的选中的助教的查询用storeUserId查询
+      const assistantStoreUserId = _.pluck(admins, 'adminStoreUserId'); //编辑时的选中的助教的查询用storeUserId查询
-        const assistantNames =  _.pluck(admins, "adminName");
+      const assistantNames = _.pluck(admins, 'adminName');
      const addLiveClassInfo = {
        assistant,
        liveDate,
@@ -186,20 +193,19 @@ class AddLive extends React.Component {
        startTime,
        endTime,
        assistantNames,
-          assistantStoreUserId
+        assistantStoreUserId,
-        }
+      };
      const addLiveIntroInfo = {
        liveCourseWarmMedia,
        needRecord,
        whetherVisitorsJoin,
        liveCourseMediaRequests,
-        }
+      };
      // 晚于开课前30分钟
-        if(new Date().getTime() > startTime - 1800000) {
+      if (new Date().getTime() > startTime - 1800000) {
-          isEdit = false
+        isEdit = false;
      }
      this.setState({
        loadintroduce: !hasIntro,
@@ -210,219 +216,210 @@ class AddLive extends React.Component {
        addLiveClassInfo,
        addLiveBasicInfo,
      });
-      })
+    });
-  }
+  };
  getTextDetail = (key, url) => {
    $.ajax({
      data: {},
      type: 'GET',
      url,
-      contentType:'application/x-www-form-urlencoded; charset=UTF-8',
+      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('获取简介失败')
+        message.warning('获取简介失败');
-      }
+      },
-    })
+    });
-  }
+  };
  // 修改基本信息
-// 修改基本信息
+  // 修改基本信息
-handleChangeBasicInfo = (field, value) => {
+  handleChangeBasicInfo = (field, value) => {
    const { coverUrl } = this.state.addLiveBasicInfo;
    this.setState({
      addLiveBasicInfo: {
        ...this.state.addLiveBasicInfo,
        [field]: value,
-    }
+      },
-  })
+    });
-}
+  };
  // 修改上课信息
-  handleChangeClassInfo = (field, value ,type, optionValue) => {
+  handleChangeClassInfo = (field, value, type, optionValue) => {
    const _value = value ? value.valueOf() : null;
    const { teacherName } = this.state.addLiveClassInfo;
    const { assistantNames } = this.state.addLiveClassInfo;
-    const { assistantStoreUserId } = this.state.addLiveClassInfo
+    const { assistantStoreUserId } = this.state.addLiveClassInfo;
    this.setState({
      addLiveClassInfo: {
        ...this.state.addLiveClassInfo,
        [field]: _value,
-        teacherName:type==='teacherType'?optionValue:teacherName,
+        teacherName: type === 'teacherType' ? optionValue : teacherName,
-        assistantNames:type==='assistantType'?_.pluck(optionValue, "children"):assistantNames,
+        assistantNames: type === 'assistantType' ? _.pluck(optionValue, 'children') : assistantNames,
-        assistantStoreUserId:type==='assistantType'?_.pluck(optionValue, "key"):assistantStoreUserId,
+        assistantStoreUserId: type === 'assistantType' ? _.pluck(optionValue, 'key') : assistantStoreUserId,
-      }
+      },
    });
-  }
+  };
  // 修改简介
  handleChangeIntroInfo = (field, value) => {
    this.setState({
      addLiveIntroInfo: {
        ...this.state.addLiveIntroInfo,
-        [field]: value
+        [field]: value,
-      }
+      },
-    })
+    });
-  }
+  };
  // 完成创建/编辑
  handleSubmit = () => {
    //过期判断
    if (User.getExpirationTime() && moment().valueOf() > Number(User.getExpirationTime())) {
      Modal.warning({
-        title:"服务已到期",
+        title: '服务已到期',
-        content: "当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买",
+        content: '当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买',
-        okText: "我知道了"
+        okText: '我知道了',
-      })
+      });
-      return
+      return;
    }
-    const { addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, id, isEdit, type } = this.state;
+    const { addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, id, isEdit, type, editorTextLength } = this.state;
-    const {liveDate, timeHorizonStart} = addLiveClassInfo;
+    const { liveDate, timeHorizonStart } = addLiveClassInfo;
-    const _liveDate = moment(liveDate).format("YYYY-MM-DD");
+    const _liveDate = moment(liveDate).format('YYYY-MM-DD');
    const _timeHorizonStart = moment(timeHorizonStart).format('HH:mm');
    const startTime = moment(_liveDate + ' ' + _timeHorizonStart).format('x');
-    if(type === 'edit' && isEdit && new Date().getTime() > startTime - 1800000) {
+    if (type === 'edit' && isEdit && new Date().getTime() > startTime - 1800000) {
      Modal.info({
-        title: "提示",
+        title: '提示',
-        icon: (
+        icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
-          <span className="icon iconfont default-confirm-icon">
+        content: '晚于开课前30分钟，部分信息不可修改',
-            &#xe6f4;
-          </span>
-        ),
-        content: "晚于开课前30分钟，部分信息不可修改",
        okText: '我知道了',
        onOk: () => {
          this.getCourseDetail();
-        }
+        },
      });
-      return
+      return;
    }
-    this.handleValidate(addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit).then((res)  => {
+    this.handleValidate(addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit, editorTextLength).then((res) => {
      if (!res) return;
-      Upload.uploadTextToOSS(addLiveIntroInfo.introduce, `${randomString()}.txt`, (introduceId) => {
+      Upload.uploadTextToOSS(
+        addLiveIntroInfo.introduce,
+        `${randomString()}.txt`,
+        (introduceId) => {
          this.submitRemote({ introduceId, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, id });
-      }, () => message.warning('上传课程简介失败'));
+        },
-    })
+        () => message.warning('上传课程简介失败')
-  }
+      );
+    });
+  };
  submitRemote = ({ introduceId, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, id }) => {
    const { type } = this.state;
-    const { courseName,coverUrl,coverId,categoryId} = addLiveBasicInfo;
+    const { courseName, coverUrl, coverId, categoryId } = addLiveBasicInfo;
-    const {
+    const { liveDate, teacherId, assistant, timeHorizonEnd, timeHorizonStart, calendarTime } = addLiveClassInfo;
-      liveDate,
-      teacherId,
-      assistant,
-      timeHorizonEnd,
-      timeHorizonStart,
-      calendarTime,
-    } = addLiveClassInfo;
    let { startTime, endTime } = addLiveClassInfo;
-    const { needRecord,whetherVisitorsJoin,liveCourseWarmMedia} = addLiveIntroInfo;
+    const { needRecord, whetherVisitorsJoin, liveCourseWarmMedia } = addLiveIntroInfo;
-    if(type === 'add') {
+    if (type === 'add') {
      startTime = startTime;
      endTime = endTime;
    } else {
-      const _liveDate = moment(liveDate).format("YYYY-MM-DD");
+      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 ={
+    let coverObj = {
-      contentType:'COVER',
+      contentType: 'COVER',
-      mediaContent:coverId,
+      mediaContent: coverId,
-      mediaType:'PICTURE',
+      mediaType: 'PICTURE',
      mediaUrl: coverUrl,
-    }
+    };
    let scheduleMediaRequests = [];
-    if(coverId){
+    if (coverId) {
-      scheduleMediaRequests = [coverObj,...scheduleMediaRequests]
+      scheduleMediaRequests = [coverObj, ...scheduleMediaRequests];
    }
-    if(liveCourseWarmMedia && liveCourseWarmMedia.mediaUrl){
+    if (liveCourseWarmMedia && liveCourseWarmMedia.mediaUrl) {
-      scheduleMediaRequests = [liveCourseWarmMedia,...scheduleMediaRequests]
+      scheduleMediaRequests = [liveCourseWarmMedia, ...scheduleMediaRequests];
    }
    const commonParams = {
-      adminIds:assistant,
+      adminIds: assistant,
      calendarTime,
      categoryId,
      endTime,
      needRecord,
      startTime,
      courseName: courseName.trim(),
-      storeId:User.getStoreId(),
+      storeId: User.getStoreId(),
-      teacherId:teacherId,
+      teacherId: teacherId,
      whetherVisitorsJoin,
-      scheduleMediaRequests
+      scheduleMediaRequests,
-    }
+    };
    if (type === 'add') {
      const params = {
        ...commonParams,
        operatorId: User.getUserId(),
        introduceId,
-      }
+      };
      CourseService.createLiveCloudCourse(params).then((res) => {
-        if (res.success){
+        if (res.success) {
-          message.success("新建成功");
+          message.success('新建成功');
          window.RCHistory.push({
            pathname: `/live-course`,
          });
        }
      });
    } else {
      const params = {
        ...commonParams,
-        updateUserId:User.getUserId(),
+        updateUserId: User.getUserId(),
        liveCourseId: id,
        introduceId,
-      }
+      };
      CourseService.updateLiveCloudCourse(params).then((res) => {
-        if (res.success){
+        if (res.success) {
-          message.success("更新成功");
+          message.success('更新成功');
          window.RCHistory.push({
            pathname: `/live-course`,
          });
        }
      });
    }
-  }
+  };
-  handleValidate = (addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit) => {
+  handleValidate = (addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit, editorTextLength) => {
    return new Promise((resolve) => {
      const { type } = this.state;
-      const { courseName,categoryId} = addLiveBasicInfo;
+      const { courseName, categoryId } = addLiveBasicInfo;
-      const {
+      const { liveDate, timeHorizonStart, timeHorizonEnd, teacherId, calendarTime } = addLiveClassInfo;
-        liveDate, timeHorizonStart, timeHorizonEnd, teacherId, calendarTime
-      } = addLiveClassInfo;
      const { liveCourseMediaRequests } = addLiveIntroInfo;
      const currentTime = +new Date();
-      if(!courseName) {
+      if (!courseName) {
        message.warning('请输入课程名称');
        resolve(false);
        return;
      }
-      if(!categoryId){
+      if (!categoryId) {
        message.warning('请选择课程分类');
        resolve(false);
        return;
      }
-      if(type === 'add') {
+      if (type === 'add') {
        const { startTime, endTime } = addLiveClassInfo;
-        if(calendarTime.length === 0) {
+        if (calendarTime.length === 0) {
          message.warning('请选择上课日期');
          resolve(false);
          return;
-        } else if(startTime === endTime || startTime > endTime) {
+        } else if (startTime === endTime || startTime > endTime) {
          message.warning('结束时间必须晚于开始时间');
          resolve(false);
          return;
@@ -432,12 +429,12 @@ handleChangeBasicInfo = (field, value) => {
        const itemToday = _.find(calendarTime, (item) => {
          const itemDay = moment(item).format('YYYY-MM-DD');
          return itemDay === currentDay;
-        })
+        });
-        if(itemToday) {
+        if (itemToday) {
          const itemDay = moment(itemToday).format('YYYY-MM-DD');
          const itemHour = moment(startTime).format('HH:mm');
-          if(itemDay === currentDay) {
+          if (itemDay === currentDay) {
-            if(moment(itemDay + ' ' + itemHour).format('x') < currentTime) {
+            if (moment(itemDay + ' ' + itemHour).format('x') < currentTime) {
              message.warning('开始时间不能早于现在');
              resolve(false);
              return;
@@ -445,13 +442,13 @@ handleChangeBasicInfo = (field, value) => {
          }
        }
      } else {
-        const _liveDate = moment(liveDate).format("YYYY-MM-DD");
+        const _liveDate = moment(liveDate).format('YYYY-MM-DD');
        const _timeHorizonStart = moment(timeHorizonStart).format('HH:mm');
        const _timeHorizonEnd = moment(timeHorizonEnd).format('HH:mm');
        const startTime = moment(_liveDate + ' ' + _timeHorizonStart).format('x');
        const endTime = moment(_liveDate + ' ' + _timeHorizonEnd).format('x');
-        if(!startTime || !endTime) {
+        if (!startTime || !endTime) {
          message.warning('日期不能为空');
          resolve(false);
          return;
@@ -472,23 +469,29 @@ handleChangeBasicInfo = (field, value) => {
          resolve(false);
          return;
        } else if (isEdit && endTime <= startTime) {
-          message.warning("结束时间不能早于开始时间");
+          message.warning('结束时间不能早于开始时间');
          resolve(false);
          return;
        }
      }
-      if(!teacherId){
+      if (!teacherId) {
        message.warning('请选择讲师');
        resolve(false);
        return;
      }
-      resolve(true)
-    });
+      if (editorTextLength > 1000) {
+        message.warning('课程简介超过字数限定');
+        resolve(false);
+        return;
      }
+      resolve(true);
+    });
+  };
  // 显示预览课程弹窗
  handleShowPreviewModal = () => {
-    const { addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo,type,courseState} = this.state;
+    const { addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, type, courseState } = this.state;
    const previewLiveCourseModal = (
      <PreviewCourseModal
        courseBasicInfo={addLiveBasicInfo}
@@ -498,104 +501,77 @@ handleChangeBasicInfo = (field, value) => {
        courseState={courseState}
        close={() => {
          this.setState({
-            previewLiveCourseModal: null
+            previewLiveCourseModal: null,
-          })
+          });
        }}
      />
    );
    this.setState({ previewLiveCourseModal });
-  }
+  };
  // 取消编辑并返回上一级路由
  handleGoBack = () => {
    // 比较state的addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo和默认数据是否相等
    const { addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo } = this.state;
-    if (!_.isEqual(addLiveBasicInfo, defaultBasicInfo) ||
+    if (!_.isEqual(addLiveBasicInfo, defaultBasicInfo) || !_.isEqual(addLiveClassInfo, defaultClassInfo) || !_.isEqual(addLiveIntroInfo, defaultIntroInfo)) {
-      !_.isEqual(addLiveClassInfo, defaultClassInfo) ||
-      !_.isEqual(addLiveIntroInfo, defaultIntroInfo)
-    ) {
      Modal.confirm({
        title: '确定要返回吗？',
        content: '返回后，本次编辑的内容将不被保存',
        okText: '确认返回',
        cancelText: '留在本页',
-        icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>,
+        icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
        onOk: () => {
          window.RCHistory.push({
            pathname: `/live-course`,
          });
-        }
+        },
-      })
+      });
    } else {
      window.RCHistory.push({
        pathname: `/live-course`,
      });
    }
-  }
+  };
  render() {
+    const { id, type, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit, loadintroduce } = this.state;
-    const {
-      id,
-      type,
-      addLiveBasicInfo,
-      addLiveClassInfo,
-      addLiveIntroInfo,
-      isEdit,
-      loadintroduce,
-    } = this.state;
    return (
-      <div className="page add-live-page">
+      <div className='page add-live-page'>
-        <Breadcrumbs
+        <Breadcrumbs navList={type == 'add' ? '新建直播课' : '编辑直播课'} goBack={this.handleGoBack} />
-          navList={type == "add" ? "新建直播课" : "编辑直播课"}
+        <div className='box'>
-          goBack={this.handleGoBack}
+          <div className='show-tips'>
-        />
+            <ShowTips message='请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企学院保有依据国家规定及平台规则进行处理的权利' />
-        <div className="box">
-          <div className="show-tips">
-            <ShowTips message="请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企学院保有依据国家规定及平台规则进行处理的权利" />
          </div>
-          <div className="add-live-page__form">
+          <div className='add-live-page__form'>
-            <div className="basic-info__wrap">
+            <div className='basic-info__wrap'>
-              <div className="title">基本信息</div>
+              <div className='title'>基本信息</div>
-              <AddLiveBasic
+              <AddLiveBasic isEdit={isEdit} pageType={type} data={addLiveBasicInfo} onChange={this.handleChangeBasicInfo} />
-                isEdit={isEdit}
-                pageType={type}
-                data={addLiveBasicInfo}
-                onChange={this.handleChangeBasicInfo}
-              />
            </div>
-            <div className="class-info__wrap">
+            <div className='class-info__wrap'>
-              <div className="title">上课信息</div>
+              <div className='title'>上课信息</div>
-              <AddLiveClass
+              <AddLiveClass isEdit={isEdit} pageType={type} data={{ ...addLiveClassInfo, id }} onChange={this.handleChangeClassInfo} />
-                isEdit={isEdit}
-                pageType={type}
-                data={{...addLiveClassInfo, id} }
-                onChange={this.handleChangeClassInfo}
-              /> 
            </div>
-            <div className="intro-info__wrap">
+            <div className='intro-info__wrap'>
-              <div className="title">更多信息</div>
+              <div className='title'>更多信息</div>
-              <AddLiveIntro
+              <AddLiveIntro isEdit={isEdit} data={{ ...addLiveIntroInfo, loadintroduce, id }} onChange={this.handleChangeIntroInfo} />
-                isEdit={isEdit}
-                data={{ ...addLiveIntroInfo, loadintroduce, id }}
-                onChange={this.handleChangeIntroInfo}
-              />
            </div>
          </div>
        </div>
-        <div className="footer shrink-footer">
+        <div className='footer shrink-footer'>
          <Button onClick={this.handleGoBack}>取消</Button>
          <Button onClick={this.handleShowPreviewModal}>预览</Button>
-          <Button type="primary" onClick={_.debounce(() => this.handleSubmit(), 3000, true)}>保存</Button>
+          <Button type='primary' onClick={_.debounce(() => this.handleSubmit(), 3000, true)}>
+            保存
+          </Button>
        </div>
-        { this.state.previewLiveCourseModal }
+        {this.state.previewLiveCourseModal}
-        { this.state.lackConsumeStudentModal }
+        {this.state.lackConsumeStudentModal}
      </div>
-    )
+    );
  }
 }

--- a/src/modules/course-manage/components/AddLiveBasic.jsx
+++ b/src/modules/course-manage/components/AddLiveBasic.jsx
@@ -7,10 +7,10 @@
 */
 import React from 'react';
-import { Input, Button, message ,Cascader,Modal} from 'antd';
+import { Input, Button, message, Cascader, Modal } from 'antd';
-import UploadOss from "@/core/upload";
+import UploadOss from '@/core/upload';
 import { ImgCutModalNew } from '@/components';
-import StoreService from "@/domains/store-domain/storeService";
+import StoreService from '@/domains/store-domain/storeService';
 import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
 import Upload from '@/core/upload';
 import Cropper from 'react-cropper';
@@ -21,63 +21,62 @@ import './AddLiveBasic.less';
 const defaultCover = 'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png';
 const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' };
 let cutFlag = false;
-let timer = null
+let timer = null;
 class AddLiveBasic extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      imageFile: null,
      showCutModal: false,
-      courseCatalogList:[],
+      courseCatalogList: [],
      showSelectFileModal: false,
      cutImageBlob: null,
      hasImgReady: false, // 图片是否上传成功
      cropperInstace:null
    }
  }
-  componentWillUnmount() {
+  componentWillUnmount() {}
-  }
-  componentDidMount(){
+  componentDidMount() {
    this.getCourseCatalogList();
  }
-  getCourseCatalogList = ()=>{
+  getCourseCatalogList = () => {
-    StoreService.getCourseCatalogList({current:1,size:1000}).then((res) => {
+    StoreService.getCourseCatalogList({ current: 1, size: 1000 }).then((res) => {
      this.setState({
-          courseCatalogList:res.result.records
+        courseCatalogList: res.result.records,
-        })
+      });
    });
  }
  // 使用默认封面图
  handleResetCoverUrl = () => {
-    const { data: { coverUrl } } = this.props;
+    const {
+      data: { coverUrl },
+    } = this.props;
    const isDefaultCover = coverUrl === defaultCover;
    // 如果已经是默认图的话，不做任何任何处理
    if (isDefaultCover) return;
    message.success('已替换为默认图');
-    this.props.onChange('coverUrl',defaultCover);
+    this.props.onChange('coverUrl', defaultCover);
-    setTimeout(()=>{
+    setTimeout(() => {
      this.props.onChange('coverId', null);
-    },1000)
+    }, 1000);
-  }
+  };
-  catalogChange= (value) => {
+  catalogChange = (value) => {
    const changeValueLength = value.length;
-    switch (changeValueLength){
+    switch (changeValueLength) {
      case 1:
-        this.props.onChange('categoryId',value[0]);   
+        this.props.onChange('categoryId', value[0]);
        break;
      case 2:
-        this.props.onChange('categoryId',value[1]);
+        this.props.onChange('categoryId', value[1]);
        break;
      default:
-        this.props.onChange('categoryId',null);
+        this.props.onChange('categoryId', null);
        break;
    }
-  }
+  };
  handleSelectCover = (file) => {
    this.setState({
      visible: true,
@@ -90,91 +89,122 @@ class AddLiveBasic extends React.Component {
  //获取resourceId
  getSignature = (blob, fileName) => {
    const { choosedBannerId } = this.state;
-    Upload.uploadBlobToOSS(blob, 'cover' + (new Date()).valueOf(),null,'signInfo').then((signInfo) => {
+    Upload.uploadBlobToOSS(blob, 'cover' + new Date().valueOf(), null, 'signInfo').then((signInfo) => {
-      this.setState({
+      this.setState(
-        coverClicpPath:signInfo.fileUrl,
+        {
-        coverId:signInfo.resourceId,
+          coverClicpPath: signInfo.fileUrl,
-        visible: false
+          coverId: signInfo.resourceId,
-      },()=>this.updateCover())
+          visible: false,
+        },
+        () => this.updateCover()
+      );
    });
  };
  updateCover = () =>{
    const {coverClicpPath,coverId} = this.state
    this.setState({
-      showSelectFileModal: false
+      showSelectFileModal: false,
-    })
+    });
    this.props.onChange('coverUrl', coverClicpPath);
-    setTimeout(()=>{
+    setTimeout(() => {
      this.props.onChange('coverId', coverId);
-    },1000)
+    }, 1000);
+  };
-  }
  render() {
-    const { showCutModal, imageFile,courseCatalogList,showSelectFileModal,visible,cutImageBlob,hasImgReady
+    const { showCutModal, imageFile, courseCatalogList, showSelectFileModal, visible, cutImageBlob, hasImgReady } = this.state;
-    } = this.state;
+    const { data, pageType, isEdit } = this.props;
-    const { data,pageType,isEdit} = this.props;
+    const { courseName, categoryName, coverUrl } = data;
-    const { courseName,categoryName,coverUrl} = data;
    const fileName = '';
    // 当前是否使用的是默认图片
    const isDefaultCover = coverUrl === defaultCover;
    return (
-      <div className="add-live__basic-info">
+      <div className='add-live__basic-info'>
-        <div className="course-name">
+        <div className='course-name'>
-          <span className="label"><span className="require">*</span>课程名称：</span>
+          <span className='label'>
+            <span className='require'>*</span>课程名称：
+          </span>
          <Input
            value={courseName}
-            placeholder="请输入直播名称(40字以内)"
+            placeholder='请输入直播名称(40字以内)'
            maxLength={40}
            style={{ width: 240 }}
-            onChange={(e) => { this.props.onChange('courseName', e.target.value)}}
+            onChange={(e) => {
+              this.props.onChange('courseName', e.target.value);
+            }}
          />
        </div>
-        <div className="course-cover">
+        <div className='course-cover'>
-          <span className="label">封面图：</span>
+          <span className='label'>封面图：</span>
-          <div className="course-cover__wrap">
+          <div className='course-cover__wrap'>
+            <div className='opt-btns'>
-            <div className="img-content">
+              <Button
-            {
+                onClick={() => {
-              isDefaultCover && <span className="tag">默认图</span>
-            }
-              <img src={coverUrl} />
-            </div>
-            <div className="opt-btns">
-              <Button onClick={() => {
                  this.setState({
-                  showSelectFileModal: true
+                    showSelectFileModal: true,
-                })
+                  });
-              }}>上传图片</Button>
+                }}>
-              <span
+                上传图片
-                className={`default-btn ${isDefaultCover ? 'disabled' : ''}`}
+              </Button>
-                onClick={this.handleResetCoverUrl}
+              <span className={`default-btn ${isDefaultCover ? 'disabled' : ''}`} onClick={this.handleResetCoverUrl}>
-              >使用默认图</span>
+                使用默认图
-              <div className="tips">建议尺寸1280*720px，图片支持jpg、jpeg、png格式。</div>
+              </span>
+              <div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
+            </div>
+            <div className='img-content'>
+              {isDefaultCover && <span className='tag'>默认图</span>}
+              <img src={coverUrl} />
            </div>
          </div>
        </div>
-        <div className="course-catalog">
+        <div className='course-catalog'>
-          <span className="label"><span className="require">*</span>课程分类：</span>
+          <span className='label'>
-          { pageType === 'add' &&
+            <span className='require'>*</span>课程分类：
-            <Cascader options={courseCatalogList} displayRender={	label => label.join('-')}  fieldNames={fieldNames} onChange={this.catalogChange} style={{ width: 240 }} placeholder="请选择课程分类"  suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}/>
+          </span>
+          {pageType === 'add' && (
+            <Cascader
+              options={courseCatalogList}
+              displayRender={(label) => label.join('-')}
+              fieldNames={fieldNames}
+              onChange={this.catalogChange}
+              style={{ width: 240 }}
+              placeholder='请选择课程分类'
+              suffixIcon={
+                <span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
+                  &#xe835;
+                </span>
              }
-          { (pageType === 'edit' && categoryName) && 
+            />
-            <Cascader disabled={!isEdit ? true: false} defaultValue={[categoryName]} options={courseCatalogList} displayRender={	label => label.join('-')}  fieldNames={fieldNames} onChange={this.catalogChange} style={{ width: 240 }} placeholder="请选择课程分类" suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>} />
+          )}
+          {pageType === 'edit' && categoryName && (
+            <Cascader
+              disabled={!isEdit ? true : false}
+              defaultValue={[categoryName]}
+              options={courseCatalogList}
+              displayRender={(label) => label.join('-')}
+              fieldNames={fieldNames}
+              onChange={this.catalogChange}
+              style={{ width: 240 }}
+              placeholder='请选择课程分类'
+              suffixIcon={
+                <span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
+                  &#xe835;
+                </span>
              }
+            />
+          )}
        </div>
        {showSelectFileModal && 
          <SelectPrepareFileModal
-            key="basic"
+            key='basic'
-            operateType="select"
+            operateType='select'
            multiple={false}
-            accept="image/jpeg,image/png,image/jpg"
+            accept='image/jpeg,image/png,image/jpg'
            selectTypeList={['JPG', 'JPEG', 'PNG']}
            tooltip='支持文件类型：jpg、jpeg、png'
            isOpen={showSelectFileModal}
            onClose={() => {
-              this.setState({ showSelectFileModal: false })
+              this.setState({ showSelectFileModal: false });
            }}
            onSelect={this.handleSelectCover}
          />
@@ -183,7 +213,7 @@ class AddLiveBasic extends React.Component {
          <ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
        }
      </div>
-    )
+    );
  }
 }

--- a/src/modules/course-manage/components/AddLiveBasic.less
+++ b/src/modules/course-manage/components/AddLiveBasic.less
@@ -2,41 +2,25 @@
  .label {
    width: 100px;
    text-align: right;
-    display:inline-block;
+    display: inline-block;
    .require {
-      color: #EC4B35;
+      color: #ec4b35;
    }
  }
  .course-cover {
    margin-left: 14px;
    display: flex;
-    margin-top: 16px;
+    margin-top: 24px;
    &__wrap {
      position: relative;
-      .tag {
-        border-radius: 2px;
-        background: #D6D6D6;
-        font-size: 12px;
-        height: 18px;
-        width: 52px;
-        text-align: center;
-        color: #FFF;
-        position: absolute;
-        top: 8px;
-        left: 8px;
-      }
-    }
-    .course-cover__wrap {
-      display: flex;
-      flex-direction: row;
-    }
      .img-content {
+        margin-top: 8px;
        margin-right: 20px;
        width: 299px;
        height: 169px;
+        position: relative;
        img {
          width: 100%;
@@ -44,17 +28,28 @@
          object-fit: contain;
          border-radius: 4px;
        }
+        .tag {
+          border-radius: 2px;
+          background: #d6d6d6;
+          font-size: 12px;
+          height: 18px;
+          width: 52px;
+          text-align: center;
+          color: #fff;
+          position: absolute;
+          top: 8px;
+          left: 8px;
+        }
      }
      .opt-btns {
        .default-btn {
-        margin-left: 16px;
+          margin-left: 14px;
-        color: #2966FF;
+          color: #2966ff;
          cursor: pointer;
          &.disabled {
-          color: #CCC;
+            color: #ccc;
            cursor: not-allowed;
          }
        }
@@ -62,21 +57,21 @@
        .ant-upload-list {
          display: none;
        }
-    }
        .tips {
          margin-top: 8px;
          color: #999;
        }
      }
-  .course-catalog{
-    margin:20px  0 0 14px;
    }
+  }
+  .course-catalog {
+    margin: 20px 0 0 14px;
+  }
 }
-.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled){
+.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) {
-  font-weight:normal !important;
+  font-weight: normal !important;
-  color:#2966FF !important;
+  color: #2966ff !important;
 }
 #imgCutModalNew {
  width: 500px;

--- a/src/modules/course-manage/components/AddLiveIntro.jsx
+++ b/src/modules/course-manage/components/AddLiveIntro.jsx
@@ -17,19 +17,17 @@ import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepare
 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 AddLiveIntro extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      warmUrl: defaultCover,
      showSelectFileModal: false,
      diskList: [],
-      selectType:null
+      selectType: null,
-    }
+    };
  }
  // 上传封面图
@@ -40,34 +38,34 @@ class AddLiveIntro extends React.Component {
      imageFile,
      showCutModal: true,
    });
-  }
+  };
  // 选择暖场资源
  handleSelectVideo = (file) => {
    const { selectType } = this.state;
    this.setState({
-      showSelectFileModal: false
+      showSelectFileModal: false,
-    })
+    });
    const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file;
-    if(selectType === 'WARMUP'){
+    if (selectType === 'WARMUP') {
      const liveCourseWarmMedia = {
        contentType: 'WARMUP',
        mediaType: folderFormat === 'MP4' || folderFormat === 'video/mp4' ? 'VIDEO' : 'PICTURE',
        mediaContent: resourceId,
        mediaUrl: ossUrl,
        mediaName: folderName,
-        size: folderSize
+        size: folderSize,
-      }
+      };
      this.props.onChange('liveCourseWarmMedia', liveCourseWarmMedia);
-    }else{
+    } else {
      // 最多添加九图片
      const { liveCourseMediaRequests } = this.props.data;
      const list = _.filter(liveCourseMediaRequests, (item) => {
-          return item.mediaType == "PICTURE";
+        return item.mediaType == 'PICTURE';
      });
      if (list.length > 8) {
-          message.warning("最多添加9张图片");
+        message.warning('最多添加9张图片');
        return;
      }
      liveCourseMediaRequests.push({
@@ -80,146 +78,161 @@ class AddLiveIntro extends React.Component {
      });
      this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
    }
+  };
-  }
  changeIntro = (value) => {
    this.props.onChange('introduce', value);
-  }
+  };
-  whetherVisitorsJoinChange = ()=>{
+  whetherVisitorsJoinChange = () => {
-    if(this.props.data.whetherVisitorsJoin==="NO"){
+    if (this.props.data.whetherVisitorsJoin === 'NO') {
-      this.props.onChange('whetherVisitorsJoin','YES')
+      this.props.onChange('whetherVisitorsJoin', 'YES');
-    }else{
+    } else {
-      this.props.onChange('whetherVisitorsJoin','NO')
+      this.props.onChange('whetherVisitorsJoin', 'NO');
-    }
    }
+  };
  render() {
-    const {liveType, isXiaomai, isEdit, data: { id, introduce, needRecord,whetherVisitorsJoin, loadintroduce, liveCourseWarmMedia = {} } } = this.props;
+    const {
-    const { showCutModal, warmUrl, showSelectFileModal, diskList, imageFile,selectType} = this.state
+      liveType,
+      isXiaomai,
+      isEdit,
+      data: { id, introduce, needRecord, whetherVisitorsJoin, loadintroduce, liveCourseWarmMedia = {} },
+    } = this.props;
+    const { showCutModal, warmUrl, showSelectFileModal, diskList, imageFile, selectType } = this.state;
    return (
-      <div className="add-live__intro-info">
+      <div className='add-live__intro-info'>
-        <div className="playback" >
+        <div className='playback'>
+          <span className='label'>
-          <span className="label"><span className="require">*</span>直播回放：</span>
+            <span className='require'>*</span>直播回放：
-          <div className="content">
+          </span>
-            <Radio.Group value={needRecord} onChange={(e) => { this.props.onChange('needRecord', e.target.value) }}  disabled={!isEdit ? true: false}>
+          <div className='content'>
+            <Radio.Group
+              value={needRecord}
+              onChange={(e) => {
+                this.props.onChange('needRecord', e.target.value);
+              }}
+              disabled={!isEdit ? true : false}>
              <Row style={{ marginBottom: '5px' }}>
                <Col span={24}>
-                  <Radio value="YES">
+                  <Radio value='YES'>
                    自动录制
-                    <span className="playback__text">系统自助进行全程直播录制</span>
+                    <span className='playback__text'>系统自助进行全程直播录制</span>
                  </Radio>
                </Col>
              </Row>
              <Row>
                <Col span={24}>
-                  <Radio value="NO">
+                  <Radio value='NO'>
                    手动录制
-                    <span className="playback__text">讲师手动选择何时开始录制</span>
+                    <span className='playback__text'>讲师手动选择何时开始录制</span>
                  </Radio>
                </Col>
              </Row>
            </Radio.Group>
          </div>
        </div>
-        <div className="allow-tourist-join">
+        <div className='allow-tourist-join'>
-          <span className="label">观看设置：</span>
+          <span className='label'>观看设置：</span>
-          <div className="content">
+          <div className='content'>
-            <div>
+            <Switch checked={whetherVisitorsJoin === 'NO' ? true : false} onChange={this.whetherVisitorsJoinChange} />
-                <Switch checked={whetherVisitorsJoin==="YES"? true:false} onChange={this.whetherVisitorsJoinChange}/>
+            <div class='instro-text'>{whetherVisitorsJoin === 'NO' ? '已开启，学员需绑定手机号才可观看' : '已关闭，学员无需绑定手机号即可观看'}</div>
-            </div>  
+          </div>
-            <div>
+        </div>
-              <div class="instro-text">
+        <div className='warmup'>
-                <div>开启：允许未绑定手机号的学员进入直播间观看直播</div>
+          <span className='label'>直播暖场图：</span>
-                <div>关闭：仅限绑定了手机号的学员可以进入直播间观看直播</div>
+          <div className='course-cover__wrap'>
-              </div>
+            <div className='img-content' style={liveCourseWarmMedia.mediaUrl ? { background: '#000' } : {}}>
-            </div> 
+              <img
-          </div>
+                src={
-        </div>
+                  liveCourseWarmMedia.mediaType === 'VIDEO'
-        <div className="warmup">
+                    ? `${liveCourseWarmMedia.mediaUrl}?x-oss-process=video/snapshot,t_0,m_fast`
-            <span className="label">直播暖场图：</span>
+                    : liveCourseWarmMedia.mediaUrl
-            <div className="course-cover__wrap">
+                    ? liveCourseWarmMedia.mediaUrl
-              <div className="img-content" style={ liveCourseWarmMedia.mediaUrl ? {background: '#000'} : {} }>
+                    : defaultCover
-                <img src={liveCourseWarmMedia.mediaType === 'VIDEO' ? `${liveCourseWarmMedia.mediaUrl}?x-oss-process=video/snapshot,t_0,m_fast` : (liveCourseWarmMedia.mediaUrl ? liveCourseWarmMedia.mediaUrl : defaultCover )} />
+                }
-                {
+              />
-                  liveCourseWarmMedia.mediaUrl && 
+              {liveCourseWarmMedia.mediaUrl && (
-                  <div className="img-delete-wrap">
+                <div className='img-delete-wrap'>
-                    <img src="https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/1600073872956.png" onClick={() => {
+                  <img
+                    src='https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/1600073872956.png'
+                    onClick={() => {
                      this.props.onChange('liveCourseWarmMedia', {});
-                    }}/>
+                    }}
+                  />
                </div>
-                }
+              )}
            </div>
-              <div className="opt-btns">
+            <div className='opt-btns'>
              <Button
                disabled={!isEdit}
                onClick={() => {
                  this.setState({
                    showSelectFileModal: true,
-                    selectType:'WARMUP'
+                    selectType: 'WARMUP',
-                  })
+                  });
-                }}>上传图片/视频</Button>
+                }}>
+                上传图片/视频
+              </Button>
-                <div className="tips">
+              <div className='tips'>
                <div>建议尺寸1280*720px或16:9。图片最大5M，支持jpg、jpeg和png；视频最大2G，</div>
                <div>支持mp4。</div>
              </div>
-                <Popover content={
+              <Popover
-                  <div className="example-wrap">
+                content={
-                    <p className="title">直播间暖场图示例</p>
+                  <div className='example-wrap'>
-                    <p className="text">直播开始前，展示在直播间视频区域</p>
+                    <p className='title'>直播间暖场图示例</p>
+                    <p className='text'>直播开始前，展示在直播间视频区域</p>
                    <img src='https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/1599644482652.png'></img>
                  </div>
                }>
-                  <div className="checkExample">查看示例</div>
+                <div className='checkExample'>查看示例</div>
              </Popover>
            </div>
          </div>
        </div>
+        <div className='introduce'>
-        <div className="introduce">
+          <span className='label'>课程简介：</span>
-          <span className="label">直播课简介：</span>
+          <div className='content'>
-          <div className="content">
+            <div className='intro-list'>
-            <div className="intro-list">
+              <div className='intro-list__item introduce-editor'>
-              <div className="intro-list__item introduce-editor">
+                {(!id || loadintroduce) && (
-                {(!id || loadintroduce) &&
                  <GraphicsEditor
-                    id="intro"
+                    id='intro'
                    isIntro={true}
+                    maxLimit={1000}
                    detail={{
-                      content: introduce
+                      content: introduce,
+                    }}
+                    onChange={(val) => {
+                      this.changeIntro(val);
                    }}
-                    onChange={(val) => { this.changeIntro(val) }}
                  />
-                }
+                )}
              </div>
            </div>
          </div>
        </div>
        {/* 选择暖场图文件弹窗 */}
-        { showSelectFileModal && 
+        {showSelectFileModal && (
          <SelectPrepareFileModal
-           key="instro"
+            key='instro'
-           operateType="select"
+            operateType='select'
-           accept={selectType==="INTRO"?"image/jpeg,image/png,image/jpg":"video/mp4,image/jpeg,image/png,image/jpg"}
+            accept={selectType === 'INTRO' ? 'image/jpeg,image/png,image/jpg' : 'video/mp4,image/jpeg,image/png,image/jpg'}
-           selectTypeList={ selectType==="INTRO" ? ['JPG', 'JPEG', 'PNG']: ['MP4', 'JPG', 'JPEG', 'PNG'] }
+            selectTypeList={selectType === 'INTRO' ? ['JPG', 'JPEG', 'PNG'] : ['MP4', 'JPG', 'JPEG', 'PNG']}
-           tooltip={ selectType==="INTRO"?'支持文件类型：jpg、jpeg、png':'支持文件类型：jpg、jpeg、png、mp4'}
+            tooltip={selectType === 'INTRO' ? '支持文件类型：jpg、jpeg、png' : '支持文件类型：jpg、jpeg、png、mp4'}
            isOpen={showSelectFileModal}
            onClose={() => {
-             this.setState({ showSelectFileModal: false })
+              this.setState({ showSelectFileModal: false });
            }}
            onSelect={this.handleSelectVideo}
          />
-        }
+        )}
      </div>
-    )
+    );
  }
 }

--- a/src/modules/course-manage/components/GraphicsEditor.jsx
+++ b/src/modules/course-manage/components/GraphicsEditor.jsx
+/*
+ * @Author: yuananting
+ * @Date: 2021-07-05 10:47:19
+ * @LastEditors: yuananting
+ * @LastEditTime: 2021-07-12 17:13:38
+ * @Description: 描述一下咯
+ * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
 import { message } from 'antd';
 import React from 'react';
 import E from 'wangeditor';
@@ -9,25 +18,23 @@ const { BtnMenu } = E;
 class GraphicsEditor extends React.Component {
  constructor(props) {
-    super(props)
+    super(props);
    this.state = {
      editorId: window.random_string(16),
      textLength: 0,
      showSelectImageModal: false,
      showSelectVideoModal: false,
      diskList: [],
-    }
+    };
    this.editorInt = null;
  }
  componentDidMount() {
-    this.renderEditor()
+    this.renderEditor();
    this.resetIndex(true);
    this.initBus();
  }
  componentWillUnmount() {
    this.resetIndex();
    this.removeBus();
@@ -38,11 +45,11 @@ class GraphicsEditor extends React.Component {
    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, maxLimit } = this.props;
+    const { detail, onChange, isIntro, maxLimit, editorType } = this.props;
    class ImageMenu extends BtnMenu {
      constructor(editor) {
        // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
@@ -50,17 +57,15 @@ class GraphicsEditor extends React.Component {
          `<div class="w-e-menu" data-title="图片">
                  <i class="w-e-icon-image"></i>
              </div>`
-        )
+        );
-        super($elem, editor)
+        super($elem, editor);
      }
      // 菜单点击事件
      clickHandler() {
-        Bus.trigger(`graphicsEditorImage${isIntro ? '' : 'Content'}`)
+        Bus.trigger(`graphicsEditorImage${isIntro ? '' : 'Content'}`);
      }
-      tryChangeActive() {
+      tryChangeActive() {}
-      }
    }
    class VideoMenu extends BtnMenu {
@@ -70,40 +75,24 @@ class GraphicsEditor extends React.Component {
          `<div class="w-e-menu" data-title="视频">
                  <i class="w-e-icon-play"></i>
              </div>`
-        )
+        );
-        super($elem, editor)
+        super($elem, editor);
      }
      // 菜单点击事件
      clickHandler() {
-        Bus.trigger('graphicsEditorVideo')
+        Bus.trigger('graphicsEditorVideo');
      }
-      tryChangeActive() {
+      tryChangeActive() {}
-      }
    }
    this.editorInt = new E(`#editor${editorId}`);
    this.editorInt.config.focus = false;
-    this.editorInt.config.showFullScreen = !isIntro
+    this.editorInt.config.showFullScreen = !isIntro;
    this.editorInt.menus.extend('xmimage', ImageMenu);
    !isIntro && this.editorInt.menus.extend('xmvideo', VideoMenu);
-    this.editorInt.config.menus = isIntro ?
+    this.editorInt.config.menus = isIntro
-      [
+      ? ['head', 'bold', 'fontSize', 'fontName', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'list', 'justify', 'emoticon', 'xmimage']
-        'head',
-        'bold',
-        'fontSize',
-        'fontName',
-        'italic',
-        'underline',
-        'strikeThrough',
-        'foreColor',
-        'backColor',
-        'list',
-        'justify',
-        'emoticon',
-        'xmimage',
-      ]
      : [
          'head',
          'bold',
@@ -134,33 +123,41 @@ class GraphicsEditor extends React.Component {
      {
        title: 'emoji',
        type: 'emoji',
-        content: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '😊', '🙂', '🙃', '😉', '😓', '😅', '😪', '🤔', '😬', '🤐']
+        content: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '😊', '🙂', '🙃', '😉', '😓', '😅', '😪', '🤔', '😬', '🤐'],
-      }
+      },
-    ]
+    ];
    this.editorInt.config.zIndex = 1;
    this.editorInt.config.pasteFilterStyle = false;
    this.editorInt.config.pasteIgnoreImg = true;
    // 自定义处理粘贴的文本内容
-    this.editorInt.config.pasteTextHandle = function (content) {
+    this.editorInt.config.pasteTextHandle = (content) => {
-      if (content == '' && !content) return ''
+      if (content == '' && !content) return '';
-      var str = content
+      var str = content; // 保留空格和换行的其他字符
-      str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
+      str = str.replace(/<xml>[\s\S]*?<\/xml>/gi, '');
-      str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
+      str = str.replace(/<style>[\s\S]*?<\/style>/gi, '');
-      str = str.replace(/[ | ]*\n/g, '\n')
+      str = str.replace(/<\/?a.*?>/g, '');
-      str = str.replace(/\&nbsp\;/ig, ' ')
+      return str;
-      return str
+    };
-    }
    this.editorInt.config.onchange = (html) => {
+      var str = this.editorInt.txt.text(); // 去除所有特殊字符
+      str = str.replace(/<xml>[\s\S]*?<\/xml>/gi, '');
+      str = str.replace(/<style>[\s\S]*?<\/style>/gi, '');
+      str = str.replace(/<\/?[^>]*>/g, '');
+      str = str.replace(/[ | ]*\n/g, '\n');
+      str = str.replace(/\&nbsp\;/gi, ' ');
+      str = str.replace(/[\r\n]/g, '');
+      str = str.replace(/<\/?a.*?>/g, '');
      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;
+      const textLength = str.length + videoCount + imageCount;
      this.setState({ textLength }, () => {
        if (textLength > maxLimit) {
-          // message.warning('超过字数限定');
+          message.warning(`内容过长，不能超过${maxLimit}字`);
        }
+        Bus.trigger('editorLimit', textLength, editorType);
        onChange(html, this.state.textLength);
-      })
+      });
-    }
+    };
    this.editorInt.create();
    this.editorInt.txt.html(detail.content);
  }
@@ -170,59 +167,64 @@ class GraphicsEditor extends React.Component {
    const { ossUrl } = file || {};
    if (!ossUrl) return null;
    this.setState({
-      showSelectVideoModal: false
+      showSelectVideoModal: false,
-    })
+    });
    const { detail } = this.props;
-    this.editorInt && this.editorInt.txt.html(`${detail.content}<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>`)
+    this.editorInt &&
-  }
+      this.editorInt.txt.html(
+        `${detail.content}<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>`
+      );
+  };
  handleSelectImage = (file) => {
    const { ossUrl } = file || {};
    if (!ossUrl) return null;
    this.setState({
-      showSelectImageModal: false
+      showSelectImageModal: false,
-    })
+    });
    const { detail } = this.props;
-    this.editorInt && this.editorInt.txt.html(`${detail.content}<p><img style="max-width: 100%;" src="${ossUrl}" /><br/><p>`)
+    this.editorInt && this.editorInt.txt.html(`${detail.content}<p><img style="max-width: 100%;" src="${ossUrl}" /><br/><p>`);
-  }
+  };
  initBus = () => {
    const { isIntro } = this.props;
-    Bus.bind(`graphicsEditorImage${isIntro ? '' : 'Content'}`, this.uploadImage)
+    Bus.bind(`graphicsEditorImage${isIntro ? '' : 'Content'}`, this.uploadImage);
-    !isIntro && Bus.bind('graphicsEditorVideo', this.uploadVideo)
+    !isIntro && Bus.bind('graphicsEditorVideo', this.uploadVideo);
-  }
+  };
  removeBus = () => {
    const { isIntro } = this.props;
-    Bus.unbind(`graphicsEditorImage${isIntro ? '' : 'Content'}`, this.uploadImage)
+    Bus.unbind(`graphicsEditorImage${isIntro ? '' : 'Content'}`, this.uploadImage);
-    !isIntro && Bus.unbind('graphicsEditorVideo', this.uploadVideo)
+    !isIntro && Bus.unbind('graphicsEditorVideo', this.uploadVideo);
-  }
+  };
  uploadImage = () => {
-    this.setState({ showSelectImageModal: true })
+    this.setState({ showSelectImageModal: true });
-  }
+  };
  uploadVideo = () => {
-    this.setState({ showSelectVideoModal: true })
+    this.setState({ showSelectVideoModal: true });
-  }
+  };
  render() {
-    const { 
+    const { editorId, textLength, showSelectImageModal, showSelectVideoModal, diskList } = this.state;
-      editorId, 
+    const { isIntro, maxLimit } = this.props;
-      textLength, 
+    return (
-      showSelectImageModal,
+      <div className={`graphics-editor-container${isIntro ? ' introduce' : ''}  ${textLength > maxLimit && 'warning'}`}>
-      showSelectVideoModal,
+        <div className='editor-box' id={`editor${editorId}`}></div>
-      diskList,
+        <div className='editor-tips'>
-    } = this.state;
+          ({textLength > maxLimit ? <span style={{ color: 'red' }}>{textLength}</span> : textLength}/{maxLimit || 1000})
-    const { limitLength = 1000, isIntro, maxLimit } = this.props;
+        </div>
-    return <div className={`graphics-editor-container${isIntro ? ' introduce' : ''}  ${(textLength > maxLimit)&& 'warning'}`}>
+        {textLength > maxLimit && (
-      <div className="editor-box" id={`editor${editorId}`} ></div>
+          <div style={{ top: isIntro ? '245px' : '512px' }} className='editor-warning'>
-      <div className="editor-tips">( {(textLength > maxLimit) ? <span style={{ color: 'red' }} >{textLength}</span> : textLength}/{maxLimit || 100000})</div>
+            最多只能输入{maxLimit || 1000}字
-      {showSelectVideoModal &&
+          </div>
+        )}
+        {showSelectVideoModal && (
          <SelectPrepareFileModal
-          operateType="select"
+            operateType='select'
            selectTypeList={['MP4']}
-          accept="video/mp4"
+            accept='video/mp4'
            confirm={{
              title: '文件过大，无法上传',
              content: '为保障学员的观看体验，上传的图文大小不能超过2G',
@@ -232,27 +234,28 @@ class GraphicsEditor extends React.Component {
            diskList={diskList}
            addVideo={true}
            onClose={() => {
-            this.setState({ showSelectVideoModal: false })
+              this.setState({ showSelectVideoModal: false });
            }}
            onSelect={this.handleSelectVideo}
          />
-      }
+        )}
-      {showSelectImageModal &&
+        {showSelectImageModal && (
          <SelectPrepareFileModal
-          key="basic"
+            key='basic'
-          operateType="select"
+            operateType='select'
            multiple={false}
-          accept="image/jpeg,image/png,image/jpg"
+            accept='image/jpeg,image/png,image/jpg'
            selectTypeList={['JPG', 'JPEG', 'PNG']}
            tooltip='支持文件类型：jpg、jpeg、png'
            isOpen={showSelectImageModal}
            onClose={() => {
-            this.setState({ showSelectImageModal: false })
+              this.setState({ showSelectImageModal: false });
            }}
            onSelect={this.handleSelectImage}
          />
-      }
+        )}
      </div>
+    );
  }
 }

--- a/src/modules/course-manage/components/GraphicsEditor.less
+++ b/src/modules/course-manage/components/GraphicsEditor.less
 .graphics-editor-container {
-  border: 1px solid #E8E8E8;
+  border: 1px solid #e8e8e8;
  border-radius: 4px;
  width: 702px;
  height: 510px;
@@ -23,7 +23,7 @@
  .w-e-toolbar {
    background-color: #fff !important;
    border: none !important;
-    border-bottom: 1px solid #E8E8E8 !important;
+    border-bottom: 1px solid #e8e8e8 !important;
  }
  .w-e-text-container {
@@ -38,19 +38,26 @@
    color: #666;
    z-index: 1;
  }
+  .editor-warning {
+    position: absolute;
+    right: 0;
+    color: red;
+  }
  .w-e-full-screen-editor {
    .w-e-text-container {
      height: ~'calc(100vh - 109px)' !important;
    }
  }
  &.introduce {
-    height: 200px;
+    height: 240px;
    .w-e-text-container {
      height: ~'calc(100% - 69px)' !important;
    }
  }
-  &.warning{
+  &.warning {
    border-color: red;
  }
 }
--- a/src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
+++ b/src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
@@ -27,6 +27,7 @@ import _ from 'underscore';
 import Upload from '@/core/upload';
 import ImgClipModal from '@/components/ImgClipModal'
 import './AddGraphicsCourse.less';
+import Bus from '@/core/bus';
 const EDIT_BOX_KEY = Math.random();
 const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' };
@@ -34,7 +35,7 @@ const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryL
 //添加课程时课程默认的一些值
 const defaultShelfState = 'YES';
 const whetherVisitorsJoin = 'NO';
-const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png';
+const defaultCover = 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png';
 let cutFlag = false;
 class AddGraphicsCourse extends React.Component {
@@ -53,7 +54,7 @@ class AddGraphicsCourse extends React.Component {
      introduce: '',
      courseMediaId: null, // 图文课链接
      coverId: null, // 图文封面的recourceId
-      coverUrl: defaultCoverUrl, // 图文课封面
+      coverUrl: defaultCover, // 图文课封面
      studentList: [], // 上课学员列表
      shelfState: 'YES', //是否开启学院展示
      selectedFileList: [], // 已经从资料云盘中勾选的文件
@@ -73,6 +74,11 @@ class AddGraphicsCourse extends React.Component {
    if (pageType === 'edit') {
      this.handleFetchScheudleDetail(id);
    }
+    Bus.bind('editorLimit', (editorTextLength, editorType) => {
+      this.setState({
+        [editorType]: editorTextLength,
+      });
+    });
  }
  initBus = () => {
@@ -314,11 +320,11 @@ class AddGraphicsCourse extends React.Component {
    //过期判断
    if (User.getExpirationTime() && moment().valueOf() > Number(User.getExpirationTime())) {
      Modal.warning({
-        title:"服务已到期",
+        title: '服务已到期',
-        content: "当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买",
+        content: '当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买',
-        okText: "我知道了"
+        okText: '我知道了',
-      })
+      });
-      return
+      return;
    }
    const { id, coverId, pageType, courseName, courseMedia, introduce, categoryId, shelfState, whetherVisitorsJoin } = this.state;
@@ -387,6 +393,7 @@ class AddGraphicsCourse extends React.Component {
  };
  handleValidate = (courseName, courseMedia, categoryId) => {
+    const { graphicsCourseIntor, graphicsCourseContent } = this.state;
    return new Promise((resolve) => {
      if (!courseName) {
        message.warning('请输入课程名称');
@@ -403,6 +410,18 @@ class AddGraphicsCourse extends React.Component {
        resolve(false);
        return false;
      }
+      if (graphicsCourseContent > 1000) {
+        message.warning('课程内容超过字数限定');
+        resolve(false);
+        return;
+      }
+      if (graphicsCourseIntor > 1000) {
+        message.warning('课程简介超过字数限定');
+        resolve(false);
+        return;
+      }
      // 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) {
@@ -415,6 +434,17 @@ class AddGraphicsCourse extends React.Component {
    });
  };
+  // 使用默认封面图
+  handleResetCoverUrl = () => {
+    const { coverUrl } = this.state;
+    const isDefaultCover = coverUrl === defaultCover;
+    // 如果已经是默认图的话，不做任何任何处理
+    if (isDefaultCover) return;
+    this.setState({ coverUrl: defaultCover, coverId: null }, () => {
+      message.success('已替换为默认图');
+    });
+  };
  render() {
    const {
      id,
@@ -442,6 +472,8 @@ class AddGraphicsCourse extends React.Component {
    const hasSelectedStu = studentList.length;
    const courseWareIcon = FileVerifyMap[videoType] ? FileTypeIcon[FileVerifyMap[videoType].type] : FileTypeIcon[videoType];
+    // 当前是否使用的是默认图片
+    const isDefaultCover = coverUrl === defaultCover;
    return (
      <div className='page add-graphics-course-page'>
@@ -468,19 +500,39 @@ class AddGraphicsCourse extends React.Component {
            <div className='cover-url flex mt16'>
              <div className='label'>封面图：</div>
-              <div className='cover-url__wrap'>
+              {/* <div className='cover-url__wrap'>
+                <div className='opt-btns'>
+                  <Button
+                    onClick={() => {
+                      this.setState({
+                        showSelectCoverModal: true,
+                      });
+                    }}>{`${pageType === 'add' && !coverUrl ? '上传' : '修改'}封面`}</Button>
+                  <div className='tips'></div>
+                </div>
                <div className='img-content'>
                  <img src={coverUrl} />
                </div>
+              </div> */}
+              <div className='course-cover__wrap'>
                <div className='opt-btns'>
                  <Button
                    onClick={() => {
                      this.setState({
                        showSelectCoverModal: true,
                      });
-                    }}>{`${pageType === 'add' && !coverUrl ? '上传' : '修改'}封面`}</Button>
+                    }}>
+                    上传图片
+                  </Button>
+                  <span className={`default-btn ${isDefaultCover ? 'disabled' : ''}`} onClick={this.handleResetCoverUrl}>
+                    使用默认图
+                  </span>
                  <div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
                </div>
+                <div className='img-content'>
+                  {isDefaultCover && <span className='tag'>默认图</span>}
+                  <img src={coverUrl} />
+                </div>
              </div>
            </div>
            <div className='course-catalog required'>

--- a/src/modules/course-manage/graphics-course/AddGraphicsCourse.less
+++ b/src/modules/course-manage/graphics-course/AddGraphicsCourse.less
 .add-graphics-course-page {
-  position:relative !important;
+  position: relative !important;
-  .box{
+  .box {
-    margin-bottom:52px !important;
+    margin-bottom: 52px !important;
  }
  .ant-radio-group {
    display: flex;
    flex-direction: column;
    .radio-item {
      margin-bottom: 12px;
@@ -28,10 +27,10 @@
  .form {
    margin-top: 16px;
    padding: 0 16px;
-    .label{
+    .label {
-      display:inline-block;
+      display: inline-block;
-      text-align:right;
+      text-align: right;
-      width:85px;
+      width: 85px;
    }
    .required {
      position: relative;
@@ -48,9 +47,9 @@
        top: 0;
      }
    }
-    .course-catalog{
+    .course-catalog {
-      margin-bottom:16px;
+      margin-bottom: 16px;
-      margin-top:16px;
+      margin-top: 16px;
    }
    .course-ware {
      display: flex;
@@ -71,10 +70,20 @@
      display: flex;
    }
-    .cover-url__wrap {
+    .course-cover {
+      margin-left: 14px;
+      display: flex;
+      margin-top: 24px;
+      &__wrap {
+        position: relative;
        .img-content {
-        width: 298px;
+          margin-top: 8px;
-        height: 172px;
+          margin-right: 20px;
+          width: 299px;
+          height: 169px;
+          position: relative;
          img {
            width: 100%;
@@ -82,29 +91,78 @@
            object-fit: contain;
            border-radius: 4px;
          }
-      }
+          .tag {
-      .empty-img {
+            border-radius: 2px;
-        width: 298px;
+            background: #d6d6d6;
-        height: 172px;
+            font-size: 12px;
-        border: 1px dashed #EBEBEB;
+            height: 18px;
-        border-radius: 4px;
+            width: 52px;
-        padding: 12px;
-        color: #999;
-        padding: 52px 24px;
            text-align: center;
+            color: #fff;
+            position: absolute;
+            top: 8px;
+            left: 8px;
+          }
        }
        .opt-btns {
-        margin-top: 8px;
+          .default-btn {
-        display: flex;
+            margin-left: 14px;
-        align-items: center;
+            color: #2966ff;
+            cursor: pointer;
+            &.disabled {
+              color: #ccc;
+              cursor: not-allowed;
+            }
+          }
+          .ant-upload-list {
+            display: none;
+          }
          .tips {
-          margin-left: 12px;
+            margin-top: 8px;
            color: #999;
          }
        }
      }
+    }
+    // .cover-url__wrap {
+    //   .img-content {
+    //     width: 298px;
+    //     height: 172px;
+    //     img {
+    //       width: 100%;
+    //       height: 100%;
+    //       object-fit: contain;
+    //       border-radius: 4px;
+    //     }
+    //   }
+    //   .empty-img {
+    //     width: 298px;
+    //     height: 172px;
+    //     border: 1px dashed #EBEBEB;
+    //     border-radius: 4px;
+    //     padding: 12px;
+    //     color: #999;
+    //     padding: 52px 24px;
+    //     text-align: center;
+    //   }
+    //   .opt-btns {
+    //     margin-top: 8px;
+    //     display: flex;
+    //     align-items: center;
+    //     .tips {
+    //       margin-left: 12px;
+    //       color: #999;
+    //     }
+    //   }
+    // }
    .select-student {
      align-items: center;
@@ -139,7 +197,7 @@
    justify-content: flex-end;
    padding-right: 72px;
    background: #fff;
-    border-top: 1px solid #E8E8E8;
+    border-top: 1px solid #e8e8e8;
    z-index: 999;
    .ant-btn {
      margin-left: 10px;

--- a/src/modules/course-manage/graphics-course/components/AddGraphicsIntro.jsx
+++ b/src/modules/course-manage/graphics-course/components/AddGraphicsIntro.jsx
@@ -17,17 +17,15 @@ import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepare
 import { DISK_MAP } from '@/common/constants/academic/lessonEnum';
 import { ImgCutModalNew } from '@/components';
 const { TextArea } = Input;
 class AddGraphicsIntro extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showSelectFileModal: false,
      diskList: [],
      selectType: null,
-    }
+    };
  }
  // 上传封面图
@@ -38,34 +36,34 @@ class AddGraphicsIntro extends React.Component {
      imageFile,
      showCutModal: true,
    });
-  }
+  };
  // 选择暖场资源
  handleSelectVideo = (file) => {
    const { selectType } = this.state;
    this.setState({
-      showSelectFileModal: false
+      showSelectFileModal: false,
-    })
+    });
    const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file;
-    if(selectType === 'WARMUP'){
+    if (selectType === 'WARMUP') {
      const liveCourseWarmMedia = {
        contentType: 'WARMUP',
        mediaType: folderFormat === 'MP4' ? 'VIDEO' : 'PICTURE',
        mediaContent: resourceId,
        mediaUrl: ossUrl,
        mediaName: folderName,
-        size: folderSize
+        size: folderSize,
-      }
+      };
      this.props.onChange('liveCourseWarmMedia', liveCourseWarmMedia);
-    }else{
+    } else {
      // 最多添加九图片
      const { liveCourseMediaRequests } = this.props.data;
      const list = _.filter(liveCourseMediaRequests, (item) => {
-        return item.mediaType == "PICTURE";
+        return item.mediaType == 'PICTURE';
      });
      if (list.length > 8) {
-        message.warning("最多添加9张图片");
+        message.warning('最多添加9张图片');
        return;
      }
      liveCourseMediaRequests.push({
@@ -78,121 +76,116 @@ class AddGraphicsIntro extends React.Component {
      });
      this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
    }
+  };
-  }
  changeDetail = (value) => {
    this.props.onChange('courseMedia', value);
-  }
+  };
  changeIntro = (value) => {
    this.props.onChange('introduce', value);
-  }
+  };
-  whetherVisitorsJoinChange = ()=>{
+  whetherVisitorsJoinChange = () => {
-    if(this.props.data.whetherVisitorsJoin==="NO"){
+    if (this.props.data.whetherVisitorsJoin === 'NO') {
-      this.props.onChange('whetherVisitorsJoin','YES')
+      this.props.onChange('whetherVisitorsJoin', 'YES');
-    }else{
+    } else {
-      this.props.onChange('whetherVisitorsJoin','NO')
+      this.props.onChange('whetherVisitorsJoin', 'NO');
-    }
    }
+  };
-  shelfStateChange = ()=>{
+  shelfStateChange = () => {
-    if(this.props.data.shelfState==="NO"){
+    if (this.props.data.shelfState === 'NO') {
-      this.props.onChange('shelfState','YES')
+      this.props.onChange('shelfState', 'YES');
-    }else{
+    } else {
-      this.props.onChange('shelfState','NO')
+      this.props.onChange('shelfState', 'NO');
-    }
    }
+  };
  render() {
-    const {data: { id, whetherVisitorsJoin, courseMedia, introduce, shelfState, loadcourseMedia, loadintroduce } } = this.props;
+    const {
+      data: { id, whetherVisitorsJoin, courseMedia, introduce, shelfState, loadcourseMedia, loadintroduce },
+    } = this.props;
    const { showSelectFileModal, selectType } = this.state;
    return (
-      <div className="add-video__intro-info">
+      <div className='add-graphic__intro-info'>
-        <div className="allow-tourist-join">
+        <div className='allow-tourist-join'>
-          <span className="label">观看设置：</span>
+          <span className='label'>观看设置：</span>
-          <div className="content">
+          <div className='content'>
-            <div>
+            <Switch checked={whetherVisitorsJoin === 'NO' ? true : false} onChange={this.whetherVisitorsJoinChange} />
-                <Switch checked={whetherVisitorsJoin==="YES"? true:false} onChange={this.whetherVisitorsJoinChange}/>
+            <div className='desc'>{whetherVisitorsJoin === 'NO' ? '已开启，学员需绑定手机号才可观看' : '已关闭，学员无需绑定手机号即可观看'}</div>
-            </div>  
+          </div>
-            <div>
+        </div>
-              <div className="desc">
+        <div className='store-show'>
-                <div>开启：允许未绑定手机号的学员观看</div>
+          <span className='label'>学院展示：</span>
-                <div>关闭：仅限绑定了手机号的学员可以进入观看图文课</div>
+          <div className='content'>
-              </div>
+            <Switch checked={shelfState === 'YES' ? true : false} onChange={this.shelfStateChange} />
-            </div> 
+            <div className='desc'>{shelfState === 'YES' ? '已开启，课程将在该学院的学员课程列表中显示' : '已关闭，课程将在该学院的学员课程列表中隐藏'}</div>
          </div>
        </div>
-        <div className="store-show">
+        <div className='introduce required'>
-          <span className="label">学院展示：</span>
+          <span className='label' style={{ marginTop: 5 }}>
-          <div className="content">
+            课程内容：
-              <Row>
+          </span>
-                <Col span={3}>
+          <div className='content'>
-                    <Switch checked={shelfState==="YES"? true:false} onChange={this.shelfStateChange}/>
+            <div className='intro-list'>
-                </Col>  
+              <div className='intro-list__item content-editor'>
-                <Col span={21}>
+                {(!id || loadcourseMedia) && (
-                  <div className="desc">
-                    <div>开启：图文课将在学员学院图文课列表中展示</div>
-                    <div>关闭：图文课将在学员学院图文课列表中隐藏</div>
-                  </div>
-                </Col> 
-              </Row>
-          </div>
-        </div>
-        <div className="introduce required">
-          <span className="label" style={{ marginTop: 5 }}>课程内容：</span>
-          <div className="content">
-            <div className="intro-list">
-              <div className="intro-list__item content-editor">
-                {(!id || loadcourseMedia) &&
                  <GraphicsEditor
-                    id="content"
+                    id='content'
+                    maxLimit={1000}
+                    editorType={'graphicsCourseContent'}
                    detail={{
-                      content: courseMedia
+                      content: courseMedia,
+                    }}
+                    onChange={(val) => {
+                      this.changeDetail(val);
                    }}
-                    onChange={(val) => { this.changeDetail(val) }}
                  />
-                }
+                )}
              </div>
            </div>
          </div>
        </div>
-        <div className="introduce">
+        <div className='introduce'>
-          <span className="label">课程简介：</span>
+          <span className='label'>课程简介：</span>
-          <div className="content">
+          <div className='content'>
-            <div className="intro-list">
+            <div className='intro-list'>
-              <div className="intro-list__item introduce-editor">
+              <div className='intro-list__item introduce-editor'>
-                {(!id || loadintroduce) &&
+                {(!id || loadintroduce) && (
                  <GraphicsEditor
-                    id="intro"
+                    id='intro'
                    isIntro={true}
+                    maxLimit={1000}
+                    editorType={'graphicsCourseIntor'}
                    detail={{
-                      content: introduce
+                      content: introduce,
+                    }}
+                    onChange={(val) => {
+                      this.changeIntro(val);
                    }}
-                    onChange={(val) => { this.changeIntro(val) }}
                  />
-                }
+                )}
              </div>
            </div>
          </div>
        </div>
        {/* 选择暖场图文件弹窗 */}
-        { showSelectFileModal &&
+        {showSelectFileModal && (
          <SelectPrepareFileModal
-            operateType="select"
+            operateType='select'
-            accept={selectType==="INTRO"?"image/jpeg,image/png,image/jpg":"video/mp4,image/jpeg,image/png,image/jpg"}
+            accept={selectType === 'INTRO' ? 'image/jpeg,image/png,image/jpg' : 'video/mp4,image/jpeg,image/png,image/jpg'}
-            selectTypeList={ selectType==="INTRO" ? ['JPG', 'JPEG', 'PNG']: ['MP4', 'JPG', 'JPEG', 'PNG'] }
+            selectTypeList={selectType === 'INTRO' ? ['JPG', 'JPEG', 'PNG'] : ['MP4', 'JPG', 'JPEG', 'PNG']}
-            tooltip={ selectType==="INTRO"?'支持文件类型：jpg、jpeg、png':'支持文件类型：jpg、jpeg、png、mp4'}
+            tooltip={selectType === 'INTRO' ? '支持文件类型：jpg、jpeg、png' : '支持文件类型：jpg、jpeg、png、mp4'}
            isOpen={showSelectFileModal}
            onClose={() => {
-              this.setState({ showSelectFileModal: false })
+              this.setState({ showSelectFileModal: false });
            }}
            onSelect={this.handleSelectVideo}
          />
-        }
+        )}
      </div>
-    )
+    );
  }
 }

--- a/src/modules/course-manage/graphics-course/components/AddGraphicsIntro.less
+++ b/src/modules/course-manage/graphics-course/components/AddGraphicsIntro.less
-.add-video__intro-info {
+.add-graphic__intro-info {
  .w-e-full-screen-editor {
    background: #fff !important;
  }
  .playback {
    margin-bottom: 10px;
    .require {
-        color: #EC4B35;
+      color: #ec4b35;
    }
    &__text {
      color: #999;
    }
  }
-    .label{
+  .label {
-      display:inline-block;
+    display: inline-block;
-      text-align:right;
+    text-align: right;
-      width:85px;
+    width: 85px;
  }
  .playback,
  .introduce {
    display: flex;
    flex-direction: row;
  }
-    .allow-tourist-join{
+  .allow-tourist-join {
-      display:flex;
+    display: flex;
-      .content{
+    .content {
-        display:flex;
+      display: flex;
    }
-      .desc{
+    .desc {
-        margin-left:16px;
+      margin-left: 16px;
-        font-size:14px;
+      font-size: 14px;
-        color:#999;
+      color: #999;
-        display:inline-block;
+      display: inline-block;
    }
  }
-    .store-show{
+  .store-show {
-        display:flex;
+    display: flex;
-        margin-top:16px;
+    margin-top: 16px;
-        margin-bottom:16px;
+    margin-bottom: 16px;
-        .desc{
+    .content {
-          margin-left:16px;
+      display: flex;
-          font-size:14px;
+    }
-          color:#999;
+    .desc {
-          display:inline-block;
+      margin-left: 16px;
+      font-size: 14px;
+      color: #999;
+      display: inline-block;
    }
  }
  .radio {
@@ -59,13 +62,13 @@
  .intro-list__item {
    display: flex;
-      margin-bottom: 16px;
+    margin-bottom: 32px;
    position: relative;
    &.picture {
      width: 550px;
      padding: 16px;
-        border: 1px solid #EEE;
+      border: 1px solid #eee;
      border-radius: 4px;
      .img__wrap {
@@ -114,7 +117,7 @@
    line-height: 80px;
    padding: 16px;
    margin-top: 16px;
-      border: 1px dashed #EBEBEB;
+    border: 1px dashed #ebebeb;
    border-radius: 4px;
    .ant-upload {
@@ -133,7 +136,7 @@
      .iconfont {
        font-size: 22px;
        line-height: 22px;
-          color: #BFBFBF;
+        color: #bfbfbf;
        text-align: center;
      }
@@ -152,7 +155,7 @@
  }
  .checkExample {
    width: 60px;
-      color: #FF7519;
+    color: #ff7519;
    cursor: pointer;
  }
  .warmup {
@@ -197,21 +200,19 @@
    }
  }
  .opt-btns {
    .default-btn {
      margin-left: 16px;
-        color: #FF7519;
+      color: #ff7519;
      cursor: pointer;
      &.disabled {
-          color: #CCC;
+        color: #ccc;
        cursor: not-allowed;
      }
    }
  }
+}
-  }
+.example-wrap {
-  .example-wrap {
  font-family: PingFangSC-Regular, PingFang SC;
  text-align: center;
  .title {
@@ -227,14 +228,14 @@
  img {
    width: 180px;
  }
-  }
+}
-  .check-record-rule {
+.check-record-rule {
  width: 120px;
-    color: #FF7519;
+  color: #ff7519;
  cursor: pointer;
  z-index: 2;
-  }
+}
-  .record-rule-wrap {
+.record-rule-wrap {
  text-align: left;
  ul {
    margin-top: 10px;
@@ -247,9 +248,9 @@
  .text {
    color: #999;
  }
-  }
+}
-  .auto-send-class-report {
+.auto-send-class-report {
  .label {
    width: 57px;
    height: 12px;
@@ -258,7 +259,8 @@
    color: #666666;
    line-height: 12px;
  }
-    .open-text, .close-text {
+  .open-text,
+  .close-text {
    width: 572px;
    font-size: 14px;
    font-weight: 400;
@@ -273,4 +275,4 @@
  .close-text {
    margin-bottom: 16px;
  }
-  }
+}
\ No newline at end of file
--- a/src/modules/course-manage/graphics-course/components/GraphicsCourseList.jsx
+++ b/src/modules/course-manage/graphics-course/components/GraphicsCourseList.jsx
-/*
- * @Author: 吴文洁
- * @Date: 2020-08-05 10:12:45
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-06-15 17:26:53
- * @Description: 视频课-列表模块
- * @Copyright: 杭州杰竞科技有限公司 版权所有
- */
 import User from '@/common/js/user';
 import college from '@/common/lottie/college';
 import { PageControl, XMTable } from '@/components';
@@ -341,7 +334,7 @@ class GraphicsCourseList extends React.Component {
  // 删除视频课
  handleDeleteGraphicsCourse = (scheduleId) => {
    Modal.confirm({
-      title: '你确定要删除此视频课吗？',
+      title: '你确定要删除此线上课吗？',
      content: '删除后，学员将不能进行观看。',
      icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
      okText: '确定',

--- a/src/modules/course-manage/graphics-course/components/GraphicsCourseOpt.jsx
+++ b/src/modules/course-manage/graphics-course/components/GraphicsCourseOpt.jsx
@@ -3,7 +3,7 @@
 * @Date: 2020-08-05 10:12:15
 * @LastEditors: zhangleyuan
 * @LastEditTime: 2020-12-26 16:07:27
- * @Description: 视频课-操作模块
+ * @Description: 线上课-操作模块
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 */

--- a/src/modules/course-manage/graphics-course/index.jsx
+++ b/src/modules/course-manage/graphics-course/index.jsx
@@ -17,13 +17,13 @@ class GraphicsCourse extends React.Component {
        courseType: 'PICTURE',
        storeId:User.getStoreId()
      },
-      dataSource: [],    // 视频课列表
+      dataSource: [],    // 线上课列表
-      totalCount: 0,     // 视频课数据总条数
+      totalCount: 0,     // 线上课数据总条数
    }
  }
  componentWillMount() {
-    // 获取视频课列表
+    // 获取线上课列表
    this.handleFetchScheduleList();
  }
@@ -76,7 +76,7 @@ class GraphicsCourse extends React.Component {
          {/* 操作模块 */}
          <GraphicsCourseOpt />
-          {/* 视频课列表模块 */}
+          {/* 线上课列表模块 */}
          <GraphicsCourseList
            query={query}
            dataSource={dataSource}

--- a/src/modules/course-manage/modal/PreviewCourseModal.jsx
+++ b/src/modules/course-manage/modal/PreviewCourseModal.jsx
 /*
 * @Author: 吴文洁
 * @Date: 2020-07-23 14:54:16
- * @LastEditors: fusanqiasng
+ * @LastEditors: yuananting
- * @LastEditTime: 2021-05-24 21:02:21
+ * @LastEditTime: 2021-07-15 14:02:37
 * @Description: 大班直播课预览弹窗
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 */
-import React from 'react'
+import React from "react";
-import { Modal } from 'antd'
+import { Modal, Tabs } from "antd";
-import moment from 'moment'
+import moment from "moment";
-import './PreviewCourseModal.less'
+import ChapterList from "../video-course/components/ChapterList";
+import "./PreviewCourseModal.less";
+const { TabPane } = Tabs;
 const courseStateShow = {
  UN_START: {
-    title: '待开课'
+    title: "待开课",
  },
  STARTING: {
-    title: '上课中'
+    title: "上课中",
  },
  FINISH: {
-    title: '已完成'
+    title: "已完成",
  },
  EXPIRED: {
    code: 4,
-    title: '未成功开课',
+    title: "未成功开课",
-    color: '#CCCCCC'
+    color: "#CCCCCC",
-  }
+  },
-}
+};
 class PreviewCourseModal extends React.Component {
  constructor(props) {
-    super(props)
+    super(props);
-    this.state = {}
+    this.state = {
+      activeTab: "courseChapter",
+    };
  }
  dealTimeDuration = (time) => {
-    const diff = Math.floor(time % 3600)
+    const diff = Math.floor(time % 3600);
-    let hours = Math.floor(time / 3600)
+    let hours = Math.floor(time / 3600);
-    let mins = Math.floor(diff / 60)
+    let mins = Math.floor(diff / 60);
-    let seconds = Math.floor(time % 60)
+    let seconds = Math.floor(time % 60);
-    hours = hours < 10 ? '0' + hours : hours
+    hours = hours < 10 ? "0" + hours : hours;
-    mins = mins < 10 ? '0' + mins : mins
+    mins = mins < 10 ? "0" + mins : mins;
-    seconds = seconds < 10 ? '0' + seconds : seconds
+    seconds = seconds < 10 ? "0" + seconds : seconds;
-    return hours + ':' + mins + ':' + seconds
+    return hours + ":" + mins + ":" + seconds;
-  }
+  };
  dealWithTime = (startTime, endTime) => {
-    const startDate = new Date(Number(startTime))
+    const startDate = new Date(Number(startTime));
-    const endDate = new Date(Number(endTime))
+    const endDate = new Date(Number(endTime));
-    const year = startDate.getFullYear()
+    const year = startDate.getFullYear();
-    const month = startDate.getMonth() + 1 < 10 ? `0${startDate.getMonth() + 1}` : startDate.getMonth() + 1
+    const month =
-    const day = startDate.getDate() < 10 ? `0${startDate.getDate()}` : startDate.getDate()
+      startDate.getMonth() + 1 < 10
+        ? `0${startDate.getMonth() + 1}`
+        : startDate.getMonth() + 1;
+    const day =
+      startDate.getDate() < 10
+        ? `0${startDate.getDate()}`
+        : startDate.getDate();
-    const startHour = startDate.getHours() < 10 ? `0${startDate.getHours()}` : startDate.getHours()
+    const startHour =
-    const startMinute = startDate.getMinutes() < 10 ? `0${startDate.getMinutes()}` : startDate.getMinutes()
+      startDate.getHours() < 10
+        ? `0${startDate.getHours()}`
+        : startDate.getHours();
+    const startMinute =
+      startDate.getMinutes() < 10
+        ? `0${startDate.getMinutes()}`
+        : startDate.getMinutes();
-    const endHour = endDate.getHours() < 10 ? `0${endDate.getHours()}` : endDate.getHours()
+    const endHour =
-    const endMinute = endDate.getMinutes() < 10 ? `0${endDate.getMinutes()}` : endDate.getMinutes()
+      endDate.getHours() < 10 ? `0${endDate.getHours()}` : endDate.getHours();
+    const endMinute =
+      endDate.getMinutes() < 10
+        ? `0${endDate.getMinutes()}`
+        : endDate.getMinutes();
-    const liveDateStr = `${year}-${month}-${day}`
+    const liveDateStr = `${year}-${month}-${day}`;
-    const startTimeStr = `${startHour}:${startMinute}`
+    const startTimeStr = `${startHour}:${startMinute}`;
-    const endTimeStr = `${endHour}:${endMinute}`
+    const endTimeStr = `${endHour}:${endMinute}`;
    return {
      liveDateStr,
      startTimeStr,
-      endTimeStr
+      endTimeStr,
-    }
+    };
-  }
+  };
  render() {
-    const { courseBasicInfo, courseClassInfo = {}, courseIntroInfo, type, courseState, origin } = this.props
+    const {
-    const { coverUrl, courseName, scheduleVideoUrl, videoDuration } = courseBasicInfo
+      courseBasicInfo,
-    const { liveDate, calendarTime, startTime, endTime, timeHorizonStart, timeHorizonEnd, teacherName } = courseClassInfo
+      courseClassInfo = {},
-    const { introduce } = courseIntroInfo
+      courseIntroInfo,
+      type,
-    let liveDateStr, startTimeStr, endTimeStr
+      courseState,
+      courseChapterList = [],
-    if (type === 'add') {
+    } = this.props;
-      const _liveDate = moment(calendarTime[0]).format('YYYY-MM-DD')
+    const { coverUrl, courseName, scheduleVideoUrl, videoDuration } =
-      console.log('_liveDate', _liveDate)
+      courseBasicInfo;
-      const _timeHorizonStart = moment(startTime).format('HH:mm')
+    const {
-      const _timeHorizonEnd = moment(endTime).format('HH:mm')
+      liveDate,
-      const _startTime = moment(_liveDate + ' ' + _timeHorizonStart).format('x')
+      calendarTime,
-      const _endTime = moment(_liveDate + ' ' + _timeHorizonEnd).format('x')
+      startTime,
-      const { liveDateStr: _liveDateStr, startTimeStr: _startTimeStr, endTimeStr: _endTimeStr } = this.dealWithTime(_startTime, _endTime)
+      endTime,
+      timeHorizonStart,
-      liveDateStr = _liveDateStr
+      timeHorizonEnd,
-      startTimeStr = _startTimeStr
+      teacherName,
-      endTimeStr = _endTimeStr
+    } = courseClassInfo;
+    const { introduce, categoryName } = courseIntroInfo;
+    let { activeTab } = this.state;
+    let liveDateStr, startTimeStr, endTimeStr;
+    if (type === "add") {
+      const _liveDate = moment(calendarTime[0]).format("YYYY-MM-DD");
+      console.log("_liveDate", _liveDate);
+      const _timeHorizonStart = moment(startTime).format("HH:mm");
+      const _timeHorizonEnd = moment(endTime).format("HH:mm");
+      const _startTime = moment(_liveDate + " " + _timeHorizonStart).format(
+        "x"
+      );
+      const _endTime = moment(_liveDate + " " + _timeHorizonEnd).format("x");
+      const {
+        liveDateStr: _liveDateStr,
+        startTimeStr: _startTimeStr,
+        endTimeStr: _endTimeStr,
+      } = this.dealWithTime(_startTime, _endTime);
+      liveDateStr = _liveDateStr;
+      startTimeStr = _startTimeStr;
+      endTimeStr = _endTimeStr;
    } else {
-      const _liveDate = moment(liveDate).format('YYYY-MM-DD')
+      const _liveDate = moment(liveDate).format("YYYY-MM-DD");
-      const _timeHorizonStart = moment(timeHorizonStart).format('HH:mm')
+      const _timeHorizonStart = moment(timeHorizonStart).format("HH:mm");
-      const _timeHorizonEnd = moment(timeHorizonEnd).format('HH:mm')
+      const _timeHorizonEnd = moment(timeHorizonEnd).format("HH:mm");
-      const startTime = moment(_liveDate + ' ' + _timeHorizonStart).format('x')
+      const startTime = moment(_liveDate + " " + _timeHorizonStart).format("x");
-      const endTime = moment(_liveDate + ' ' + _timeHorizonEnd).format('x')
+      const endTime = moment(_liveDate + " " + _timeHorizonEnd).format("x");
-      const { liveDateStr: _liveDateStr, startTimeStr: _startTimeStr, endTimeStr: _endTimeStr } = this.dealWithTime(startTime, endTime)
+      const {
+        liveDateStr: _liveDateStr,
-      liveDateStr = _liveDateStr
+        startTimeStr: _startTimeStr,
-      startTimeStr = _startTimeStr
+        endTimeStr: _endTimeStr,
-      endTimeStr = _endTimeStr
+      } = this.dealWithTime(startTime, endTime);
+      liveDateStr = _liveDateStr;
+      startTimeStr = _startTimeStr;
+      endTimeStr = _endTimeStr;
    }
    return (
      <Modal
-        title='预览'
+        title="预览"
        visible={true}
        width={680}
        onCancel={this.props.close}
        footer={null}
        maskClosable={false}
-        closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}
+        closeIcon={
-        className='preview-live-course-modal'>
+          <span className="icon iconfont modal-close-icon">&#xe6ef;</span>
-        <div className='container__wrap'>
+        }
-          <div className='container'>
+        className="preview-live-course-modal"
+      >
+        <div className="container__wrap">
+          <div className="container">
          <div className='container__header'>
-              {type === 'videoCourse' ? (
+              <Choose>
-                <video
+                <When condition={type === 'videoCourse'}>
-                  controls
+                   <img src={coverUrl ? coverUrl : `https://image.xiaomaiketang.com/xm/TwtGPQGE4K.png`} className='course-cover' alt='' />
-                  src={scheduleVideoUrl}
+                </When>
-                  poster={coverUrl ? coverUrl : `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`}
+                <Otherwise>
-                  className='course-url'
+                  <img src={coverUrl} className='course-cover' alt='' />
-                />
+                </Otherwise>
-              ) : (
+              </Choose>
-                <img src={coverUrl} className='course-cover' />
-              )}
            </div>
-            {type === 'videoCourse' ? (
+            <Choose>
+              <When condition={type === 'videoCourse'}>
                <div className='container__body'>
                  <div className='title__name'>{courseName}</div>
-                {videoDuration && <div>视频时长：{this.dealTimeDuration(videoDuration)}</div>}
+                  <div className='title__category'>课程分类：{categoryName}</div>
+                  <div className='title__chapter'>共{courseChapterList.length}小节</div>
                </div>
-            ) : (
+              </When>
+              <Otherwise>
                <div className='container__body'>
                  <div className='container__body__title'>
                    <div className='title__name'>{courseName}</div>
@@ -152,28 +203,71 @@ class PreviewCourseModal extends React.Component {
                    <span className='teacher__value'>{teacherName}</span>
                  </div>
                </div>
-            )}
+              </Otherwise>
+            </Choose>
+            <div className="container__introduction">
+              <Choose>
+                <When condition={type === "videoCourse"}>
+                  <Tabs
+                    activeKey={activeTab}
+                    onChange={(key) => {
+                      this.setState({
+                        activeTab: key,
+                      });
+                    }}
+                  >
+                    <TabPane tab="课程目录" key="courseChapter"></TabPane>
+                    <TabPane tab="课程简介" key="courseIntro"></TabPane>
+                  </Tabs>
+                </When>
+                <Otherwise>
+                  <div className="container__introduction__title">
+                    直播课简介
+                  </div>
+                </Otherwise>
+              </Choose>
-            <div className='container__introduction'>
+              <Choose>
-              {type === 'videoCourse' ? (
+                <When condition={type === "videoCourse"}>
-                <div className='container__introduction__title'>视频课简介</div>
+                  {activeTab === "courseChapter" && (
-              ) : (
+                    <div className="container__chapter">
-                <div className='container__introduction__title'>直播课简介</div>
+                      {
+                        <ChapterList
+                          chapterType="VIDEO"
+                          courseChapterList={courseChapterList}
+                        />
+                      }
+                    </div>
+                  )}
+                  {activeTab === "courseIntro" && (
+                    <div className="container__introduction__list editor-box">
+                      <div
+                        className="intro-item text"
+                        dangerouslySetInnerHTML={{
+                          __html: introduce,
+                        }}
+                      />
+                    </div>
                  )}
-              <div className='container__introduction__list editor-box'>
+                </When>
+                <Otherwise>
+                  <div className="container__introduction__list editor-box">
                    <div
-                  className='intro-item text'
+                      className="intro-item text"
                      dangerouslySetInnerHTML={{
-                    __html: introduce
+                        __html: introduce,
                      }}
                    />
                  </div>
+                </Otherwise>
+              </Choose>
            </div>
          </div>
        </div>
      </Modal>
-    )
+    );
  }
 }
-export default PreviewCourseModal
+export default PreviewCourseModal;
--- a/src/modules/course-manage/modal/PreviewCourseModal.less
+++ b/src/modules/course-manage/modal/PreviewCourseModal.less
@@ -13,7 +13,8 @@
  }
  .container {
-    overflow: scroll;
+    overflow-y: auto;
+    overflow-x: hidden;
    height: 100%;;
    .course-cover, .course-url {
@@ -30,6 +31,16 @@
        color: #000;
      }
+      .title__category { 
+        color: #999999;
+        margin-top: 4px;
+        margin-bottom: 4px;
+      }
+      .title__chapter {  
+        color: #999999;
+        margin-bottom: 4px;
+      }
      .title__inst-name {
        color: #666;
        font-size: 12px;

--- a/src/modules/course-manage/modal/ShareLiveModal.jsx
+++ b/src/modules/course-manage/modal/ShareLiveModal.jsx
@@ -116,11 +116,7 @@ class ShareLiveModal extends React.Component {
        }
        break;
      case 'videoClass': // 视频课
-        coverImgSrc =
+        coverImgSrc = coverUrl || 'https://image.xiaomaiketang.com/xm/TwtGPQGE4K.png';
-          coverUrl ||
-          (courseDivision === 'internal'
-            ? `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring`
-            : 'https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png');
        break;
      case 'graphicsClass': // 图文课
        coverImgSrc = coverUrl || 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png';

--- a/src/modules/course-manage/offline-course/AddOfflineCourse.jsx
+++ b/src/modules/course-manage/offline-course/AddOfflineCourse.jsx
@@ -2,7 +2,7 @@
 * @Author: 吴文洁
 * @Date: 2020-08-05 10:07:47
 * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-07-06 14:47:23
+ * @LastEditTime: 2021-07-18 10:13:42
 * @Description: 线下课新增/编辑页
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 */
@@ -10,7 +10,7 @@
 import React from 'react';
 import { Button, Input, Radio, message, Modal, TreeSelect, Select, Switch, TimePicker, InputNumber, Tooltip } from 'antd';
 import $ from 'jquery';
-import Bus from '@/core/bus';
 import RangePicker from '@/modules/common/DateRangePicker';
 import ShowTips from '@/components/ShowTips';
 import Breadcrumbs from '@/components/Breadcrumbs';
@@ -27,6 +27,7 @@ import GraphicsEditor from '../components/GraphicsEditor';
 import MultipleDatePicker from '@/components/MultipleDatePicker';
 import ImgClipModal from '@/components/ImgClipModal';
 import './AddOfflineCourse.less';
+import Bus from '@/core/bus';
 const { Option } = Select;
 const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/pxbWKsYA87.png';
@@ -96,6 +97,11 @@ class AddOfflineCourse extends React.Component {
    if (pageType === 'edit') {
      this.handleFetchScheudleDetail(courseId);
    }
+    Bus.bind('editorLimit', (editorTextLength) => {
+      this.setState({
+        editorTextLength,
+      });
+    });
  }
  initBus = () => {
@@ -335,7 +341,7 @@ class AddOfflineCourse extends React.Component {
  handleSelectCover = (file) => {
    this.setState({
      visible: true,
-      imageFile: file,
+      imageFile: file
    });
  };
@@ -411,7 +417,8 @@ class AddOfflineCourse extends React.Component {
      signOutStartTimeUnit,
      signOutEndTimeNum,
      signOutEndTimeUnit,
-      isMore,
+      // isMore,
+      editorTextLength,
    } = this.state;
    let coverObj = {
@@ -444,7 +451,8 @@ class AddOfflineCourse extends React.Component {
      startTime,
      endTime,
      calendarTime,
-      isMore,
+      editorTextLength,
+      // isMore,
    };
    if (whetherSetApply === 'YES') {
@@ -558,8 +566,8 @@ class AddOfflineCourse extends React.Component {
      } else if (data.whetherSetSignOut === 'YES' && ((data.signOutType === 'START_LATER' && !data.signOutStartTimeNum) || !data.signOutEndTimeNum)) {
        message.warning('请输入签退时间');
        resolve(false);
-      } else if (data.isMore) {
+      } else if (data.editorTextLength > 1000) {
-        message.warning('简介超过字数限定');
+        message.warning('课程简介超过字数限定');
        resolve(false);
      } else {
        resolve(true);
@@ -618,12 +626,8 @@ class AddOfflineCourse extends React.Component {
    });
  }
-  changeIntro = (value, textLength) => {
+  changeIntro = (value) => {
-    const isMore = textLength > 1000;
+    this.setState({ introduce: value });
-    if (isMore) {
-      message.warning('内容过长，不能超过1000字');
-    }
-    this.setState({ introduce: value, isMore });
  };
  selectMultiDate = (calendarTime) => {
@@ -646,6 +650,11 @@ class AddOfflineCourse extends React.Component {
  };
  whetherVisitorsJoinChange = () => {
+    const {whetherSetApply,whetherVisitorsJoin} =this.state;
+    if(whetherSetApply =='NO'){
+      message.warning('关闭报名无法获取手机号!')
+      return
+    }
    if (this.state.whetherVisitorsJoin === 'NO') {
      this.setState({ whetherVisitorsJoin: 'YES' });
    } else {
@@ -726,10 +735,6 @@ class AddOfflineCourse extends React.Component {
                <span className='label'>封面图：</span>
                <div className='course-cover__wrap'>
-                  <div className='img-content'>
-                    {isDefaultCover && <span className='tag'>默认图</span>}
-                    <img src={coverUrl} alt='' />
-                  </div>
                  <div className='opt-btns'>
                    <Button
                      onClick={() => {
@@ -742,7 +747,11 @@ class AddOfflineCourse extends React.Component {
                    <span className={`default-btn ${isDefaultCover ? 'disabled' : ''}`} onClick={this.handleResetCoverUrl}>
                      使用默认图
                    </span>
-                    <div className='tips'>建议尺寸1280*720px，图片支持jpg、jpeg、png格式。</div>
+                    <div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
+                  </div>
+                  <div className='img-content'>
+                    {isDefaultCover && <span className='tag'>默认图</span>}
+                    <img src={coverUrl} />
                  </div>
                </div>
              </div>
@@ -840,20 +849,6 @@ class AddOfflineCourse extends React.Component {
                  })}
                </Select>
              </div>
-              <div className='allow-tourist-join'>
-                <span className='label'>观看设置：</span>
-                <div className='content'>
-                  <div>
-                    <Switch checked={whetherVisitorsJoin === 'YES' ? true : false} onChange={this.whetherVisitorsJoinChange} />
-                  </div>
-                  <div>
-                    <div className='desc'>
-                      <div>开启：允许未绑定手机号的学员观看</div>
-                      <div>关闭：仅限绑定了手机号的学员可以进入观看线下课</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
              <div className='introduce'>
                <span className='label'>课程简介：</span>
                <div className='content'>
@@ -867,8 +862,8 @@ class AddOfflineCourse extends React.Component {
                          detail={{
                            content: introduce,
                          }}
-                          onChange={(val, textLength) => {
+                          onChange={(val) => {
-                            this.changeIntro(val, textLength);
+                            this.changeIntro(val);
                          }}
                        />
                      )}
@@ -957,6 +952,7 @@ class AddOfflineCourse extends React.Component {
                          startTimeApply: undefined,
                          endTimeApply: undefined,
                          quota: null,
+                          whetherVisitorsJoin: whetherSetApply !== 'YES' ? whetherVisitorsJoin : false
                        });
                      }}
                    />
@@ -1068,6 +1064,13 @@ class AddOfflineCourse extends React.Component {
                  )}
                </div>
              </div>
+              <div className='allow-tourist-join'>
+                <span className='label'>观看设置：</span>
+                <div className='content'>
+                  <Switch checked={whetherVisitorsJoin === 'NO' ? true : false} onChange={this.whetherVisitorsJoinChange} />
+                  <div className='desc'>{whetherVisitorsJoin === 'NO' ? '已开启，仅限绑定了手机号的学员报名线下课' : '已关闭，允许未绑定手机号的学员报名线下课'}</div>
+                </div>
+              </div>
              <div className='course-catalog'>
                <span className='label'>考勤签到：</span>
                <div className='switch-box'>

--- a/src/modules/course-manage/offline-course/AddOfflineCourse.less
+++ b/src/modules/course-manage/offline-course/AddOfflineCourse.less
 .add-offline-course-page {
-  position:relative !important;
+  position: relative !important;
-  .box{
+  .box {
-    margin-bottom:52px !important;
+    margin-bottom: 52px !important;
  }
  .ant-radio-group {
    display: flex;
@@ -39,18 +39,18 @@
        position: relative;
        padding-left: 14px;
        &::before {
-          content: "";
+          content: '';
          position: absolute;
          left: 0px;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 10px;
-          background: #2966FF;
+          background: #2966ff;
        }
      }
    }
-    .label{
+    .label {
      display: inline-block;
      text-align: right;
      width: 120px;
@@ -75,8 +75,8 @@
      }
    }
    .course-catalog {
-      margin-bottom:16px;
+      margin-bottom: 16px;
-      margin-top:16px;
+      margin-top: 16px;
      display: flex;
      .switch-box {
        .switch-item {
@@ -110,19 +110,19 @@
      .select-day {
        margin-bottom: 4px;
        .mark-day {
-          color: #2966FF;
+          color: #2966ff;
        }
      }
    }
-    .allow-tourist-join{
+    .allow-tourist-join {
-      display:flex;
+      display: flex;
-      margin-bottom:16px;
+      margin-bottom: 16px;
      .desc {
-        color:#999;
+        color: #999;
-        margin-left:12px;
+        margin-left: 12px;
      }
-      .content{
+      .content {
-        display:flex;
+        display: flex;
      }
    }
    .course-ware {
@@ -150,45 +150,41 @@
      &__wrap {
        position: relative;
-        .tag {
-          border-radius: 2px;
-          background: #D6D6D6;
-          font-size: 12px;
-          height: 18px;
-          width: 52px;
-          text-align: center;
-          color: #FFF;
-          position: absolute;
-          top: 8px;
-          left: 8px;
-        }
-      }
-      .course-cover__wrap {
-        display: flex;
-        flex-direction: row;
-      }
        .img-content {
+          margin-top: 8px;
          margin-right: 20px;
          width: 299px;
          height: 169px;
+          position: relative;
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
+            border-radius: 4px;
+          }
+          .tag {
+            border-radius: 2px;
+            background: #d6d6d6;
+            font-size: 12px;
+            height: 18px;
+            width: 52px;
+            text-align: center;
+            color: #fff;
+            position: absolute;
+            top: 8px;
+            left: 8px;
          }
        }
        .opt-btns {
          .default-btn {
-          margin-left: 16px;
+            margin-left: 14px;
-          color: #2966FF;
+            color: #2966ff;
            cursor: pointer;
            &.disabled {
-            color: #CCC;
+              color: #ccc;
              cursor: not-allowed;
            }
          }
@@ -196,13 +192,14 @@
          .ant-upload-list {
            display: none;
          }
-      }
          .tips {
            margin-top: 8px;
            color: #999;
          }
        }
+      }
+    }
    .select-student {
      align-items: center;
@@ -236,7 +233,7 @@
    justify-content: flex-end;
    padding-right: 72px;
    background: #fff;
-    border-top: 1px solid #E8E8E8;
+    border-top: 1px solid #e8e8e8;
    z-index: 999;
    .ant-btn {
      margin-left: 10px;

--- a/src/modules/course-manage/offline-course/components/AddGraphicsIntro.less
+++ b/src/modules/course-manage/offline-course/components/AddGraphicsIntro.less
-.add-video__intro-info {
+.add-offline__intro-info {
  .w-e-full-screen-editor {
    background: #fff !important;
  }

--- a/src/modules/course-manage/offline-course/components/OfflineCourseList.jsx
+++ b/src/modules/course-manage/offline-course/components/OfflineCourseList.jsx
@@ -3,7 +3,7 @@
 * @Date: 2020-08-05 10:12:45
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-06-11 16:44:42
- * @Description: 视频课-列表模块
+ * @Description: 线上课-列表模块
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 */
 import Service from '@/common/js/service';
@@ -30,7 +30,7 @@ class OfflineCourseList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
-      id: '', // 视频课ID
+      id: '', // 线上课ID
      studentIds: [],
    };
  }

--- a/src/modules/course-manage/offline-course/components/OfflineCourseOpt.jsx
+++ b/src/modules/course-manage/offline-course/components/OfflineCourseOpt.jsx
@@ -3,7 +3,7 @@
 * @Date: 2020-08-05 10:12:15
 * @LastEditors: zhangleyuan
 * @LastEditTime: 2020-12-26 16:07:27
- * @Description: 视频课-操作模块
+ * @Description: 线上课-操作模块
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 */

--- a/src/modules/course-manage/utils/hasExportPermission.js
+++ b/src/modules/course-manage/utils/hasExportPermission.js
@@ -14,7 +14,7 @@ const hasExportPermission = (type) => {
    return Permission.hasInteractiveExport();
  }
-  // 视频课导出权限
+  // 线上课导出权限
  if (type === 'videoClass') {
    return Permission.hasVideoClassExport();
  }

--- a/src/modules/course-manage/video-course/AddVideoCourse.jsx
+++ b/src/modules/course-manage/video-course/AddVideoCourse.jsx
 /*
 * @Author: 吴文洁
 * @Date: 2020-08-05 10:07:47
- * @LastEditors: wufan
+ * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-07-15 16:41:48
+ * @LastEditTime: 2021-07-18 10:25:54
- * @Description: 视频课新增/编辑页
+ * @Description: 线上课新增/编辑页
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 */
-import React from 'react';
+import React from 'react'
-import { Button, Input, Radio, message, Modal, Cascader } from 'antd';
+import { Button, Input,  message, Modal, Cascader, Tooltip, Form, Popconfirm,Menu,Dropdown} from 'antd'
+import { FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum'
-import { DISK_MAP, FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum';
+import ShowTips from '@/components/ShowTips'
-import ShowTips from '@/components/ShowTips';
+import Breadcrumbs from '@/components/Breadcrumbs'
-import Breadcrumbs from '@/components/Breadcrumbs';
+import moment from 'moment'
-import moment from 'moment';
+import AddVideoIntro from './components/AddVideoIntro'
-import AddVideoIntro from './components/AddVideoIntro';
+import SelectStudent from '../modal/select-student'
-import SelectStudent from '../modal/select-student';
+import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal'
-import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal';
+import PreviewCourseModal from '../modal/PreviewCourseModal'
-import PreviewCourseModal from '../modal/PreviewCourseModal';
+import StoreService from '@/domains/store-domain/storeService'
-import StoreService from '@/domains/store-domain/storeService';
+import CourseService from '@/domains/course-domain/CourseService'
-import CourseService from '@/domains/course-domain/CourseService';
+import Service from '@/common/js/service'
-import Service from '@/common/js/service';
+import User from '@/common/js/user'
-import User from '@/common/js/user';
+import _ from 'underscore'
-import _ from 'underscore';
+import Upload from '@/core/upload'
-import Upload from '@/core/upload';
+import { randomString } from '@/domains/basic-domain/utils'
-import { randomString } from '@/domains/basic-domain/utils';
+import ImgClipModal from '@/components/ImgClipModal'
-import ImgClipModal from '@/components/ImgClipModal';
+import $ from 'jquery'
-import $ from 'jquery';
+import './AddVideoCourse.less'
-import './AddVideoCourse.less';
+import Bus from '@/core/bus'
-const EDIT_BOX_KEY = Math.random();
+const { TextArea } = Input;
-const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' };
+const EDIT_BOX_KEY = Math.random()
+const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' }
 //添加课程时课程默认的一些值
 const defaultShelfState = 'YES';
@@ -53,18 +54,17 @@ class AddVideoCourse extends React.Component {
    const pageType = getParameterByName('type');
    this.state = {
-      id, // 视频课ID,编辑的时候从URL上带过来
+      id, // 线上课ID,编辑的时候从URL上带过来
      pageType, // 页面类型: add->新建 edit->编辑
      imageFile: null, // 需要被截取的图片
-      courseName: null, // 视频课名称
+      courseName: null, // 线上课名称
-      scheduleVideoId: null, // 视频课链接
      coverId: null, // 视频封面的recourceId
-      coverUrl: null, // 视频课封面
+      coverUrl: null, // 线上课封面
      studentList: [], // 上课学员列表
      shelfState: 'YES', //是否开启学院展示
      scheduleMedia: [
        {
-          // 视频课媒体资源
+          // 线上课媒体资源
          contentType: 'INTRO',
          mediaType: 'TEXT',
          mediaContent: '',
@@ -83,7 +83,13 @@ class AddVideoCourse extends React.Component {
      showSelectCoverModal: false,
      cutImageBlob: null,
      introduce: '',
-    };
+      courseChapterList:[
+      ], // 课节列表
+      // videoType: "MP4",
+      mediaNameAlias: '', // 任一视频重命名的名称（气泡框）
+      selectTypeList:['MP4'],
+      accept:'video/mp4'
+    }
  }
  componentWillMount() {
@@ -92,6 +98,11 @@ class AddVideoCourse extends React.Component {
    if (pageType === 'edit') {
      this.handleFetchScheudleDetail(id);
    }
+    Bus.bind('editorLimit', (editorTextLength) => {
+      this.setState({
+        editorTextLength,
+      });
+    });
  }
  //获取分类列表
@@ -103,50 +114,42 @@ class AddVideoCourse extends React.Component {
    });
  };
-  catalogChange = (value) => {
+  catalogChange = (value, _categoryName) => {
-    const changeValueLength = value.length;
+    const categoryName =_.pluck(_categoryName,'categoryName').join('-')
+    const changeValueLength = value.length
    switch (changeValueLength) {
      case 1:
-        this.setState({ categoryId: value[0] });
+        this.setState({ categoryId: value[0], categoryName })
-        break;
+        break
      case 2:
-        this.setState({ categoryId: value[1] });
+        this.setState({ categoryId: value[1], categoryName })
-        break;
+        break
      default:
        this.setState({ categoryId: null });
        break;
    }
-  };
+  }
-  // 获取视频课详情
+  // 获取线上课详情
  handleFetchScheudleDetail = (courseId) => {
    CourseService.videoScheduleDetail({
      courseId,
    }).then((res) => {
-      const { result = {} } = res || {};
+      const { result = {} } = res || {}
-      const { courseName, shelfState, whetherVisitorsJoin, courseMediaVOS, categoryOneName, categoryTwoName, categoryId } = result;
+      const { courseName, shelfState, whetherVisitorsJoin, courseMediaVOS, categoryOneName, categoryTwoName, categoryId, courseChapterVOList =[] } = result
-      let coverId;
+      let coverId
-      let coverUrl;
+      let coverUrl
-      let videoType;
+      // let videoDuration
-      let videoDuration;
+      // let videoName
-      let videoName;
+      let scheduleMedia = []
-      let scheduleMedia = [];
+      let scheduleVideoUrl
-      let scheduleVideoId;
+      let hasIntro
-      let scheduleVideoUrl;
-      let hasIntro;
      courseMediaVOS.map((item) => {
        switch (item.contentType) {
          case 'COVER':
-            coverId = item.mediaContent;
+            coverId = item.mediaContent
-            coverUrl = item.mediaUrl;
+            coverUrl = item.mediaUrl
-            break;
+            break
-          case 'SCHEDULE':
-            videoDuration = item.videoDuration;
-            videoName = item.mediaName;
-            scheduleVideoId = item.mediaContent;
-            scheduleVideoUrl = item.mediaUrl;
-            videoType = item.mediaType;
-            break;
          case 'INTRO':
            hasIntro = true;
            this.getTextDetail('introduce', item.mediaUrl);
@@ -163,24 +166,30 @@ class AddVideoCourse extends React.Component {
      } else {
        categoryName = `${categoryOneName}`;
      }
+      const _courseChapterVOList = courseChapterVOList.map(item => {
+        item.mediaName = item.name;
+        item.resourceId = item.id;
+        return item
+      })
      this.setState({
        loadintroduce: !hasIntro,
        coverId,
        coverUrl,
-        videoType,
+        // videoName,
-        videoName,
+        // videoDuration,
-        videoDuration,
        scheduleMedia,
        courseName,
-        scheduleVideoId,
        scheduleVideoUrl,
        shelfState,
        whetherVisitorsJoin,
        categoryName,
        categoryId,
-      });
+        courseChapterList: _courseChapterVOList
-    });
+      })
-  };
+    })
+  }
  getTextDetail = (key, url) => {
    $.ajax({
@@ -195,11 +204,9 @@ class AddVideoCourse extends React.Component {
  };
  handleGoBack = () => {
-    const { coverId, videoName, videoDuration, courseName, scheduleMedia, scheduleVideoId, categoryId, shelfState, whetherVisitorsJoin } = this.state;
+    const { coverId,courseName, scheduleMedia, courseChapterList, categoryId, shelfState, whetherVisitorsJoin } = this.state
    if (
-      videoName ||
+      !courseChapterList.length ||
-      videoDuration ||
-      scheduleVideoId ||
      !_.isEqual(scheduleMedia, defaultScheduleMedia) ||
      categoryId ||
      courseName ||
@@ -267,18 +274,17 @@ class AddVideoCourse extends React.Component {
  // 显示预览弹窗
  handleShowPreviewModal = () => {
-    const { coverUrl, scheduleVideoUrl, courseName, scheduleMedia, videoDuration, introduce } = this.state;
+    const { coverUrl, scheduleVideoUrl, courseName, scheduleMedia,introduce, courseChapterList, categoryName } = this.state
    const courseBasinInfo = {
      coverUrl,
      scheduleVideoUrl,
      courseName,
-      videoDuration,
+    }
-    };
    const courseIntroInfo = {
      liveCourseMediaRequests: scheduleMedia,
      introduce,
-    };
+      categoryName
+    }
    const previewCourseModal = (
      <PreviewCourseModal
@@ -290,6 +296,7 @@ class AddVideoCourse extends React.Component {
            previewCourseModal: null,
          });
        }}
+        courseChapterList={courseChapterList}
      />
    );
@@ -297,63 +304,124 @@ class AddVideoCourse extends React.Component {
  };
  // 选择视频
-  handleSelectVideo = (file) => {
+  handleSelectVideo = (addFolderIds,selectedFileList) => {
    this.setState({
-      showSelectFileModal: false,
+      showSelectFileModal: false
-    });
+    })
-    const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file;
-    const videoDom = document.createElement('video');
+    let { courseChapterList } = this.state;
-    videoDom.src = ossUrl;
+    let _courseChapterList = [...courseChapterList];
+    if(selectedFileList.length + courseChapterList.length > 20){
+      message.warning(`最多只能上传20个文件`);
+      return;
+    }
+    selectedFileList.map((file,index) => {
+      console.log('')
+      const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file;
+      const _mediaName =folderName.replace(`.${_.last(folderName.split('.')).toLowerCase()}`,'')
+      if(folderFormat === 'MP4' || folderFormat === 'video/mp4'){
+        const videoDom = document.createElement('video')
+        videoDom.src = ossUrl
        videoDom.onloadedmetadata = () => {
-      this.setState({
+          _courseChapterList.push({
-        size: folderSize,
+            mediaContent: resourceId,
-        videoName: folderName,
+            contentType: 'SCHEDULE',
-        videoType: folderFormat,
+            mediaType: "VIDEO",
-        scheduleVideoUrl: ossUrl,
+            mediaName: _mediaName,
-        scheduleVideoId: resourceId,
            videoDuration: videoDom.duration,
-      });
+            resourceId,
-    };
+            mediaUrl: ossUrl,
-  };
+            sort: _courseChapterList.length
+          })
+          this.setState({
+            courseChapterList: _courseChapterList
+          })
+        }
+      }else if( folderFormat==="WORD" || folderFormat==="PDF"){
+        const suffix = _.last(folderName.split('.')).toUpperCase();
+        _courseChapterList.push({
+          mediaContent: resourceId,
+          contentType: 'SCHEDULE',
+          mediaType: suffix,
+          mediaName: _mediaName,
+          resourceId,
+          mediaUrl: ossUrl,
+          sort: _courseChapterList.length
+        })
+        this.setState({
+          courseChapterList: _courseChapterList
+        })
+      }
+    })
+  }
+    // 校验课节名称
+    handleValidateChapterName = (chapterName)=> {
+      let hasError = false;
+      return new Promise((resolve) => {
+        if(!chapterName) {
+          this.setState({
+            chapterNameValidateStatus: "error",
+            chapterNameHelpMsg: '请输入课节名称'
+          })
+          hasError = true;
+          resolve(false)
+          return false
+        }
+        if(chapterName.length > 40) {
+          this.setState({
+            chapterNameValidateStatus: "error",
+            chapterNameHelpMsg: '不要超过40字'
+          })
+          hasError = true;
+          resolve(false)
+          return false
+        }
+        if(!hasError){
+          resolve(true)
+          this.setState({
+            chapterNameValidateStatus: "",
+            chapterNameHelpMsg: ""
+          })
+        }
+      })
+    }
  // 保存
  handleSubmit = () => {
        //过期判断
        if (User.getExpirationTime() && moment().valueOf() > Number(User.getExpirationTime())) {
          Modal.warning({
-        title: '服务已到期',
+            title:"服务已到期",
-        content: '当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买',
+            content: "当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买",
-        okText: '我知道了',
+            okText: "我知道了"
-      });
+          })
-      return;
+          return
        }
-    const { instId, adminId } = window.currentUserInstInfo;
    const {
      id,
-      size,
      coverId,
-      coverUrl,
      pageType,
-      joinType,
+      // videoName,
-      videoName,
+      // videoDuration,
-      videoDuration,
-      studentList,
      courseName,
      scheduleMedia,
-      scheduleVideoId,
-      scheduleVideoUrl,
      categoryId,
      shelfState,
      whetherVisitorsJoin,
      introduce,
-    } = this.state;
+      courseChapterList,
+      editorTextLength,
+    } = this.state
    const commonParams = {
-      videoName,
+      // videoName,
-      videoDuration,
+      videoDuration:0, //后端的必要参数，不能传空
-      courseMediaId: scheduleVideoId,
      scheduleMedia: scheduleMedia.filter((item) => !!item.mediaContent),
      categoryId,
      courseName,
@@ -363,10 +431,11 @@ class AddVideoCourse extends React.Component {
      shelfState,
      whetherVisitorsJoin,
      courseType: 'VOICE',
-    };
+      courseChapterList
+    }
    // 校验必填字段:课程名称, 课程视频
-    this.handleValidate(courseName, scheduleVideoId, categoryId, scheduleMedia).then((res) => {
+    this.handleValidate(courseName, courseChapterList, categoryId, scheduleMedia, editorTextLength).then((res) => {
-      if (!res) return;
+      if (!res) return
      Upload.uploadTextToOSS(introduce, `${randomString()}.txt`, (introduceId) => {
        this.submitRemote({ id, pageType, commonParams: { ...commonParams, introduceId } });
      });
@@ -375,9 +444,9 @@ class AddVideoCourse extends React.Component {
  submitRemote = ({ id, pageType, commonParams }) => {
    if (pageType === 'add') {
-      Service.Hades('public/hades/createMediaCourse', commonParams).then((res) => {
+      Service.Hades('public/hades/createVideoSchedule', commonParams).then((res) => {
-        if (!res) return;
+        if (!res) return
-        message.success('新建成功');
+        message.success('新建成功')
        window.RCHistory.push({
          pathname: `/video-course`,
        });
@@ -385,11 +454,11 @@ class AddVideoCourse extends React.Component {
    } else {
      const editParams = {
        courseId: id,
-        ...commonParams,
+        ...commonParams
-      };
+      }
-      Service.Hades('public/hades/editMediaCourse', editParams).then((res) => {
+      Service.Hades('public/hades/editVideoSchedule', editParams).then((res) => {
-        if (!res) return;
+        if (!res) return
-        message.success('保存成功');
+        message.success('保存成功')
        window.RCHistory.push({
          pathname: `/video-course`,
        });
@@ -397,35 +466,36 @@ class AddVideoCourse extends React.Component {
    }
  };
-  handleValidate = (courseName, scheduleVideoId, categoryId, scheduleMedia) => {
+  handleValidate = (courseName, courseChapterList, categoryId, scheduleMedia, editorTextLength) => {
    return new Promise((resolve) => {
      if (!courseName) {
        message.warning('请输入课程名称');
        resolve(false);
        return false;
      }
-      if (!scheduleVideoId) {
+      if (!courseChapterList.length) {
-        message.warning('请上传视频');
+        message.warning('请上传课节')
-        resolve(false);
+        resolve(false)
-        return false;
+        return false
      }
      if (!categoryId) {
        message.warning('请选择课程分类');
        resolve(false);
        return false;
      }
-      const textMedia = scheduleMedia.filter((item) => item.mediaType === 'TEXT');
+      if (editorTextLength > 1000) {
-      for (let i = 0, len = textMedia.length; i < len; i++) {
+        message.warning('课程简介超过字数限定');
-        if (textMedia[i].mediaContentLength && textMedia[i].mediaContentLength.length > 1000) {
-          message.warning(`第${i + 1}个文字简介的字数超过了1000个字`);
        resolve(false);
-          return false;
+        return;
-        }
      }
      resolve(true);
    });
  };
  handleSelectCover = (file) => {
+    if(!file){
+      message.info("请选择文件！");
+      return;
+    }
    this.setState({
      visible: true,
      imageFile: file,
@@ -449,26 +519,177 @@ class AddVideoCourse extends React.Component {
    this.setState({
      showSelectCoverModal: false,
      coverUrl: coverClicpPath,
-      coverId: coverId,
+      coverId: coverId
+    })
+  }
+  handleRenameCourseChapter = (chapterId, chapterIndex) => {
+    const { mediaNameAlias } = this.state;
+    this.handleValidateChapterName(mediaNameAlias).then(res => {
+      // 校验不通过不能点确定保存修改课节名称
+      if (!res) {
+        return message.warning('重命名失败');
+      }
+      let { courseChapterList } = this.state; 
+      let  _courseChapterList = [];
+      _courseChapterList = courseChapterList.map((item,index)=>{
+        if(item.resourceId === chapterId && chapterIndex === index){
+          item.mediaName = mediaNameAlias;
+          item.visible = false;
+        }
+        return item
+      })
+      this.setState({
+        courseChapterList: _courseChapterList,
+        chapterNameValidateStatus: '',
+        chapterNameHelpMsg: '',
+        mediaNameAlias: '',
+      })
    });
-  };
+  }
+  handleChangePopConfirmVisible = (chapterId, chapterNameIndex, visible)=> {
+    let { courseChapterList } = this.state; 
+    let  _courseChapterList = [];
+    _courseChapterList = courseChapterList.map((item,index)=>{
+      if(item.resourceId === chapterId && chapterNameIndex === index){
+        item.visible = visible
+      } else {
+        item.visible = false
+      }
+      return item
+    })
+    this.setState({
+      courseChapterList: _courseChapterList,
+    })
+  }
+  handleDeleteCourseChapter = (chapterId, chapterIndex) => {
+    console.log('chapterId---',chapterId, chapterIndex);
+    let { courseChapterList } = this.state; 
+    let _courseChapterList = courseChapterList.filter((item,index) => {
+        return item.resourceId !== chapterId || item.resourceId === chapterId && chapterIndex !== index
+    })
+    _courseChapterList.map((item, index) => {
+      item.sort = index
+    })
+    this.setState({
+      courseChapterList :_courseChapterList
+    })
+  }
+  renderChapterTitle = (item) => {
+    const { chapterNameValidateStatus, chapterNameHelpMsg} = this.state;
+    return <div className="course-chapter-title-popover">
+      <div className="tag-title">课节名称</div>
+        <Form>
+          <Form.Item
+            validateStatus={chapterNameValidateStatus}
+            help={chapterNameHelpMsg}
+            >
+          <TextArea
+            defaultValue={item.mediaName}
+            placeholder="请输入课节名称"
+            maxLength={40}
+            autoSize
+            style={{ width: '318px'}}
+            onChange={(e) => {
+              this.setState({
+                mediaNameAlias: e.target.value.trim()
+              }, () => {
+                this.handleValidateChapterName(this.state.mediaNameAlias)
+              })
+            }}
+          />
+          </Form.Item>
+          </Form>
+      </div>
+  }
+    // 上下移动
+    handleChangeIndex = (isUp, sortIndex) => {
+      const { courseChapterList} = this.state;
+      // 第一个上移和最后一个下移不能使用
+      if((isUp && sortIndex === 0) || (!isUp && sortIndex === (courseChapterList.length -1))){
+        return;
+      }
+      let _courseChapterList = [...courseChapterList];
+      const temp =  courseChapterList[sortIndex];
+      // 若上移
+      if(isUp){
+        _courseChapterList[sortIndex -1] = temp;
+        _courseChapterList[sortIndex -1].sort = sortIndex -1;
+        _courseChapterList[sortIndex] = courseChapterList[sortIndex - 1];
+        _courseChapterList[sortIndex].sort = sortIndex;
+      } else { // 若下移
+        _courseChapterList[sortIndex + 1] = temp;
+        _courseChapterList[sortIndex + 1].sort = sortIndex + 1;
+        _courseChapterList[sortIndex] = courseChapterList[sortIndex + 1];
+        _courseChapterList[sortIndex].sort = sortIndex;
+      }
+      this.setState({
+        courseChapterList: _courseChapterList
+      })
+    }
+    renderTypemenu =()=>{
+      return <Menu>
+      <Menu.Item>
+        <span onClick={()=>{this.selectFileType("VIDEO")}}>
+          视频文件
+        </span>
+      </Menu.Item>
+      <Menu.Item>
+        <span onClick={()=>{this.selectFileType("WORD_PDF")}}>
+          资料文件
+        </span>
+      </Menu.Item>
+    </Menu>
+    }
+    selectFileType = (type) =>{
+      const { courseChapterList } = this.state;
+      if(courseChapterList.length >= 20) {
+        message.warning(`最多只能上传20个文件`);
+        return;
+      }
+      if(type==="VIDEO"){
+        this.setState({
+          showSelectFileModal: true,
+          selectTypeList:['MP4'],
+          accept:'video/mp4'
+        })
+      }else{
+        this.setState({
+          showSelectFileModal: true,
+          selectTypeList:['DOC','DOCX','PDF'],
+          accept:'.doc,.docx,.pdf'
+        })
+      }
+    }
+    renderToolTipTitle = ()=> {
+      return (<div>
+        <p>视频支持mp4格式，大小不超过2G；</p>
+        <p>文件支持PDF、docx、doc格式，大小不超过100M</p>
+      </div>)
+    }
  render() {
    const {
      pageType,
      courseName,
-      scheduleVideoId,
-      coverId,
      coverUrl,
-      scheduleVideoUrl,
-      studentList,
      scheduleMedia,
-      showCutModal,
      showSelectFileModal,
      diskList,
-      imageFile,
+      // videoType,
-      joinType,
-      videoName,
-      videoType,
      shelfState,
      categoryName,
      courseCatalogList,
@@ -480,16 +701,17 @@ class AddVideoCourse extends React.Component {
      introduce,
      loadintroduce,
      id,
-    } = this.state;
+      courseChapterList,
+      imageFile,
-    // 已选择的上课学员数量
+      selectTypeList,
-    const hasSelectedStu = studentList.length;
+      accept
+    } = this.state
-    const courseWareIcon = FileVerifyMap[videoType] ? FileTypeIcon[FileVerifyMap[videoType].type] : FileTypeIcon[videoType];
+    const defaultCover = 'https://image.xiaomaiketang.com/xm/TwtGPQGE4K.png';
+    const isDefaultCover = coverUrl === defaultCover || coverUrl == null;
    return (
      <div className='page add-video-course-page'>
-        <Breadcrumbs navList={pageType === 'add' ? '新建视频课' : '编辑视频课'} goBack={this.handleGoBack} />
+        <Breadcrumbs navList={pageType === 'add' ? '新建线上课' : '编辑线上课'} goBack={this.handleGoBack} />
        <div className='box'>
          <div className='show-tips'>
@@ -501,7 +723,7 @@ class AddVideoCourse extends React.Component {
              <span className='label'>课程名称：</span>
              <Input
                value={courseName}
-                placeholder='请输入视频课的名称（40字以内）'
+                placeholder='请输入线上课的名称（40字以内）'
                maxLength={40}
                style={{ width: 240 }}
                onChange={(e) => {
@@ -512,59 +734,115 @@ class AddVideoCourse extends React.Component {
            <div className='upload-video mt16'>
              <div className='content flex'>
-                <span className='label required'>视频上传：</span>
+                <span className='label required upload-chapter'>上传课节：</span>
-                <div className='value'>
+              </div>
-                  {scheduleVideoId ? (
+              <div className='sub-content'>
-                    <div className='course-ware'>
+                <div className="btn-wrap">
-                      <img className='course-ware__img' src={courseWareIcon} />
+                  <div className='select-file'>
-                      <span className='course-ware__name'>{videoName}</span>
+                    <Dropdown overlay={this.renderTypemenu()}>
+                      <Button>选择文件</Button>
+                    </Dropdown>
                  </div>
-                  ) : (
                  <div className='course-ware--empty'>从资料云盘中选择视频</div>
-                  )}
                </div>
+                <div className='tips'>
+                      课节数量限制20个，文件规格说明 
+                      <Tooltip title={this.renderToolTipTitle()} overlayClassName="my-chapter-tooltip">
+                        <i className='icon iconfont' style={{ cursor: 'pointer', color: '#bfbfbf', fontSize: '14px'}}> &#xe61d;</i>
+                      </Tooltip>
                </div>
-              <div className='sub-content'>
+              </div>
-                <Button
+            </div>
-                  onClick={() => {
-                    this.setState({
+            <If condition={courseChapterList.length > 0}>
-                      showSelectFileModal: true,
+                  <div className="course-chapter-list-wrap">
-                    });
+                    <div className="course-chapter-total">{`共${courseChapterList.length}个课节`}</div>
-                  }}>{`${pageType === 'add' && !scheduleVideoId ? '选择' : '更换'}视频`}</Button>
+                    <div className='course-chapter-list' id="course-chapter-list">
+                    {
+                      _.map(courseChapterList,(item,index) => {
+                        return <div className='course-ware' key={index}>
+                              <div className="course-ware__index">{index < 9 ? `0${index + 1 } ` : `${index + 1 } `}</div>
+                              <img className='course-ware__img' src={FileTypeIcon[item.mediaType]} alt='' />
+                              <div className='course-ware__name'>{item.mediaName && item.mediaName.length > 24 ? <Tooltip title={item.mediaName}>{item.mediaName}</Tooltip>:item.mediaName}</div>
+                              <div className="course-chapter__opt" id={item.resourceId}>
+                                  <div className={`up ${Number(index) === 0 ? 'disabled':''}`} onClick={()=> this.handleChangeIndex(true,item.sort,item.resourceId)}>上移</div>
+                                  <div className="line">|</div>
+                                  <div className={`down ${Number(index) === (courseChapterList.length - 1) ? 'disabled':''}`} onClick={()=> this.handleChangeIndex(false,item.sort,item.resourceId)}>下移</div>
+                                  <div className="line">|</div>
+                                  <Popconfirm  
+                                    placement="topLeft"
+                                    className="course-chapter-tooltip" 
+                                    title={this.renderChapterTitle(item)} 
+                                    color='#fff' trigger="click" 
+                                    overlayClassName="chapter-popover"
+                                    getPopupContainer={() =>
+                                      document.getElementById('course-chapter-list')
+                                    }
+                                    destroyTooltipOnHide={true}
+                                    visible={item.visible}
+                                    onConfirm={() => this.handleRenameCourseChapter(item.resourceId, index)}
+                                    icon={null}
+                                    onVisibleChange={(visible)=>{
+                                      !visible && this.setState({
+                                        chapterNameValidateStatus: '',
+                                        chapterNameHelpMsg: '',
+                                        mediaNameAlias: '',
+                                      })
+                                    }}
+                                    onCancel={()=> this.handleChangePopConfirmVisible(item.resourceId, index, false)}
+                                    >
+                                      <div className="rename" onClick={() => {this.setState({mediaNameAlias: item.mediaName}, ()=>{
+                                        this.handleChangePopConfirmVisible(item.resourceId, index, true)})
+                                      }}>重命名</div>
+                                    </Popconfirm>
+                                <div className="line">|</div>
+                                <div className="delete" onClick={()=>this.handleDeleteCourseChapter(item.resourceId, index)}>移除</div>
+                              </div>
+                        </div>
+                      })
+                    }
-                <span className='tips'>视频数量限制1个，大小不超过2G</span>
                  </div>
                  </div>
+                  </If>
            <div className='cover-url flex mt16'>
-              <div className='label'>视频封面：</div>
+              <div className='label cover'>封面图：</div> 
              <div className='cover-url__wrap'>
-                <div className='img-content'>
-                  {/* 如果视频和封面都没有上传的话, 那么就显示缺省, 如果上传了视频, 那么封面图就默认显示视频的第一帧, 如果上传了封面图, 那么就显示上传的封面图 */}
-                  {scheduleVideoUrl || coverUrl ? (
-                    <img src={coverUrl || `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`} />
-                  ) : (
-                    <div className='empty-img'>
-                      若不上传
-                      <br />
-                      系统默认将视频首帧作为封面图
-                    </div>
-                  )}
-                </div>
                <div className='opt-btns'>
+                  <div>
                    <Button
                      onClick={() => {
-                      this.setState({ showSelectCoverModal: true });
+                        this.setState({ showSelectCoverModal: true })
-                    }}>{`${pageType === 'add' && !scheduleVideoId && !coverUrl ? '上传' : '修改'}封面`}</Button>
+                      }}>{`${pageType === 'add' && !coverUrl ? '上传' : '修改'}封面`}</Button>
+                    <span
+                      className={`span ${coverUrl ? 'defalut-span' : ''}`}
+                      onClick={() => {
+                        this.setState({
+                          coverUrl: '',
+                          coverId: ''
+                        })
+                      }}>
+                      使用默认图
+                    </span>
+                  </div>
                  <div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
                </div>
+                <div className='img-content'>
+                {
+                  isDefaultCover && <span className="tag">默认图</span>
+                }
+                  {/* 如果视频和封面都没有上传的话, 那么就显示缺省, 如果上传了视频, 那么封面图就默认显示视频的第一帧, 如果上传了封面图, 那么就显示上传的封面图 */}
+                  <img src={coverUrl || `https://image.xiaomaiketang.com/xm/TwtGPQGE4K.png`} alt='' />
+                </div>
              </div>
            </div>
            <div className='course-catalog required'>
              <span className='label'>课程分类：</span>
              {pageType === 'add' && (
                <Cascader
-                  defaultValue={[categoryName]}
+                  defaultValue={[]}
                  options={courseCatalogList}
                  displayRender={(label) => label.join('-')}
                  fieldNames={fieldNames}
@@ -622,14 +900,16 @@ class AddVideoCourse extends React.Component {
        {/* 选择备课文件弹窗 */}
        {showSelectFileModal && (
          <SelectPrepareFileModal
+            multiple={true}
            operateType='select'
-            selectTypeList={['MP4']}
+            selectTypeList={selectTypeList}
-            accept='video/mp4'
+            accept={accept}
+            queryTypeEnum={'ONLINE'}
            confirm={{
              title: '文件过大，无法上传',
-              content: '为保障学员的观看体验，上传的视频大小不能超过2G',
+              content: '上传的视频大小不能超过2G，文件大小不能超过100M'
            }}
-            tooltip={'格式支持mp4，大小不超过2G'}
+            tooltip={''}
            isOpen={showSelectFileModal}
            diskList={diskList}
            addVideo={true}

--- a/src/modules/course-manage/video-course/AddVideoCourse.less
+++ b/src/modules/course-manage/video-course/AddVideoCourse.less
@@ -32,6 +32,12 @@
      display:inline-block;
      text-align:right;
      width:85px;
+      &.upload-chapter {
+        margin-top: 6px;
+      }
+      &.cover {
+        margin-top: 2px;
+      }
    }
    .required {
      position: relative;
@@ -49,14 +55,16 @@
      }
    }
    .course-catalog{
-      margin-bottom:16px;
+      margin-bottom:24px;
-      margin-top:16px;
+      margin-top:24px;
    }
    .course-ware {
      display: flex;
      align-items: center;
      margin-bottom: 4px;
+      &__index {
+        width: 18px;
+      }
      &__img {
        width: 24px;
        margin-right: 4px;
@@ -75,7 +83,19 @@
      .img-content {
        width: 298px;
        height: 172px;
+        position: relative;
+        .tag {
+          border-radius: 2px;
+          background: rgba(51, 51, 51, .2);
+          font-size: 12px;
+          height: 18px;
+          width: 52px;
+          text-align: center;
+          color: #FFF;
+          position: absolute;
+          top: 8px;
+          left: 8px;
+        }
        img {
          width: 100%;
          height: 100%;
@@ -85,7 +105,7 @@
      .empty-img {
        width: 298px;
        height: 172px;
-        border: 1px dashed #EBEBEB;
+        border: 1px dashed #ebebeb;
        border-radius: 4px;
        padding: 12px;
        color: #999;
@@ -94,12 +114,17 @@
      }
      .opt-btns {
-        margin-top: 8px;
+        margin-bottom: 8px;
-        display: flex;
+        .span {
-        align-items: center;
+          color: #ccc;
+          margin-left: 8px;
+        }
+        .defalut-span {
+          cursor: pointer;
+          color: #2966ff;
+        }
        .tips {
-          margin-left: 12px;
+          margin-top: 8px;
          color: #999;
        }
      }
@@ -115,18 +140,96 @@
        color: #333;
      }
    }
+    .upload-video {
+      display: flex;
+      margin-bottom: 24px;
      .sub-content {
-      margin-left: 85px;
        margin-top: 4px;
+      .btn-wrap {
+        display: flex;
+        .course-ware--empty {
+          margin-left: 12px;
+          line-height: 28px;
+        }
+      }
        .tips {
-        margin-left: 4px;
+          margin-top: 8px;
          color: #999;
        }
      }
    }
+    .course-chapter-list-wrap {
+      position: relative;
+      margin-left: 85px;
+      border: 1px solid #E8E8E8;
+      width: 630px;
+      .course-chapter-total {
+        height: 40px;
+        font-size: 14px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        z-index: 10;
+        background: #fff;
+        width: 628px;
+        text-indent: 16px;
+        line-height: 40px;
+      }
+      .course-chapter-list {
+        max-height: 245px;
+        overflow-y: auto ;
+        border-radius: 4px;
+        padding: 12px 16px 16px 16px;
+        .course-ware {
+          display: flex;
+          align-items: center;
+          margin-bottom: 22px;
+          color: #666;
+          &:last-child {
+            margin-bottom: 0px;
+          }
+          &__img {
+            width: 24px;
+            margin-right: 8px;
+            margin-left: 16px;
+          }
+          &__name {
+            color: #333;
+            width: 353px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            margin-right: 24px;
+          }
+          .course-chapter__opt {
+            display: flex;
+            color: #2966ff;
+            width: 168px;
+            .line {
+              color: #bfbfbf;
+              margin-left: 4px;
+              margin-right: 4px;
+            }
+            .delete,
+            .rename,
+            .up,
+            .down {
+              cursor: pointer;
+            }
+            .up,
+            .down {
+              &.disabled {
+                color: rgba(204, 204, 204, 1);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
  .footer {
    position: fixed;
    left: 196px;
@@ -138,10 +241,48 @@
    justify-content: flex-end;
    padding-right: 72px;
    background: #fff;
-    border-top: 1px solid #E8E8E8;
+    border-top: 1px solid #ccc2c2;
    z-index: 999;
    .ant-btn {
      margin-left: 10px;
    }
  }
 }
+.chapter-popover {
+  .ant-popover-message-title {
+    padding-left: 0;
+  }
+  .ant-form-item {
+    margin-bottom: 0!important;
+  }
+  .ant-form-item-explain.ant-form-item-explain-error {
+    height: 24px;
+  }
+  .ant-form-item-explain {
+    min-height: 0;
+  }
+}
+.course-chapter-title-popover {
+  .tag-title {
+    color: #333333;
+    margin-bottom: 8px;
+    width: 318px;
+  }
+  .chapter-btns {
+    margin-top: 16px;
+    display: flex;
+    justify-content: flex-end;
+    .confirm {
+      margin-left: 8px;
+    }
+  }
+  .ant-form-item {
+    margin-bottom: 0 !important;
+  }
+}
+.my-chapter-tooltip {
+  max-width: 600px!important;
+}
\ No newline at end of file
--- a/src/modules/course-manage/video-course/VideoCourseDetail.less
+++ b/src/modules/course-manage/video-course/VideoCourseDetail.less
+.video-course-detail {
+    padding-bottom: 40px;
+    .box {
+        .course-detail {
+            display: flex;
+            border-bottom: 2px solid #E8E8E8;
+            padding-bottom: 24px;
+            &__img {
+                margin-right: 24px;
+                width: 300px;
+                height: 170px;
+                background: #FFFFFF;
+                border-radius: 4px;
+                img {
+                    width: 300px;
+                    height: 170px; 
+                    border-radius: 4px;
+                }
+            }
+            &__info {
+                display: flex;
+                flex-direction: column;
+                .info__title {
+                    font-size: 20px;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: #333333;
+                    line-height: 28px;
+                    margin-bottom: 16px;
+                }
+               .info__category, .info__chapterNum {
+                width: 100%;
+                height: 20px;
+                font-size: 14px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #333333;
+                line-height: 20px;
+                margin-bottom: 10px;
+            }
+        }
+    }
+    .course-chapter {
+        padding-top: 24px;
+        &__total {
+            width: 100%;
+            height: 20px;
+            font-size: 14px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #333333;
+            line-height: 20px;
+            margin-bottom: 24px;
+        }
+        &__list {
+            .course-ware {
+                display: flex;
+                height: 20px;
+                font-size: 14px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #666666;
+                line-height: 20px; 
+                margin-bottom: 28px;
+                cursor: pointer;
+                &:hover {
+                    color: #2966FF; 
+                }
+            &__index {
+                width: 20px;
+            }
+            &__img {
+                width: 20px;
+                height: 20px;
+                margin-left: 16px;
+                margin-right: 8px; 
+            }
+            &__name {
+                width: 700px;
+            }
+    }
+}
+}
+}
+}
\ No newline at end of file
--- a/src/modules/course-manage/video-course/VideoCourseDetail.tsx
+++ b/src/modules/course-manage/video-course/VideoCourseDetail.tsx
+/*
+ * @Author: wufan
+ * @Date: 2020-04-28 18:05:30
+ * @LastEditors: yuananting
+ * @LastEditTime: 2021-07-15 14:04:21
+ * @Description: 线上课课程课节详情
+ */
+import React,{useEffect, useState} from 'react';
+import Breadcrumbs from "@/components/Breadcrumbs";
+import { withRouter } from "react-router-dom";
+import CourseService from '@/domains/course-domain/CourseService'
+import underscore  from 'underscore';
+import ScanFileModal from '@/modules/resource-disk/modal/ScanFileModal.jsx';
+import { FileTypeIcon } from '@/common/constants/academic/lessonEnum'
+import BaseService from "@/domains/basic-domain/baseService";
+import {YZ_APPId,YZ_PREVIEW_URL} from '@/domains/basic-domain/constants';
+import PreviewFileModal from '@/bu-components/PreviewFileModal';
+import './VideoCourseDetail.less';
+declare var getParameterByName: any;
+declare var window: any;
+const FileTypeIconMap:any = FileTypeIcon
+function VideoCourseDetail(){
+    const courseId =  window.getParameterByName("courseId"); // 课程ID
+    const [coverUrl,setCoverUrl] = useState("");
+    const [videoName,setVideoName] = useState("");
+    const [scheduleVideoUrl,setScheduleVideoUrl] = useState("");
+    const [courseChapterList,setCourseChapterList] = useState<Array<Object>>([]);
+    const [courseName,setCourseName] = useState("");
+    const [categoryName,setCategoryName] = useState("");
+    const [scanFileModal,setScanFileModal] = useState<any>(null);
+    const [showPreviewModal,setShowPreviewModal] = useState(false); //是否显示loading
+    // const [previewing,setPreviewing] = useState(false); //是否正在预览
+    const [previewStatus,setPreviewStatus] = useState('UPLOAD'); //预览文件的生成状态 
+    const [url,setUrl] =  useState('');
+    let previewing = false;
+    useEffect(()=>{
+        handleFetchScheudleDetail(courseId);
+    },[courseId])
+      // 获取线上课详情
+    function  handleFetchScheudleDetail(courseId: string){
+    CourseService.videoScheduleDetail({
+      courseId
+    }).then((res) => {
+      const { result = {} } = res || {}
+      const { courseName, courseMediaVOS, categoryName, courseChapterVOList =[] } = result
+      let coverId:string = "";
+      let coverUrl: string = "";
+      let videoType: string = "";
+      let videoDuration: number = 0;
+      let videoName: string = "";
+      let scheduleVideoUrl: string = "";
+      courseMediaVOS.map((item:any) => {
+        switch (item.contentType) {
+          case 'COVER':
+            coverId = item.mediaContent
+            coverUrl = item.mediaUrl
+            break
+          case 'SCHEDULE':
+            videoDuration = item.videoDuration
+            videoName = item.mediaName
+            scheduleVideoUrl = item.mediaUrl
+            videoType = item.mediaType
+            break
+          default:
+            break
+        }
+        return item
+      })
+      setCoverUrl(coverUrl);
+      setVideoName(videoName);
+      setScheduleVideoUrl(scheduleVideoUrl);
+      setCourseName(courseName);
+      setCategoryName(categoryName);
+      setCourseChapterList(courseChapterVOList);
+    })
+  }
+  async function handleScanFileModal(fileType: string = "MP4", fileObj:any){
+    const {fileVersionId,name,mediaUrl,id} = fileObj;
+    if(fileType === "VIDEO"){
+      const scanFileModal = (
+        <ScanFileModal
+          fileType={fileType}
+          item={fileObj}
+          close={() => {
+            setScanFileModal(null);
+          }}
+        />
+      );
+      setScanFileModal(scanFileModal)
+    }else{
+      if(!fileVersionId){
+        setShowPreviewModal(true);
+        previewing = true;
+        setPreviewStatus('UPLOAD');
+        const uploadParams ={
+          fileUrl:mediaUrl,
+          yoZoTypeEnum:'UPLOAD'
+        }
+        const uploadSign:any = await BaseService.getYoZoSign(uploadParams);
+        BaseService.yoZoUpload(mediaUrl,YZ_APPId,uploadSign).then(async function (response){
+          const saveParams ={ 
+            fileVersionId:response.data.data.fileVersionId,
+            courseChapterId:id
+          }
+          BaseService.saveFileVersionIdByCourseChapter(saveParams);
+          if(previewing){
+            const  previewParams ={
+              fileVersionId:response.data.data.fileVersionId,
+              yoZoTypeEnum:'VIEW',
+              htmlTitle:name
+            }
+            const previewSign = await BaseService.getYoZoSign(previewParams);
+            const url = `${YZ_PREVIEW_URL}?fileVersionId=${response.data.data.fileVersionId}&appId=${YZ_APPId}&sign=${previewSign}&htmlTitle=${name}`
+            setPreviewStatus('UPLOAD_SUCCESS');
+            setUrl(url)
+          }
+        })
+      }else{
+        const  previewParams ={
+          fileVersionId,
+          yoZoTypeEnum:'VIEW',
+          htmlTitle:name
+        }
+        const previewSign = await BaseService.getYoZoSign(previewParams);
+        const url = `${YZ_PREVIEW_URL}?fileVersionId=${fileVersionId}&appId=${YZ_APPId}&sign=${previewSign}&htmlTitle=${name}`
+        const a = document.createElement('a');
+        document.body.appendChild(a);
+        a.setAttribute('href', url);
+        a.setAttribute('target', '_blank');
+        a.click();
+        document.body.removeChild(a)
+      }
+    }
+  }
+  // function  previewingSet(){
+  //   return new Promise(async (resolve) => {
+  //     setShowPreviewModal(true);
+  //     setPreviewing(true);
+  //     setPreviewStatus('UPLOAD');
+  //     resolve(true);
+  //   })
+  // }
+  function cancelPreview(){
+    setShowPreviewModal(false);
+    // setPreviewing(false);
+    previewing = false;
+    setPreviewStatus('UPLOAD');
+  }
+    return <div className="page video-course-detail">
+                <Breadcrumbs
+                    navList="课程详情"
+                    goBack={() => {
+                        window.RCHistory.goBack();
+                    }}
+                />
+            <div className="box">
+                <div className="course-detail">
+                    <div className='course-detail__img'>
+                        {/* 如果视频和封面都没有上传的话, 那么就显示缺省, 如果上传了视频, 那么封面图就默认显示视频的第一帧, 如果上传了封面图, 那么就显示上传的封面图 */}
+                        <img src={coverUrl || `https://image.xiaomaiketang.com/xm/TwtGPQGE4K.png`} alt='' />
+                    </div>
+                    <div className="course-detail__info">
+                        <div className="info__title">{courseName}</div>
+                        <div className="info__category">{`分类：${categoryName}`}</div>
+                        <div className="info__chapterNum">{`课节数量：${courseChapterList.length}`}</div>
+                    </div>
+                </div>
+                <div className="course-chapter">
+                    <div className="course-chapter__total">{`共${courseChapterList.length}个课节`}</div>
+                    <div className="course-chapter__list">
+                        <If condition={courseChapterList.length > 0}>
+                            {
+                                underscore.map(courseChapterList,(item: any,index: number) => {
+                                return <div className='course-ware' onClick={()=>{handleScanFileModal(item.mediaType,item)}} key={index}>
+                                        <div className="course-ware__index">{index < 9 ? `0${index + 1 } ` : index + 1}</div>
+                                        <img className='course-ware__img' src={FileTypeIconMap[item.mediaType]} alt='' />
+                                        <div className='course-ware__name'>{item.name}</div>
+                                </div>
+                                })
+                            }
+                        </If>
+                    </div>
+                </div>
+            </div>
+            { showPreviewModal &&
+             <PreviewFileModal onCancel={()=>cancelPreview()} previewStatus={previewStatus} url={url}/>
+            }
+            {scanFileModal}
+    </div>
+}
+export default withRouter(VideoCourseDetail);
\ No newline at end of file
--- a/src/modules/course-manage/video-course/components/AddVideoIntro.jsx
+++ b/src/modules/course-manage/video-course/components/AddVideoIntro.jsx
@@ -111,40 +111,53 @@ class AddVideoIntro extends React.Component {
          <span className='label'>观看设置：</span>
          <div className='content'>
            <div>
-              <Switch checked={whetherVisitorsJoin === 'YES' ? true : false} onChange={this.whetherVisitorsJoinChange} />
+                <Switch checked={whetherVisitorsJoin==="NO"? true:false} onChange={this.whetherVisitorsJoinChange}/>
            </div>  
            <div>
-              <div className='desc'>
+              <div className="desc">
-                <div>开启：允许未绑定手机号的学员观看</div>
+              <Choose>
-                <div>关闭：仅限绑定了手机号的学员可以进入观看视频</div>
+                <When condition={whetherVisitorsJoin==="NO"}>
+                <div>已开启，学员需绑定手机号才可观看</div>
+                </When>
+                <Otherwise>
+                <div>已关闭，学员无需绑定手机号即可观看</div>
+                </Otherwise>
+              </Choose>                
              </div>
            </div>
          </div>
        </div>
-        <div className='store-show'>
+        <div className="store-show">
-          <span className='label'>学院展示：</span>
+          <span className="label">学院展示：</span>
-          <div className='content'>
+          <div className="content">
              <Row>
                <Col span={3}>
-                <Switch checked={shelfState === 'YES' ? true : false} onChange={this.shelfStateChange} />
+                    <Switch checked={shelfState==="YES"? true:false} onChange={this.shelfStateChange}/>
                </Col>  
                <Col span={21}>
-                <div className='desc'>
+                  <div className="desc">
-                  <div>开启：此视频将在学员学院的视频列表中出现</div>
+                    <Choose>
-                  <div>关闭：此视频将在学员学院的视频列表中隐藏</div>
+                      <When condition={shelfState==="YES"}>
+                      <div>已开启，课程将在该学院的学员课程列表中显示</div>
+                      </When>
+                      <Otherwise>
+                      <div>已关闭，课程将在该学院的学员课程列表中隐藏</div>
+                  </Otherwise>
+                </Choose>
                  </div>
                </Col> 
              </Row>
          </div>
        </div>
-        <div className='introduce'>
+        <div className="introduce">
-          <span className='label'>视频课简介：</span>
+          <span className="label">课程简介：</span>
-          <div className='content'>
+          <div className="content">
-            <div className='intro-list'>
+            <div className="intro-list">
-              <div className='intro-list__item introduce-editor'>
+              <div className="intro-list__item introduce-editor">
-                {(!id || loadintroduce) && (
+                {(!id || loadintroduce) &&
                  <GraphicsEditor
-                    id='intro'
+                    maxLimit={1000}
+                    id="intro"
                    isIntro={true}
                    detail={{
                      content: introduce,

--- a/src/modules/course-manage/video-course/components/AddVideoIntro.less
+++ b/src/modules/course-manage/video-course/components/AddVideoIntro.less
@@ -32,14 +32,17 @@
    }
    .store-show{
        display:flex;
-        margin-top:16px;
+        margin-top:24px;
-        margin-bottom:16px;
+        margin-bottom:24px;
        .desc{
-          margin-left:16px;
+          margin-left:11px;
          font-size:14px;
          color:#999;
          display:inline-block;
        }
+        .content {
+          width: 400px;
+        }
    }
    .radio {
      display: block;

--- a/src/modules/course-manage/video-course/components/ChapterList.jsx
+++ b/src/modules/course-manage/video-course/components/ChapterList.jsx
+import React from 'react';
+import './ChapterList.less';
+import { FileTypeIcon } from '@/common/constants/academic/lessonEnum'
+const FileTypeIconMap = FileTypeIcon;
+function ChapterList(props){
+    const { courseChapterList } = props;
+    return  <div className='chapter-list-component'>
+        <If condition={courseChapterList.length > 0}>
+            {
+                _.map(courseChapterList,(item,index) => {
+                    return <div className='course-ware'>
+                        <img className='course-ware__img' src={FileTypeIconMap[item.mediaType]} alt='' />
+                        <div className='course-ware__index'>{index < 9 ? `0${index + 1 }` : `${index + 1 }`}</div>
+                        <div className="course-ware__detail">
+                            <div className='course-ware__detail__name'>{item.mediaName}</div>
+                            { item.mediaType === 'VIDEO' &&
+                                <div className='course-ware__detail__duration'>{window.formatDuration(item.videoDuration)}</div>
+                            }
+                        </div>
+                    </div>
+                })
+            }
+        </If>
+    </div>
+}
+export default ChapterList;
\ No newline at end of file
--- a/src/modules/course-manage/video-course/components/ChapterList.less
+++ b/src/modules/course-manage/video-course/components/ChapterList.less
+.chapter-list-component {
+    .course-ware {
+        display: flex;
+        padding: 10px 0;
+        border-bottom: 1px dashed #EEEEEE;
+        &:last-child {
+            border-bottom: none;
+        }
+        &__index {
+            width: 18px;
+            height: 18px;
+            font-size: 13px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #999999;
+            line-height: 18px;
+            white-space: nowrap;
+            margin-left: 8px;
+            margin-right: 6px;
+            line-height: 20px;
+        }
+        &__img {
+            width: 20px;
+            height: 20px;
+        }
+        &__detail {
+            display: flex;
+            flex-direction: column;
+            &__name {
+                font-size: 13px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #333333;
+                line-height: 20px;
+                margin-bottom: 4px;
+            }
+            &__duration {
+                color: #999999;
+            }
+        }
+    }  
+}
\ No newline at end of file
--- a/src/modules/course-manage/video-course/components/LearningDetailModal.jsx
+++ b/src/modules/course-manage/video-course/components/LearningDetailModal.jsx
+import User from "@/common/js/user";
+import CourseService from "@/domains/course-domain/CourseService";
+import React from "react";
+import { Modal } from "antd";
+import { FileTypeIcon } from '@/common/constants/academic/lessonEnum'
+import "./LearningDetailModal.less";
+class LearningDetailModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      courseChapterList: [],
+    };
+  }
+  componentDidMount() {
+    this.handleFetchDataList();
+  }
+  // 获取观看视频数据列表
+  handleFetchDataList = () => {
+    const { courseId, data } = this.props;
+    const params = {
+      courseId,
+      storeId: User.getStoreId(),
+      storeCustomerId: data.storeCustomerId,
+    };
+    CourseService.lineDetailWatchInfo(params).then((res) => {
+      const { result = [] } = res;
+      this.setState({
+        courseChapterList: result
+      });
+    });
+  };
+  render() {
+    const { title, onClose, onOk } = this.props;
+    const { courseChapterList } = this.state;
+    return (
+        <Modal
+          footer={null}
+          visible={true}
+          title={title}
+          width={680}
+          maskClosable={false}
+          closeIcon={
+            <span className="icon iconfont modal-close-icon">&#xe6ef;</span>
+          }
+          onCancel={onClose}
+          onOk={onOk}
+          className="learning-detail-modal"
+        >
+          <div className="course-chapter__list">
+            <If condition={courseChapterList.length > 0}>
+              {_.map(courseChapterList, (item, index) => {
+                return (
+                  <div className="course-wrap">
+                    <div className="course-ware" key={index}>
+                      <div className="course-ware__index">{`${
+                        index < 9 ? `0${index + 1}` : index + 1
+                      } `}</div>
+                     <img className='course-ware__img' src={FileTypeIcon[item.mediaType]} alt='' />
+                    <div className="course-ware__name">{item.courseChapterName && item.courseChapterName.replace('.MP4','')}</div>
+                    </div>
+                    <div className={`progress ${item.progress === 100 ? 'finish' :''}`}>{`${item.progress === 100 ? '已完成' : `${item.progress}%`}`}</div>
+                  </div>
+                );
+              })}
+            </If>
+          </div>
+        </Modal>
+    );
+  }
+}
+export default LearningDetailModal;
--- a/src/modules/course-manage/video-course/components/LearningDetailModal.less
+++ b/src/modules/course-manage/video-course/components/LearningDetailModal.less
+.learning-detail-modal {
+  .course-chapter {
+    padding-top: 24px;
+    &__list {
+      .course-wrap {
+        display: flex;
+        justify-content: space-between;
+        .course-ware {
+          display: flex;
+          height: 20px;
+          font-size: 14px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #666666;
+          line-height: 20px;
+          margin-bottom: 28px;
+          &__index {
+            width: 20px;
+          }
+          &__img {
+            width: 20px;
+            height: 20px;
+            margin-left: 12px;
+            margin-right: 8px;
+          }
+          &__name {
+            width: 500px;
+          }
+        }
+        .progress {
+          &.finish {
+            color: RGBA(101, 202, 168, 1);
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/modules/course-manage/video-course/components/VideoCourseFilter.jsx
+++ b/src/modules/course-manage/video-course/components/VideoCourseFilter.jsx
 /*
 * @Author: 吴文洁
 * @Date: 2020-08-05 10:11:57
- * @LastEditors: fusanqiasng
+ * @LastEditors: yuananting
- * @LastEditTime: 2021-05-28 20:14:37
+ * @LastEditTime: 2021-07-12 14:14:47
- * @Description: 视频课-搜索模块
+ * @Description: 线上课-搜索模块
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 */
@@ -56,22 +56,17 @@ class VideoCourseFilter extends React.Component {
    this.getTeacherList()
    this.queryCategoryTree()
  }
  // 查询分类树
-  queryCategoryTree = (categoryName = '') => {
+  queryCategoryTree = ()=> {
-    let query = {
+    const params= {
-      bizType: 'QUESTION',
+      storeId:User.getStoreId()
-      source: 2,
-      categoryName,
-      tenantId: User.getStoreId(),
-      userId: User.getStoreUserId(),
-      count: false,
    }
-    AidToolService.queryExternalCategoryTree(query).then((res) => {
+    StoreService.getStoreDetail(params).then((res) => {
-      const { categoryList = [] } = res.result
+      const { result = {} } = res;
-      console.log(this.renderTreeNodes(categoryList))
+      result.coursePackageId && AidToolService.queryCategoryTreeByPackage({coursePackageId: result.coursePackageId}).then((res) => {
-      this.setState({
+          const { result = [] } = res;
-        categoryList: this.renderTreeNodes(categoryList),
+          this.setState({categoryList: this.renderTreeNodes(result)})
-        categoryName,
      })
    })
  }
@@ -192,10 +187,10 @@ class VideoCourseFilter extends React.Component {
        <Row type='flex' justify='space-between' align='top'>
          <div className='search-condition'>
            <div className='search-condition__item'>
-              <span className='search-name'>视频课名称：</span>
+              <span className='search-name'>线上课名称：</span>
              <Search
                value={courseName}
-                placeholder='搜索视频课名称'
+                placeholder='搜索线上课名称'
                onChange={(e) => {
                  this.handleChangeQuery('courseName', e.target.value)
                }}

--- a/src/modules/course-manage/video-course/components/VideoCourseList.jsx
+++ b/src/modules/course-manage/video-course/components/VideoCourseList.jsx
-/*
+import React from "react"
- * @Author: 吴文洁
+import { Modal, message, Tooltip, Switch, Dropdown } from "antd"
- * @Date: 2020-08-05 10:12:45
+import _ from "underscore"
- * @LastEditors: fusanqiasng
+import { PageControl } from "@/components"
- * @LastEditTime: 2021-05-31 18:04:10
+import { LIVE_SHARE } from "@/domains/course-domain/constants"
- * @Description: 视频课-列表模块
+import { Route, withRouter } from 'react-router-dom';
- * @Copyright: 杭州杰竞科技有限公司 版权所有
+import ShareLiveModal from "@/modules/course-manage/modal/ShareLiveModal"
- */
+import CourseService from "@/domains/course-domain/CourseService"
-import User from '@/common/js/user';
+import RelatedPlanModal from "../../modal/RelatedPlanModal"
+import User from "@/common/js/user"
+import VideoCourseDetail from '../VideoCourseDetail';
+import WatchData from "./WatchData";
+import { XMTable } from '@/components';
 import college from '@/common/lottie/college';
-import { PageControl, XMTable } from '@/components';
+import "./VideoCourseList.less"
-import { LIVE_SHARE } from '@/domains/course-domain/constants';
-import CourseService from '@/domains/course-domain/CourseService';
-import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal';
-import { Dropdown, message, Modal, Switch, Tooltip } from 'antd';
-import React from 'react';
-import RelatedPlanModal from '../../modal/RelatedPlanModal';
-import WatchDataModal from '../modal/WatchDataModal';
-import './VideoCourseList.less';
 class VideoCourseList extends React.Component {
  constructor(props) {
@@ -39,21 +35,20 @@ class VideoCourseList extends React.Component {
    }
  }
+    // 跳转课程详情页
+    handleLinkToCourseDetail = (courseId) => {
+      const { match } = this.props;
+      window.RCHistory.push(`${match.url}/video-course-detail?courseId=${courseId}`)
+    }
  // 观看数据弹窗
-  handleShowWatchDataModal = (record) => {
+  handleShowWatchDataModal = (item) => {
-    const watchDataModal = (
+    const { match } = this.props;
-      <WatchDataModal
+    window.RCHistory.push({
-        type='videoCourseList'
+      pathname: `${match.url}/course-data?courseName=${item.courseName}&courseId=${item.id}`
-        data={record}
+    })
-        close={() => {
+  }
-          this.setState({
-            watchDataModal: null,
-          });
-        }}
-      />
-    );
-    this.setState({ watchDataModal });
-  };
  // 请求表头
  parseColumns = () => {
@@ -61,23 +56,21 @@ class VideoCourseList extends React.Component {
    const { ShelfLoading } = this.state;
    const columns = [
      {
-        title: '视频课',
+        title: "线上课",
-        key: 'scheduleName',
+        key: "scheduleName",
-        dataIndex: 'scheduleName',
+        dataIndex: "scheduleName",
        width: 321,
        fixed: 'left',
        render: (val, record) => {
-          const { coverUrl, scheduleVideoUrl } = record;
+          const { coverUrl } = record;
          return (
            <div className='record__item'>
-              {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
              <img
                className='course-cover'
                src={
-                  coverUrl ||
+                  coverUrl ||  'https://image.xiaomaiketang.com/xm/TwtGPQGE4K.png'
-                  (type === 'internal' ? `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast` : 'https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png')
                }
-                alt=''
+                alt='封面图'
              />
              <Choose>
                <When condition={record.courseName.length > 25}>
@@ -106,9 +99,9 @@ class VideoCourseList extends React.Component {
            </If>
          </span>
        ),
-        key: 'categoryName',
+        key: "categoryName",
-        dataIndex: 'categoryName',
+        dataIndex: "categoryName",
-        width: 200,
+        width: 150,
        render: (val, record) => {
          return (
            <Choose>
@@ -126,21 +119,15 @@ class VideoCourseList extends React.Component {
        },
      },
      {
-        title: '创建人',
+        title: '课节数',
-        key: 'createName',
+        key: 'chapterNum',
-        dataIndex: 'createName',
+        dataIndex: 'chapterNum',
+        className: "chapterNum",
        width: 100,
-        render: (val) => {
+        align: 'right',
-          return (
+        render: (val,item) => {
-            <div>
+          return <div onClick={()=>this.handleLinkToCourseDetail(item.id)}>{val || 1}</div>
-              {val && (
+        }
-                <Tooltip title={val}>
-                  <div>{val.length > 4 ? `${val.slice(0, 4)}...` : val}</div>
-                </Tooltip>
-              )}
-            </div>
-          );
-        },
      },
      {
        title: (
@@ -178,13 +165,31 @@ class VideoCourseList extends React.Component {
        },
      },
      {
-        title: '观看学员数',
+        title: "观看学员数",
-        width: 110,
+        width: 150,
-        key: 'watchUserCount',
+        key: "watchUserCount",
-        dataIndex: 'watchUserCount',
+        dataIndex: "watchUserCount",
+        align: 'right',
        render: (val, item) => {
-          return <div className='watchUserCount'>{val || 0}</div>;
+          return <div className='watchUserCount' onClick={() => this.handleShowWatchDataModal(item)}>{val || 0}</div>
+        }
      },
+      {
+        title: "创建人",
+        key: "createName",
+        dataIndex: "createName",
+        width: 100,
+        render: (val) => {
+          return (
+            <div>
+              {val && (
+                <Tooltip title={val}>
+                  <div>{val.length > 4 ? `${val.slice(0, 4)}...` : val}</div>
+                </Tooltip>
+              )}
+            </div>
+          )
+        }
      },
      {
        title: '创建时间',
@@ -238,21 +243,17 @@ class VideoCourseList extends React.Component {
        title: '操作',
        key: 'operate',
        dataIndex: 'operate',
-        width: 210,
+        width: 160,
        fixed: 'right',
        render: (val, record) => {
          return (
            <div className='operate'>
-              <div className='operate__item' onClick={() => this.handleShowWatchDataModal(record)}>
+              <If condition={type === "internal"}>
-                观看数据
-              </div>
-              <If condition={type === 'internal'}>
-                <span className='operate__item split'> | </span>
                <div className='operate__item' onClick={() => this.handleShowShareModal(record)}>
                  分享
                </div>
-              </If>
                <span className='operate__item split'> | </span>
+              </If>
              <Dropdown overlay={this.renderMoreOperate(record)}>
                <span className='more-operate'>
                  <span className='operate-text'>更多</span>
@@ -267,7 +268,7 @@ class VideoCourseList extends React.Component {
      },
    ];
-    type !== 'internal' && columns.splice(2, 1);
+    type !== 'internal' && columns.splice(5, 1);
    return columns;
  };
@@ -334,7 +335,7 @@ class VideoCourseList extends React.Component {
    });
  };
-  // 删除视频课
+  // 删除线上课
  handleDeleteVideoCourse = (scheduleId) => {
    Modal.confirm({
      title: '你确定要删除此视频课吗？',
@@ -376,7 +377,7 @@ class VideoCourseList extends React.Component {
        data={shareData}
        type='videoClass'
        courseDivision={type}
-        title='视频课'
+        title='线上课'
        close={() => {
          this.setState({
            shareLiveModal: null,
@@ -453,7 +454,7 @@ class VideoCourseList extends React.Component {
    );
  };
  render() {
-    const { dataSource = [], totalCount, query, type } = this.props;
+    const { dataSource = [], totalCount, query, type, match } = this.props;
    const { current, size } = query;
    const { RelatedPlanModalVisible, selectPlanList, selectCourseId } = this.state;
    return (
@@ -472,16 +473,6 @@ class VideoCourseList extends React.Component {
          scroll={{ x: 1500 }}
          className='video-list-table'
        />
-        {/* <Table
-          rowKey={(record) => record.id}
-          dataSource={dataSource}
-          columns={this.parseColumns()}
-          onChange={this.handleChangeTable}
-          pagination={false}
-          scroll={{ x: 1500 }}
-          bordered
-          className='video-list-table'
-        /> */}
        <div className='box-footer'>
          <PageControl
@@ -506,9 +497,11 @@ class VideoCourseList extends React.Component {
        )}
        {this.state.shareLiveModal}
        {this.state.watchDataModal}
+        <Route path={`${match.url}/video-course-detail`} component={VideoCourseDetail} />
+        <Route path={`${match.url}/course-data`} component={WatchData} />
      </div>
    );
  }
 }
-export default VideoCourseList;
+export default withRouter(VideoCourseList);
--- a/src/modules/course-manage/video-course/components/VideoCourseList.less
+++ b/src/modules/course-manage/video-course/components/VideoCourseList.less
@@ -24,11 +24,17 @@
          }
        }
      }
+      .chapterNum {
+        color: #2966ff;
+        cursor: pointer;
+      }
    }
  }
  .watchUserCount {
    text-align: right;
    padding: 16px;
+    color: #2966ff;
+    cursor: pointer;
  }
  .operate-text {
    color: #2966FF;

--- a/src/modules/course-manage/video-course/components/VieoCourseOpt.jsx
+++ b/src/modules/course-manage/video-course/components/VieoCourseOpt.jsx
@@ -3,7 +3,7 @@
 * @Date: 2020-08-05 10:12:15
 * @LastEditors: zhangleyuan
 * @LastEditTime: 2020-12-26 16:07:27
- * @Description: 视频课-操作模块
+ * @Description: 线上课-操作模块
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 */
@@ -22,7 +22,7 @@ export default function VideoCourseOpt() {
          RCHistory.push('/create-video-course?type=add');
        }}
        className="mr12"
-      >新建视频课</Button>
+      >新建线上课</Button>
    </div>
  );
 }
--- a/src/modules/course-manage/video-course/components/WatchData.jsx
+++ b/src/modules/course-manage/video-course/components/WatchData.jsx
+import User from "@/common/js/user";
+import college from "@/common/lottie/college";
+import { PageControl, XMTable } from "@/components";
+import Breadcrumbs from "@/components/Breadcrumbs";
+import CourseService from "@/domains/course-domain/CourseService";
+import { Input, Select } from "antd";
+import React from "react";
+import { withRouter } from "react-router-dom";
+import LearningDetailModal from "./LearningDetailModal";
+import "./WatchData.less";
+const { Search } = Input;
+class WatchData extends React.Component {
+  constructor(props) {
+    super(props);
+    const courseId = window.getParameterByName("courseId");
+    const courseName = window.getParameterByName("courseName");
+    this.state = {
+      courseName,
+      courseId,
+      visible: true,
+      dataSource: [],
+      query: {
+        current: 1,
+        size: 10,
+        sourceEnum: null,
+      },
+      totalCount: 0,
+      learningDetailModal: null,
+    };
+  }
+  componentDidMount() {
+    this.handleFetchDataList();
+  }
+  // 获取观看视频数据列表
+  handleFetchDataList = () => {
+    const { query, courseId } = this.state;
+    const params = {
+      ...query,
+      courseId: courseId,
+      storeId: User.getStoreId(),
+    };
+    CourseService.videoWatchInfo(params).then((res) => {
+      const { result = {} } = res;
+      const { records = [], total = 0 } = result;
+      this.setState({
+        dataSource: records,
+        totalCount: Number(total),
+      });
+    });
+  };
+  parseColumns = () => {
+    const SOURCENUM = {
+      WE_CHAT: "微信",
+      WORK_WE_CHAT: "企业微信",
+    };
+    const columns = [
+      {
+        title: "观看学员",
+        key: "name",
+        dataIndex: "name",
+        render: (val, item) => {
+          return (
+            <div className="watcher">
+              <div className="watcher__name">{val}</div>
+              <div className={`watcher__type ${item.sourceEnum}`}>
+                @{SOURCENUM[item.sourceEnum]}
+              </div>
+            </div>
+          );
+        },
+      },
+      {
+        title: "手机号",
+        key: "phone",
+        dataIndex: "phone",
+      },
+      {
+        title: "首次观看时间",
+        key: "firstWatch",
+        dataIndex: "firstWatch",
+        render: (val) => {
+          return formatDate("YYYY-MM-DD H:i", val);
+        },
+      },
+      {
+        title: "学习进度",
+        key: "progress",
+        dataIndex: "progress",
+        render: (val) => {
+          return <span>{val}%</span>;
+        },
+      },
+      {
+        title: "操作",
+        key: "operate",
+        dataIndex: "operate",
+        render: (val, record) => {
+          return (
+            <div className="operate">
+              <div
+                className="operate__item"
+                onClick={() => this.ShowLearningDetailModal(record)}
+              >
+                学习详情
+              </div>
+            </div>
+          );
+        },
+      },
+    ];
+    return columns;
+  };
+  // 显示学员数据详情弹窗
+  ShowLearningDetailModal = (item) => {
+    const learningDetailModal = (
+      <LearningDetailModal
+        data={item}
+        title="学习详情"
+        onClose={() => {
+          this.setState({
+            learningDetailModal: null
+          });
+        }}
+        courseId={this.state.courseId}
+      />
+    );
+    this.setState({ learningDetailModal });
+  };
+  // 搜索学员姓名或手机号
+  handleChangNickname = (value) => {
+    const isPhone = (value || "").match(/^\d+$/);
+    const { query } = this.state;
+    let _query = { ...query };
+    if (isPhone) {
+      _query.phone = value;
+      _query.nickName = null;
+    } else {
+      _query.nickName = value;
+      _query.phone = null;
+    }
+    _query.current = 1;
+    this.setState(
+      {
+        query: _query,
+      },
+      this.handleFetchDataList
+    );
+  };
+  // 搜索学员类型
+  handleWatchTypeSelect = (sourceEnum) => {
+    const { query } = this.state;
+    let _query = { ...query };
+    _query.sourceEnum = sourceEnum;
+    this.setState(
+      {
+        query: _query,
+      },
+      this.handleFetchDataList
+    );
+  };
+  render() {
+    const { dataSource, totalCount, query, courseName } = this.state;
+    const { current, size, sourceEnum } = query;
+    return (
+      <div className="page video-course-watch-data">
+        <Breadcrumbs
+          navList="观看学员数据"
+          goBack={() => {
+            window.RCHistory.goBack();
+          }}
+        />
+        <div className="box">
+          <div className="box-header">
+            <div className="course-detail">
+              <div className="detail__line"></div>
+              <div className="detail__name">{courseName}</div>
+            </div>
+            <div className="filter-box">
+              <div className="watcher-name">
+                <span className="label">学员：</span>
+                <Search
+                  placeholder="搜索学员姓名/手机号"
+                  style={{ width: 200 }}
+                  onChange={(e) => {
+                    this.handleChangNickname(e.target.value);
+                  }}
+                  onSearch={() => {
+                    this.handleFetchDataList();
+                  }}
+                  enterButton={<span className="icon iconfont">&#xe832;</span>}
+                />
+              </div>
+              <div className="watch-type">
+                <span className="label">学员类型：</span>
+                <Select
+                  showSearch
+                  style={{ width: 200 }}
+                  allowClear
+                  onPopupScroll={this.handleFetchMore}
+                  placeholder="请选择学员类型"
+                  value={sourceEnum}
+                  onChange={this.handleWatchTypeSelect}
+                >
+                  <Select.Option tyle={{ textAlign: "center" }} value="WE_CHAT">
+                    微信
+                  </Select.Option>
+                  <Select.Option
+                    tyle={{ textAlign: "center" }}
+                    value="WORK_WE_CHAT"
+                  >
+                    企业微信
+                  </Select.Option>
+                </Select>
+              </div>
+            </div>
+          </div>
+          <XMTable
+            renderEmpty={{
+              image: college,
+              description: "暂无数据",
+            }}
+            rowKey={(record) => record.id}
+            dataSource={dataSource}
+            columns={this.parseColumns()}
+            pagination={false}
+            bordered
+            className="video-list-table"
+          />
+          <div className="box-footer">
+            <PageControl
+              current={current - 1}
+              pageSize={size}
+              total={totalCount}
+              toPage={(page) => {
+                const _query = { ...query, current: page + 1 };
+                this.setState(
+                  {
+                    query: _query,
+                  },
+                  () => {
+                    this.handleFetchDataList();
+                  }
+                );
+              }}
+            />
+          </div>
+        </div>
+        {this.state.learningDetailModal}
+      </div>
+    );
+  }
+}
+export default withRouter(WatchData);
--- a/src/modules/course-manage/video-course/components/WatchData.less
+++ b/src/modules/course-manage/video-course/components/WatchData.less
+.video-course-watch-data {
+    .watcher {
+        display: flex;
+        &__type {
+            margin-left: 8px;
+           &.WE_CHAT {
+             color:rgba(28, 172, 27, 1);
+           } 
+           &.WORK_WE_CHAT {
+               color: rgba(41, 102, 255, 1);
+           }
+        }
+    }
+    .filter-box {
+        display: flex;
+        margin-bottom: 4px;
+        .watcher-name {
+            margin-right: 40px;
+        }
+    }
+    .course-detail {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+        .detail__line {
+            width: 4px;
+            height: 12px;
+            background-image: linear-gradient(#2966ff 83.5%, #0acca4 16.5%);
+            margin-right: 8px;
+        }
+        .detail__name {
+            width: 880px;
+            height: 26px;
+            font-size: 19px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #333333;
+            line-height: 26px;
+        }
+    }
+}
\ No newline at end of file
--- a/src/modules/course-manage/video-course/index.jsx
+++ b/src/modules/course-manage/video-course/index.jsx
@@ -15,18 +15,18 @@ class VideoCourse extends React.Component {
        current: 1,
        storeId: User.getStoreId(),
      },
-      dataSource: [], // 视频课列表
+      dataSource: [], // 线上课列表
-      totalCount: 0, // 视频课数据总条数
+      totalCount: 0, // 线上课数据总条数
      currentTabKey: 'internal',
    };
  }
  componentWillMount() {
-    // 获取视频课列表
+    // 获取线上课列表
    this.handleFetchScheduleList();
  }
-  // 获取视频课列表
+  // 获取线上课列表
  handleFetchScheduleList = (_query = {}) => {
    const { currentTabKey } = this.state;
    const query = {
@@ -81,7 +81,7 @@ class VideoCourse extends React.Component {
    const { dataSource, totalCount, query, currentTabKey } = this.state;
    return (
      <div className='page video-course-page'>
-        <div className='content-header'>视频课</div>
+        <div className='content-header'>线上课</div>
        <div className='box'>
          <Tabs onChange={this.currenTabChange} activeKey={currentTabKey}>
@@ -95,7 +95,7 @@ class VideoCourse extends React.Component {
          <If condition={currentTabKey === 'internal'}>
            <VideoCourseOpt />
          </If>
-          {/* 视频课列表模块 */}
+          {/* 线上课列表模块 */}
          <VideoCourseList
            type={currentTabKey}
            query={query}

--- a/src/modules/course-manage/video-course/modal/WatchDataModal.jsx
+++ b/src/modules/course-manage/video-course/modal/WatchDataModal.jsx
@@ -3,7 +3,7 @@
 * @Date: 2020-05-19 11:01:31
 * @Last Modified by: 吴文洁
 * @Last Modified time: 2020-05-25 16:50:47
- * @Description 余额异常弹窗
+ * @Description 学员观看数据弹窗
 */
 import User from '@/common/js/user';
 import { PageControl, XMTable } from '@/components';
@@ -128,65 +128,52 @@ class WatchDataModal extends React.Component {
    const { visible, size, dataSource, totalCount, query } = this.state;
    return (
        <Modal
-        title='视频课观看数据'
+          title="线上课观看数据"
          visible={visible}
          footer={null}
          onCancel={this.onClose}
          maskClosable={false}
-        className='watch-data-modal'
+          className="watch-data-modal"
          closable={true}
          width={800}
-        closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}>
+          closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
-        <div className='search-container'>
+        >
-          <Search
+          <div className="search-container">
-            placeholder='搜索学员姓名/手机号'
+            <Search placeholder="搜索学员姓名/手机号"  style={{ width: 200 }}  onChange={(e) => { this.handleChangNickname(e.target.value)}}  onSearch={ () => { this.handleFetchDataList()}} enterButton={<span className="icon iconfont">&#xe832;</span>}/>
-            style={{ width: 200 }}
-            onChange={(e) => {
-              this.handleChangNickname(e.target.value);
-            }}
-            onSearch={() => {
-              this.handleFetchDataList();
-            }}
-            enterButton={<span className='icon iconfont'>&#xe832;</span>}
-          />
          </div>
          <div>
            <XMTable
              renderEmpty={{
                image: college,
                description: '暂无数据',
              }}
-            rowKey={(record) => record.id}
+              rowKey={record => record.id}
              dataSource={dataSource}
              columns={this.parseColumns()}
              pagination={false}
              bordered
            />
-          {dataSource.length > 0 && (
+            {dataSource.length >0 &&
-            <div className='box-footer'>
+              <div className="box-footer">
                <PageControl
                  current={query.current - 1}
                  pageSize={size}
                  total={totalCount}
-                size='small'
+                  size="small"
                  toPage={(page) => {
-                  const _query = { ...query, current: page + 1 };
+                    const _query = {...query, current: page + 1};
-                  this.setState(
+                    this.setState({
-                    {
+                      query:_query
-                      query: _query,
+                    },()=>{ this.handleFetchDataList()})
-                    },
-                    () => {
-                      this.handleFetchDataList();
-                    }
-                  );
                  }}
                  onShowSizeChange={this.onShowSizeChange}
                />
              </div>
-          )}
+            }
          </div>
        </Modal>
-    );
+    )
  }
 }

--- a/src/modules/home/Home.jsx
+++ b/src/modules/home/Home.jsx
@@ -343,7 +343,7 @@ class Home extends React.Component {
                  </div>
                </div>
                <div className='course-item'>
-                  <div className='course-title'>视频课</div>
+                  <div className='course-title'>线上课</div>
                  <div className='data'>
                    <span className='course-number'>{videoCourseNum}</span>
                    {incVideoCourseNum > 0 && <span className='icon iconfont'>&#xe635;</span>}
@@ -409,9 +409,8 @@ class Home extends React.Component {
                  </span>
                  <span
                    className={`tab${scheduleType === 'VOICE' ? ' selected' : ''}`}
-                    onClick={() => this.setState({ scheduleType: 'VOICE' }, () => this.getHotCourse())}>
+                    onClick={() => this.setState({ scheduleType: 'VOICE' }, () => this.getHotCourse())}
-                    视频课
+                  >线上课</span>
-                  </span>
                  <span 
                    className={`tab${scheduleType === 'PICTURE' ? ' selected' : ''}`}
                    onClick={() => this.setState({ scheduleType: 'PICTURE' }, () => this.getHotCourse())}>

--- a/src/modules/knowledge-base/ENUM.js
+++ b/src/modules/knowledge-base/ENUM.js
@@ -55,7 +55,7 @@ const ENUM = {
  CourseTypeEnum: {
    LIVE: "直播课",
-    VOICE: "视频课",
+    VOICE: "线上课",
    PICTURE: "图文课",
    FOLDER: "学习资料",
  },

--- a/src/modules/knowledge-base/components/KnowledgeBaseFilter.jsx
+++ b/src/modules/knowledge-base/components/KnowledgeBaseFilter.jsx
@@ -65,10 +65,11 @@ class KnowledgeBaseFilter extends React.Component {
        <Row type="flex" justify="space-between" align="top">
          <div className="search-condition">
            <div className="search-condition__item">
-              <span className="search-name">课程名称：</span>
+              <span className="search-name">资料名称：</span>
              <Search
                value={name}
-                placeholder="搜索课程名称"
+                // allowClear
+                placeholder="搜索资料名称"
                onChange={(e) => {
                  this.handleChangeQuery("name", e.target.value, false);
                }}
@@ -79,33 +80,6 @@ class KnowledgeBaseFilter extends React.Component {
                enterButton={<span className="icon iconfont">&#xe832;</span>}
              />
            </div>
-            <div className="search-condition__item">
-              <span className="shelf-status">课程类型：</span>
-              <Select
-                style={{ width: "calc(100% - 84px)" }}
-                placeholder="请选择课程类型"
-                allowClear={true}
-                value={type}
-                onChange={(value) => {
-                  this.handleChangeQuery("type", value);
-                }}
-                suffixIcon={
-                  <span
-                    className="icon iconfont"
-                    style={{ fontSize: "12px", color: "#BFBFBF" }}
-                  >
-                    &#xe835;
-                  </span>
-                }
-              >
-                {Reflect.ownKeys(ENUM.CourseTypeEnum).map((item) => {
-                  return (
-                    <Option key={item} value={item}>{ENUM.CourseTypeEnum[item]}</Option>
-                  );
-                })}
-              </Select>
-            </div>
          </div>
          <div className="reset-fold-area">
            <Tooltip title="清空筛选">

--- a/src/modules/knowledge-base/components/KnowledgeBaseList.jsx
+++ b/src/modules/knowledge-base/components/KnowledgeBaseList.jsx
@@ -3,12 +3,13 @@
 * @Author: zangsuyun
 * @Date: 2021-03-12 14:49:40
 * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-06-11 16:44:59
+ * @LastEditTime: 2021-07-18 10:27:17
 * @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
 */
 import React from "react";
 import { Modal, message, Tooltip, Switch, Dropdown, Button } from "antd";
+import { FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum';
 import { Route, withRouter } from "react-router-dom";
 import { PageControl, XMTable } from "@/components";
 import { LIVE_SHARE_MAP } from "@/common/constants/academic/cloudClass";
@@ -181,150 +182,20 @@ class KnowledgeBaseList extends React.Component {
    const { current, size } = query;
    const columns = [
      {
-        title: '课程名称',
+        title: "名称",
-        key: 'name',
+        key: "name",
-        dataIndex: 'name',
+        dataIndex: "name",
-        width: 391,
-        fixed: 'left',
        render: (val, record) => {
          const { coverUrl, mediaCourseUrl, courseDivision } = record.source;
          let hasCover = false;
          const type = record.type;
          return (
-            <div>
-              {type === 'LIVE' && (
-                <div className='record__item'>
-                  {record.source &&
-                    record.source.courseMediaVOS.map((item, index) => {
-                      if (item.contentType === 'COVER') {
-                        hasCover = true;
-                        return <img className='course-cover' key={index} src={item.mediaUrl} />;
-                      }
-                    })}
-                  {!hasCover && <img className='course-cover' src={'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'} />}
-                  <div>
-                    {val.length > 17 ? (
-                      <Tooltip title={val}>
-                        <div className='course-name'>{val}</div>
-                      </Tooltip>
-                    ) : (
-                      <div className='course-name'>{val}</div>
-                    )}
-                    <div>
-                      <span className='course-time'>
-                        {formatDate('YYYY-MM-DD H:i', parseInt(record.source.startTime))}~{formatDate('H:i', parseInt(record.source.endTime))}
-                      </span>
-                      <span
-                        className='course-status'
-                        style={{
-                          color: ENUM.courseStateShow[record.source.courseState].color,
-                          border: `1px solid ${ENUM.courseStateShow[record.source.courseState].color}`,
-                        }}>
-                        {ENUM.courseStateShow[record.source.courseState].title}
-                      </span>
-                      {record.hideToUser && (
-                        <Tooltip title={<div>课程未成功开课，已在学员知识列表中隐藏</div>}>
-                          <i
-                            className='icon iconfont'
-                            style={{
-                              marginLeft: '5px',
-                              cursor: 'pointer',
-                              color: '#FF4F4F',
-                              fontSize: '14px',
-                            }}>
-                            &#xe61d;
-                          </i>
-                        </Tooltip>
-                      )}
-                    </div>
-                    <div className='teacher-assistant'>
-                      {record.source.teacherName.length > 4 ? (
-                        <Tooltip title={record.source.teacherName}>
-                          <span className='teacher'>讲师：{record.source.teacherName}</span>
-                        </Tooltip>
-                      ) : (
-                        <span className='teacher'>讲师：{record.source.teacherName}</span>
-                      )}
-                      {record.source.admins.length > 0 && (
-                        <>
-                          <span className='split'> | </span>
-                          {this.handleAdminName(record.source.admins).length > 4 ? (
-                            <Tooltip title={this.handleAdminName(record.source.admins)}>
-                              <span className='assistant'>
-                                助教：
-                                {record.source.admins.map((item, index) => {
-                                  return (
-                                    <span>
-                                      {item.adminName} {index < record.source.admins.length - 1 && <span> 、</span>}{' '}
-                                    </span>
-                                  );
-                                })}
-                              </span>
-                            </Tooltip>
-                          ) : (
-                            <span className='assistant'>
-                              助教：
-                              {record.source.admins.map((item, index) => {
-                                return (
-                                  <span key={index}>
-                                    {item.adminName} {index < record.source.admins.length - 1 && <span> 、</span>}{' '}
-                                  </span>
-                                );
-                              })}
-                            </span>
-                          )}
-                        </>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              )}
-              {type === 'VOICE' && (
-                <div className='record__item'>
-                  {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
-                  <img
-                    className='course-cover'
-                    src={
-                      coverUrl
-                        ? coverUrl
-                        : courseDivision !== 'EXTERNAL'
-                        ? `${mediaCourseUrl}?x-oss-process=video/snapshot,t_0,m_fast`
-                        : 'https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png'
-                    }
-                    alt=''
-                  />
-                  {val.length > 25 ? (
-                    <Tooltip title={val}>
-                      <div className='course-name clamp'>{val}</div>
-                    </Tooltip>
-                  ) : (
-                    <div className='course-name clamp'>{val}</div>
-                  )}
-                </div>
-              )}
-              {type === 'PICTURE' && (
-                <div className='record__item'>
-                  <img className='course-cover' src={coverUrl || 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png'} />
-                  {val.length > 25 ? (
-                    <Tooltip title={val}>
-                      <div className='course-name clamp'>{val}</div>
-                    </Tooltip>
-                  ) : (
-                    <div className='course-name clamp'>{val}</div>
-                  )}
-                </div>
-              )}
-              {type === 'FOLDER' && (
            <div
              className='record__item'
              onClick={() => {
-                    this.handleScanFile(record.source);
+                this.handleScanFile(record.source)
              }}>
-                  <div className={`folder-type ${record.source && record.source.folderFormat}`} />
+              <img src={FileTypeIcon[record.source.folderFormat] } style={{width:24,height:24}} alt='' className='item-img' />
              {val.length > 25 ? (
                <Tooltip title={val}>
                  <div className='course-name clamp'>{val}</div>
@@ -333,26 +204,15 @@ class KnowledgeBaseList extends React.Component {
                <div className='course-name clamp'>{val}</div>
              )}
            </div>
-              )}
-            </div>
+          )
-          );
+        }
-        },
-      },
-      {
-        title: '课程类型',
-        key: 'type',
-        dataIndex: 'type',
-        align: 'center',
-        // width: 100,
-        render: (val, record) => {
-          return <div className=''>{val ? ENUM.CourseTypeEnum[val] : '-'}</div>;
-        },
      },
      {
-        title: '创建人',
+        title: "创建人",
-        key: 'createName',
+        key: "createName",
-        dataIndex: 'createName',
+        dataIndex: "createName",
-        align: 'center',
+        align: "center",
        render: (val) => {
          return (
            <div>
@@ -381,8 +241,8 @@ class KnowledgeBaseList extends React.Component {
        },
      },
      {
-        title: '',
+        title: "",
-        width: 48,
      },
      {
        title: '操作',
@@ -441,10 +301,9 @@ class KnowledgeBaseList extends React.Component {
    const { match } = this.props;
    localStorage.setItem("WatchData_CourseName", item.name);
    window.RCHistory.push({
-      // pathname: `${match.url}/course-data?type=${item.courseType}&id=${item.liveCourseId}`,
+      pathname: `${match.url}/course-data?type=${item.type}&id=${item.id}`
-      pathname: `${match.url}/course-data?type=${item.type}&id=${item.id}`,
+    })
-    });
+  }
-  };
  deleteConfirm = (item) => {
    const params = {
@@ -490,7 +349,7 @@ class KnowledgeBaseList extends React.Component {
          dataSource={dataSource}
          columns={this.parseColumns()}
          pagination={false}
-          scroll={{ x: 900 }}
          bordered
          className="knowledge-list-table"
          renderEmpty={{

--- a/src/modules/knowledge-base/components/KnowledgeBaseList.less
+++ b/src/modules/knowledge-base/components/KnowledgeBaseList.less
@@ -109,7 +109,10 @@
 .knowledge-base-list {
  .record__item {
    display: flex;
-    // align-items: center;
+    align-items: center;
+    .item-img{
+      margin-right: 4px;
+    }
    .course-cover {
      min-width: 107px;
      max-width: 90px;
@@ -153,13 +156,7 @@
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 20px;
-      &.clamp {
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        white-space: normal;
-        height: 40px;
-      }
    }
    .course-time {
      font-size: 12px;

--- a/src/modules/knowledge-base/components/KnowledgeBaseOpt.jsx
+++ b/src/modules/knowledge-base/components/KnowledgeBaseOpt.jsx
@@ -9,10 +9,8 @@
 import React, { useState, useEffect } from "react";
-import { Button, Menu, Dropdown,message, Modal } from "antd";
+import { Button, Menu, Dropdown, message, Modal } from "antd";
 import SelectPrepareFileModal from "@/modules/prepare-lesson/modal/SelectPrepareFileModal";
-import { DownOutlined } from "@ant-design/icons";
-import AddCourse from "../modal/AddCourse";
 import User from "@/common/js/user";
 import Service from "@/common/js/service";
 import KnowledgeAPI from "@/data-source/knowledge/request-api";
@@ -31,16 +29,7 @@ export default function KnowledgeBaseOpt({
  const [openMoveModal, setOpenMoveModal] = useState(false);
  const [data, setData] = useState([]);
-  const menu = (
-    <Menu>
-      <Menu.Item key="1" style={{ textAlign: "center" }}>
-        <span onClick={handAddCourse}>添加课程</span>
-      </Menu.Item>
-      <Menu.Item key="2" style={{ textAlign: "center" }}>
-        <span onClick={handleAddFile}>添加资料</span>
-      </Menu.Item>
-    </Menu>
-  );
  useEffect(() => {
    queryCategoryTree();
@@ -76,19 +65,6 @@ export default function KnowledgeBaseOpt({
    return newTreeData;
  };
-  function handAddCourse() {
-    let modal = (
-      <AddCourse
-        onClose={() => {
-          setModal(null);
-        }}
-        onChange={onChange}
-        categoryId={categoryId}
-        updateCategoryTree={updateCategoryTree}
-      ></AddCourse>
-    );
-    setModal(modal);
-  }
  function handUpload(refIds) {
    const params = {
@@ -118,7 +94,7 @@ export default function KnowledgeBaseOpt({
        isOpen={true}
        accept=".ppt,.pptx,.doc,.docx,.pdf,.jpg,.jpeg,.png,.xlsx,.xls"
        tooltip="支持文件类型：ppt、word、excel、pdf、jpg、jpeg、png"
-        selectTypeList={["JPG", "JPEG", "PNG",'DOC','PDF','EXCEL','application/msword','application/vnd.ms-powerpoint']} // DOC 包含 .pptx,.docx,.xls.XLSX,WORD:DOC
+        selectTypeList={["JPG", "JPEG", "PNG", 'DOC', 'PDF', 'EXCEL', 'application/msword', 'application/vnd.ms-powerpoint']} // DOC 包含 .pptx,.docx,.xls.XLSX,WORD:DOC
        onClose={() => {
          setModal(null);
        }}
@@ -205,12 +181,9 @@ export default function KnowledgeBaseOpt({
  return (
    <div className="knowledge-course-opt">
      {_.isEmpty(selectedRowKeys) ?
-        (categoryId !== '0' && <Dropdown overlay={menu}>
+        categoryId !== '0' && <Button type="primary" onClick={handleAddFile} className="mr8">
-          <Button type="primary" className="mr8">
+          添加资料
-            添加知识
-            <DownOutlined />
        </Button>
-        </Dropdown>)
        : <div className="select-container">
          <span className="con">
            <div>

--- a/src/modules/knowledge-base/modal/AddCourse.jsx
+++ b/src/modules/knowledge-base/modal/AddCourse.jsx
@@ -107,11 +107,11 @@ class AddCourse extends React.Component {
      selectVideo: {
        external: [],
        internal: [],
-      }, //弹窗内已选择的视频课程
+      }, //弹窗内已选择的线上课程
      currentVideoCourseListData: {
        external: [],
        internal: [],
-      }, //页面中已关联的视频课程
+      }, //页面中已关联的线上课程
      pictureDataSource: [],
      pictureSize: 10,
@@ -201,7 +201,7 @@ class AddCourse extends React.Component {
    });
  };
-  // 获取视频课列表
+  // 获取线上课列表
  handleFetchVideoList = () => {
    const { videoQuery, videoSize, videoCourseDivision, videoDataSource, videoTotalCount } = this.state;
@@ -421,7 +421,7 @@ class AddCourse extends React.Component {
                  coverUrl ||
                  (videoCourseDivision === 'internal'
                    ? `${mediaCourseUrl}?x-oss-process=video/snapshot,t_0,m_fast`
-                    : 'https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png')
+                    : 'https://image.xiaomaiketang.com/xm/TwtGPQGE4K.png')
                }
                alt=''
              />
@@ -866,7 +866,7 @@ class AddCourse extends React.Component {
              )}
            </div>
          </TabPane>
-          <TabPane tab='视频课' key='VIDEO'>
+          <TabPane tab='线上课' key='VIDEO'>
            <Radio.Group value={videoCourseDivision} onChange={this.videoCourseDivisionChange} style={{ marginBottom: 8 }}>
              <Radio.Button value='internal'>内部课程</Radio.Button>
              <Radio.Button value='external'>外部课程</Radio.Button>

--- a/src/modules/knowledge-base/modal/VideoList.jsx
+++ b/src/modules/knowledge-base/modal/VideoList.jsx
@@ -25,7 +25,7 @@ class VideoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
-      id: "", // 视频课ID
+      id: "", // 线上课ID
      studentIds: [],
      selectedRowKeys: [],
      query: {
@@ -33,8 +33,8 @@ class VideoList extends React.Component {
        current: 1,
        storeId: User.getStoreId(),
      },
-      dataSource: [], // 视频课列表
+      dataSource: [], // 线上课列表
-      totalCount: 0, // 视频课数据总条数
+      totalCount: 0, // 线上课数据总条数
    };
  }
@@ -50,11 +50,11 @@ class VideoList extends React.Component {
  }
  componentWillMount() {
-    // 获取视频课列表
+    // 获取线上课列表
    this.handleFetchScheduleList();
  }
-  // 获取视频课列表
+  // 获取线上课列表
  handleFetchScheduleList = (_query = {}) => {
    const query = {
      ...this.state.query,

--- a/src/modules/plan-manage/AddPlan.jsx
+++ b/src/modules/plan-manage/AddPlan.jsx
 /*
 * @Author: zhangleyuan
 * @Date: 2021-02-20 16:13:39
- * @LastEditors: wufan
+ * @LastEditors: yuananting
- * @LastEditTime: 2021-05-30 20:39:16
+ * @LastEditTime: 2021-07-08 10:52:05
 * @Description: 描述一下
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react';
-import { Button, message, Modal } from 'antd'
+import { Button, message, Modal } from 'antd';
-import ShowTips from '@/components/ShowTips'
+import ShowTips from '@/components/ShowTips';
-import Breadcrumbs from '@/components/Breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs';
-import BasicInfo from './components/BasicInfo'
+import BasicInfo from './components/BasicInfo';
-import TrainingTask from './components/TrainingTask'
+import TrainingTask from './components/TrainingTask';
-import ExpiredCourseList from './components/ExpiredCourseList'
+import ExpiredCourseList from './components/ExpiredCourseList';
-import PlanService from '@/domains/plan-domain/planService'
+import PlanService from '@/domains/plan-domain/planService';
-import User from '@/common/js/user'
+import User from '@/common/js/user';
-import _ from 'underscore'
+import _ from 'underscore';
-import './AddPlan.less'
+import './AddPlan.less';
+import Bus from '@/core/bus';
 const defaultCover = 'https://image.xiaomaiketang.com/xm/rEAetaTEh3.png';
 const defaultBasicData = {
  planName: '',
@@ -28,35 +29,40 @@ const defaultBasicData = {
  operateType: 'All_Operate',
  percentCompleteLive: 80,
  percentCompleteVideo: 80,
-  percentCompletePicture: 100
+  percentCompletePicture: 100,
-}
+};
-const defaultTaskList = []
+const defaultTaskList = [];
 function AddPlan() {
-  const id = getParameterByName('id')
+  const id = getParameterByName('id');
-  const type = getParameterByName('type')
+  const type = getParameterByName('type');
-  const [basicData, setBasicData] = useState(defaultBasicData)
+  const [basicData, setBasicData] = useState(defaultBasicData);
-  const [taskList, setTaskList] = useState(defaultTaskList)
+  const [taskList, setTaskList] = useState(defaultTaskList);
-  const [expiredCourseList, setExpiredCourseList] = useState([])
+  const [expiredCourseList, setExpiredCourseList] = useState([]);
-  const [hasGetDetail, setHasGetDetail] = useState(false)
+  const [hasGetDetail, setHasGetDetail] = useState(false);
-  const [submitDisabled, setSubmitDisabled] = useState(false)
+  const [submitDisabled, setSubmitDisabled] = useState(false);
+  const [editorTextLength, setEditorTextLength] = useState(0);
  useEffect(() => {
    if (type === 'edit') {
-      getPlanDetail()
+      getPlanDetail();
-      getPlanCustomerState()
+      getPlanCustomerState();
    }
-  }, id)
+    Bus.bind('editorLimit', (editorTextLength) => {
+      setEditorTextLength(editorTextLength);
+    });
+  }, id);
  function getPlanCustomerState() {
    PlanService.getTrainingCourseAutoCancel({
-      planId: id
+      planId: id,
    }).then((res) => {
-      const expiredCourseList = res.result
+      const expiredCourseList = res.result;
-      setExpiredCourseList(expiredCourseList)
+      setExpiredCourseList(expiredCourseList);
-    })
+    });
  }
  function getPlanDetail() {
    PlanService.getTrainingPlanDetail({
-      planId: id
+      planId: id,
    }).then((res) => {
      const {
        planName,
@@ -67,34 +73,34 @@ function AddPlan() {
        percentCompleteVideo,
        percentCompletePicture,
        courseMediaVOS,
-        trainingTaskList
+        trainingTaskList,
-      } = res.result
+      } = res.result;
-      let coverId
+      let coverId;
-      let coverUrl
+      let coverUrl;
-      let instro
+      let instro;
      courseMediaVOS.map((item) => {
        switch (item.contentType) {
          case 'COVER':
-            coverId = item.mediaContent
+            coverId = item.mediaContent;
-            coverUrl = item.mediaUrl
+            coverUrl = item.mediaUrl;
-            break
+            break;
          case 'INTRO':
-            instro = item.mediaContent
+            instro = item.mediaContent;
-            break
+            break;
          default:
-            break
+            break;
        }
-        return item
+        return item;
-      })
+      });
-      let _selectOperatorList = []
+      let _selectOperatorList = [];
      if (operateIds) {
        _selectOperatorList = operateIds.map((item, index) => {
-          let _item = {}
+          let _item = {};
-          _item.id = item
+          _item.id = item;
-          return _item
+          return _item;
-        })
+        });
      }
-      setTaskList(trainingTaskList)
+      setTaskList(trainingTaskList);
      setBasicData({
        planName,
        coverUrl: coverUrl || defaultCover,
@@ -105,20 +111,20 @@ function AddPlan() {
        operateType,
        percentCompleteLive,
        percentCompleteVideo,
-        percentCompletePicture
+        percentCompletePicture,
-      })
+      });
-      setHasGetDetail(true)
+      setHasGetDetail(true);
-    })
+    });
  }
  function handleChangeBasicInfo(field, value, option) {
    setBasicData({
      ...basicData,
-      [field]: value
+      [field]: value,
-    })
+    });
  }
  function handleChangeTaskInfo(value) {
-    setTaskList(value)
+    setTaskList(value);
  }
  function submitInfo() {
@@ -132,37 +138,37 @@ function AddPlan() {
      percentCompleteVideo,
      percentCompletePicture,
      coverId,
-      coverUrl
+      coverUrl,
-    } = basicData
+    } = basicData;
-    let input = /^[\s]*$/
+    let input = /^[\s]*$/;
    if (!planName || input.test(planName)) {
-      message.warning('请输入的培训计划名称')
+      message.warning('请输入的培训计划名称');
-      return
+      return;
    }
    if (operateType === 'Assign_Operate' && selectOperatorList.length === 0) {
-      message.warning('请选择指定运营师')
+      message.warning('请选择指定运营师');
-      return
+      return;
    }
    if (!percentCompleteLive && percentCompleteLive !== 0) {
-      message.warning('请输入完成标准')
+      message.warning('请输入完成标准');
-      return
+      return;
    }
    if (!percentCompleteVideo && percentCompleteVideo !== 0) {
-      message.warning('请输入完成标准')
+      message.warning('请输入完成标准');
-      return
+      return;
    }
    if (!percentCompletePicture && percentCompletePicture !== 0) {
-      message.warning('请输入完成标准')
+      message.warning('请输入完成标准');
-      return
+      return;
    }
    if (taskList.length === 0) {
-      message.warning('请输入培训计划内容')
+      message.warning('请输入培训计划内容');
-      return
+      return;
    }
    for (let i = 0; i < taskList.length; i++) {
      if (input.test(taskList[i].taskName)) {
-        message.warning('培训任务名称不能为空')
+        message.warning('培训任务名称不能为空');
-        return false
+        return false;
      }
      if (taskList[i].courseList.length === 0) {
        Modal.confirm({
@@ -170,28 +176,33 @@ function AddPlan() {
          content: '每个任务下至少关联一个课程',
          okText: '确定',
          cancelText: '取消',
-          icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>
+          icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
-        })
+        });
-        return false
+        return false;
+      }
    }
+    if (editorTextLength > 1000) {
+      message.warning('简介超过字数限定');
+      return;
    }
-    let scheduleMediaRequests = []
+    let scheduleMediaRequests = [];
    let coverObj = {
      contentType: 'COVER',
      mediaContent: coverId,
      mediaType: 'PICTURE',
-      mediaUrl: coverUrl
+      mediaUrl: coverUrl,
-    }
+    };
    if (coverId) {
-      scheduleMediaRequests = [...scheduleMediaRequests, coverObj]
+      scheduleMediaRequests = [...scheduleMediaRequests, coverObj];
    }
    let instroObj = {
      contentType: 'INTRO',
      mediaType: 'TEXT',
-      mediaContent: instro
+      mediaContent: instro,
-    }
+    };
    if (instro) {
-      scheduleMediaRequests = [...scheduleMediaRequests, instroObj]
+      scheduleMediaRequests = [...scheduleMediaRequests, instroObj];
    }
    const params = {
@@ -205,43 +216,43 @@ function AddPlan() {
      planName,
      scheduleMediaRequests,
      storeId: User.getStoreId(),
-      trainingTaskList: handleSubmitTaskData(taskList)
+      trainingTaskList: handleSubmitTaskData(taskList),
-    }
+    };
    if (type === 'add') {
      PlanService.createTrainingPlan(params).then((res) => {
        if (res.success) {
-          message.success('新建成功')
+          message.success('新建成功');
-          setSubmitDisabled(true)
+          setSubmitDisabled(true);
-          window.RCHistory.goBack()
+          window.RCHistory.goBack();
        }
-      })
+      });
    } else {
      const _params = {
        ...params,
-        id
+        id,
-      }
+      };
      PlanService.updateTrainingPlan(_params).then((res) => {
        if (res.success) {
-          message.success('更新成功')
+          message.success('更新成功');
-          window.RCHistory.goBack()
+          window.RCHistory.goBack();
        }
-      })
+      });
    }
  }
  function handleSubmitTaskData(taskData) {
    return taskData.map((item, index) => {
-      let _item = {}
+      let _item = {};
-      _item.taskId = item.taskId
+      _item.taskId = item.taskId;
-      _item.taskName = item.taskName
+      _item.taskName = item.taskName;
      _item.courseList = item.courseList.map((childItem, index) => {
-        let _childItem = {}
+        let _childItem = {};
-        _childItem.courseId = childItem.courseId
+        _childItem.courseId = childItem.courseId;
-        _childItem.courseName = childItem.courseName
+        _childItem.courseName = childItem.courseName;
-        _childItem.courseType = childItem.courseType
+        _childItem.courseType = childItem.courseType;
-        return _childItem
+        return _childItem;
-      })
+      });
-      return _item
+      return _item;
-    })
+    });
  }
  // 取消编辑并返回上一级路由
  function handleGoBack() {
@@ -253,11 +264,11 @@ function AddPlan() {
        cancelText: '留在本页',
        icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
        onOk: () => {
-          window.RCHistory.goBack()
+          window.RCHistory.goBack();
-        }
+        },
-      })
+      });
    } else {
-      window.RCHistory.goBack()
+      window.RCHistory.goBack();
    }
  }
@@ -293,6 +304,6 @@ function AddPlan() {
        </Button>
      </div>
    </div>
-  )
+  );
 }
-export default AddPlan
+export default AddPlan;
--- a/src/modules/plan-manage/components/BasicInfo.jsx
+++ b/src/modules/plan-manage/components/BasicInfo.jsx
 /*
+ * @Author: yuananting
+ * @Date: 2021-07-05 10:48:08
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-18 10:14:26
+ * @Description: 描述一下咯
+ * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+/*
 * @Author: zhangleyuan
 * @Date: 2021-02-20 16:45:51
 * @LastEditors: Please set LastEditors
@@ -12,7 +21,8 @@ import { withRouter } from 'react-router-dom';
 import SelectOperatorModal from '../modal/SelectOperatorModal';
 import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
 import Upload from '@/core/upload';
-import ImgClipModal from '@/components/ImgClipModal';
+import GraphicsEditor from '@/modules/course-manage/components/GraphicsEditor';
+import ImgClipModal from '@/components/ImgClipModal'
 import './BasicInfo.less';
 const { TextArea } = Input;
@@ -123,10 +133,14 @@ class BasicInfo extends React.Component {
    this.props.onChange(field, _percentCompleteLive);
  };
+  changeIntro = (value) => {
+    this.props.onChange('introduce', value);
+  };
  render() {
    const { operatorModalVisible, showSelectFileModal, visible, imageFile } = this.state;
    const { data } = this.props;
-    const { planName, coverUrl, instro, enableState, operateType, selectOperatorList, percentCompleteLive, percentCompleteVideo, percentCompletePicture } =
+    const { planName, coverUrl, introduce, enableState, operateType, selectOperatorList, percentCompleteLive, percentCompleteVideo, percentCompletePicture } =
      data;
    // 当前是否使用的是默认图片
    const isDefaultCover = coverUrl === defaultCover;
@@ -147,10 +161,6 @@ class BasicInfo extends React.Component {
        <div className='cover'>
          <span className='label'>封面图：</span>
          <div className='cover__wrap'>
-            <div className='img-content'>
-              {isDefaultCover && <span className='tag'>默认图</span>}
-              <img src={coverUrl} width='690' alt='' />
-            </div>
            <div className='opt-btns'>
              <Button
                onClick={() => {
@@ -165,36 +175,44 @@ class BasicInfo extends React.Component {
              </span>
              <div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
            </div>
+            <div className='img-content'>
+              {isDefaultCover && <span className='tag'>默认图</span>}
+              <img src={coverUrl} width='690' alt='' />
+            </div>
          </div>
        </div>
        <div className='introduction'>
          <span className='label'>简介：</span>
-          <TextArea
+          {/* <TextArea
            placeholder='请输入培训计划简介'
            maxLength={200}
            style={{ width: '552px', height: '110px' }}
            className='instro-textarea'
            value={instro}
            onChange={(e) => this.props.onChange('instro', e.target.value)}
+          /> */}
+          <GraphicsEditor
+            id='intro'
+            isIntro={true}
+            maxLimit={1000}
+            detail={{
+              content: introduce,
+            }}
+            onChange={(val) => {
+              this.changeIntro(val);
+            }}
          />
        </div>
        <div className='wether-use'>
          <span className='label'>是否启用：</span>
          <div className='content'>
-            <div>
            <Switch
              checked={enableState === 'YES' ? true : false}
              onChange={() => {
                this.enableStateChange();
              }}
            />
-            </div>
+            <div className='instro-text'>{enableState === 'YES' ? '已开启，培训计划可正常分享给学员学习' : '已关闭，培训计划暂不进行分享和学习'}</div>
-            <div>
-              <div className='instro-text'>
-                <div>开启：此培训计划可以分享给学员进行学习</div>
-                <div>关闭：此培训计划暂不可分享给学员进行学习，后续可开启</div>
-              </div>
-            </div>
          </div>
        </div>
        <div className='view-range'>
@@ -212,7 +230,7 @@ class BasicInfo extends React.Component {
              onChange={(e) => {
                this.props.onChange('operateType', e.target.value);
              }}>
-              <Row style={{ marginBottom: '5px' }}>
+              <Row style={{ marginBottom: '16px' }}>
                <Col span={24}>
                  <Radio value='All_Operate'>
                    所有运营师
@@ -238,7 +256,7 @@ class BasicInfo extends React.Component {
                  选择运营师
                </Button>
                <span>
-                  已选择<span>{selectOperatorList.length}</span>名运营师
+                  已选择 <span style={{ color: '#2966FF' }}>{selectOperatorList.length}</span> 名运营师
                </span>
              </div>
            )}
@@ -268,7 +286,7 @@ class BasicInfo extends React.Component {
            <div className='live-standard-info'>
              <span className='icon iconfont'>&#xe864;</span>
              <span className='instro'>
-                视频课单个课程，学员学习进度达到
+                线上课单个课节，学员学习进度达到
                <Input
                  width='40'
                  value={percentCompleteVideo}
@@ -278,7 +296,7 @@ class BasicInfo extends React.Component {
                  onBlur={(e) => this.percentCompleteBlur(e, 'percentCompleteVideo')}
                  className='input-box'
                />
-                %，即视为"已完成"学习
+                %，即课节视为"已完成"学习
              </span>
            </div>
            <div className='live-standard-info'>

--- a/src/modules/plan-manage/components/BasicInfo.less
+++ b/src/modules/plan-manage/components/BasicInfo.less
-.plan-basic-info{
+.plan-basic-info {
  .label {
    width: 110px;
    text-align: right;
-      display:inline-block;
+    display: inline-block;
-      font-size:14px;
+    font-size: 14px;
-      color:#666;
+    color: #666;
    .require {
-        color: #EC4B35;
+      color: #ec4b35;
    }
-      .iconfont{
+    .iconfont {
-        font-size:14px;
+      font-size: 14px;
-        color:#BFBFBF;
+      color: #bfbfbf;
    }
  }
  .cover {
    display: flex;
-        margin-top: 16px;
+    margin-top: 24px;
    &__wrap {
      position: relative;
-          display: flex;
      .tag {
        border-radius: 2px;
-            background: #D6D6D6;
+        background: #d6d6d6;
        font-size: 12px;
        height: 18px;
        width: 52px;
        text-align: center;
-            color: #FFF;
+        color: #fff;
        position: absolute;
        top: 8px;
        left: 8px;
      }
    }
    .img-content {
-          margin-right: 20px;
+      position: relative;
+      margin-top: 8px;
      width: 299px;
      height: 169px;
      img {
@@ -42,90 +42,94 @@
        object-fit: contain;
      }
    }
-        .opt-btns{
+    .opt-btns {
      .default-btn {
-            margin:0 8px;
+        margin-left: 14px;
-            color: #2966FF;
+        color: #2966ff;
        cursor: pointer;
        &.disabled {
-              color: #CCC;
+          color: #ccc;
          cursor: not-allowed;
        }
      }
-          .tips{
+      .tips {
-            margin-top:8px;
+        margin-top: 8px;
-            font-size:14px;
+        font-size: 14px;
-            color:#999;
+        color: #999;
      }
    }
  }
-    .introduction{
+  .introduction {
-        margin-top:16px;
+    display: flex;
-        .instro-textarea{
+    margin-top: 24px;
+    .instro-textarea {
      vertical-align: top;
    }
  }
-    .wether-use{
+  .wether-use {
-        display:flex;
+    display: flex;
-        margin-top:16px;
+    margin-top: 34px;
-        .instro-text{
+    .instro-text {
-            color:#999;
+      color: #999;
-            margin-left:12px;
+      margin-left: 12px;
    }
-        .content{
+    .content {
-            display:flex;
+      display: flex;
    }
  }
-    .view-range{
+  .view-range {
-        display:flex;
+    display: flex;
-        margin-top:16px;
+    margin-top: 24px;
-        .label{
+    .label {
-          margin-top:2px;
+      margin-top: 2px;
    }
-        .instro-text{
+    .instro-text {
-          color:#999;
+      color: #999;
-          margin-left:12px;
+      margin-left: 12px;
    }
-        .choose-business{
+    .choose-business {
-            margin-top:16px;
+      margin-top: 12px;
+      margin-left: 24px;
+      .ant-btn {
+        margin-right: 12px;
      }
-        .playback__text{
-          margin-left:12px;
-          color:#999999;
    }
+    .playback__text {
+      margin-left: 12px;
+      color: #999999;
    }
-    .done-standard{
+  }
+  .done-standard {
    display: flex;
-      margin-top:22px;
+    margin-top: 22px;
-      .standard-label{
+    .standard-label {
-        margin-top:3px;
+      margin-top: 3px;
    }
-      .live-standard-info{
+    .live-standard-info {
-        margin-bottom:10px;
+      margin-bottom: 10px;
    }
-      input{
+    input {
-        display:inline-block;
+      display: inline-block;
-        width:90px;
+      width: 90px;
-        height:32px;
+      height: 32px;
    }
-      .icon{
+    .icon {
-        color:#A0A0A0;
+      color: #a0a0a0;
-        font-size:14px;
+      font-size: 14px;
-        margin-right:4px;
+      margin-right: 4px;
    }
-      .instro{
+    .instro {
-        color:#333333;
+      color: #333333;
-        font-size:14px;
+      font-size: 14px;
    }
-      .input-box{
+    .input-box {
      width: 60px;
      height: 32px;
      border-radius: 4px;
-        border: 1px solid #E8E8E8;
+      border: 1px solid #e8e8e8;
-        color:#333333;
+      color: #333333;
-        font-size:14px;
+      font-size: 14px;
-        margin:0 2px;
+      margin: 0 2px;
    }
  }
 }
--- a/src/modules/plan-manage/components/ExpiredCourseList.jsx
+++ b/src/modules/plan-manage/components/ExpiredCourseList.jsx
@@ -18,7 +18,7 @@ function ExpiredCourseList(props) {
                                    <span>直播课</span>
                                }
                                 { item.courseType === "VOICE " &&
-                                    <span>视频课</span>
+                                    <span>线上课</span>
                                }
                            </div>
                            <div className="course-instro">

--- a/src/modules/plan-manage/components/PlanList.jsx
+++ b/src/modules/plan-manage/components/PlanList.jsx
 /*
 * @Author: zhangleyuan
 * @Date: 2021-02-20 16:46:46
- * @LastEditors: fusanqiasng
+ * @LastEditors: wufan
- * @LastEditTime: 2021-06-01 11:45:34
+ * @LastEditTime: 2021-07-16 11:29:13
 * @Description: 描述一下
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -52,7 +52,6 @@ function PlanList(props) {
        title: '课程总数量',
        key: 'courseNum',
        dataIndex: 'courseNum',
-        width: 110,
        render: (val, record) => {
          return <div className='course-number'>{val}</div>;
        },

--- a/src/modules/plan-manage/components/PlanList.less
+++ b/src/modules/plan-manage/components/PlanList.less
 .plan-list {
  margin-top: 12px;
  .course-number {
-    text-align: right;
    margin-right: 45px;
  }

--- a/src/modules/plan-manage/components/TrainingTask.jsx
+++ b/src/modules/plan-manage/components/TrainingTask.jsx
 /*
+ * @Author: yuananting
+ * @Date: 2021-07-05 10:49:01
+ * @LastEditors: yuananting
+ * @LastEditTime: 2021-07-05 11:02:04
+ * @Description: 描述一下咯
+ * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+/*
 * @Author: zhangleyuan
 * @Date: 2021-02-20 16:45:51
- * @LastEditors: fusanqiasng
+ * @LastEditors: yuananting
- * @LastEditTime: 2021-05-24 15:15:06
+ * @LastEditTime: 2021-07-01 17:16:50
 * @Description: 描述一下
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
-import React from 'react'
+import React from 'react';
-import { Input, Form, Modal } from 'antd'
+import { Input, Form, Modal } from 'antd';
-import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc'
+import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
-import arrayMove from 'array-move'
+import arrayMove from 'array-move';
-import RelatedCourseModal from '../modal/relatedCourseModal'
+import RelatedCourseModal from '../modal/relatedCourseModal';
-import { withRouter } from 'react-router-dom'
+import { withRouter } from 'react-router-dom';
-import './TrainingTask.less'
+import './TrainingTask.less';
-const { confirm } = Modal
+const { confirm } = Modal;
 const CourseType = {
  LIVE: {
-    text: '直播课'
+    text: '直播课',
  },
  VOICE: {
-    text: '视频课'
+    text: '线上课',
  },
  RECORD: {
-    text: '录播课'
+    text: '录播课',
  },
  PICTURE: {
-    text: '图文课'
+    text: '图文课',
-  }
+  },
-}
+};
 const courseStateShow = {
  UN_START: {
-    title: '待开播'
+    title: '待开播',
  },
  STARTING: {
-    title: '直播中'
+    title: '直播中',
  },
  FINISH: {
-    title: '回放'
+    title: '回放',
  },
  EXPIRED: {
-    title: '未成功开课'
+    title: '未成功开课',
-  }
+  },
-}
+};
 const DragHandle = sortableHandle(() => (
  <span className='operate__item'>
    <span className='icon iconfont'>&#xe7cd;</span>
    <span className='text'>移动</span>
  </span>
-))
+));
-const SortableTaskItem = sortableElement((props) => <div {...props}>{props.taskitem}</div>)
+const SortableTaskItem = sortableElement((props) => <div {...props}>{props.taskitem}</div>);
-const SortableTaskContainer = sortableContainer((props) => <div {...props}></div>)
+const SortableTaskContainer = sortableContainer((props) => <div {...props}></div>);
-const SortableCourseItem = sortableElement((props) => <div {...props}>{props.courseitem}</div>)
+const SortableCourseItem = sortableElement((props) => <div {...props}>{props.courseitem}</div>);
-const SortableCourseContainer = sortableContainer((props) => <div {...props}></div>)
+const SortableCourseContainer = sortableContainer((props) => <div {...props}></div>);
 class TrainingTask extends React.Component {
  constructor(props) {
-    super(props)
+    super(props);
    this.state = {
      dataSource: this.props.data,
      selectedTaskIndex: 0,
-      relatedCourseModalVisible: false
+      relatedCourseModalVisible: false,
-    }
+    };
  }
  componentWillMount() {}
  componentWillReceiveProps(nextProps) {}
  onTaskSortEnd = ({ oldIndex, newIndex }) => {
-    const { dataSource } = this.state
+    const { dataSource } = this.state;
    if (oldIndex !== newIndex) {
-      const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter((el) => !!el)
+      const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter((el) => !!el);
      this.setState(
        {
-          dataSource: newData
+          dataSource: newData,
        },
        () => {
-          this.props.onChange(newData)
+          this.props.onChange(newData);
-        }
-      )
        }
+      );
    }
+  };
  onCourseSortEnd = ({ oldIndex, newIndex }, parentIndex) => {
-    const { dataSource } = this.state
+    const { dataSource } = this.state;
-    const _dataSource = [...dataSource]
+    const _dataSource = [...dataSource];
    if (oldIndex !== newIndex) {
-      _dataSource[parentIndex].courseList = arrayMove([].concat(dataSource[parentIndex].courseList), oldIndex, newIndex).filter((el) => !!el)
+      _dataSource[parentIndex].courseList = arrayMove([].concat(dataSource[parentIndex].courseList), oldIndex, newIndex).filter((el) => !!el);
      this.setState(
        {
-          dataSource: _dataSource
+          dataSource: _dataSource,
        },
        () => {
-          this.props.onChange(_dataSource)
+          this.props.onChange(_dataSource);
-        }
-      )
        }
+      );
    }
+  };
  addTask = () => {
-    const { dataSource } = this.state
+    const { dataSource } = this.state;
    const taskObj = {
      taskName: '',
      index: dataSource.length,
      type: 'input',
      open: true,
-      courseList: []
+      courseList: [],
-    }
+    };
-    const newData = [...dataSource, taskObj]
+    const newData = [...dataSource, taskObj];
    this.setState(
      {
-        dataSource: newData
+        dataSource: newData,
      },
      () => {
-        this.props.onChange(newData)
+        this.props.onChange(newData);
-      }
-    )
      }
+    );
+  };
  handleRenameTaskName = (e, record) => {
-    const { value } = e.target
+    const { value } = e.target;
-    const { dataSource } = this.state
+    const { dataSource } = this.state;
-    record.taskName = value
+    record.taskName = value;
    this.setState(
      {
-        dataSource
+        dataSource,
      },
      () => {
-        this.props.onChange(dataSource)
+        this.props.onChange(dataSource);
-      }
-    )
      }
+    );
+  };
  handleTaskNameBlur = (e, record) => {
-    const { value } = e.target
+    const { value } = e.target;
-    const { dataSource } = this.state
+    const { dataSource } = this.state;
-    let input = /^[\s]*$/
+    let input = /^[\s]*$/;
    if (value && !input.test(value)) {
-      record.type = 'text'
+      record.type = 'text';
      this.setState(
        {
-          dataSource
+          dataSource,
        },
        () => {
-          this.props.onChange(dataSource)
+          this.props.onChange(dataSource);
-        }
-      )
        }
+      );
    }
+  };
  handleRenameCourseName = (e, record) => {
-    const { value } = e.target
+    const { value } = e.target;
-    const { dataSource } = this.state
+    const { dataSource } = this.state;
-    record.courseName = value
+    record.courseName = value;
    this.setState(
      {
-        dataSource
+        dataSource,
      },
      () => {
-        this.props.onChange(dataSource)
+        this.props.onChange(dataSource);
-      }
-    )
      }
+    );
+  };
  handleCourseNameBlur = (e, record) => {
-    const { value } = e.target
+    const { value } = e.target;
-    const { dataSource } = this.state
+    const { dataSource } = this.state;
-    let input = /^[\s]*$/
+    let input = /^[\s]*$/;
    if (value && !input.test(value)) {
-      record.type = 'text'
+      record.type = 'text';
      this.setState(
        {
-          dataSource
+          dataSource,
        },
        () => {
-          this.props.onChange(dataSource)
+          this.props.onChange(dataSource);
-        }
-      )
        }
+      );
    }
+  };
  handleDeleteTask = (index) => {
    return confirm({
      title: '删除任务',
@@ -191,23 +200,23 @@ class TrainingTask extends React.Component {
      okType: 'danger',
      cancelText: '取消',
      onOk: () => {
-        this.handleConfirmDeleteTask(index)
+        this.handleConfirmDeleteTask(index);
-      }
+      },
-    })
+    });
-  }
+  };
  handleConfirmDeleteTask = (index) => {
-    const { dataSource } = this.state
+    const { dataSource } = this.state;
-    const newData = [...dataSource]
+    const newData = [...dataSource];
-    newData.splice(index, 1)
+    newData.splice(index, 1);
    this.setState(
      {
-        dataSource: newData
+        dataSource: newData,
      },
      () => {
-        this.props.onChange(newData)
+        this.props.onChange(newData);
-      }
-    )
      }
+    );
+  };
  handleDeleteCourse = (parentIndex, index) => {
    return confirm({
@@ -218,82 +227,82 @@ class TrainingTask extends React.Component {
      okType: 'danger',
      cancelText: '取消',
      onOk: () => {
-        this.handleConfirmDeleteCourse(parentIndex, index)
+        this.handleConfirmDeleteCourse(parentIndex, index);
-      }
+      },
-    })
+    });
-  }
+  };
  handleConfirmDeleteCourse = (parentIndex, index) => {
-    const { dataSource } = this.state
+    const { dataSource } = this.state;
-    const newData = [...dataSource]
+    const newData = [...dataSource];
-    const selectData = [...newData[parentIndex].courseList]
+    const selectData = [...newData[parentIndex].courseList];
-    selectData.splice(index, 1)
+    selectData.splice(index, 1);
-    newData[parentIndex].courseList = selectData
+    newData[parentIndex].courseList = selectData;
    this.setState(
      {
-        dataSource: newData
+        dataSource: newData,
      },
      () => {
-        this.props.onChange(newData)
+        this.props.onChange(newData);
-      }
-    )
      }
+    );
+  };
  showRelatedCourseModal = (index) => {
    this.setState({
      selectedTaskIndex: index,
-      relatedCourseModalVisible: true
+      relatedCourseModalVisible: true,
-    })
+    });
-  }
+  };
  closeRelatedCourseModal = (index) => {
    this.setState({
-      relatedCourseModalVisible: false
+      relatedCourseModalVisible: false,
-    })
+    });
-  }
+  };
  confirmSelectCourse = (selectList) => {
-    console.log('selectList', selectList)
+    console.log('selectList', selectList);
-    const { selectedTaskIndex } = this.state
+    const { selectedTaskIndex } = this.state;
-    const { dataSource } = this.state
+    const { dataSource } = this.state;
-    const newData = [...dataSource]
+    const newData = [...dataSource];
-    const selectData = [...newData[selectedTaskIndex].courseList]
+    const selectData = [...newData[selectedTaskIndex].courseList];
-    const _selectData = [...selectData, ...selectList]
+    const _selectData = [...selectData, ...selectList];
-    newData[selectedTaskIndex].courseList = _selectData
+    newData[selectedTaskIndex].courseList = _selectData;
    this.setState(
      {
        relatedCourseModalVisible: false,
-        dataSource: newData
+        dataSource: newData,
      },
      () => {
-        this.props.onChange(newData)
+        this.props.onChange(newData);
-      }
-    )
      }
+    );
+  };
  openOrCloseTask = (index) => {
-    const { dataSource } = this.state
+    const { dataSource } = this.state;
-    const newData = [...dataSource]
+    const newData = [...dataSource];
-    newData[index].open = !newData[index].open
+    newData[index].open = !newData[index].open;
    this.setState(
      {
-        dataSource: newData
+        dataSource: newData,
      },
      () => {
-        this.props.onChange(newData)
+        this.props.onChange(newData);
-      }
-    )
      }
+    );
+  };
  handleValidatorTaskName = (rule, value) => {
-    let input = /^[\s]*$/
+    let input = /^[\s]*$/;
    if (input.test(value) || !value) {
-      return Promise.reject(new Error('请输入任务名称'))
+      return Promise.reject(new Error('请输入任务名称'));
-    }
-    return Promise.resolve()
    }
+    return Promise.resolve();
+  };
  handleValidatorCourseName = (rule, value) => {
-    let input = /^[\s]*$/
+    let input = /^[\s]*$/;
    if (input.test(value) || !value) {
-      return Promise.reject(new Error('请输入课程名称'))
+      return Promise.reject(new Error('请输入课程名称'));
-    }
-    return Promise.resolve()
    }
+    return Promise.resolve();
+  };
  renderTaskItem = (record, index) => {
    return (
@@ -314,8 +323,8 @@ class TrainingTask extends React.Component {
                      name={['taskName']}
                      rules={[
                        {
-                          validator: (rule, value) => this.handleValidatorTaskName(rule, value)
+                          validator: (rule, value) => this.handleValidatorTaskName(rule, value),
-                        }
+                        },
                      ]}>
                      <Input
                        className='task-name-input'
@@ -323,10 +332,10 @@ class TrainingTask extends React.Component {
                        placeholder='请输入任务名称（20字以内）'
                        maxLength={20}
                        onChange={(e) => {
-                          this.handleRenameTaskName(e, record)
+                          this.handleRenameTaskName(e, record);
                        }}
                        onBlur={(e) => {
-                          this.handleTaskNameBlur(e, record)
+                          this.handleTaskNameBlur(e, record);
                        }}
                      />
                    </Form.Item>
@@ -346,9 +355,9 @@ class TrainingTask extends React.Component {
            <span
              className='operate__item'
              onClick={() => {
-                const { dataSource } = this.state
+                const { dataSource } = this.state;
-                record.type = 'input'
+                record.type = 'input';
-                this.setState({ dataSource })
+                this.setState({ dataSource });
              }}>
              <span className='icon iconfont'>&#xe6f5;</span>
              <span className='text'>重命名</span>
@@ -356,7 +365,7 @@ class TrainingTask extends React.Component {
            <span
              className='operate__item'
              onClick={() => {
-                this.handleDeleteTask(index)
+                this.handleDeleteTask(index);
              }}>
              <span className='icon iconfont'>&#xe6f6;</span>
              <span className='text'>删除</span>
@@ -377,7 +386,7 @@ class TrainingTask extends React.Component {
                  <span
                    className='add-course-btn-disabled'
                    onClick={() => {
-                      this.showRelatedCourseModal(index)
+                      this.showRelatedCourseModal(index);
                    }}>
                    <span>+</span>
                    <span>关联课程</span>
@@ -387,7 +396,7 @@ class TrainingTask extends React.Component {
                  <span
                    className='add-course-btn'
                    onClick={() => {
-                      this.showRelatedCourseModal(index)
+                      this.showRelatedCourseModal(index);
                    }}>
                    <span>+</span>
                    <span>关联课程</span>
@@ -398,9 +407,10 @@ class TrainingTask extends React.Component {
          </div>
        )}
      </div>
-    )
+    );
-  }
+  };
  renderCourseItem = (record, index, parentIndex) => {
+    console.log(record);
    return (
      <div className='plan-course-sort-item'>
        <div className='course-info'>
@@ -414,8 +424,8 @@ class TrainingTask extends React.Component {
                  name={['courseName']}
                  rules={[
                    {
-                      validator: (rule, value) => this.handleValidatorCourseName(rule, value)
+                      validator: (rule, value) => this.handleValidatorCourseName(rule, value),
-                    }
+                    },
                  ]}>
                  <Input
                    className='course-name-input'
@@ -423,10 +433,10 @@ class TrainingTask extends React.Component {
                    placeholder='请输入课程名称（40字以内）'
                    maxLength={40}
                    onChange={(e) => {
-                      this.handleRenameCourseName(e, record)
+                      this.handleRenameCourseName(e, record);
                    }}
                    onBlur={(e) => {
-                      this.handleCourseNameBlur(e, record)
+                      this.handleCourseNameBlur(e, record);
                    }}
                  />
                </Form.Item>
@@ -441,6 +451,7 @@ class TrainingTask extends React.Component {
          {record.courseState === 'EXPIRED' && <span className='icon iconfont tip'>&#xe834;</span>}
          {record.courseType === 'LIVE' && <span className='course-state'>{courseStateShow[record.courseState].title}</span>}
+          {record.courseType === 'VOICE' && <span>（共{record.courseChapterNum || 1}小节）</span>}
        </div>
        <div className='course-operate'>
          <DragHandle />
@@ -448,18 +459,18 @@ class TrainingTask extends React.Component {
          <span
            className='operate__item'
            onClick={() => {
-              this.handleDeleteCourse(parentIndex, index)
+              this.handleDeleteCourse(parentIndex, index);
            }}>
            <span className='icon iconfont'>&#xe6f6;</span>
            <span className='text'>删除</span>
          </span>
        </div>
      </div>
-    )
+    );
-  }
+  };
  render() {
-    const { dataSource, selectedTaskIndex, relatedCourseModalVisible } = this.state
+    const { dataSource, selectedTaskIndex, relatedCourseModalVisible } = this.state;
-    console.log('dataSource', dataSource)
+    console.log('dataSource', dataSource);
    return (
      <div className='training-task'>
        <SortableTaskContainer useDragHandle disableAutoscroll helperClass='row-dragging' onSortEnd={this.onTaskSortEnd} className='plan-task-sort-container'>
@@ -494,8 +505,8 @@ class TrainingTask extends React.Component {
          />
        )}
      </div>
-    )
+    );
  }
 }
-export default withRouter(TrainingTask)
+export default withRouter(TrainingTask);
--- a/src/modules/plan-manage/components/UserLearningDataFilter.jsx
+++ b/src/modules/plan-manage/components/UserLearningDataFilter.jsx
@@ -8,11 +8,11 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { withRouter } from 'react-router-dom';
-import { Row, Input, Select ,Tooltip} from 'antd';
+import { Row, Input, Select, Tooltip } from 'antd';
-import RangePicker from "@/modules/common/DateRangePicker";
+import RangePicker from '@/modules/common/DateRangePicker';
 import moment from 'moment';
-import StoreService from "@/domains/store-domain/storeService";
+import StoreService from '@/domains/store-domain/storeService';
-import User from '@/common/js/user'
+import User from '@/common/js/user';
 import Bus from '@/core/bus';
 import './UserLearningDataFilter.less';
@@ -22,55 +22,52 @@ const userRole =  User.getUserRole();
 const DEFAULT_QUERY = {
  customerName: null,
  startTime: null,
-  endTime:null,
+  endTime: null,
-  learnState:null,
+  learnState: null,
  operateId: null,
-}
+};
 const defaultCreatorQuery = {
  size: 10,
  current: 1,
-  nickName:null
+  nickName: null,
-}
+};
 function UserLearningDataFilter(props) {
  const [expandFilter, setExpandFilter] = useState(false);
-  const [query,setQuery] = useState(DEFAULT_QUERY);
+  const [query, setQuery] = useState(DEFAULT_QUERY);
-  const [operateName,setOperateName] = useState(null)
+  const [operateName, setOperateName] = useState(null);
-  const [hasNext,setHasNext] = useState(false);
+  const [hasNext, setHasNext] = useState(false);
-  const [creatorQuery,setCreatorQuery] = useState(defaultCreatorQuery);
+  const [creatorQuery, setCreatorQuery] = useState(defaultCreatorQuery);
-  const [creatorList,setCreatorList] =  useState([]);
+  const [creatorList, setCreatorList] = useState([]);
  useEffect(() => {
-    Bus.bind('watchDataView',(record) => handleChangeCreatorQuery(record))
+    Bus.bind('watchDataView', (record) => handleChangeCreatorQuery(record));
-  });
+  }, []);
  useEffect(() => {
    getCreatorList();
  }, []);
-  function handleChangeCreatorQuery (record){
+  function handleChangeCreatorQuery(record) {
-    const _creatorQuery = {...creatorQuery};
+    const _creatorQuery = { ...creatorQuery };
    _creatorQuery.operateId = record.storeUserId;
    setCreatorQuery(_creatorQuery);
-    handleChangeQuery('operateId', record.storeUserId,record.storeUserName)
+    handleChangeQuery('operateId', record.storeUserId, record.storeUserName);
  }
  // 改变搜索条件
-  function handleChangeQuery(field,value,optionValue){
+  function handleChangeQuery(field, value, optionValue) {
-    const _query ={
+    const _query = {
      ...query,
      [field]: value,
      current: 1,
-    } 
+    };
    setQuery(_query);
-    if(field === 'operateId'){
+    if (field === 'operateId') {
-      setOperateName(optionValue)
+      setOperateName(optionValue);
    }
    if (field === 'customerName') return;
-    props.onChange( _query);
+    props.onChange(_query);
  }
+  function handleChangeDates(dates) {
-  function handleChangeDates (dates){
    const _query = _.clone(query);
    if (_.isEmpty(dates)) {
      delete _query.startTime;
@@ -79,27 +76,27 @@ function UserLearningDataFilter(props) {
      _query.startTime = dates[0].valueOf();
      _query.endTime = dates[1].valueOf();
    }
-    const param ={
+    const param = {
      ..._query,
      current: 1,
-    }
+    };
    setQuery(param);
    props.onChange(param);
  }
  // 重置搜索条件
-  function  handleReset(){
+  function handleReset() {
    setQuery(DEFAULT_QUERY);
    props.onChange(DEFAULT_QUERY);
  }
-  function getCreatorList(current = 1, selectList){
+  function getCreatorList(current = 1, selectList) {
    const _query = {
      ...creatorQuery,
      current,
-      size:10
+      size: 10,
    };
-    StoreService.getStoreUserBasicPage( _query).then((res) => {
+    StoreService.getStoreUserBasicPage(_query).then((res) => {
      const { result = {} } = res;
      const { records = [], total = 0, hasNext } = result;
      const list = current > 1 ? creatorList.concat(records) : records;
@@ -109,119 +106,148 @@ function UserLearningDataFilter(props) {
  }
  // 滑动加载更多讲师列表
-  function handleScrollCreatorList(e){
+  function handleScrollCreatorList(e) {
    const container = e.target;
    const scrollToBottom = container && container.scrollHeight <= container.clientHeight + container.scrollTop;
    if (scrollToBottom && hasNext) {
-      const _creatorQuery = {...creatorQuery};
+      const _creatorQuery = { ...creatorQuery };
      _creatorQuery.current = creatorQuery.current + 1;
      setCreatorQuery(_creatorQuery);
      getCreatorList(creatorQuery.current + 1);
    }
  }
  return (
-      <div className="user-learn-data-filter">
+    <div className='user-learn-data-filter'>
      <Row>
-            <div className="search-condition">
+        <div className='search-condition'>
-              <div className="search-condition__item">
+          <div className='search-condition__item'>
-                <span className="label customer-label">学员：</span>
+            <span className='label customer-label'>学员：</span>
            <Search
              value={query.customerName}
-                  placeholder="搜索学员名称"
+              placeholder='搜索学员名称'
-                  onChange={(e) => { handleChangeQuery('customerName', e.target.value)}}
+              onChange={(e) => {
-                  onSearch={ () => { props.onChange(query) } }
+                handleChangeQuery('customerName', e.target.value);
-                  style={{ width: "calc(100% - 70px)" }}
+              }}
-                  enterButton={<span className="icon iconfont">&#xe832;</span>}
+              onSearch={() => {
+                props.onChange(query);
+              }}
+              style={{ width: 'calc(100% - 70px)' }}
+              enterButton={<span className='icon iconfont'>&#xe832;</span>}
            />
          </div>
-              {(User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager")&&
+          {(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
-                <div className="search-condition__item">
+            <div className='search-condition__item'>
-                    <span className="label lead-label">负责人：</span>
+              <span className='label lead-label'>负责人：</span>
              <Select
-                      id="leadSelect"
+                id='leadSelect'
-                      placeholder="请选择员工"
+                placeholder='请选择员工'
-                      style={{width:"calc(100% - 70px)"}}
+                style={{ width: 'calc(100% - 70px)' }}
                showSearch
                allowClear
                filterOption={(input, option) => option}
-                      suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}
+                suffixIcon={
+                  <span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
+                    &#xe835;
+                  </span>
+                }
                onPopupScroll={handleScrollCreatorList}
                value={operateName}
-                      onChange={(value,option) => {
+                onChange={(value, option) => {
-                        if(option){
+                  if (option) {
-                          handleChangeQuery('operateId',value,option.children)  
+                    handleChangeQuery('operateId', value, option.children);
-                        }else{
+                  } else {
-                          handleChangeQuery('operateId',value,"") 
+                    handleChangeQuery('operateId', value, '');
                  }
                }}
                onSearch={(value) => {
-                          creatorQuery.nickName = value
+                  creatorQuery.nickName = value;
-                          setCreatorQuery(creatorQuery)
+                  setCreatorQuery(creatorQuery);
                  getCreatorList();
-                        }
+                }}
-                      }
+                onClear={(value) => {
-                      onClear ={(value)=>{
                  setCreatorQuery({
                    size: 10,
                    current: 1,
-                          nickName:null
+                    nickName: null,
-                        })
+                  });
-                        getCreatorList()
+                  getCreatorList();
-                      }
+                }}>
-                    }
-                    >
                {_.map(creatorList, (item, index) => {
                  return (
-                          <Select.Option value={item.id} key={item.id}>{item.nickName}</Select.Option>
+                    <Select.Option value={item.id} key={item.id}>
+                      {item.nickName}
+                    </Select.Option>
                  );
                })}
              </Select>
            </div>
-              }
+          )}
-              <div className="search-condition__item">
+          <div className='search-condition__item'>
-                <span  className="label learn-date-label">最近学习日期：</span>
+            <span className='label learn-date-label'>最近学习日期：</span>
            <RangePicker
-                  id="course_date_picker"
+              id='course_date_picker'
              allowClear={false}
-                  value={ query.startTime ? [moment(query.startTime), moment(query.endTime)] : null }
+              value={query.startTime ? [moment(query.startTime), moment(query.endTime)] : null}
-                  format={"YYYY-MM-DD"}
+              format={'YYYY-MM-DD'}
-                  onChange={(dates) => { handleChangeDates(dates) }}
+              onChange={(dates) => {
-                  style={{ width: "calc(100% - 98px)" }}
+                handleChangeDates(dates);
+              }}
+              style={{ width: 'calc(100% - 98px)' }}
            />
          </div>
-              { ((expandFilter && (User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager")) ||   User.getUserRole === "CloudOperator")&&
+          {((expandFilter && (User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager')) || User.getUserRole === 'CloudOperator') && (
-                <div className="search-condition__item">
+            <div className='search-condition__item'>
-                  <span  className="label learn-status-label">学习状态：</span>
+              <span className='label learn-status-label'>学习状态：</span>
              <Select
-                    style={{ width: "calc(100% - 70px)" }}
+                style={{ width: 'calc(100% - 70px)' }}
-                    placeholder="请选择当前状态"
+                placeholder='请选择当前状态'
                allowClear={true}
                value={query.learnState}
-                    onChange={(value) => { handleChangeQuery('learnState', value) }}
+                onChange={(value) => {
-                    suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}
+                  handleChangeQuery('learnState', value);
-                  >
+                }}
-                    <Option value="UN_PLAY">未开始</Option>
+                suffixIcon={
-                    <Option value="UNDER_WAY">进行中</Option>
+                  <span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
-                    <Option value="FINISH">已完成</Option>
+                    &#xe835;
+                  </span>
+                }>
+                <Option value='UN_PLAY'>未开始</Option>
+                <Option value='UNDER_WAY'>进行中</Option>
+                <Option value='FINISH'>已完成</Option>
              </Select>
            </div>
-              }
+          )}
        </div>
-          {( User.getUserRole() === "CloudManager" ||  User.getUserRole() === "StoreManager")&&
+        {(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
-            <div className="reset-fold-area">
+          <div className='reset-fold-area'>
-              <Tooltip title="清空筛选"><span className="resetBtn iconfont icon" onClick={handleReset}>&#xe61b; </span></Tooltip>
+            <Tooltip title='清空筛选'>
-              <span style={{ cursor: 'pointer' }} className="fold-btn" onClick={() => {
+              <span className='resetBtn iconfont icon' onClick={handleReset}>
-                setExpandFilter(!expandFilter)
+                &#xe61b;{' '}
-              }}>{expandFilter ? <span><span>收起</span><span className="iconfont icon fold-icon" >&#xe82d; </span> </span> : <span>展开<span className="iconfont icon fold-icon" >&#xe835; </span></span>}</span>
+              </span>
+            </Tooltip>
+            <span
+              style={{ cursor: 'pointer' }}
+              className='fold-btn'
+              onClick={() => {
+                setExpandFilter(!expandFilter);
+              }}>
+              {expandFilter ? (
+                <span>
+                  <span>收起</span>
+                  <span className='iconfont icon fold-icon'>&#xe82d; </span>{' '}
+                </span>
+              ) : (
+                <span>
+                  展开<span className='iconfont icon fold-icon'>&#xe835; </span>
+                </span>
+              )}
+            </span>
          </div>
-          }
+        )}
      </Row>
    </div>
-    )
+  );
 }
 export default withRouter(UserLearningDataFilter);
--- a/src/modules/plan-manage/modal/UserLearnDetailModal.jsx
+++ b/src/modules/plan-manage/modal/UserLearnDetailModal.jsx
+/*
+ * @Author: yuananting
+ * @Date: 2021-07-05 10:50:30
+ * @LastEditors: yuananting
+ * @LastEditTime: 2021-07-14 14:32:55
+ * @Description: 描述一下咯
+ * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
 import React from 'react';
-import {Table, Modal,Input} from 'antd';
+import { Table, Modal, Input } from 'antd';
-import { PageControl } from "@/components";
+import PlanService from '@/domains/plan-domain/planService';
-import PlanService from '@/domains/plan-domain/planService'
+import User from '@/common/js/user';
-import User from '@/common/js/user'
 import './UserLearnDetailModal.less';
-import _ from "underscore";
+import _ from 'underscore';
-const { Search } = Input;
+import { FileTypeIcon } from '@/common/constants/academic/lessonEnum'
-const defaultCover = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
+const defaultCover = 'https://image.xiaomaiketang.com/xm/rEAetaTEh3.png';
 const CourseType = {
  LIVE: {
-    text: "直播课"
+    text: '直播课',
  },
-  VOICE : {
+  VOICE: {
-    text:"视频课"
+    text: '线上课',
  },
-  RECORD : {
+  RECORD: {
-    text:'录播课'
+    text: '录播课',
+  },
+  PICTURE: {
+    text: '图文课',
  },
-  PICTURE:{
-    text:'图文课'
-  }
 };
 const courseStateShow = {
  UN_START: {
-    title: "待开播",
+    title: '待开播',
  },
  STARTING: {
-    title: "直播中",
+    title: '直播中',
  },
  FINISH: {
-    title: "回放",
+    title: '回放',
  },
  EXPIRED: {
-    title: "未成功开课",
+    title: '未成功开课',
  },
 };
 class UserLearnDetailModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
-      planDataSource:{},
+      planDataSource: {},
-      taskDataSource:[],
+      taskDataSource: [],
-      taskSize:10,
+      taskSize: 10,
      taskQuery: {
        current: 1,
      },
-      taskTotalCount:0,
+      taskTotalCount: 0,
-      courseDataSource:[],
+      courseDataSource: [],
-      storeCustomerName:'',
+      storeCustomerName: '',
-      storeCustomerPhone:''
+      storeCustomerPhone: '',
    };
  }
  componentDidMount() {
    this.getPlanCustomerDetail();
  }
-  getPlanCustomerDetail = ()=>{
+  getPlanCustomerDetail = () => {
    PlanService.getPlanCustomerDetail({
-       planId:getParameterByName("id"),
+      planId: getParameterByName('id'),
-       storeCustomerId:this.props.storeCustomerId,
+      storeCustomerId: this.props.storeCustomerId,
-       storeId:User.getStoreId()
+      storeId: User.getStoreId(),
    }).then((res) => {
-      const {
+      const { storeCustomerName, storeCustomerPhone, planName, learnFinishPercentage, taskCustomerVOList, courseMediaVOS } = res.result;
-        storeCustomerName,
-        storeCustomerPhone,
-        planName,
-        learnFinishPercentage,
-        taskCustomerVOList,
-        courseMediaVOS,
-      }=res.result;
      let coverUrl;
      courseMediaVOS.map((item) => {
-          if(item.contentType === "COVER"){
+        if (item.contentType === 'COVER') {
          coverUrl = item.mediaUrl;
        }
        return item;
-        })
+      });
      const planDataSource = {
        planName,
        learnFinishPercentage,
-          coverUrl:coverUrl || defaultCover
+        coverUrl: coverUrl || defaultCover,
-        }
+      };
      this.setState({
        storeCustomerName,
        storeCustomerPhone,
        planDataSource,
-          taskDataSource:taskCustomerVOList
+        taskDataSource: taskCustomerVOList,
-        })
+      });
-    })
+    });
-  }
+  };
+  parsePlanDataColumns = () => {
+    const columns = [
+      {
+        title: '培训计划名称',
+        key: 'planName',
+        dataIndex: 'planName',
+        width: '77%',
+        render: (val, record, index) => {
+          return (
+            <div className='record-name'>
+              <div className='img-con'>
+                <img src={record.coverUrl} />
+              </div>
+              <div>{record.planName}</div>
+            </div>
+          );
+        },
+      },
+      {
+        title: '学习进度',
+        key: 'learnFinishPercentage',
+        dataIndex: 'learnFinishPercentage',
+        render: (val, record, index) => {
+          return <div>{val}%</div>;
+        },
+      },
+    ];
+    return columns;
+  };
  parseTaskColumns = () => {
    const columns = [
@@ -95,133 +126,169 @@ class UserLearnDetailModal extends React.Component {
        title: '培训任务',
        key: 'taskName',
        dataIndex: 'taskName',
-        render: (val, record,index) => {
+        width: '68%',
+        render: (val, record, index) => {
          return (
-            <div className="taskName">
+            <div className='taskName'>
              {index + 1}.{record.taskName}
            </div>
-          )
+          );
-        }
+        },
      },
      {
        title: '学习进度',
        key: 'learnFinishPercentage',
        dataIndex: 'learnFinishPercentage',
-        width:167,
        render: (val, record) => {
-          return (
+          return <div className='task-learn-percentage'>{val === 100 ? <span>已完成</span> : <span>{val}%</span>}</div>;
-            <div className="task-learn-percentage">
+        },
-              { val === 100 ?<span>已完成</span>:<span>{val}%</span>}
+      },
-            </div>
-          )
-        }
-      }
    ];
    return columns;
-  }
+  };
-  parseCoursecolumns = (parentIndex) => {
+  parseCourseColumns = (parentIndex) => {
    const columns = [
      {
        title: '课程',
        key: 'courseName',
        dataIndex: 'courseName',
-        render: (val, record,index) => {
+        width: '70%',
+        render: (val, record, index) => {
          return (
-            <div className="course-info">
+            <div className='course-info'>
              <div>
-                <span className="course-type">{CourseType[record.courseType].text}</span>
+                <span className='course-type'>{CourseType[record.courseType].text}</span>
-                <span>{parentIndex + 1}.{index + 1}&nbsp;</span>
+                <span>
+                  {parentIndex + 1}.{index + 1}&nbsp;
+                </span>
              </div>
-              <div className="name-and-state">
+              <div className='name-and-state'>
-                <span className="course-name">{record.courseName}</span>
+                <span className='course-name'>{record.courseName}</span>
-                { record.courseType==="LIVE" &&
+                {record.courseType === 'LIVE' && <span className='course-state'>{courseStateShow[record.courseState].title}</span>}
-                <span className="course-state">{courseStateShow[record.courseState].title}</span>
-                }
              </div>
            </div>
-          )
+          );
-        }
+        },
      },
      {
        title: '学习进度',
        key: 'learnFinishPercentage',
        dataIndex: 'learnFinishPercentage',
-        width:152,
        render: (val, record) => {
+          return <div className='course-learn-percentage'>{record.learnState === 'FINISH' ? <span>已完成</span> : <span>{val}%</span>}</div>;
+        },
+      },
+    ];
+    return columns;
+  };
+  parseChapterColumns = (chapterIndex) => {
+    const columns = [
+      {
+        title: '课节名称',
+        key: 'name',
+        dataIndex: 'name',
+        width: '80%',
+        render: (val, record, index) => {
          return (
-            <div className="course-learn-percentage">
+            <div className='chapter-record'>
-               { record.learnState === "FINISH"  ?<span>已完成</span>:<span>{val}%</span>}
+              <span>
+                {index < 9 ? `0${index + 1} ` : index + 1}
+              </span>
+              <img className='chapter-img' src={FileTypeIcon[record.mediaType]} />
+              <span className='chapter-name'>{record.name}</span>
            </div>
-          )
+          );
-        }
+        },
-      }
+      },
+      {
+        title: '学习进度',
+        key: 'watchProgress',
+        dataIndex: 'watchProgress',
+        render: (val, record) => {
+          return <span>{val}%</span>;
+        },
+      },
    ];
    return columns;
-  }
+  };
  render() {
-    const {storeCustomerName,storeCustomerPhone,planDataSource,taskDataSource,taskQuery,taskTotalCount} = this.state;
+    const { storeCustomerName, storeCustomerPhone, planDataSource, taskDataSource, taskQuery, taskTotalCount } = this.state;
    const { visible } = this.props;
    return (
      <Modal
-          title="学员学习详情"
+        title='学员学习详情'
        onCancel={this.props.onClose}
        onOk={this.props.onClose}
        maskClosable={false}
        visible={visible}
-          className="user-Learn-modal"
+        className='user-Learn-modal'
        closable={true}
        width={800}
-          closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} 
+        closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}>
-        >
+        <div className='customer-info'>
-          <div className="customer-info">
+          <span className='customer-name'>
-            <span className="customer-name">
            <span>学员：</span>
            <span>{storeCustomerName}</span>
          </span>
-            <span className="customer-phone">
+          <span className='customer-phone'>
            <span>手机号：</span>
            <span>{storeCustomerPhone}</span>
          </span>
        </div>
-          <div className="plan-instro">
+        <div className='table-box'>
-            <div className="img-con">
+          <Table className='plan-table' dataSource={[planDataSource]} columns={this.parsePlanDataColumns()} pagination={false} />
-              <img src={planDataSource.coverUrl}/>
-            </div>
-            <div>
-              <div className="plan-name">{planDataSource.planName}</div>
-              <div className="task-learn-percentage">
-                <span>学习进度: {planDataSource.learnFinishPercentage}%</span>
-              </div>
-            </div>
-          </div>
-          <div>
          <Table
+            className='task-table'
            rowKey={(record) => record.taskId}
-              className="task-table"
            dataSource={taskDataSource}
            columns={this.parseTaskColumns()}
            pagination={false}
-              expandedRowRender={(record,index) => {
+            expandable={{
-                if(!record.courseVOList){
+              expandedRowRender: (record, index) => {
-                  return
+                return (
-                }
+                  <div>
-                if (record.courseVOList.length !== 0 ){
-                  return  <div>
                    <Table
-                              pagination={false}
+                      showHeader={false}
+                      className='child-table'
+                      rowKey={(record) => record.courseId}
                      dataSource={record.courseVOList}
-                              columns={this.parseCoursecolumns(index)}
+                      columns={this.parseCourseColumns(index)}
-                              className="child-table"
+                      pagination={false}
+                      expandable={{
+                        expandedRowRender: (chapterRecord, chapterIndex) => {
+                          return (
+                            <div>
+                              <Table
+                                showHeader={false}
+                                dataSource={chapterRecord.courseChapterList}
+                                columns={this.parseChapterColumns(chapterIndex)}
+                                pagination={false}
+                              />
+                            </div>
+                          );
+                        },
+                        rowExpandable: (record) => record.courseChapterList && record.courseChapterList.length > 1,
+                      }}
                    />
                  </div>
+                );
+              },
+              rowExpandable: (record) => record.courseVOList && record.courseVOList.length !== 0,
+            }}
+            rowClassName={(record, index) => {
+              if (index % 2 === 0) {
+                return 'odd-row';
+              } else {
+                return 'even-row';
              }
            }}
-              rowClassName={(record,index)=>{if(index%2===0){return 'odd-row'}else{ return 'even-row'}}}
          />
        </div>
      </Modal>
-    )
+    );
  }
 }

--- a/src/modules/plan-manage/modal/UserLearnDetailModal.less
+++ b/src/modules/plan-manage/modal/UserLearnDetailModal.less
-.user-Learn-modal{
+.user-Learn-modal {
+  .customer-info {
-    .customer-info{
+    margin-bottom: 16px;
-        margin-bottom:16px;
+    .customer-name {
-        .customer-name{
+      font-size: 14px;
-            font-size:14px;
+      color: #333;
-            color:#333;
+      margin-right: 32px;
-            margin-right:32px;
    }
-        .customer-phone{
+    .customer-phone {
-            font-size:14px;
+      font-size: 14px;
-            color:#333;
+      color: #333;
    }
  }
-    .plan-instro{
+  .plan-instro {
    display: flex;
    align-items: center;
-        margin-bottom:16px;
+    margin-bottom: 16px;
-        .img-con{
+    .img-con {
-            margin-right:8px;
+      margin-right: 8px;
-            img{
+      img {
        width: 97px;
        height: 54px;
        display: inline-block;
-                border-radius:4px;
+        border-radius: 4px;
-            }
-        }
-        .plan-name{
-            color:#333;
-            font-size:16px;
-        }
-        .plan-learn-percentage{
-            color:#333;
-            font-size:14px;
-        }
-    }
-    .task-table{
-        .ant-table-thead{
-            tr {
-                th{
-                    padding:9px 16px;
      }
    }
+    .plan-name {
+      color: #333;
+      font-size: 16px;
    }
-        tr{
+    .plan-learn-percentage {
-            td{
+      color: #333;
-                padding:14px 16px;
+      font-size: 14px;
-            }
-        }
-        .taskName{
-            color:#333;
-            font-size:14px;
-        }
-        .task-learn-percentage{
-            color:#333;
-            font-size:14px;
-        }
-        .course-info{
-            display:flex;
-            margin-left:57px;
-            align-items: center;
-            .course-type{
-                font-size:11px;
-                color:#666666;
-                padding:0px 6px;
-                border: 1px solid #999999;
-                margin-right:4px;
-                border-radius: 2px;
-                line-height: 16px;
-            }
-            .name-and-state{
-                flex:1;
-                .course-name{
-                    color:#666666;
-                    font-size:14px;
-                    margin-right:8px;
-                }
-                .tip{
-                    font-size:14px;
-                    color:#FF4F4F;
-                    margin-right:2px;
-                }
-                .course-state{
-                    color:#999;
-                    font-size:14px;
    }
  }
+  .table-box {
+    .child-table {
+      margin-left: 40px;
+      tr > td {
+        &:first-child {
+          padding-right: 0 !important;
        }
-        .ant-table-expanded-row{
+        &:nth-child(2) {
-            td{
+          padding-left: 0 !important;
-                padding:0 16px;
-            }
-        }
-        .ant-table-content{
-            border:1px solid #e8e8e8;
-            tr{
-                td{
-                    border:none;
-                }
-                .child-table{
-                    .ant-table-content{
-                        border:none;
-                        thead{
-                            display:none;
-                        }
-                        tbody tr {
-                            td{
-                                border-bottom:none;
-                                padding:14px 16px;
-                            }
-                        }
-                    }
-                } 
-            }
-            .odd-row{
-                background:transparent;
-                td{
-                    background: #FFF;
-                }
-                & + .ant-table-expanded-row{
-                    background:transparent;
-                    td{
-                        background: #FFF;
-                    }
-                }
-                &:hover{
-                    & + .ant-table-expanded-row{
-                        background:transparent;
-                        td{
-                            background: #F3f6fa !important;
-                        }
        }
      }
+      .course-info {
+        display: flex;
+        .course-type {
+          border-radius: 2px;
+          border: 1px solid #999999;
+          font-size: 11px;
+          color: #666666;
+          padding: 1px 8px;
+          margin-right: 6px;
        }
-            .even-row{
-                background:transparent;
-                td{
-                    background: #FAFAFA;
      }
-                & + .ant-table-expanded-row{
-                    background:transparent;
-                    td{
-                        background: #FAFAFA;
    }
+    .chapter-record {
+      display: flex;
+      align-items: center;
+      .chapter-img {
+        width: 18px;
+        height: 18px;
+        margin: 0 10px;
      }
-                &:hover{
+      .chapter-name {
-                    & + .ant-table-expanded-row{
+        overflow: hidden;
-                        background:transparent;
+        white-space: nowrap;
-                        td{
+        text-overflow: ellipsis;
-                            background: #F3f6fa !important;
+        width: 400px;
      }
    }
+    .record-name {
+      display: flex;
+      align-items: center;
+      .img-con {
+        margin-right: 8px;
+        img {
+          width: 97px;
+          height: 54px;
+          border-radius: 4px;
        }
      }
    }

--- a/src/modules/plan-manage/modal/relatedCourseModal.jsx
+++ b/src/modules/plan-manage/modal/relatedCourseModal.jsx
+/*
+ * @Author: yuananting
+ * @Date: 2021-07-05 10:50:10
+ * @LastEditors: yuananting
+ * @LastEditTime: 2021-07-13 19:55:29
+ * @Description: 描述一下咯
+ * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
 import React from 'react';
 import _ from 'underscore';
 import { Radio, Tabs, Modal, Input, message, Button, Tooltip } from 'antd';
-import { PageControl, XMTable } from '@/components';
+import { PageControl } from '@/components';
-import college from '@/common/lottie/college';
 import CourseService from '@/domains/course-domain/CourseService';
 import User from '@/common/js/user';
@@ -79,11 +87,11 @@ class SelectOperatorModal extends React.Component {
      selectVideo: {
        external: [],
        internal: [],
-      }, //弹窗内已选择的视频课程
+      }, //弹窗内已选择的线上课程
      currentVideoCourseListData: {
        external: [],
        internal: [],
-      }, //页面中已关联的视频课程
+      }, //页面中已关联的线上课程
      pictureDataSource: [],
      pictureSize: 10,
@@ -91,10 +99,10 @@ class SelectOperatorModal extends React.Component {
        current: 1,
      },
      pictureTotalCount: 0,
-      selectPicture: [], //弹窗内已选择的视频课程
+      selectPicture: [], //弹窗内已选择的线上课程
-      currentPictureCourseListData: [], //页面中已关联的视频课程
+      currentPictureCourseListData: [], //页面中已关联的线上课程
-      activeKey: 'video',
+      activeKey: 'live',
      currentTaskCourseData: this.props.data[this.props.selectedTaskIndex].courseList || [],
    };
  }
@@ -136,7 +144,7 @@ class SelectOperatorModal extends React.Component {
    });
  };
-  // 获取视频课列表
+  // 获取线上课列表
  handleFetchVideoDataList = () => {
    const { videoQuery, videoSize, videoDataSource, videoTotalCount, videoCourseDivision } = this.state;
@@ -370,7 +378,6 @@ class SelectOperatorModal extends React.Component {
  // 请求表头
  parseVideoColumns = () => {
-    const { videoCourseDivision } = this.state;
    const columns = [
      {
        title: (
@@ -387,33 +394,23 @@ class SelectOperatorModal extends React.Component {
        dataIndex: 'course',
        width: '60%',
        render: (val, record) => {
-          const { coverUrl, scheduleVideoUrl } = record;
+          const { coverUrl } = record;
          return (
            <div className='course-info'>
-              {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
+              <img className='course-cover' src={coverUrl || 'https://image.xiaomaiketang.com/xm/TwtGPQGE4K.png'} alt='' />
-              <img
-                className='course-cover'
-                src={
-                  coverUrl ||
-                  (videoCourseDivision === 'internal'
-                    ? `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`
-                    : 'https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png')
-                }
-                alt=''
-              />
              <div className='course-name'>{record.courseName}</div>
            </div>
          );
        },
      },
      {
-        title: '课程时长',
+        title: '课节数',
-        key: 'courseTime',
+        key: 'courseChapterNum',
-        dataIndex: 'courseTime',
+        dataIndex: 'courseChapterNum',
        width: '20%',
+        align: 'right',
        render: (val, record) => {
-          return <span className='course-status'>{dealTimeDuration(record.videoDuration)}</span>;
+          return <span>{val || 1}</span>;
        },
      },
      {
@@ -555,6 +552,7 @@ class SelectOperatorModal extends React.Component {
      _item.courseId = item.id;
      _item.courseType = 'VOICE';
      _item.courseName = item.courseName;
+      _item.courseChapterNum = item.courseChapterNum
      return _item;
    });
@@ -616,7 +614,7 @@ class SelectOperatorModal extends React.Component {
            className='link-create-course'
            href={window.location.origin + window.location.pathname + '#/create-video-course?type=add'}
            onClick={this.props.onClose}>
-            没有找到需要的视频课？<span>去创建</span>
+            没有找到需要的线上课？<span>去创建</span>
          </a>
        );
        break;
@@ -734,11 +732,7 @@ class SelectOperatorModal extends React.Component {
                </div>
              </div>
              <div>
-                <XMTable
+                <Table
-                  renderEmpty={{
-                    image: college,
-                    description: '暂无数据',
-                  }}
                  rowKey={(record) => record.liveCourseId}
                  dataSource={liveDataSource}
                  columns={this.parseLiveColumns()}
@@ -792,7 +786,7 @@ class SelectOperatorModal extends React.Component {
              </div>
            </TabPane>
-            <TabPane tab='视频课' key='video'>
+            <TabPane tab='线上课' key='video'>
              <Radio.Group value={videoCourseDivision} onChange={this.videoCourseDivisionChange} style={{ marginBottom: 16 }}>
                <Radio.Button value='internal'>内部课程</Radio.Button>
                <Radio.Button value='external'>外部课程</Radio.Button>
@@ -830,11 +824,7 @@ class SelectOperatorModal extends React.Component {
                </div>
              </div>
              <div>
-                <XMTable
+                <Table
-                  renderEmpty={{
-                    image: college,
-                    description: '暂无数据',
-                  }}
                  rowKey={(record) => record.id}
                  dataSource={videoDataSource[videoCourseDivision]}
                  columns={this.parseVideoColumns()}
@@ -939,11 +929,7 @@ class SelectOperatorModal extends React.Component {
                </div>
              </div>
              <div>
-                <XMTable
+                <Table
-                  renderEmpty={{
-                    image: college,
-                    description: '暂无数据',
-                  }}
                  rowKey={(record) => record.id}
                  dataSource={pictureDataSource}
                  columns={this.parsePictureColumns()}

--- a/src/modules/prepare-lesson/modal/SelectPrepareFileModal.jsx
+++ b/src/modules/prepare-lesson/modal/SelectPrepareFileModal.jsx
@@ -101,7 +101,7 @@ class SelectPrepareFileModal extends React.Component {
  // 获取文件列表
  handleFetchFolderList = (params = {}, loadMore = false) => {
    // 根据当前根节点获取文件列表
-    const { selectTypeList } = this.props;
+    const { selectTypeList,queryTypeEnum} = this.props;
    const { query, folderList, currentRootDisk } = this.state;
    const _params = {
      ...query,
@@ -114,6 +114,9 @@ class SelectPrepareFileModal extends React.Component {
    if (selectTypeList) {
      _params.folderFileType = selectTypeList
    }
+    if(queryTypeEnum){
+      _params.queryTypeEnum = queryTypeEnum
+    }
    Service.Hades(FOLDERLIST_URL_MAP[currentRootDisk.disk], _params).then((res) => {
      const { result = {} } = res;
@@ -221,6 +224,7 @@ class SelectPrepareFileModal extends React.Component {
      maxSelectLength
    } = this.props;
+    console.log('selectedFileList',selectedFileList)
    if (multiple) {
      const currSelectedFileList = [...(prevSelectedFileList || []), ...selectedFileList];
      // 最多选择20个文件，判断是否超出了20个
@@ -286,7 +290,8 @@ class SelectPrepareFileModal extends React.Component {
    const { fileListRef } = this.refs;
    // const hasReachBottom = fileListRef.scrollTop + fileListRef.clientHeight === fileListRef.scrollHeight;
-    const hasReachBottom = fileListRef.scrollTop + fileListRef.clientHeight > fileListRef.scrollHeight - 1;
+    const hasReachBottom = fileListRef.scrollTop + fileListRef.clientHeight > fileListRef.scrollHeight - 10;
+    console.log("fileListRef.scrollTop + fileListRef.clientHeight",hasReachBottom,fileListRef.scrollTop , fileListRef.clientHeight,fileListRef.scrollHeight)
    if (!hasReachBottom || !hasMore) return;
    const currentFolder = folderPathList[folderPathList.length - 1];
@@ -321,14 +326,16 @@ class SelectPrepareFileModal extends React.Component {
  // 上传文件
  handleUpload = (event) => {
+    const { selectType,accept} = this.props;
-    const { selectType } = this.props;
    const fileList = event.target.files;
    // 判断文件的大小是否超出了限制
    const nonCompliantFileList = [];
    const _fileList = [...fileList];
+    const _accept = accept.split(',');
+    console.log("_fileList",_fileList);
+    console.log('accept',_accept);
    _fileList.map((file, index) => {
-      console.log('file',file);
      let { size, type, name } = file;
      if (!type) {
        type = getFileTypeByName(name);
@@ -337,6 +344,11 @@ class SelectPrepareFileModal extends React.Component {
        nonCompliantFileList.push(file);
        _fileList.splice(index, 1);
      }
+      console.log('type',type);
+      //mac的企业微信环境下加accept不起作用，所以需要我们在选择完成后做一层限制
+      // if(accept && _accept.indexOf("."+_.last(name.split('.')).toLowerCase()) === -1){
+      //   _fileList.splice(index, 1);
+      // }
      file.key = count++;
    });
    console.log("nonCompliantFileList",nonCompliantFileList);
@@ -569,7 +581,8 @@ class SelectPrepareFileModal extends React.Component {
          }
        </div>
        {
-          !_.isEmpty(folderList) ?
+          <Choose>
+          <When condition={!_.isEmpty(folderList)}>
          <div>
            <div className="file-list"  
              onScrollCapture={() => this.handleScrollEvent()}
@@ -607,8 +620,7 @@ class SelectPrepareFileModal extends React.Component {
                  // 文件禁止点击的情况（移动、直播场景下文件为Excel、文件已经被关联了、文件不合法)
                  const disabled = hiddenVideo || (!isFolder && operateType === 'move') || (scene === 'liveCourse' && folder.folderFormat === 'EXCEL') || !!hasRelation || (!isFolder && !FILE_SUFFIX_LIST.includes(suffix));
-                  // console.log('currentFile',currentFile);
-                  // console.log('folder',folder);
                  let currentFileCheck = false;
                  if(currentFile){
                    currentFileCheck = (currentFile.id===folder.id)
@@ -656,12 +668,16 @@ class SelectPrepareFileModal extends React.Component {
                })
              }
            </div>
-          </div> :
+          </div>
+          </When>
+          <Otherwise>
          <LottieIcon
            title={<span className="desc">这个文件夹是空的</span>}
            type="college"
            size={150}
          />
+          </Otherwise>
+        </Choose>
        }
        <UploadProgressModal

--- a/src/modules/resource-disk/modal/ScanFileModal.jsx
+++ b/src/modules/resource-disk/modal/ScanFileModal.jsx
@@ -34,10 +34,10 @@ class ScanFileModal extends React.Component {
              style={{ width: 632, objectFit: "cover" }}
            />
          )}
-          {fileType === "MP4" && (
+          {fileType === "VIDEO" && (
            <div>
              <Player
-                src={item.ossAddress || item.ossUrl}
+                src={item.mediaUrl || item.ossAddress || item.ossUrl}
                fluid={false}
                height={306}
                width={"100%"}

--- a/src/modules/resource-disk/modal/ScanFileModal.less
+++ b/src/modules/resource-disk/modal/ScanFileModal.less
@@ -10,4 +10,7 @@
      height: 60px;
    }
  }
+  .video-react .video-react-play-progress:after {
+    width: max-content;
+  }
 }
--- a/src/routes/config/mainRoutes.tsx
+++ b/src/routes/config/mainRoutes.tsx
@@ -81,7 +81,7 @@ const mainRoutes = [
  {
    path: '/video-course',
    component: VideoCoursePage,
-    name: '视频课',
+    name: '线上课',
  },
  {
    path: '/graphics-course',
@@ -101,7 +101,7 @@ const mainRoutes = [
  {
    path: '/create-video-course',
    component: AddVideoCoursePage,
-    name: '创建视频课',
+    name: '创建线上课',
  },
  {
    path: '/knowledge-base',
@@ -163,7 +163,7 @@ const mainRoutes = [
  {
    path: '/create-plan',
    component: AddPlanPage,
-    name: '创建视频课',
+    name: '创建线上课',
  },
  {
    path: '/store-info',

--- a/src/routes/config/menuList.tsx
+++ b/src/routes/config/menuList.tsx
 /*
 * @Author: yuananting
 * @Date: 2021-02-21 15:53:31
- * @LastEditors: Please set LastEditors
+ * @LastEditors: wufan
- * @LastEditTime: 2021-06-08 16:46:15
+ * @LastEditTime: 2021-07-05 10:29:23
 * @Description: 描述一下咯
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -28,8 +28,8 @@ export const menuList: any = [
        link: '/live-course',
      },
      {
-        groupName: '视频课',
+        groupName: "线上课",
-        groupCode: 'CourseVideoClass',
+        groupCode: "CourseVideoClass",
        link: '/video-course',
      },
      {