Skip to content

X
xiaomai-cloud-class-web
Commit f2b70b05 by guomingpang
Options

feat:外部课程相关模块

parent f1b850cb
Showing with 61 additions and 56 deletions
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,18 +97,22 @@ 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 !== '线下课') {
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) => {
if (item.contentType === 'COVER') {
......@@ -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 ? (
<img crossOrigin='*' src={coverImgSrc + `?=${time}`} className='course-cover' />
) : (
<img src={coverImgSrc + `?=${time}`} className='course-cover' />
)}
<Choose>
<When condition={showImg}>
<img crossOrigin='*' src={coverImgSrc + `?=${time}`} className='course-cover' alt='' />
</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>
......
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}
......
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>
<If condition={type === 'internal'}>
<span className='operate__item split'> | </span>
<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({
......
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