Skip to content

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

feat:外部课程相关模块

parent f1b850cb
Showing with 120 additions and 122 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({
......
src/modules/knowledge-base/modal/AddCourse.jsx
......@@ -3,15 +3,7 @@
* @Author: zangsuyun
* @Date: 2021-03-13 09:54:26
* @LastEditors: fusanqiasng
<<<<<<< HEAD
<<<<<<< HEAD
* @LastEditTime: 2021-05-28 13:44:46
=======
* @LastEditTime: 2021-05-25 21:48:22
>>>>>>> beb2d0f (featru:外部课程冒烟测试bug修复)
=======
* @LastEditTime: 2021-05-27 19:08:41
>>>>>>> 9b82e1b (fix:修复外部课程相关模块bug)
* @LastEditTime: 2021-05-28 14:21:22
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -421,7 +413,6 @@ class AddCourse extends React.Component {
return (
<div className='record__item'>
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<img
className='course-cover'
src={
......@@ -432,7 +423,6 @@ class AddCourse extends React.Component {
}
alt=''
/>
<Choose>
<When condition={record.courseName.length > 25}>
<Tooltip title={record.courseName}>
......@@ -635,10 +625,10 @@ class AddCourse extends React.Component {
handAddCourse = () => {
const { selectVideo, selectLive, selectPicture } = this.state
const batchAddList = []
if (selectVideo.length) {
if (selectVideo.external.length) {
batchAddList.push({
categoryId: this.props.categoryId,
refIds: _.pluck(selectVideo, 'id'),
refIds: _.pluck(selectVideo.external, 'id'),
storeId: User.getStoreId(),
type: 'VOICE',
createId: User.getStoreUserId(),
......@@ -705,7 +695,10 @@ class AddCourse extends React.Component {
return (
<div>
<Button onClick={this.props.onClose}>取消</Button>
<Button disabled={!(selectLive.length || selectVideo.length || selectPicture.length)} type='primary' onClick={this.handAddCourse}>
<Button
disabled={!(selectLive.length || selectVideo.external.length || selectVideo.internal.length || selectPicture.length)}
type='primary'
onClick={this.handAddCourse}>
确定
</Button>
</div>
......@@ -784,24 +777,18 @@ class AddCourse extends React.Component {
return (
<Modal visible={true} width={800} title='新增课程' footer={this.renderFooter()} onCancel={this.props.onClose} className='add-course-modal'>
<Tabs defaultActiveKey='VIDEO'>
<TabPane tab='视频课' key='VIDEO'>
<Radio.Group value={videoCourseDivision} onChange={this.videoCourseDivisionChange} style={{ marginBottom: 8 }}>
<Radio.Button value='internal'>内部课程</Radio.Button>
<Radio.Button value='external'>外部课程</Radio.Button>
</Radio.Group>
<Tabs defaultActiveKey='LIVE'>
<TabPane tab='直播课' key='LIVE'>
<div className='live-list'>
<div>
<Row type='flex' justify='space-between' align='top'>
<div>
<span style={{ lineHeight: '32px' }}>课程名称：</span>
<Search
value={videoSearchDefalt[videoCourseDivision].courseName}
style={{ width: 'calc(100% - 75px)' }}
placeholder='搜索课程名称'
onChange={this.handleChangVideoCourseName}
onSearch={(value) => {
this.handleChangVideoFilter('courseName', value)
this.handleChangLiveFilter('courseName', value)
}}
enterButton={<span className='icon iconfont'>&#xe832;</span>}
/>
......@@ -809,14 +796,15 @@ class AddCourse extends React.Component {
<div style={{ width: '50%' }}>
<span className='shelf-status'>课程分类：</span>
<TreeSelect
value={videoSearchDefalt[videoCourseDivision].categoryId}
treeNodeFilterProp='categoryName'
showSearch
style={{ width: 'calc(100% - 75px)' }}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
treeData={videoCourseDivision === 'internal' ? categoryList : categoryListExternal}
treeData={categoryList}
placeholder='请选择课程类型'
allowClear
onChange={(value) => {
this.handleChangVideoFilter('categoryId', value)
this.handleChangLiveFilter('categoryId', value)
}}
/>
</div>
......@@ -836,57 +824,56 @@ class AddCourse extends React.Component {
}}
/>
<Table
rowKey={(record) => record.id}
dataSource={videoDataSource[videoCourseDivision]}
columns={this.videoColumns()}
bordered
size='middle'
rowSelection={VideoSelection}
pagination={false}
bordered
className='video-list-table'
columns={this.liveColumns()}
rowSelection={LiveSelection}
// loading={loading}
dataSource={liveDataSource}
style={{ maxHeight: 359, overflow: 'scroll' }}
rowKey={(row) => row.liveCourseId}
/>
{liveTotalCount > 0 && (
<div className='box-footer'>
{videoDataSource[videoCourseDivision].length > 0 && (
<PageControl
current={videoQuery[videoCourseDivision].current - 1}
pageSize={videoSize[videoCourseDivision]}
total={videoTotalCount[videoCourseDivision]}
current={liveQuery.current - 1}
pageSize={liveSize}
total={parseInt(liveTotalCount)}
toPage={(page) => {
const _query = { ...videoQuery[videoCourseDivision], current: page + 1 }
console.log('_query', _query)
const _query = { ...liveQuery, current: page + 1 }
this.setState(
{
videoQuery: {
...videoQuery,
[videoCourseDivision]: _query,
},
liveQuery: _query,
},
() => {
this.handleFetchVideoList()
this.handleFetchLiveList()
}
)
}}
onShowSizeChange={this.onShowVideoSizeChange}
onShowSizeChange={this.onShowLiveSizeChange}
/>
)}
</div>
)}
</div>
</TabPane>
<TabPane tab='直播课' key='LIVE'>
<TabPane tab='视频课' key='VIDEO'>
<Radio.Group value={videoCourseDivision} onChange={this.videoCourseDivisionChange} style={{ marginBottom: 8 }}>
<Radio.Button value='internal'>内部课程</Radio.Button>
<Radio.Button value='external'>外部课程</Radio.Button>
</Radio.Group>
<div className='live-list'>
<div>
<Row type='flex' justify='space-between' align='top'>
<div>
<span style={{ lineHeight: '32px' }}>课程名称：</span>
<Search
value={videoSearchDefalt[videoCourseDivision].courseName}
style={{ width: 'calc(100% - 75px)' }}
placeholder='搜索课程名称'
onChange={this.handleChangVideoCourseName}
onSearch={(value) => {
this.handleChangLiveFilter('courseName', value)
this.handleChangVideoFilter('courseName', value)
}}
enterButton={<span className='icon iconfont'>&#xe832;</span>}
/>
......@@ -894,13 +881,15 @@ class AddCourse extends React.Component {
<div style={{ width: '50%' }}>
<span className='shelf-status'>课程分类：</span>
<TreeSelect
treeNodeFilterProp='categoryName'
showSearch
style={{ width: 'calc(100% - 75px)' }}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
treeData={categoryList}
treeData={videoCourseDivision === 'internal' ? categoryList : categoryListExternal}
placeholder='请选择课程类型'
allowClear
onChange={(value) => {
this.handleChangLiveFilter('categoryId', value)
this.handleChangVideoFilter('categoryId', value)
}}
/>
</div>
......@@ -920,43 +909,45 @@ class AddCourse extends React.Component {
}}
/>
<Table
bordered
rowKey={(record) => record.id}
dataSource={videoDataSource[videoCourseDivision]}
columns={this.videoColumns()}
size='middle'
rowSelection={VideoSelection}
pagination={false}
columns={this.liveColumns()}
rowSelection={LiveSelection}
// loading={loading}
dataSource={liveDataSource}
bordered
className='video-list-table'
style={{ maxHeight: 359, overflow: 'scroll' }}
rowKey={(row) => row.liveCourseId}
/>
{liveTotalCount > 0 && (
<div className='box-footer'>
{videoDataSource[videoCourseDivision].length > 0 && (
<PageControl
current={liveQuery.current - 1}
pageSize={liveSize}
total={parseInt(liveTotalCount)}
current={videoQuery[videoCourseDivision].current - 1}
pageSize={videoSize[videoCourseDivision]}
total={videoTotalCount[videoCourseDivision]}
toPage={(page) => {
const _query = { ...liveQuery, current: page + 1 }
const _query = { ...videoQuery[videoCourseDivision], current: page + 1 }
console.log('_query', _query)
this.setState(
{
liveQuery: _query,
videoQuery: {
...videoQuery,
[videoCourseDivision]: _query,
},
},
() => {
this.handleFetchLiveList()
this.handleFetchVideoList()
}
)
}}
onShowSizeChange={this.onShowLiveSizeChange}
onShowSizeChange={this.onShowVideoSizeChange}
/>
</div>
)}
</div>
</div>
</TabPane>
<TabPane tab='图文课' key='PICTURE'>
<div className='live-list'>
<div>
......@@ -975,6 +966,8 @@ class AddCourse extends React.Component {
<div style={{ width: '50%' }}>
<span className='shelf-status'>课程分类：</span>
<TreeSelect
treeNodeFilterProp='categoryName'
showSearch
style={{ width: 'calc(100% - 75px)' }}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
treeData={categoryList}
......
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