feat:处理科技格式拓展

a48e984c · zhangleyuan · 2e80dc54 · a48e984c
Commit a48e984c authored Jul 09, 2021 by zhangleyuan
Show whitespace changes
Inline Side-by-side

Showing with 92 additions and 27 deletions

src/modules/course-manage/video-course/AddVideoCourse.jsx
+92 -27

No files found.
--- 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: yuananting
+ * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-07-08 17:23:24
+ * @LastEditTime: 2021-07-09 11:20:49
 * @Description: 线上课新增/编辑页
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 */
 import React from 'react'
-import { Button, Input,  message, Modal, Cascader, Tooltip, Form, Popconfirm } from 'antd'
+import { Button, Input,  message, Modal, Cascader, Tooltip, Form, Popconfirm,Menu,Dropdown} from 'antd'
 import { FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum'
 import ShowTips from '@/components/ShowTips'
 import Breadcrumbs from '@/components/Breadcrumbs'
@@ -84,8 +84,10 @@ class AddVideoCourse extends React.Component {
      introduce: '',
      courseChapterList:[
      ], // 课节列表
-      videoType: "MP4",
+      // videoType: "MP4",
      mediaNameAlias: '', // 任一视频重命名的名称（气泡框）
+      selectTypeList:['MP4'],
+      accept:'video/mp4'
    }
  }
@@ -135,7 +137,7 @@ class AddVideoCourse extends React.Component {
      let coverId
      let coverUrl
      let videoDuration
-      let videoName
+      // let videoName
      let scheduleMedia = []
      let scheduleVideoUrl
      let hasIntro
@@ -172,7 +174,7 @@ class AddVideoCourse extends React.Component {
        loadintroduce: !hasIntro,
        coverId,
        coverUrl,
-        videoName,
+        // videoName,
        videoDuration,
        scheduleMedia,
        courseName,
@@ -199,9 +201,8 @@ class AddVideoCourse extends React.Component {
  }
  handleGoBack = () => {
-    const { coverId, videoName, videoDuration, courseName, scheduleMedia, courseChapterList, categoryId, shelfState, whetherVisitorsJoin } = this.state
+    const { coverId,videoDuration, courseName, scheduleMedia, courseChapterList, categoryId, shelfState, whetherVisitorsJoin } = this.state
    if (
-      videoName ||
      videoDuration ||
      !courseChapterList.length ||
      !_.isEqual(scheduleMedia, defaultScheduleMedia) ||
@@ -316,7 +317,7 @@ class AddVideoCourse extends React.Component {
    selectedFileList.map((file,index) => {
      const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file;
+      if(folderFormat === 'VIDEO'){
        const videoDom = document.createElement('video')
        videoDom.src = ossUrl
        videoDom.onloadedmetadata = () => {
@@ -330,14 +331,33 @@ class AddVideoCourse extends React.Component {
            mediaUrl: ossUrl,
            sort: _courseChapterList.length
          })
          this.setState({
-        size: folderSize,
+            // size: folderSize,
-        videoName: folderName,
+            // videoName: folderName,
-        videoType: folderFormat,
+            // videoType: folderFormat,
+            courseChapterList: _courseChapterList
+          })
+        }
+      }else{
+        const suffix = _.last(folderName.split('.')).toUpperCase();
+        console.log('suffix',suffix);
+        _courseChapterList.push({
+          mediaContent: resourceId,
+          contentType: 'SCHEDULE',
+          mediaType: suffix,
+          mediaName: folderName,
+          id: resourceId,
+          mediaUrl: ossUrl,
+          sort: _courseChapterList.length
+        })
+        this.setState({
+          // size: folderSize,
+          // videoName: folderName,
+          // videoType: folderFormat,
          courseChapterList: _courseChapterList
        })
      }
    })
  }
@@ -392,7 +412,7 @@ class AddVideoCourse extends React.Component {
      id,
      coverId,
      pageType,
-      videoName,
+      // videoName,
      videoDuration,
      courseName,
      scheduleMedia,
@@ -405,7 +425,7 @@ class AddVideoCourse extends React.Component {
    } = this.state
    const commonParams = {
-      videoName,
+      // videoName,
      videoDuration,
      scheduleMedia: scheduleMedia.filter((item) => !!item.mediaContent),
      categoryId,
@@ -693,7 +713,40 @@ class AddVideoCourse extends React.Component {
        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'
+        })
+      }
+    }
  render() {
    const {
      pageType,
@@ -702,7 +755,7 @@ class AddVideoCourse extends React.Component {
      scheduleMedia,
      showSelectFileModal,
      diskList,
-      videoType,
+      // videoType,
      shelfState,
      categoryName,
      courseCatalogList,
@@ -715,10 +768,12 @@ class AddVideoCourse extends React.Component {
      loadintroduce,
      id,
      courseChapterList,
-      imageFile
+      imageFile,
+      selectTypeList,
+      accept
    } = this.state
-    const courseWareIcon = FileVerifyMap[videoType] ? FileTypeIcon[FileVerifyMap[videoType].type] : FileTypeIcon[videoType]
+    // const courseWareIcon = FileVerifyMap[videoType] ? FileTypeIcon[FileVerifyMap[videoType].type] : FileTypeIcon[videoType]
    const defaultCover = 'https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png';
    const isDefaultCover = coverUrl === defaultCover || coverUrl == null;
@@ -747,11 +802,11 @@ class AddVideoCourse extends React.Component {
            <div className='upload-video mt16'>
              <div className='content flex'>
-                <span className='label required'>视频上传：</span>
+                <span className='label required'>上传课节：</span>
              </div>
              <div className='sub-content'>
                <div className="btn-wrap">
-                  <Button
+                  {/* <Button
                    onClick={() => {
                      if(courseChapterList.length >= 20) {
                        message.warning(`最多只能上传20个文件`);
@@ -760,10 +815,20 @@ class AddVideoCourse extends React.Component {
                      this.setState({
                        showSelectFileModal: true
                      })
-                    }}>添加视频</Button>
+                    }}>添加视频</Button> */}
+                  <div className='select-file'>
+                    <Dropdown overlay={this.renderTypemenu()}>
+                      <Button>选择文件</Button>
+                    </Dropdown>
+                  </div>
                  <div className='course-ware--empty'>从资料云盘中选择视频</div>
                </div>
-                <div className='tips'>视频数量限制20个，每个视频文件大小不超过2G</div>
+                <div className='tips'>
+                      课节数量限制20个，文件规格说明 
+                      <Tooltip title="视频支持mp4格式，大小不超过2G；文件支持PDF、docx、doc格式，大小不超过100M">
+                        <i className='icon iconfont' style={{ cursor: 'pointer', color: '#bfbfbf', fontSize: '14px'}}> &#xe61d;</i>
+                      </Tooltip>
+                </div>
              </div>
            </div>
@@ -775,7 +840,7 @@ class AddVideoCourse extends React.Component {
                      _.map(courseChapterList,(item,index) => {
                        return <div className='course-ware' key={index}>
                              <div className="course-ware__index">{`0${index + 1 } `}</div>
-                              <img className='course-ware__img' src={courseWareIcon} alt='' />
+                              {/* <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>
@@ -911,13 +976,13 @@ class AddVideoCourse extends React.Component {
          <SelectPrepareFileModal
            multiple={true}
            operateType='select'
-            selectTypeList={['MP4']}
+            selectTypeList={selectTypeList}
-            accept='video/mp4'
+            accept={accept}
            confirm={{
              title: '文件过大，无法上传',
              content: '为保障学员的观看体验，上传的视频大小不能超过2G'
            }}
-            tooltip={'格式支持mp4，大小不超过2G'}
+            tooltip={''}
            isOpen={showSelectFileModal}
            diskList={diskList}
            addVideo={true}