feat:线上课联调

src/data-source/course/request-api.ts

 /*
  * @Author: wufan
  * @Date: 2020-12-12 11:57:10
- * @LastEditors: zangsuyun
- * @LastEditTime: 2021-03-22 13:54:20
+ * @LastEditors: wufan
+ * @LastEditTime: 2021-07-05 15:07:13
  * @Description: Description
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
@@ -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);
 }

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);
   }

src/modules/course-manage/video-course/AddVideoCourse.jsx

@@ -2,7 +2,7 @@
  * @Author: 吴文洁
  * @Date: 2020-08-05 10:07:47
  * @LastEditors: wufan
- * @LastEditTime: 2021-07-05 10:24:25
+ * @LastEditTime: 2021-07-05 15:59:51
  * @Description: 线上课新增/编辑页
  * @Copyright: 杭州杰竞科技有限公司 版权所有
  */
@@ -327,7 +327,7 @@ class AddVideoCourse extends React.Component {
         videoDuration: videoDom.duration,
         id: resourceId,
         mediaUrl: ossUrl,
-        sort: courseChapterList.length
+        sort: _courseChapterList.length
       })
 
       this.setState({
@@ -436,7 +436,7 @@ 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
         message.success('新建成功')
         window.RCHistory.push({
@@ -448,7 +448,7 @@ class AddVideoCourse extends React.Component {
         courseId: id,
         ...commonParams
       }
-      Service.Hades('public/hades/editMediaCourse', editParams).then((res) => {
+      Service.Hades('public/hades/editVideoSchedule', editParams).then((res) => {
         if (!res) return
         message.success('保存成功')
         window.RCHistory.push({

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 './LearningDetailModal.less';
-
+import { Modal } from "antd";
+import "./LearningDetailModal.less";
 
 class LearningDetailModal extends React.Component {
-    constructor(props) {
-      super(props);
-      this.state = {
-        data:[]
-      };
-    }
+  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
+      });
+    });
+  };
 
-    componentDidMount() {
-        this.handleFetchDataList();
-    }
-    
-      // 获取观看视频数据列表
-      handleFetchDataList = () => {
-        const { query, id } = this.state;
-    
-        const params = {
-          ...query,
-          courseId: id,
-          storeId: User.getStoreId(),
-        };
-        CourseService.videoWatchInfo(params).then((res) => {
-          const { result = {} } = res;
-          const { records = [], total = 0 } = result;
-          this.setState({
-            dataSource: records,
-            totalCount: Number(total),
-          });
-        });
-      };
+  render() {
+    const { title, onClose, onOk } = this.props;
+    const { courseChapterList } = this.state;
+    return (
+      <div className="learning-detail-modal">
+        <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}
+        >
+          <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 ? index + 1 : `0${index + 1}`
+                      } `}</div>
+                      <img
+                        className="course-ware__img"
+                        src="https://image.xiaomaiketang.com/xm/TKwbQGYDBR.png"
+                        alt=""
+                      />
+                      <div className="course-ware__name">{item.name}</div>
+                    </div>
 
-      
-    }
+                    <div className={`progress ${item.progress === 100 ? 'finish' :''}`}>{`${item.progress === 100 ? '已完成' : `${item.progress}%`}`}</div>
+                  </div>
+                );
+              })}
+            </If>
+          </div>
+        </Modal>
+      </div>
+    );
+  }
+}
 
-    export default LearningDetailModal;
\ No newline at end of file
+export default LearningDetailModal;

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;
+          cursor: pointer;
+          &:hover {
+            color: #2966ff;
+          }
+          &__index {
+            width: 20px;
+          }
+          &__img {
+            width: 20px;
+            height: 20px;
+            margin-left: 16px;
+            margin-right: 8px;
+          }
+          &__name {
+            width: 700px;
+          }
+        }
+        .progress {
+          &.finish {
+            color: RGBA(101, 202, 168, 1);
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -47,7 +47,7 @@ class VideoCourseList extends React.Component {
   handleShowWatchDataModal = (item) => {
     const { match } = this.props;
     window.RCHistory.push({
-      pathname: `${match.url}/course-data?courseName=${item.courseName}&id=${item.id}`
+      pathname: `${match.url}/course-data?courseName=${item.courseName}&courseId=${item.id}`
     })
   }
 

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

@@ -13,12 +13,12 @@ const { Search } = Input;
 class WatchData extends React.Component {
   constructor(props) {
     super(props);
-    const id = window.getParameterByName("id");
+    const courseId = window.getParameterByName("courseId");
     const courseName = window.getParameterByName("courseName");
 
     this.state = {
       courseName,
-      id,
+      courseId,
       visible: true,
       dataSource: [],
       query: {
@@ -37,11 +37,11 @@ class WatchData extends React.Component {
 
   // 获取观看视频数据列表
   handleFetchDataList = () => {
-    const { query, id } = this.state;
+    const { query, courseId } = this.state;
 
     const params = {
       ...query,
-      courseId: id,
+      courseId: courseId,
       storeId: User.getStoreId(),
     };
     CourseService.videoWatchInfo(params).then((res) => {
@@ -124,11 +124,12 @@ class WatchData extends React.Component {
       <LearningDetailModal
         data={item}
         title="学习详情"
-        close={() => {
+        onClose={() => {
           this.setState({
-            learningDetailModal: null,
+            learningDetailModal: null
           });
         }}
+        courseId={this.state.courseId}
       />
     );
     this.setState({ learningDetailModal });
@@ -261,6 +262,7 @@ class WatchData extends React.Component {
             />
           </div>
         </div>
+        {this.state.learningDetailModal}
       </div>
     );
   }