Skip to content

X
xiaomai-cloud-class-web
Commit 9f02cbdf by zhangleyuan
Options

feat:联调视频课相关的模块

parent 5d8ae170
Showing with 151 additions and 26 deletions
src/modules/course-manage/video-course/components/VideoCourseFilter.jsx
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2020-08-05 10:11:57
* @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-25 17:37:58
* @LastEditTime: 2020-12-31 16:00:32
* @Description: 视频课-搜索模块
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......@@ -14,14 +14,15 @@ import RangePicker from "@/modules/common/DateRangePicker";
// import TeacherSelectV5 from '@/modules/classManage_V5/classDetail/TeacherSelectV5';
import './VideoCourseFilter.less';
import moment from 'moment';
import StoreService from "@/domains/store-domain/storeService";
const { Search } = Input;
const { Option } = Select;
const DEFAULT_QUERY = {
scheduleName: null, // 课程名称
teacherId: null, // 创建人
courseName: null, // 课程名称
operatorId: null, // 创建人
beginTime: null, // 开始日期
endTime: null, // 结束日期
shelfState:null,
......@@ -81,7 +82,7 @@ class VideoCourseFilter extends React.Component {
current: 1,
}
}, () => {
if (field === 'scheduleName') return;
if (field === 'courseName') return;
this.props.onChange(this.state.query)
});
}
......@@ -115,11 +116,11 @@ class VideoCourseFilter extends React.Component {
render() {
const {
query: {
scheduleName,
courseName,
operator,
beginTime,
endTime,
teacherId,
operatorId,
shelfState
},
expandFilter,
......@@ -134,9 +135,9 @@ class VideoCourseFilter extends React.Component {
<div className="search-condition__item">
<span className="search-name">视频课名称：</span>
<Search
value={scheduleName}
value={courseName}
placeholder="搜索视频课名称"
onChange={(e) => { this.handleChangeQuery('scheduleName', e.target.value)}}
onChange={(e) => { this.handleChangeQuery('courseName', e.target.value)}}
onSearch={ () => { this.props.onChange(this.state.query) } }
style={{ width: "calc(100% - 84px)" }}
/>
......@@ -151,9 +152,9 @@ class VideoCourseFilter extends React.Component {
allowClear
filterOption={(input, option) => option}
onPopupScroll={this.handleScrollTeacherList}
value={teacherId}
value={operatorId}
onChange={(value) => {
this.handleChangeQuery('teacherId', value)
this.handleChangeQuery('operatorId', value)
}}
onSearch={(value) => {
teacherQuery.nickName = value
......
src/modules/course-manage/video-course/components/VideoCourseList.jsx
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2020-08-05 10:12:45
* @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-31 10:31:07
* @LastEditTime: 2020-12-31 16:01:52
* @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......@@ -16,6 +16,7 @@ import { LIVE_SHARE_MAP } from '@/common/constants/academic/cloudClass';
import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal';
import WatchDataModal from '../modal/WatchDataModal'
import CourseService from "@/domains/course-domain/CourseService";
import User from '@/common/js/user'
......@@ -41,16 +42,22 @@ class VideoCourseList extends React.Component {
}
}
// 学员人数弹窗
// 观看数据弹窗
handleShowWatchDataModal = (record) => {
const WatchDataModal = (
console.log('111');
console.log("record",record);
const watchDataModal = (
<WatchDataModal
type='videoCourseList'
data={record}
close={() => {
this.setState({
watchDataModal: null
});
}}
/>
);
this.setState({ WatchDataModal });
this.setState({ watchDataModal });
}
// 请求表头
......@@ -109,7 +116,7 @@ class VideoCourseList extends React.Component {
dataIndex: "watchUserCount",
render: (val, item) => {
return (
<div className="watchUserCount" onclick={this.handleShowWatchDataModal}>{val}</div>
<div className="watchUserCount">{val}</div>
)
},
},
......@@ -138,7 +145,7 @@ class VideoCourseList extends React.Component {
render: (val, record) => {
return (
<div className="operate">
<div className="operate__item">观看数据</div>
<div className="operate__item" onClick={()=>this.handleShowWatchDataModal(record)}>观看数据</div>
<span className="operate__item split"> | </span>
<div className="operate__item" onClick={() => this.handleShowShareModal(record)}>分享</div>
<span className="operate__item split"> | </span>
......@@ -306,7 +313,7 @@ class VideoCourseList extends React.Component {
/>
</div>
{ this.state.shareLiveModal }
{ this.state.WatchDataModal }
{ this.state.watchDataModal }
</div>
)
}
......
src/modules/course-manage/video-course/modal/WatchDataModal.jsx
......@@ -6,25 +6,113 @@
* @Description 余额异常弹窗
*/
import React from 'react';
import { Modal,Input} from 'antd';
import {Table, Modal,Input} from 'antd';
import { PageControl } from "@/components";
import CourseService from "@/domains/course-domain/CourseService";
import User from '@/common/js/user'
import './WatchDataModal.less';
import dealTimeDuration from "../../utils/dealTimeDuration";
const { Search } = Input;
class WatchDataModal extends React.Component {
constructor(props) {
super(props);
this.state = {
visible:true
visible:true,
dataSource:[],
size:10,
query: {
current: 1,
},
totalCount:0
};
}
onClose = ()=>{
componentDidMount() {
this.handleFetchDataList();
}
onClose = () =>{
this.props.close();
}
// 获取观看视频数据列表
handleFetchDataList = () => {
const {query,size,totalCount} = this.state
const { id } = this.props.data;
const params ={
...query,
size,
courseId:id,
storeId:User.getStoreId()
}
CourseService.videoWatchInfo(params).then((res) => {
const { result = {} } = res ;
const { records = [], total = 0 } = result;
this.setState({
visible:false
dataSource: records,
totalCount: Number(total)
});
});
}
handleChangNickname = (nickName)=>{
const { query } = this.state;
query.nickName = nickName;
query.current = 1;
this.setState({
query
})
}
render() {
onShowSizeChange = (current, size) => {
if (current == size) {
return
}
this.setState({
size
},()=>{this.handleFetchDataList()})
}
// 请求表头
parseColumns = () => {
const columns = [
{
title: '观看用户',
key: 'name',
dataIndex: 'name'
},
{
title: '手机号',
key: 'phone',
dataIndex: 'phone'
},
{
title: '观看者类型',
key: 'userRole',
dataIndex: 'userRole'
},
{
title: '首次观看时间',
key: 'firstWatch',
dataIndex: 'firstWatch',
render: (val) => {
return formatDate('YYYY-MM-DD H:i', val)
}
},
{
title: '观看时长',
key: 'watchDuration',
dataIndex: 'watchDuration',
render: (val) => {
return <span>{val ? dealTimeDuration(val) : "00:00:00" }</span>
}
}
];
return columns;
}
render() {
const { visible,size,dataSource,totalCount,query,current } = this.state;
return (
<Modal
title="视频课观看数据"
......@@ -34,12 +122,34 @@ class WatchDataModal extends React.Component {
maskClosable={false}
className="watch-data-modal"
closable={true}
width={720}
>
<div>
<Search placeholder="搜索用户姓名/手机号" style={{ width: 200 }} />
<div className="search-container">
<Search placeholder="搜索用户姓名/手机号" style={{ width: 200 }} onChange={(e) => { this.handleChangNickname(e.target.value)}} onSearch={ () => { this.handleFetchDataList()}} />
</div>
<div>
<Table
rowKey={record => record.id}
dataSource={dataSource}
columns={this.parseColumns()}
pagination={false}
/>
{dataSource.length >0 &&
<div className="box-footer">
<PageControl
current={current - 1}
pageSize={size}
total={totalCount}
toPage={(page) => {
const _query = {...query, current: page + 1};
this.setState({
query:_query
},()=>{ this.handleFetchDataList()})
}}
onShowSizeChange={this.onShowSizeChange}
/>
</div>
}
</div>
</Modal>
)
......
src/modules/course-manage/video-course/modal/WatchDataModal.less
.watch-data-modal{
.search-container{
text-align:right;
margin-bottom:17px;
}
}
\ 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