Skip to content

X
xiaomai-cloud-class-web
Commit 3dc6f992 by wufan
Options

feat:开始联调线上课

parent a468e88b
Showing with 182 additions and 38 deletions
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",
......
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({
size: folderSize,
videoName: folderName,
videoType: folderFormat,
scheduleVideoUrl: ossUrl,
scheduleVideoIds: resourceId,
videoDuration: videoDom.duration,
courseChapterList: _courseChapterList
this.setState({
size: folderSize,
videoName: folderName,
videoType: folderFormat,
scheduleVideoUrl: ossUrl,
scheduleVideoIds: resourceId,
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>
<If condition={courseChapterList.length > 0}>
</div>
<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>
......
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);
}
}
}
}
}
......
src/modules/course-manage/video-course/components/LearningDetailModal.jsx 0 → 100644
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
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>
......
src/modules/course-manage/video-course/components/WatchData.less 0 → 100644
.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
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