Skip to content

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

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

parent fc15d202
Showing with 116 additions and 172 deletions
src/modules/course-manage/modal/ShareLiveModal.jsx
......@@ -6,33 +6,33 @@
* @Description: 大班直播分享弹窗
*/
import React from 'react';
import { Modal, Input, 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 CourseService from "@/domains/course-domain/CourseService";
import React from 'react'
import { Modal, Input, 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 CourseService from '@/domains/course-domain/CourseService'
import './ShareLiveModal.less';
import './ShareLiveModal.less'
const storeName = User.getStoreName();
const DEFAULT_COVER = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
import './ShareLiveModal.less'
class ShareLiveModal extends React.Component {
const DEFAULT_COVER = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'
class ShareLiveModal extends React.Component {
constructor(props) {
super(props);
super(props)
this.state = {
shareUrl: 'https://xiaomai5.com/liveShare?courseId=12'
shareUrl: 'https://xiaomai5.com/liveShare?courseId=12',
}
}
componentDidMount() {
// 获取短链接
this.handleConvertShortUrl();
this.handleConvertShortUrl()
// const { needStr, data, type } = this.props;
// const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data;
// const { shareUrl ,time} = this.state;
......@@ -69,156 +69,145 @@ class ShareLiveModal extends React.Component {
// let dataURL = canvas.toDataURL("image/png")
// return dataURL
// }
}
handleConvertShortUrl = () => {
const { longUrl } = this.props.data;
const { longUrl } = this.props.data
// 发请求
CourseService.getQrcode({
urls: [longUrl]
urls: [longUrl],
}).then((res) => {
const { result = [] } = res;
const { result = [] } = res
this.setState({
shareUrl: result[0].shortUrl
}, () => {
const qrcodeWrapDom = document.querySelector('#qrcodeWrap');
this.setState(
{
shareUrl: result[0].shortUrl,
},
() => {
const qrcodeWrapDom = document.querySelector('#qrcodeWrap')
const qrcodeNode = new qrcode({
text: this.state.shareUrl,
size: 98,
})
qrcodeWrapDom.appendChild(qrcodeNode);
});
qrcodeWrapDom.appendChild(qrcodeNode)
}
)
})
}
componentWillUnmount() {
// 页面销毁之前清空定时器
clearTimeout(this.timer);
clearTimeout(this.timer)
}
// 下载海报
handleDownloadPoster = () => {
this.setState({
showImg:true,
time:new Date().valueOf()
},()=>{
this.setState(
{
showImg: true,
time: new Date().valueOf(),
},
() => {
this.setState({ time: new Date().valueOf() }, () => {
setTimeout(() => {
let node = document.getElementById('poster');
domtoimage.toPng(node)
.then((imgData) => {
let node = document.getElementById('poster')
domtoimage.toPng(node).then((imgData) => {
console.log(imgData)
const download = document.createElement('a');
const { courseName } = this.props.data;
$(download).attr('href', imgData).attr('download', `${courseName}.png`).get(0).click();
const download = document.createElement('a')
const { courseName } = this.props.data
$(download).attr('href', imgData).attr('download', `${courseName}.png`).get(0).click()
// this.props.close()
})
}, 1000)
})
})
}
)
}
// 复制分享链接
handleCopy = () => {
const textContent = document.getElementById('shareUrl').innerText;
const textContent = document.getElementById('shareUrl').innerText
window.copyText(textContent);
message.success('复制成功!');
window.copyText(textContent)
message.success('复制成功!')
}
render() {
const { needStr, data, type, title } = this.props;
const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data;
const { shareUrl ,imgData,showImg,time} = this.state;
const { needStr, data, type, title } = this.props
const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data
const { shareUrl, imgData, showImg, time } = this.state
// 判断是否是默认图, 默认图不需要在URL后面增加字符串
const isDefaultCover = coverUrl === DEFAULT_COVER;
const isDefaultCover = coverUrl === DEFAULT_COVER
let coverImgSrc = coverUrl;
if(type === 'videoClass'){
if((!coverUrl || isDefaultCover) && title !== '图文课' && title != '线下课'){
let coverImgSrc = coverUrl
if (type === 'videoClass') {
if ((!coverUrl || isDefaultCover) && title !== '图文课' && title != '线下课') {
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;
} else {
data.courseMediaVOS.map((item, index) => {
if (item.contentType === 'COVER') {
coverImgSrc = item.mediaUrl
}
})
}
return (
<Modal
title={`分享${title}`}
width={680}
visible={true}
footer={null}
maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
className="share-live-modal"
onCancel={this.props.close}
>
<div className="left">
<div id="poster">
<div className="store-name">
<span className="text">{storeName}</span>
closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}
className='share-live-modal'
onCancel={this.props.close}>
<div className='left'>
<div id='poster'>
<div className='store-name'>
<span className='text'>{User.getStoreName()}</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 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 className='qrcode-wrap__right' id='qrcodeWrap'></div>
</div>
</div>
</div>
<div className='right'>
<div className='share-poster right__item'>
<div className='title'>① 海报分享</div>
{type === 'liveClass' && <div className='sub-title'>学员可通过微信扫描海报二维码，观看{title}</div>}
{type === 'videoClass' && <div className='sub-title'>学员可通过微信识别二维码，报名观看{title}</div>}
<div className='content' onClick={_.debounce(this.handleDownloadPoster, 1000, true)}>
下载海报
</div>
<div className="right">
<div className="share-poster right__item">
<div className="title">① 海报分享</div>
{ type === "liveClass" &&
<div className="sub-title">学员可通过微信扫描海报二维码，观看{title}</div>
}
{ type === "videoClass" &&
<div className="sub-title">学员可通过微信识别二维码，报名观看{title}</div>
}
<div className="content" onClick={_.debounce(this.handleDownloadPoster, 1000, true)}>下载海报</div>
</div>
<div className="share-url right__item">
<div className="title">② 链接分享</div>
{ type === "liveClass" &&
<div className="sub-title">学员可通过微信打开以下链接，观看{title}</div>
}
{ type === "videoClass" &&
<div className="sub-title">学员可通过打开链接，报名观看{title}</div>
}
<div className="content url-content">
<div className="share-url" id="shareUrl">{shareUrl}</div>
<Button type="primary" onClick={this.handleCopy}>复制</Button>
<div className='share-url right__item'>
<div className='title'>② 链接分享</div>
{type === 'liveClass' && <div className='sub-title'>学员可通过微信打开以下链接，观看{title}</div>}
{type === 'videoClass' && <div className='sub-title'>学员可通过打开链接，报名观看{title}</div>}
<div className='content url-content'>
<div className='share-url' id='shareUrl'>
{shareUrl}
</div>
<Button type='primary' onClick={this.handleCopy}>
复制
</Button>
</div>
</div>
</div>
......@@ -227,4 +216,4 @@ class ShareLiveModal extends React.Component {
}
}
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 { Table, Modal, message, Tooltip, Switch, Dropdown } from 'antd'
import _ from 'underscore'
......@@ -35,14 +24,6 @@ class VideoCourseList extends React.Component {
// 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() {
const videoCourseItem = localStorage.getItem('videoCourseItem')
......@@ -177,12 +158,7 @@ class VideoCourseList extends React.Component {
width: 120,
key: 'shelfState',
dataIndex: 'shelfState',
// shouldCellUpdate: (record, prevRecord) => {
// // console.log(record.shelfState, prevRecord.shelfState)
// return true
// },
render: (val, item, index) => {
console.log(val, item.shelfState === 'YES', 'aaa')
return (
<Switch
loading={ShelfLoading}
......@@ -191,13 +167,8 @@ class VideoCourseList extends React.Component {
checked={item.shelfState === 'YES'}
defaultChecked={item.shelfState}
onClick={(checked) => {
console.log('checked', checked)
this.changeShelfState(checked, item, index)
}}
// onChange={() => {
// return false
// this.changeShelfState(item)
// }}
/>
)
},
......
src/modules/knowledge-base/modal/AddCourse.jsx
......@@ -4,10 +4,14 @@
* @Date: 2021-03-13 09:54:26
* @LastEditors: fusanqiasng
<<<<<<< HEAD
* @LastEditTime: 2021-05-28 13:18:39
<<<<<<< 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)
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -29,7 +33,7 @@ const courseStateShow = {
UN_START: {
code: 1,
title: '待开课',
color: '#FFB714',
color: '#2966FF',
},
STARTING: {
code: 2,
......@@ -389,6 +393,7 @@ class AddCourse extends React.Component {
}
videoColumns = () => {
const { videoCourseDivision } = this.state
const columns = [
{
title: (
......@@ -639,6 +644,15 @@ class AddCourse extends React.Component {
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) {
batchAddList.push({
categoryId: this.props.categoryId,
......@@ -758,7 +772,6 @@ class AddCourse extends React.Component {
selectedRowKeys: _.pluck(selectPicture, 'id'),
onSelect: this.selectPictureList,
onSelectAll: (selected, _selectedRows, changeRows) => {
console.log(changeRows)
let _list = []
if (selected) {
_list = _.uniq(selectPicture.concat(changeRows), false, (item) => item.id)
......@@ -849,6 +862,8 @@ class AddCourse extends React.Component {
...videoQuery,
[videoCourseDivision]: _query,
},
liveQuery: _query,
},
() => {
this.handleFetchVideoList()
......@@ -926,6 +941,10 @@ class AddCourse extends React.Component {
this.setState(
{
liveQuery: _query,
videoQuery: {
...videoQuery,
[videoCourseDivision]: _query,
},
},
() => {
this.handleFetchLiveList()
......
src/modules/root/WechatLogin.less
......@@ -39,42 +39,7 @@
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-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