feat:外部课程相关模块

f2b70b05 · guomingpang · f1b850cb · f2b70b05 · f2b70b05 · f2b70b05
Commit f2b70b05 authored May 28, 2021 by guomingpang
4 changed files
--- a/src/modules/course-manage/modal/ShareLiveModal.jsx
+++ b/src/modules/course-manage/modal/ShareLiveModal.jsx
@@ -7,18 +7,17 @@
 */
 import React from 'react'
-import { Modal, Input, Button, message } from 'antd'
+import { Modal, Button, message } from 'antd'
 import domtoimage from 'dom-to-image'
-import html2canvas from 'html2canvas'
 import qrcode from '@/libs/qrcode/qrcode.js'
 import User from '@/common/js/user'
 import $ from 'jquery'
+import _ from 'underscore'
 import CourseService from '@/domains/course-domain/CourseService'
 import './ShareLiveModal.less'
-import './ShareLiveModal.less'
 const DEFAULT_COVER = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'
 class ShareLiveModal extends React.Component {
@@ -33,42 +32,6 @@ class ShareLiveModal extends React.Component {
  componentDidMount() {
    // 获取短链接
    this.handleConvertShortUrl()
-    //   const { needStr, data, type } = this.props;
-    //   const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data;
-    //   const { shareUrl ,time} = this.state;
-    //   // 判断是否是默认图, 默认图不需要在URL后面增加字符串
-    //   const isDefaultCover = coverUrl === DEFAULT_COVER;
-    //   let coverImgSrc = coverUrl;
-    //   if(type === 'videoClass'){
-    //     if(!coverUrl || isDefaultCover){
-    //       coverImgSrc = `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring`
-    //     }
-    //   }else{
-    //     data.courseMediaVOS.map((item,index)=>{
-    //       if( item.contentType === "COVER"){
-    //         coverImgSrc = item.mediaUrl;
-    //       }
-    //     })
-    //   }
-    //   let image = new Image()
-    //   image.src =coverImgSrc + '?v=' + Math.random()
-    //   image.crossOrigin = "*"
-    //   image.onload = ()=>{
-    //     let imgData = getBase64Image(image)
-    //    this.setState({imgData})
-    //   }
-    //  function getBase64Image (img) {
-    //     let canvas = document.createElement("canvas")
-    //     canvas.width = img.width
-    //     canvas.height = img.height
-    //     let ctx = canvas.getContext("2d")
-    //     ctx.drawImage(img, 0, 0, img.width, img.height)
-    //     let dataURL = canvas.toDataURL("image/png")
-    //     return dataURL
-    //   }
  }
  handleConvertShortUrl = () => {
@@ -134,17 +97,21 @@ class ShareLiveModal extends React.Component {
  }
  render() {
-    const { needStr, data, type, title } = this.props
+    const { courseDivision, data, type, title } = this.props
    const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data
-    const { shareUrl, imgData, showImg, time } = this.state
+    const { shareUrl, showImg, time } = this.state
    // 判断是否是默认图, 默认图不需要在URL后面增加字符串
    const isDefaultCover = coverUrl === DEFAULT_COVER
    let coverImgSrc = coverUrl
    if (type === 'videoClass') {
-      if ((!coverUrl || isDefaultCover) && title !== '图文课' && title != '线下课') {
+      if ((!coverUrl || isDefaultCover) && title !== '图文课' && title !== '线下课') {
-        coverImgSrc = `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring`
+        if (courseDivision === 'external') {
+          coverImgSrc = 'https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png'
+        } else {
+          coverImgSrc = `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring`
+        }
      }
    } else {
      data.courseMediaVOS.map((item, index) => {
@@ -172,15 +139,19 @@ class ShareLiveModal extends React.Component {
            <div className='course-name-title'>{type === 'videoClass' ? `${courseName}开课啦` : `邀请你观看直播：`}</div>
            {type === 'liveClass' && <div class='live-couse-name'>{courseName}</div>}
-            {showImg ? (
+            <Choose>
-              <img crossOrigin='*' src={coverImgSrc + `?=${time}`} className='course-cover' />
+              <When condition={showImg}>
-            ) : (
+                <img crossOrigin='*' src={coverImgSrc + `?=${time}`} className='course-cover' alt='' />
-              <img src={coverImgSrc + `?=${time}`} className='course-cover' />
+              </When>
-            )}
+              <Otherwise>
+                <img src={coverImgSrc + `?=${time}`} className='course-cover' alt='' />
+              </Otherwise>
+            </Choose>
            <div className='qrcode-wrap'>
              <div className='qrcode-wrap__left'>
                <div className='text'>长按识别二维码进入观看</div>
-                <img className='finger' src='https://image.xiaomaiketang.com/xm/thpkWDwJsC.png' />
+                <img className='finger' src='https://image.xiaomaiketang.com/xm/thpkWDwJsC.png' alt='' />
              </div>
              <div className='qrcode-wrap__right' id='qrcodeWrap'></div>
            </div>

--- a/src/modules/course-manage/video-course/components/VideoCourseFilter.jsx
+++ b/src/modules/course-manage/video-course/components/VideoCourseFilter.jsx
+/*
+ * @Author: 吴文洁
+ * @Date: 2020-08-05 10:11:57
+ * @LastEditors: fusanqiasng
+ * @LastEditTime: 2021-05-28 14:07:37
+ * @Description: 视频课-搜索模块
+ * @Copyright: 杭州杰竞科技有限公司 版权所有
+ */
 import React from 'react'
 import { Row, Input, Select, Tooltip, TreeSelect } from 'antd'
@@ -48,18 +57,21 @@ class VideoCourseFilter extends React.Component {
    this.queryCategoryTree()
  }
  // 查询分类树
-  queryCategoryTree = (categoryName) => {
+  queryCategoryTree = (categoryName = '') => {
    let query = {
      bizType: 'QUESTION',
      source: 2,
+      categoryName,
      tenantId: User.getStoreId(),
      userId: User.getStoreUserId(),
      count: false,
    }
    AidToolService.queryExternalCategoryTree(query).then((res) => {
      const { categoryList = [] } = res.result
+      console.log(this.renderTreeNodes(categoryList))
      this.setState({
        categoryList: this.renderTreeNodes(categoryList),
+        categoryName,
      })
    })
  }
@@ -175,14 +187,15 @@ class VideoCourseFilter extends React.Component {
  render() {
    const { currentTabKey } = this.props
    const {
-      query: { courseName, beginTime, endTime, operatorId, shelfState },
+      query: { courseName, beginTime, endTime, operatorId, shelfState, categoryId },
      expandFilter,
      teacherList,
      teacherQuery,
      categoryList,
-      categoryId,
+      categoryName,
    } = this.state
+    console.log('categoryList', categoryList)
    return (
      <div className='video-course-filter'>
        <Row type='flex' justify='space-between' align='top'>
@@ -261,7 +274,8 @@ class VideoCourseFilter extends React.Component {
                <div className='search-condition__item'>
                  <span className='shelf-status'>课程分类：</span>
                  <TreeSelect
-                    value={categoryId || null}
+                    treeNodeFilterProp='categoryName'
+                    showSearch
                    style={{ width: 'calc(100% - 75px)' }}
                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                    treeData={categoryList}

--- a/src/modules/course-manage/video-course/components/VideoCourseList.jsx
+++ b/src/modules/course-manage/video-course/components/VideoCourseList.jsx
+/*
+ * @Author: 吴文洁
+ * @Date: 2020-08-05 10:12:45
+ * @LastEditors: fusanqiasng
+<<<<<<< HEAD
+ * @LastEditTime: 2021-05-28 14:01:36
+=======
+<<<<<<< Updated upstream
+ * @LastEditTime: 2021-05-27 17:48:31
+=======
+ * @LastEditTime: 2021-05-27 19:13:55
+>>>>>>> Stashed changes
+>>>>>>> feature/pangguoming/20210520/external_courses
+ * @Description: 视频课-列表模块
+ * @Copyright: 杭州杰竞科技有限公司 版权所有
+ */
 import React from 'react'
 import { Table, Modal, message, Tooltip, Switch, Dropdown } from 'antd'
 import _ from 'underscore'
@@ -62,7 +78,6 @@ class VideoCourseList extends React.Component {
        fixed: 'left',
        render: (val, record) => {
          const { coverUrl, scheduleVideoUrl } = record
-          console.log('coverUrl', coverUrl)
          return (
            <div className='record__item'>
              {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
@@ -144,9 +159,9 @@ class VideoCourseList extends React.Component {
            <Tooltip
              title={
                <div>
-                  开启后，用户可在学院内查看到此课程。若课程“未成功开课”，则系统会自动“关闭”学院展示。
+                  开启后，学员可在学院内查看到此课程。
                  <br />
-                  关闭后，学院内不再展示此课程，但用户仍可通过分享的海报/链接查看此课程。
+                  关闭后，学院内不再展示此课程，但学员仍可通过分享的海报/链接查看此课程。
                </div>
              }>
              <i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px' }}>
@@ -240,10 +255,13 @@ class VideoCourseList extends React.Component {
              <div className='operate__item' onClick={() => this.handleShowWatchDataModal(record)}>
                观看数据
              </div>
-              <span className='operate__item split'> | </span>
-              <div className='operate__item' onClick={() => this.handleShowShareModal(record)}>
+              <If condition={type === 'internal'}>
-                分享
+                <span className='operate__item split'> | </span>
-              </div>
+                <div className='operate__item' onClick={() => this.handleShowShareModal(record)}>
+                  分享
+                </div>
+              </If>
              <span className='operate__item split'> | </span>
              <Dropdown overlay={this.renderMoreOperate(record)}>
                <span className='more-operate'>
@@ -350,6 +368,7 @@ class VideoCourseList extends React.Component {
  // 显示分享弹窗
  handleShowShareModal = (record, needStr = false) => {
+    const { type } = this.props
    const { id, scheduleVideoUrl } = record
    const htmlUrl = `${LIVE_SHARE}video_detail/${id}?id=${User.getStoreId()}`
    const longUrl = htmlUrl
@@ -366,6 +385,7 @@ class VideoCourseList extends React.Component {
        needStr={needStr}
        data={shareData}
        type='videoClass'
+        courseDivision={type}
        title='视频课'
        close={() => {
          this.setState({

--- a/src/modules/knowledge-base/modal/AddCourse.jsx
+++ b/src/modules/knowledge-base/modal/AddCourse.jsx