Skip to content

X
xiaomai-cloud-class-web
Commit a48e984c by zhangleyuan
Options

feat:处理科技格式拓展

parent 2e80dc54
Showing with 92 additions and 27 deletions
src/modules/course-manage/video-course/AddVideoCourse.jsx
/*
* @Author: 吴文洁
* @Date: 2020-08-05 10:07:47
* @LastEditors: yuananting
* @LastEditTime: 2021-07-08 17:23:24
* @LastEditors: Please set LastEditors
* @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,
videoName: folderName,
videoType: folderFormat,
// size: folderSize,
// videoName: folderName,
// 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']}
accept='video/mp4'
selectTypeList={selectTypeList}
accept={accept}
confirm={{
title: '文件过大，无法上传',
content: '为保障学员的观看体验，上传的视频大小不能超过2G'
}}
tooltip={'格式支持mp4，大小不超过2G'}
tooltip={''}
isOpen={showSelectFileModal}
diskList={diskList}
addVideo={true}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment