Skip to content

X
xiaomai-cloud-class-web
Commit 0acddad6 by guomingpang
Options

feat:外部课程相关模块提交

parent fc15d202
Showing with 174 additions and 230 deletions
src/modules/course-manage/modal/ShareLiveModal.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-07-20 19:12:49 * @Date: 2020-07-20 19:12:49
* @Last Modified by: chenshu * @Last Modified by: chenshu
* @Last Modified time: 2021-05-25 16:11:25 * @Last Modified time: 2021-05-25 16:11:25
* @Description: 大班直播分享弹窗 * @Description: 大班直播分享弹窗
*/ */
import React from 'react'; import React from 'react'
import { Modal, Input, Button, message } from 'antd'; import { Modal, Input, Button, message } from 'antd'
import domtoimage from 'dom-to-image'; import domtoimage from 'dom-to-image'
import html2canvas from 'html2canvas'; import html2canvas from 'html2canvas'
import qrcode from "@/libs/qrcode/qrcode.js"; import qrcode from '@/libs/qrcode/qrcode.js'
import User from '@/common/js/user'; import User from '@/common/js/user'
import $ from 'jquery'; import $ from 'jquery'
import CourseService from "@/domains/course-domain/CourseService"; import CourseService from '@/domains/course-domain/CourseService'
import './ShareLiveModal.less'; import './ShareLiveModal.less'
const storeName = User.getStoreName(); import './ShareLiveModal.less'
const DEFAULT_COVER = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
class ShareLiveModal extends React.Component { const DEFAULT_COVER = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'
class ShareLiveModal extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
shareUrl: 'https://xiaomai5.com/liveShare?courseId=12' shareUrl: 'https://xiaomai5.com/liveShare?courseId=12',
} }
} }
componentDidMount() { componentDidMount() {
// 获取短链接 // 获取短链接
this.handleConvertShortUrl(); this.handleConvertShortUrl()
// const { needStr, data, type } = this.props; // const { needStr, data, type } = this.props;
// const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data; // const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data;
// const { shareUrl ,time} = this.state; // const { shareUrl ,time} = this.state;
// // 判断是否是默认图, 默认图不需要在URL后面增加字符串 // // 判断是否是默认图, 默认图不需要在URL后面增加字符串
// const isDefaultCover = coverUrl === DEFAULT_COVER; // const isDefaultCover = coverUrl === DEFAULT_COVER;
// let coverImgSrc = coverUrl; // let coverImgSrc = coverUrl;
// if(type === 'videoClass'){ // if(type === 'videoClass'){
// if(!coverUrl || isDefaultCover){ // if(!coverUrl || isDefaultCover){
// coverImgSrc = `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring` // coverImgSrc = `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring`
// } // }
// }else{ // }else{
// data.courseMediaVOS.map((item,index)=>{ // data.courseMediaVOS.map((item,index)=>{
// if( item.contentType === "COVER"){ // if( item.contentType === "COVER"){
// coverImgSrc = item.mediaUrl; // coverImgSrc = item.mediaUrl;
// } // }
// }) // })
// } // }
// let image = new Image() // let image = new Image()
// image.src =coverImgSrc + '?v=' + Math.random() // image.src =coverImgSrc + '?v=' + Math.random()
// image.crossOrigin = "*" // image.crossOrigin = "*"
// image.onload = ()=>{ // image.onload = ()=>{
// let imgData = getBase64Image(image) // let imgData = getBase64Image(image)
// this.setState({imgData}) // this.setState({imgData})
// } // }
// function getBase64Image (img) { // function getBase64Image (img) {
// let canvas = document.createElement("canvas") // let canvas = document.createElement("canvas")
// canvas.width = img.width // canvas.width = img.width
// canvas.height = img.height // canvas.height = img.height
// let ctx = canvas.getContext("2d") // let ctx = canvas.getContext("2d")
// ctx.drawImage(img, 0, 0, img.width, img.height) // ctx.drawImage(img, 0, 0, img.width, img.height)
// let dataURL = canvas.toDataURL("image/png") // let dataURL = canvas.toDataURL("image/png")
// return dataURL // return dataURL
// } // }
} }
handleConvertShortUrl = () => { handleConvertShortUrl = () => {
const { longUrl } = this.props.data; const { longUrl } = this.props.data
// 发请求 // 发请求
CourseService.getQrcode({ CourseService.getQrcode({
urls: [longUrl] urls: [longUrl],
}).then((res) => { }).then((res) => {
const { result = [] } = res; const { result = [] } = res
this.setState({ this.setState(
shareUrl: result[0].shortUrl {
}, () => { shareUrl: result[0].shortUrl,
const qrcodeWrapDom = document.querySelector('#qrcodeWrap'); },
const qrcodeNode = new qrcode({ () => {
text: this.state.shareUrl, const qrcodeWrapDom = document.querySelector('#qrcodeWrap')
size: 98, const qrcodeNode = new qrcode({
}) text: this.state.shareUrl,
qrcodeWrapDom.appendChild(qrcodeNode); size: 98,
}); })
qrcodeWrapDom.appendChild(qrcodeNode)
}
)
}) })
} }
componentWillUnmount() { componentWillUnmount() {
// 页面销毁之前清空定时器 // 页面销毁之前清空定时器
clearTimeout(this.timer); clearTimeout(this.timer)
} }
// 下载海报 // 下载海报
handleDownloadPoster = () => { handleDownloadPoster = () => {
this.setState({ this.setState(
showImg:true, {
time:new Date().valueOf() showImg: true,
},()=>{ time: new Date().valueOf(),
this.setState({ time: new Date().valueOf() }, () => { },
setTimeout(() => { () => {
let node = document.getElementById('poster'); this.setState({ time: new Date().valueOf() }, () => {
domtoimage.toPng(node) setTimeout(() => {
.then((imgData) => { let node = document.getElementById('poster')
domtoimage.toPng(node).then((imgData) => {
console.log(imgData) console.log(imgData)
const download = document.createElement('a'); const download = document.createElement('a')
const { courseName } = this.props.data; const { courseName } = this.props.data
$(download).attr('href', imgData).attr('download', `${courseName}.png`).get(0).click(); $(download).attr('href', imgData).attr('download', `${courseName}.png`).get(0).click()
// this.props.close() // this.props.close()
}) })
}, 1000) }, 1000)
}) })
}) }
)
} }
// 复制分享链接 // 复制分享链接
handleCopy = () => { handleCopy = () => {
const textContent = document.getElementById('shareUrl').innerText; const textContent = document.getElementById('shareUrl').innerText
window.copyText(textContent); window.copyText(textContent)
message.success('复制成功!'); message.success('复制成功!')
} }
render() { render() {
const { needStr, data, type, title } = this.props; const { needStr, data, type, title } = this.props
const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data; const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data
const { shareUrl ,imgData,showImg,time} = this.state; const { shareUrl, imgData, showImg, time } = this.state
// 判断是否是默认图, 默认图不需要在URL后面增加字符串 // 判断是否是默认图, 默认图不需要在URL后面增加字符串
const isDefaultCover = coverUrl === DEFAULT_COVER; const isDefaultCover = coverUrl === DEFAULT_COVER
let coverImgSrc = coverUrl; let coverImgSrc = coverUrl
if(type === 'videoClass'){ 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` coverImgSrc = `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring`
} }
}else{ } else {
data.courseMediaVOS.map((item,index)=>{ data.courseMediaVOS.map((item, index) => {
if( item.contentType === "COVER"){ if (item.contentType === 'COVER') {
coverImgSrc = item.mediaUrl; coverImgSrc = item.mediaUrl
} }
}) })
} }
return ( return (
<Modal <Modal
title={`分享${title}`} title={`分享${title}`}
width={680} width={680}
visible={true} visible={true}
footer={null} footer={null}
maskClosable={false} maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}
className="share-live-modal" className='share-live-modal'
onCancel={this.props.close} onCancel={this.props.close}>
> <div className='left'>
<div className="left"> <div id='poster'>
<div id="poster"> <div className='store-name'>
<div className="store-name"> <span className='text'>{User.getStoreName()}</span>
<span className="text">{storeName}</span>
</div>
<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"
/>
}
<div className="qrcode-wrap">
<div className="qrcode-wrap__left">
<div className="text">长按识别二维码进入观看</div>
<img className="finger" src="https://image.xiaomaiketang.com/xm/thpkWDwJsC.png"/>
</div> </div>
<div className="qrcode-wrap__right" id="qrcodeWrap">
<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' />
)}
<div className='qrcode-wrap'>
<div className='qrcode-wrap__left'>
<div className='text'>长按识别二维码进入观看</div>
<img className='finger' src='https://image.xiaomaiketang.com/xm/thpkWDwJsC.png' />
</div>
<div className='qrcode-wrap__right' id='qrcodeWrap'></div>
</div> </div>
</div> </div>
</div> </div>
</div> <div className='right'>
<div className="right"> <div className='share-poster right__item'>
<div className="share-poster right__item"> <div className='title'>① 海报分享</div>
<div className="title">① 海报分享</div> {type === 'liveClass' && <div className='sub-title'>学员可通过微信扫描海报二维码，观看{title}</div>}
{ type === "liveClass" && {type === 'videoClass' && <div className='sub-title'>学员可通过微信识别二维码，报名观看{title}</div>}
<div className="sub-title">学员可通过微信扫描海报二维码，观看{title}</div>
} <div className='content' onClick={_.debounce(this.handleDownloadPoster, 1000, true)}>
{ type === "videoClass" && 下载海报
<div className="sub-title">学员可通过微信识别二维码，报名观看{title}</div> </div>
} </div>
<div className="content" onClick={_.debounce(this.handleDownloadPoster, 1000, true)}>下载海报</div>
</div>
<div className="share-url right__item"> <div className='share-url right__item'>
<div className="title">② 链接分享</div> <div className='title'>② 链接分享</div>
{ type === "liveClass" && {type === 'liveClass' && <div className='sub-title'>学员可通过微信打开以下链接，观看{title}</div>}
<div className="sub-title">学员可通过微信打开以下链接，观看{title}</div> {type === 'videoClass' && <div className='sub-title'>学员可通过打开链接，报名观看{title}</div>}
} <div className='content url-content'>
{ type === "videoClass" && <div className='share-url' id='shareUrl'>
<div className="sub-title">学员可通过打开链接，报名观看{title}</div> {shareUrl}
} </div>
<div className="content url-content"> <Button type='primary' onClick={this.handleCopy}>
<div className="share-url" id="shareUrl">{shareUrl}</div> 复制
<Button type="primary" onClick={this.handleCopy}>复制</Button> </Button>
</div>
</div> </div>
</div> </div>
</div>
</Modal> </Modal>
) )
} }
} }
export default ShareLiveModal; export default ShareLiveModal
src/modules/course-manage/video-course/components/VideoCourseList.jsx
<<<<<<< HEAD
=======
/*
* @Author: 吴文洁
* @Date: 2020-08-05 10:12:45
* @LastEditors: fusanqiasng
* @LastEditTime: 2021-05-28 13:32:59
* @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
>>>>>>> 4399d60 (fix:修复外部课程相关模块bug)
import React from 'react' import React from 'react'
import { Table, Modal, message, Tooltip, Switch, Dropdown } from 'antd' import { Table, Modal, message, Tooltip, Switch, Dropdown } from 'antd'
import _ from 'underscore' import _ from 'underscore'
...@@ -35,14 +24,6 @@ class VideoCourseList extends React.Component { ...@@ -35,14 +24,6 @@ class VideoCourseList extends React.Component {
// dataSource: [], // dataSource: [],
} }
} }
// static getDerivedStateFromProps(props, state) {
// const { dataSource: propsDataSource } = props,{dataSource:stateDataSource} =state
// const istrue = _.isEqual(propsDataSource, stateDataSource)
// if (!istrue) {
// state.dataSource = propsDataSource
// }
// console.log(istrue, 'istrue')
// }
componentDidMount() { componentDidMount() {
const videoCourseItem = localStorage.getItem('videoCourseItem') const videoCourseItem = localStorage.getItem('videoCourseItem')
...@@ -177,12 +158,7 @@ class VideoCourseList extends React.Component { ...@@ -177,12 +158,7 @@ class VideoCourseList extends React.Component {
width: 120, width: 120,
key: 'shelfState', key: 'shelfState',
dataIndex: 'shelfState', dataIndex: 'shelfState',
// shouldCellUpdate: (record, prevRecord) => {
// // console.log(record.shelfState, prevRecord.shelfState)
// return true
// },
render: (val, item, index) => { render: (val, item, index) => {
console.log(val, item.shelfState === 'YES', 'aaa')
return ( return (
<Switch <Switch
loading={ShelfLoading} loading={ShelfLoading}
...@@ -191,13 +167,8 @@ class VideoCourseList extends React.Component { ...@@ -191,13 +167,8 @@ class VideoCourseList extends React.Component {
checked={item.shelfState === 'YES'} checked={item.shelfState === 'YES'}
defaultChecked={item.shelfState} defaultChecked={item.shelfState}
onClick={(checked) => { onClick={(checked) => {
console.log('checked', checked)
this.changeShelfState(checked, item, index) this.changeShelfState(checked, item, index)
}} }}
// onChange={() => {
// return false
// this.changeShelfState(item)
// }}
/> />
) )
}, },
......
src/modules/knowledge-base/modal/AddCourse.jsx
...@@ -4,10 +4,14 @@ ...@@ -4,10 +4,14 @@
* @Date: 2021-03-13 09:54:26 * @Date: 2021-03-13 09:54:26
* @LastEditors: fusanqiasng * @LastEditors: fusanqiasng
<<<<<<< HEAD <<<<<<< HEAD
* @LastEditTime: 2021-05-28 13:18:39 <<<<<<< HEAD
* @LastEditTime: 2021-05-28 13:44:46
======= =======
* @LastEditTime: 2021-05-25 21:48:22 * @LastEditTime: 2021-05-25 21:48:22
>>>>>>> beb2d0f (featru:外部课程冒烟测试bug修复) >>>>>>> beb2d0f (featru:外部课程冒烟测试bug修复)
=======
* @LastEditTime: 2021-05-27 19:08:41
>>>>>>> 9b82e1b (fix:修复外部课程相关模块bug)
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -29,7 +33,7 @@ const courseStateShow = { ...@@ -29,7 +33,7 @@ const courseStateShow = {
UN_START: { UN_START: {
code: 1, code: 1,
title: '待开课', title: '待开课',
color: '#FFB714', color: '#2966FF',
}, },
STARTING: { STARTING: {
code: 2, code: 2,
...@@ -389,6 +393,7 @@ class AddCourse extends React.Component { ...@@ -389,6 +393,7 @@ class AddCourse extends React.Component {
} }
videoColumns = () => { videoColumns = () => {
const { videoCourseDivision } = this.state
const columns = [ const columns = [
{ {
title: ( title: (
...@@ -639,6 +644,15 @@ class AddCourse extends React.Component { ...@@ -639,6 +644,15 @@ class AddCourse extends React.Component {
createId: User.getStoreUserId(), createId: User.getStoreUserId(),
}) })
} }
if (selectVideo.internal.length) {
batchAddList.push({
categoryId: this.props.categoryId,
refIds: _.pluck(selectVideo.internal, 'id'),
storeId: User.getStoreId(),
type: 'VOICE',
createId: User.getStoreUserId(),
})
}
if (selectLive.length) { if (selectLive.length) {
batchAddList.push({ batchAddList.push({
categoryId: this.props.categoryId, categoryId: this.props.categoryId,
...@@ -758,7 +772,6 @@ class AddCourse extends React.Component { ...@@ -758,7 +772,6 @@ class AddCourse extends React.Component {
selectedRowKeys: _.pluck(selectPicture, 'id'), selectedRowKeys: _.pluck(selectPicture, 'id'),
onSelect: this.selectPictureList, onSelect: this.selectPictureList,
onSelectAll: (selected, _selectedRows, changeRows) => { onSelectAll: (selected, _selectedRows, changeRows) => {
console.log(changeRows)
let _list = [] let _list = []
if (selected) { if (selected) {
_list = _.uniq(selectPicture.concat(changeRows), false, (item) => item.id) _list = _.uniq(selectPicture.concat(changeRows), false, (item) => item.id)
...@@ -849,6 +862,8 @@ class AddCourse extends React.Component { ...@@ -849,6 +862,8 @@ class AddCourse extends React.Component {
...videoQuery, ...videoQuery,
[videoCourseDivision]: _query, [videoCourseDivision]: _query,
}, },
liveQuery: _query,
}, },
() => { () => {
this.handleFetchVideoList() this.handleFetchVideoList()
...@@ -926,6 +941,10 @@ class AddCourse extends React.Component { ...@@ -926,6 +941,10 @@ class AddCourse extends React.Component {
this.setState( this.setState(
{ {
liveQuery: _query, liveQuery: _query,
videoQuery: {
...videoQuery,
[videoCourseDivision]: _query,
},
}, },
() => { () => {
this.handleFetchLiveList() this.handleFetchLiveList()
......
src/modules/root/WechatLogin.less
...@@ -39,42 +39,7 @@ ...@@ -39,42 +39,7 @@
color: rgba(82, 137, 250, 1); color: rgba(82, 137, 250, 1);
} }
} }
<<<<<<< HEAD
.rwm{
position: relative;
width: 160px;
height: 160px;
text-align: center;
display: inline-block;
margin-top: 24px;
.error{
position: absolute;
width: 170px;
height: 170px;
background: rgba(255, 255, 255, 0.95);
display: flex;
align-items:center;
justify-content:center;
left:-5px;
top:-5px;
div{
margin: 0 10px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 20px;
}
.ope{
cursor: pointer;
color:rgba(82, 137, 250, 1);
}
}
}
=======
} }
>>>>>>> 4ed93ca (feat:新增视频课外部视频模块相关功能,准备开始冒烟测试)
.ant-tabs-tab-active { .ant-tabs-tab-active {
.ant-tabs-tab-btn { .ant-tabs-tab-btn {
......
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