feat:开始联调线上课

3dc6f992 · wufan · a468e88b · 3dc6f992 · 3dc6f992 · 3dc6f992
Commit 3dc6f992 authored Jul 04, 2021 by wufan
7 changed files
--- a/src/common/constants/academic/lessonEnum.js
+++ b/src/common/constants/academic/lessonEnum.js
@@ -133,7 +133,7 @@ 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/TKwbQGYDBR.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",

--- a/src/modules/course-manage/video-course/AddVideoCourse.jsx
+++ b/src/modules/course-manage/video-course/AddVideoCourse.jsx
@@ -300,47 +300,45 @@ class AddVideoCourse extends React.Component {
  }
  // 选择视频
-  handleSelectVideo = (file) => {
+  handleSelectVideo = (addFolderIds,selectedFileList) => {
+    console.log("file-----",selectedFileList);
    this.setState({
      showSelectFileModal: false
    })
-    const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file;
    let { courseChapterList } = this.state;
    let _courseChapterList = [...courseChapterList];
+    selectedFileList.map((file,index) => {
+    const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file;
+    const videoDom = document.createElement('video')
+    videoDom.src = ossUrl
+    videoDom.onloadedmetadata = () => {
      _courseChapterList.push({
        mediaContent: resourceId,
        contentType: 'SCHEDULE',
        mediaType: "VIDEO",
        mediaName: folderName.replace('.mp4',''),
        mediaNameAlias: folderName.replace('.mp4',''),
-        videoDuration: folderSize,
+        videoDuration: videoDom.duration,
        id: resourceId,
        mediaUrl: ossUrl
      })
-    const videoDom = document.createElement('video')
+      this.setState({
-    this.setState({
+        size: folderSize,
-      size: folderSize,
+        videoName: folderName,
-      videoName: folderName,
+        videoType: folderFormat,
-      videoType: folderFormat,
+        scheduleVideoUrl: ossUrl,
-      scheduleVideoUrl: ossUrl,
+        scheduleVideoIds: resourceId,
-      scheduleVideoIds: resourceId,
+        courseChapterList: _courseChapterList
-      videoDuration: videoDom.duration,
+      })
-      courseChapterList: _courseChapterList
+    }
    })
-    // videoDom.src = ossUrl
-    // videoDom.onloadedmetadata = () => {
-    //   this.setState({
-    //     size: folderSize,
-    //     videoName: folderName,
-    //     videoType: folderFormat,
-    //     scheduleVideoUrl: ossUrl,
-    //     scheduleVideoIds: resourceId,
-    //     videoDuration: videoDom.duration
-    //   })
-    // }
  }
  // 保存
@@ -614,6 +612,36 @@ class AddVideoCourse extends React.Component {
      </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
+      })
+    }
  render() {
    const {
      pageType,
@@ -687,13 +715,14 @@ class AddVideoCourse extends React.Component {
                      this.setState({
                        showSelectFileModal: true
                      })
-                    }}>{`${pageType === 'add' && !scheduleVideoIds ? '选择' : '更换'}视频`}</Button>
+                    }}>添加视频</Button>
                  <div className='course-ware--empty'>从资料云盘中选择视频</div>
                </div>
                <div className='tips'>视频数量限制20个，每个视频文件大小不超过2G</div>
              </div>
+            </div>
-                <If condition={courseChapterList.length > 0}>
+            <If condition={courseChapterList.length > 0}>
                  <div className="course-chapter-list-wrap">
                    <div className="course-chapter-total">{`共${courseChapterList.length}个课节`}</div>
                    <div className='course-chapter-list' id="course-chapter-list">
@@ -704,6 +733,10 @@ class AddVideoCourse extends React.Component {
                              <img className='course-ware__img' src={courseWareIcon} 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.id}>
+                                  <div className={`up ${Number(index) === 0 ? 'disabled':''}`} onClick={()=> this.handleChangeIndex(true,item.sort,item.id)}>上移</div>
+                                  <div className="line">|</div>
+                                  <div className={`down ${Number(index) === (courseChapterList.length - 1) ? 'disabled':''}`} onClick={()=> this.handleChangeIndex(false,item.sort,item.id)}>下移</div>
+                                  <div className="line">|</div>
                                  <Popconfirm  
                                    placement="topLeft"
                                    className="course-chapter-tooltip" 
@@ -729,7 +762,6 @@ class AddVideoCourse extends React.Component {
                  </div>
                  </div>
                  </If>
-            </div>
            <div className='cover-url flex mt16'>
              <div className='label'>课程封面：</div> 

--- a/src/modules/course-manage/video-course/AddVideoCourse.less
+++ b/src/modules/course-manage/video-course/AddVideoCourse.less
@@ -153,6 +153,7 @@
    .course-chapter-list-wrap {
      position: relative;
+      margin-left: 85px;
      .course-chapter-total {
        height: 40px;
        font-size: 14px;
@@ -171,7 +172,7 @@
      }
      .course-chapter-list {
        margin-top: 8px;
-        width: 552px;
+        width: 630px;
        max-height: 247px;
        min-height: 130px;
        overflow-y: auto ;
@@ -201,15 +202,24 @@
          }
          .course-chapter__opt {
            display: flex;
-            color: #2966FF;
+            color: #2966ff;
            .line {
-              color: #BFBFBF;
+              color: #bfbfbf;
              margin-left: 4px;
              margin-right: 4px;
            }
-            .delete, .rename {
+            .delete,
+            .rename,
+            .up,
+            .down {
              cursor: pointer;
            }
+            .up,
+            .down {
+              &.disabled {
+                color: rgba(204, 204, 204, 1);
+              }
+            }
          }
        }
      }

--- a/src/modules/course-manage/video-course/components/LearningDetailModal.jsx
+++ b/src/modules/course-manage/video-course/components/LearningDetailModal.jsx
+import React from "react";
+import './LearningDetailModal.less';
+class LearningDetailModal extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        data:[]
+      };
+    }
+    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),
+          });
+        });
+      };
+    }
\ No newline at end of file
--- a/src/modules/course-manage/video-course/components/LearningDetailModal.less
+++ b/src/modules/course-manage/video-course/components/LearningDetailModal.less
--- a/src/modules/course-manage/video-course/components/WatchData.jsx
+++ b/src/modules/course-manage/video-course/components/WatchData.jsx
@@ -3,7 +3,7 @@ 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 } from 'antd';
+import { Input, Select } from 'antd';
 import React from "react";
 import { withRouter } from "react-router-dom";
 const { Search } = Input;
@@ -20,6 +20,7 @@ class WatchData extends React.Component {
      query: {
        current: 1,
        size: 10,
+        sourceEnum: ""
      },
      totalCount: 0,
    };
@@ -49,11 +50,20 @@ class WatchData extends React.Component {
  };
  parseColumns = () => {
+    const SOURCENUM = {
+      'WE_CHAT': "微信", 'WORK_WE_CHAT': "企业微信"
+    }
    const columns = [
      {
        title: '观看学员',
        key: 'name',
-        dataIndex: '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: '手机号',
@@ -99,12 +109,28 @@ class WatchData extends React.Component {
    return columns;
  };
+  handleChangNickname = (value)=>{
+    const isPhone = (value || '').match(/^\d+$/);
+    const { query } =  this.state;
+    if(isPhone){
+      query.phone = value;
+      query.nickName = null;
+    }else{
+      query.nickName = value;
+      query.phone = null;
+    }
+    query.current = 1;
+    this.setState({
+      query
+    }, this.handleFetchDataList)
+  }
  render() {
    const { dataSource, totalCount, query } = this.state;
-    const { current, size } = query;
+    const { current, size, sourceEnum  } = query;
    return (
-      <div className="page data-list">
+      <div className="page video-course-watch-data">
        <Breadcrumbs
          navList="观看学员数据"
          goBack={() => {
@@ -114,7 +140,32 @@ class WatchData extends React.Component {
        <div className="box-header">
          <div className="course-title"></div>
          <div className="filter-box">
-          <Search placeholder="搜索学员姓名/手机号"  style={{ width: 200 }}  onChange={(e) => { this.handleChangNickname(e.target.value)}}  onSearch={ () => { this.handleFetchDataList()}} enterButton={<span className="icon iconfont">&#xe832;</span>}/>
+            <Search placeholder="搜索学员姓名/手机号"  style={{ width: 200 }}  onChange={(e) => { this.handleChangNickname(e.target.value)}}  onSearch={ () => { this.handleFetchDataList()}} enterButton={<span className="icon iconfont">&#xe832;</span>}/>
+            <Select
+              showSearch
+              allowClear
+              onSearch={(value) => {
+                query.classNameLike = value;
+                this.setState({ query }, this.handleFetchClassList)
+              }}
+              onPopupScroll={this.handleFetchMore}
+              placeholder="请选择学员类型"
+              value={sourceEnum}
+              onChange={this.handleClassSelect}
+            >
+              <Select.Option
+                tyle={{ textAlign: 'center' }}
+                value="WE_CHAT"
+              >
+                微信
+              </Select.Option>
+              <Select.Option
+                tyle={{ textAlign: 'center' }}
+                value="WORK_WE_CHAT"
+              >
+                企业微信
+              </Select.Option>
+            </Select>
          </div>
        </div>

--- 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 {
+        &__type {
+            margin-left: 8px;
+           &.WE_CHAT {
+             color:rgba(28, 172, 27, 1);
+           } 
+           &.WORK_WE_CHAT {
+               color: rgba(41, 102, 255, 1);
+           }
+        }
+    }
+}
\ No newline at end of file