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

9f02cbdf · zhangleyuan · 5d8ae170 · 9f02cbdf · 9f02cbdf · 9f02cbdf
Commit 9f02cbdf authored Dec 31, 2020 by zhangleyuan
4 changed files
--- a/src/modules/course-manage/video-course/components/VideoCourseFilter.jsx
+++ b/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,   // 课程名称
+  courseName: null,   // 课程名称
-  teacherId: 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

--- a/src/modules/course-manage/video-course/components/VideoCourseList.jsx
+++ b/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'
@@ -33,7 +34,7 @@ class VideoCourseList extends React.Component {
    }
  }
-   componentDidMount() {
+  componentDidMount() {
    const videoCourseItem = localStorage.getItem('videoCourseItem');
    if (videoCourseItem) {
      const _videoCourseItem = JSON.parse(videoCourseItem);
@@ -41,16 +42,22 @@ class VideoCourseList extends React.Component {
    }
  }
-  // 学员人数弹窗
+  // 观看数据弹窗
  handleShowWatchDataModal = (record) => {
+    console.log('111');
-    const WatchDataModal = (
+    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>
    )
  }

--- a/src/modules/course-manage/video-course/modal/WatchDataModal.jsx
+++ b/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({
+        dataSource: records,
+        totalCount: Number(total)
+      });
+    });
+  }
+  handleChangNickname = (nickName)=>{
+    const { query } =  this.state;
+    query.nickName = nickName;
+    query.current = 1;
    this.setState({
-        visible:false
+      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>
+          <div className="search-container">
-            <Search placeholder="搜索用户姓名/手机号" style={{ width: 200 }} />
+            <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>
    )

--- a/src/modules/course-manage/video-course/modal/WatchDataModal.less
+++ b/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