Skip to content

X
xiaomai-cloud-class-web
Commit 94f36a3e by chenshu
Options

feat:初始化页面

parent 1b3ed6eb
Showing with 441 additions and 157 deletions
package.json
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
"underscore": "^1.10.2", "underscore": "^1.10.2",
"url-loader": "2.3.0", "url-loader": "2.3.0",
"video-react": "0.14.1", "video-react": "0.14.1",
"wangeditor": "^3.1.1", "wangeditor": "^4.6.9",
"webpack": "4.42.0", "webpack": "4.42.0",
"webpack-dev-server": "3.11.0", "webpack-dev-server": "3.11.0",
"webpack-manifest-plugin": "2.2.0", "webpack-manifest-plugin": "2.2.0",
......
src/core/upload.js
...@@ -146,6 +146,36 @@ class Upload { ...@@ -146,6 +146,36 @@ class Upload {
xhr.send(fd); xhr.send(fd);
}) })
} }
static uploadTextToOSS(string, name, success, error) {
if (!string) return success();
const params = {
accessTypeEnum: "PUBLIC",
bizCode: 'CLOUD_CLASS_COMMON',
instId: User.getStoreId(),
resourceName: name,
}
Service.Hades('/public/hades/ossAuthority', params).then((res) => {
const { resourceId, accessId, policy, callback, signature,key, host } = res.result;
const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append("OSSAccessKeyId", accessId);
formData.append("policy", policy);
formData.append("callback", callback);
formData.append("Signature", signature);
formData.append("key", key);
formData.append("file", new Blob([string]));
formData.append("success_action_status", 200);
xhr.open("POST", host);
xhr.onload = () => {
success(resourceId);
};
xhr.onerror = () => {
error();
}
xhr.send(formData);
})
}
} }
export default Upload; export default Upload;
\ No newline at end of file
src/modules/course-manage/components/EditorBox.jsx
...@@ -21,7 +21,7 @@ class EditorBox extends React.Component { ...@@ -21,7 +21,7 @@ class EditorBox extends React.Component {
const { editorId } = this.state; const { editorId } = this.state;
const { detail, onChange } = this.props; const { detail, onChange } = this.props;
const editorInt = new E(`#editor${editorId}`); const editorInt = new E(`#editor${editorId}`);
editorInt.customConfig.menus = [ editorInt.config.menus = [
// 'head', // 标题 // 'head', // 标题
'bold', // 粗体 'bold', // 粗体
// 'fontSize', // 字号 // 'fontSize', // 字号
...@@ -36,18 +36,18 @@ class EditorBox extends React.Component { ...@@ -36,18 +36,18 @@ class EditorBox extends React.Component {
'emoticon', // 表情 'emoticon', // 表情
] ]
editorInt.customConfig.emotions = [ editorInt.config.emotions = [
{ {
title: 'emoji', title: 'emoji',
type: 'emoji', type: 'emoji',
content: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '😊', '🙂', '🙃', '😉', '😓', '😅', '😪', '🤔', '😬', '🤐'] content: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '😊', '🙂', '🙃', '😉', '😓', '😅', '😪', '🤔', '😬', '🤐']
} }
] ]
editorInt.customConfig.zIndex = 1; editorInt.config.zIndex = 1;
editorInt.customConfig.pasteFilterStyle = false; editorInt.config.pasteFilterStyle = false;
editorInt.customConfig.pasteIgnoreImg = true; editorInt.config.pasteIgnoreImg = true;
// 自定义处理粘贴的文本内容 // 自定义处理粘贴的文本内容
editorInt.customConfig.pasteTextHandle = function (content) { editorInt.config.pasteTextHandle = function (content) {
if (content == '' && !content) return '' if (content == '' && !content) return ''
var str = content var str = content
str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '') str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
...@@ -56,7 +56,7 @@ class EditorBox extends React.Component { ...@@ -56,7 +56,7 @@ class EditorBox extends React.Component {
str = str.replace(/\&nbsp\;/ig, ' ') str = str.replace(/\&nbsp\;/ig, ' ')
return str return str
} }
editorInt.customConfig.onchange = (html) => { editorInt.config.onchange = (html) => {
const textLength = editorInt.txt.text().replace(/\&nbsp\;/ig, ' ').length; const textLength = editorInt.txt.text().replace(/\&nbsp\;/ig, ' ').length;
this.setState({ textLength }, () => { this.setState({ textLength }, () => {
onChange(html, this.state.textLength); onChange(html, this.state.textLength);
...@@ -64,7 +64,6 @@ class EditorBox extends React.Component { ...@@ -64,7 +64,6 @@ class EditorBox extends React.Component {
} }
editorInt.create(); editorInt.create();
editorInt.txt.html(detail.content); editorInt.txt.html(detail.content);
editorInt.change && editorInt.change();
} }
render() { render() {
......
src/modules/course-manage/components/GraphicsEditor.jsx 0 → 100644
import React from 'react';
import E from 'wangeditor';
import './GraphicsEditor.less';
class GraphicsEditor extends React.Component {
constructor(props) {
super(props)
this.state = {
editorId: window.random_string(16),
textLength: 0,
}
}
componentDidMount() {
this.renderEditor()
this.resetIndex(true);
}
componentWillUnmount() {
this.resetIndex();
}
resetIndex = (bool) => {
const topDom = document.querySelector('.top-container');
const leftDom = document.querySelector('.left-container');
topDom.style.zIndex = bool ? 'auto' : 112;
leftDom.style.zIndex = bool ? 'auto' : 2;
}
renderEditor() {
const { editorId } = this.state;
const { detail, onChange, isIntro } = this.props;
const editorInt = new E(`#editor${editorId}`);
editorInt.config.showFullScreen = !isIntro
editorInt.config.menus = isIntro ?
[
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'foreColor',
'backColor',
'list',
'justify',
'emoticon',
'image',
]
: [
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'indent',
'lineHeight',
'foreColor',
'backColor',
'link',
'list',
'todo',
'justify',
'quote',
'emoticon',
'image',
'video',
'table',
'code',
'splitLine',
'undo',
'redo',
];
editorInt.config.emotions = [
{
title: 'emoji',
type: 'emoji',
content: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '😊', '🙂', '🙃', '😉', '😓', '😅', '😪', '🤔', '😬', '🤐']
}
]
editorInt.config.zIndex = 1;
editorInt.config.pasteFilterStyle = false;
editorInt.config.pasteIgnoreImg = true;
// 自定义处理粘贴的文本内容
editorInt.config.pasteTextHandle = function (content) {
if (content == '' && !content) return ''
var str = content
str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
str = str.replace(/[ | ]*\n/g, '\n')
str = str.replace(/\&nbsp\;/ig, ' ')
return str
}
editorInt.config.onchange = (html) => {
const textLength = editorInt.txt.text().replace(/\&nbsp\;/ig, ' ').length;
this.setState({ textLength }, () => {
onChange(html, this.state.textLength);
})
}
editorInt.create();
editorInt.txt.html(detail.content);
}
render() {
const { editorId, textLength } = this.state;
const { limitLength = 1000 } = this.props;
return <div className="wang-editor-container ">
<div className="editor-box" id={`editor${editorId}`}></div>
{textLength > limitLength && <div className="editor-tips">超了{textLength - limitLength}个字</div>}
</div>
}
}
export default GraphicsEditor;
src/modules/course-manage/components/GraphicsEditor.less 0 → 100644
.wang-editor-container {
border: 1px solid #E8E8E8;
border-radius: 4px;
width: 552px;
position: relative;
.w-e-text p,
.w-e-text h1,
.w-e-text h2,
.w-e-text h3,
.w-e-text h4,
.w-e-text h5,
.w-e-text table,
.w-e-text pre {
margin: 0;
}
.w-e-toolbar {
background-color: #fff !important;
border: none !important;
border-bottom: 1px solid #E8E8E8 !important;
}
.w-e-text-container {
border: none !important;
height: 88px !important;
}
.editor-tips {
position: absolute;
top: 5px;
right: 8px;
color: #f5222d;
}
}
\ No newline at end of file
src/modules/course-manage/components/LiveCourseList.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-07-14 15:43:00 * @Date: 2020-07-14 15:43:00
* @Last Modified by: mikey.zhaopeng * @Last Modified by: chenshu
* @Last Modified time: 2020-11-23 20:23:12 * @Last Modified time: 2021-03-16 17:37:23
* @Description: 大班直播、互动班课的直播课列表 * @Description: 大班直播、互动班课的直播课列表
*/ */
...@@ -83,6 +83,7 @@ class LiveCourseList extends React.Component { ...@@ -83,6 +83,7 @@ class LiveCourseList extends React.Component {
needStr={needStr} needStr={needStr}
data={shareData} data={shareData}
type="liveClass" type="liveClass"
title="直播课"
close={() => { close={() => {
this.setState({ this.setState({
shareLiveModal: null shareLiveModal: null
......
src/modules/course-manage/graphics-course/components/AddVideoIntro.jsx → src/modules/course-manage/graphics-course/components/AddGraphicsIntro.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-07-16 11:05:17 * @Date: 2020-07-16 11:05:17
* @Last Modified by: mikey.zhaopeng * @Last Modified by: chenshu
* @Last Modified time: 2020-11-24 14:29:52 * @Last Modified time: 2021-03-16 16:20:19
* @Description: 添加直播-简介 * @Description: 添加直播-简介
*/ */
import React from 'react'; import React from 'react';
import { Input, message, Upload, Radio, Row, Col, Button, Popover, Switch } from 'antd'; import { Input, message, Upload, Radio, Row, Col, Button, Popover, Switch } from 'antd';
import Service from '@/common/js/service'; import Service from '@/common/js/service';
import EditorBox from '../../components/EditorBox'; import GraphicsEditor from '../../components/GraphicsEditor';
import User from '@/common/js/user'; import User from '@/common/js/user';
import UploadOss from '@/core/upload'; import UploadOss from '@/core/upload';
import './AddVideoIntro.less'; import './AddGraphicsIntro.less';
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal'; import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import { DISK_MAP } from '@/common/constants/academic/lessonEnum'; import { DISK_MAP } from '@/common/constants/academic/lessonEnum';
import { ImgCutModalNew } from '@/components'; import { ImgCutModalNew } from '@/components';
const { TextArea } = Input; const { TextArea } = Input;
const defaultCover = 'https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/1599635741526.png'; class AddGraphicsIntro extends React.Component {
class AddVideoIntro extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
warmUrl: defaultCover,
showSelectFileModal: false, showSelectFileModal: false,
diskList: [], diskList: [],
selectType:null selectType:null
...@@ -83,85 +81,14 @@ class AddVideoIntro extends React.Component { ...@@ -83,85 +81,14 @@ class AddVideoIntro extends React.Component {
} }
// 删除简介 changeDetail = (value) => {
handleDeleteIntro = (index) => { this.props.onChange('courseMedia', value);
const { liveCourseMediaRequests } = this.props.data;
liveCourseMediaRequests.splice(index, 1);
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
}
// 上移简介
handleMoveUpIntro = (index) => {
const { liveCourseMediaRequests } = this.props.data;
const prevItem = liveCourseMediaRequests[index];
const nextItem = liveCourseMediaRequests[index + 1];
liveCourseMediaRequests.splice(index, 2, nextItem, prevItem);
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
} }
// 下移简介 changeIntro = (value) => {
handleMoveDownIntro = (index) => { this.props.onChange('introduce', value);
const { liveCourseMediaRequests } = this.props.data;
const prevItem = liveCourseMediaRequests[index - 1];
const nextItem = liveCourseMediaRequests[index];
liveCourseMediaRequests.splice(index - 1, 2, nextItem, prevItem);
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
} }
renderLittleIcon = (index) => {
const { liveCourseMediaRequests } = this.props.data;
return (
<div className="little-icon">
<span
className="icon iconfont close"
onClick={() => { this.handleDeleteIntro(index); }}
></span>
{
index > 0 &&
<span
className="icon iconfont"
onClick={() => { this.handleMoveDownIntro(index); }}
>&#xe6d1;</span>
}
{
index !== liveCourseMediaRequests.length - 1 &&
<span
className="icon iconfont"
onClick={() => { this.handleMoveUpIntro(index); }}
>&#xe6cf;</span>
}
</div>
)
}
handleChangeIntro = (index, value, length) => {
const { liveCourseMediaRequests } = this.props.data;
liveCourseMediaRequests[index].mediaContent = value;
liveCourseMediaRequests[index].mediaContentLength = length
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
}
handleAddIntroText = () => {
const { liveCourseMediaRequests } = this.props.data;
liveCourseMediaRequests.push({
contentType:"INTRO",
mediaType: 'TEXT',
mediaContent: '',
key: Math.random()
});
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
}
handleUpload = (Blob) => {
this.setState({
showSelectFileModal: true,
selectType:'INTRO'
})
}
whetherVisitorsJoinChange = ()=>{ whetherVisitorsJoinChange = ()=>{
if(this.props.data.whetherVisitorsJoin==="NO"){ if(this.props.data.whetherVisitorsJoin==="NO"){
this.props.onChange('whetherVisitorsJoin','YES') this.props.onChange('whetherVisitorsJoin','YES')
...@@ -169,6 +96,7 @@ class AddVideoIntro extends React.Component { ...@@ -169,6 +96,7 @@ class AddVideoIntro extends React.Component {
this.props.onChange('whetherVisitorsJoin','NO') this.props.onChange('whetherVisitorsJoin','NO')
} }
} }
shelfStateChange = ()=>{ shelfStateChange = ()=>{
if(this.props.data.shelfState==="NO"){ if(this.props.data.shelfState==="NO"){
this.props.onChange('shelfState','YES') this.props.onChange('shelfState','YES')
...@@ -176,12 +104,10 @@ class AddVideoIntro extends React.Component { ...@@ -176,12 +104,10 @@ class AddVideoIntro extends React.Component {
this.props.onChange('shelfState','NO') this.props.onChange('shelfState','NO')
} }
} }
componentWillMount() {
}
render() { render() {
const {data: { whetherVisitorsJoin,liveCourseMediaRequests = [], shelfState} } = this.props; const {data: { id, whetherVisitorsJoin, courseMedia, introduce, shelfState } } = this.props;
const {showSelectFileModal,selectType} = this.state const { showSelectFileModal, selectType } = this.state;
return ( return (
<div className="add-video__intro-info"> <div className="add-video__intro-info">
<div className="allow-tourist-join"> <div className="allow-tourist-join">
...@@ -215,52 +141,38 @@ class AddVideoIntro extends React.Component { ...@@ -215,52 +141,38 @@ class AddVideoIntro extends React.Component {
</div> </div>
</div> </div>
<div className="introduce"> <div className="introduce">
<span className="label">视频课简介：</span> <span className="label">课程内容：</span>
<div className="content"> <div className="content">
<div className="intro-list"> <div className="intro-list">
{ <div className="intro-list__item">
liveCourseMediaRequests.map((item, index) => { {(!id || courseMedia) &&
if (item.mediaType === 'TEXT') { <GraphicsEditor
return (
<div className="intro-list__item" key={item.key}>
<EditorBox
detail={{ detail={{
content: item.mediaContent content: courseMedia
}} }}
onChange={(val, length) => { this.handleChangeIntro(index, val, length) }} onChange={(val) => { this.changeDetail(val) }}
/> />
{this.renderLittleIcon(index)}
</div>
)
} }
if (item.mediaType === 'PICTURE') {
return (
<div className="intro-list__item picture" key={index}>
<div className="img__wrap">
<img src={item.mediaUrl} />
</div> </div>
{this.renderLittleIcon(index)}
</div> </div>
)
}
})
}
</div> </div>
<div className="operate">
<div className="operate__item" onClick={this.handleAddIntroText}>
<span className="icon iconfont">&#xe639;</span>
<span className="text">文字</span>
</div>
<div className="operate__item" onClick={this.handleUpload}>
<span className="icon iconfont">&#xe63b;</span>
<span className="text">图片</span>
</div> </div>
<div className="introduce">
<span className="label">课程简介：</span>
<div className="content">
<div className="intro-list">
<div className="intro-list__item">
{(!id || introduce) &&
<GraphicsEditor
isIntro={true}
detail={{
content: introduce
}}
onChange={(val) => { this.changeIntro(val) }}
/>
}
</div> </div>
<div className="tips">
• 图片支持jpeg、jpg、png、gif格式
</div> </div>
</div> </div>
</div> </div>
{/* 选择暖场图文件弹窗 */} {/* 选择暖场图文件弹窗 */}
...@@ -282,4 +194,4 @@ class AddVideoIntro extends React.Component { ...@@ -282,4 +194,4 @@ class AddVideoIntro extends React.Component {
} }
} }
export default AddVideoIntro; export default AddGraphicsIntro;
src/modules/course-manage/graphics-course/components/AddVideoIntro.less → src/modules/course-manage/graphics-course/components/AddGraphicsIntro.less
.add-video__intro-info { .add-video__intro-info {
.w-e-full-screen-editor {
background: #fff !important;
}
.playback { .playback {
margin-bottom: 10px; margin-bottom: 10px;
.require { .require {
......
src/modules/course-manage/graphics-course/components/GraphicsCourseList.jsx
...@@ -24,6 +24,7 @@ import User from '@/common/js/user' ...@@ -24,6 +24,7 @@ import User from '@/common/js/user'
import './GraphicsCourseList.less'; import './GraphicsCourseList.less';
const ENV = process.env.DEPLOY_ENV || 'dev'; const ENV = process.env.DEPLOY_ENV || 'dev';
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
class GraphicsCourseList extends React.Component { class GraphicsCourseList extends React.Component {
...@@ -45,8 +46,6 @@ class GraphicsCourseList extends React.Component { ...@@ -45,8 +46,6 @@ class GraphicsCourseList extends React.Component {
// 观看数据弹窗 // 观看数据弹窗
handleShowWatchDataModal = (record) => { handleShowWatchDataModal = (record) => {
console.log('111');
console.log("record",record);
const watchDataModal = ( const watchDataModal = (
<WatchDataModal <WatchDataModal
type='videoCourseList' type='videoCourseList'
...@@ -75,7 +74,7 @@ class GraphicsCourseList extends React.Component { ...@@ -75,7 +74,7 @@ class GraphicsCourseList extends React.Component {
return ( return (
<div className="record__item"> <div className="record__item">
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */} {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<img className="course-cover" src={coverUrl || `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`} /> <img className="course-cover" src={coverUrl || defaultCoverUrl} />
{ record.courseName.length > 25? { record.courseName.length > 25?
<Tooltip title={record.courseName}> <Tooltip title={record.courseName}>
<div className="course-name">{record.courseName}</div> <div className="course-name">{record.courseName}</div>
...@@ -204,14 +203,14 @@ class GraphicsCourseList extends React.Component { ...@@ -204,14 +203,14 @@ class GraphicsCourseList extends React.Component {
className="operate__item" className="operate__item"
key="plan" key="plan"
onClick={() => { onClick={() => {
RCHistory.push(`/create-video-course?type=edit&id=${item.id}`); RCHistory.push(`/create-graphics-course?type=edit&id=${item.id}`);
}} }}
>关联培训计划</div> >关联培训计划</div>
<div <div
className="operate__item" className="operate__item"
key="edit" key="edit"
onClick={() => { onClick={() => {
RCHistory.push(`/create-video-course?type=edit&id=${item.id}`); RCHistory.push(`/create-graphics-course?type=edit&id=${item.id}`);
}} }}
>编辑</div> >编辑</div>
<div <div
...@@ -277,7 +276,7 @@ class GraphicsCourseList extends React.Component { ...@@ -277,7 +276,7 @@ class GraphicsCourseList extends React.Component {
const { id, scheduleVideoUrl } = record; const { id, scheduleVideoUrl } = record;
const _appId = appId; const _appId = appId;
const htmlUrl = `${LIVE_SHARE}video_detail/${id}?id=${User.getStoreId()}`; const htmlUrl = `${LIVE_SHARE}graphics_detail/${id}?id=${User.getStoreId()}`;
const longUrl = htmlUrl; const longUrl = htmlUrl;
const { coverUrl, courseName } = record; const { coverUrl, courseName } = record;
const shareData = { const shareData = {
...@@ -292,6 +291,7 @@ class GraphicsCourseList extends React.Component { ...@@ -292,6 +291,7 @@ class GraphicsCourseList extends React.Component {
needStr={needStr} needStr={needStr}
data={shareData} data={shareData}
type="videoClass" type="videoClass"
title="图文课"
close={() => { close={() => {
this.setState({ this.setState({
shareLiveModal: null shareLiveModal: null
......
src/modules/course-manage/graphics-course/index.jsx
import React from 'react'; import React from 'react';
import GraphicsCourseFilter from './components/GraphicsCourseFilter'; import GraphicsCourseFilter from './components/GraphicsCourseFilter';
import GraphicsCourseOpt from './components/VieoCourseOpt'; import GraphicsCourseOpt from './components/GraphicsCourseOpt';
import GraphicsCourseList from './components/GraphicsCourseList'; import GraphicsCourseList from './components/GraphicsCourseList';
import CourseService from "@/domains/course-domain/CourseService"; import Service from '@/common/js/service';
import User from '@/common/js/user' import User from '@/common/js/user'
class GraphicsCourse extends React.Component { class GraphicsCourse extends React.Component {
...@@ -14,6 +14,7 @@ class GraphicsCourse extends React.Component { ...@@ -14,6 +14,7 @@ class GraphicsCourse extends React.Component {
query: { query: {
size: 10, size: 10,
current: 1, current: 1,
courseType: 'PICTURE',
storeId:User.getStoreId() storeId:User.getStoreId()
}, },
dataSource: [], // 视频课列表 dataSource: [], // 视频课列表
...@@ -35,15 +36,22 @@ class GraphicsCourse extends React.Component { ...@@ -35,15 +36,22 @@ class GraphicsCourse extends React.Component {
// 更新请求参数 // 更新请求参数
this.setState({ query }); this.setState({ query });
Service.Hades('public/hades/mediaCoursePage', query).then((res) => {
CourseService.videoSchedulePage(query).then((res) => {
const { result = {} } = res || {}; const { result = {} } = res || {};
const { records = [], total = 0 } = result; const { records = [], total = 0 } = result;
this.setState({ this.setState({
dataSource: records, dataSource: records,
totalCount: Number(total) totalCount: Number(total)
}); });
}); })
// CourseService.videoSchedulePage(query).then((res) => {
// const { result = {} } = res || {};
// const { records = [], total = 0 } = result;
// this.setState({
// dataSource: records,
// totalCount: Number(total)
// });
// });
} }
render() { render() {
......
src/modules/course-manage/graphics-course/modal/WatchDataModal.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-05-19 11:01:31 * @Date: 2020-05-19 11:01:31
* @Last Modified by: 吴文洁 * @Last Modified by: chenshu
* @Last Modified time: 2020-05-25 16:50:47 * @Last Modified time: 2021-03-16 17:56:18
* @Description 余额异常弹窗 * @Description 余额异常弹窗
*/ */
import React from 'react'; import React from 'react';
import {Table, Modal,Input} from 'antd'; import {Table, Modal,Input} from 'antd';
import { PageControl } from "@/components"; import { PageControl } from "@/components";
import CourseService from "@/domains/course-domain/CourseService"; import Service from "@/common/js/service";
import User from '@/common/js/user' import User from '@/common/js/user'
import './WatchDataModal.less'; import './WatchDataModal.less';
import dealTimeDuration from "../../utils/dealTimeDuration"; import dealTimeDuration from "../../utils/dealTimeDuration";
...@@ -46,7 +46,7 @@ class WatchDataModal extends React.Component { ...@@ -46,7 +46,7 @@ class WatchDataModal extends React.Component {
courseId:id, courseId:id,
storeId:User.getStoreId() storeId:User.getStoreId()
} }
CourseService.videoWatchInfo(params).then((res) => { Service.Hades('public/hades/mediaCourseWatchInfo', params).then((res) => {
const { result = {} } = res ; const { result = {} } = res ;
const { records = [], total = 0 } = result; const { records = [], total = 0 } = result;
this.setState({ this.setState({
...@@ -122,7 +122,7 @@ class WatchDataModal extends React.Component { ...@@ -122,7 +122,7 @@ class WatchDataModal extends React.Component {
const { visible,size,dataSource,totalCount,query} = this.state; const { visible,size,dataSource,totalCount,query} = this.state;
return ( return (
<Modal <Modal
title="视频课观看数据" title="图文课观看数据"
visible={visible} visible={visible}
footer={null} footer={null}
onCancel={this.onClose} onCancel={this.onClose}
......
src/modules/course-manage/modal/PreviewGraphicsModal.jsx 0 → 100644
import React from 'react';
import { Modal } from 'antd';
import './PreviewGraphicsModal.less';
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
class PreviewGraphicsModal extends React.Component {
constructor(props) {
super(props);
this.state = {
type: 'detail',
}
}
render() {
const { courseBasicInfo, courseIntroInfo } = this.props;
const { coverUrl, courseName, categoryName } = courseBasicInfo;
const { courseMedia, introduce } = courseIntroInfo;
const { type } = this.state;
return (
<Modal
title="预览"
visible={true}
width={680}
onCancel={this.props.close}
footer={null}
maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
className="preview-live-graphics-modal"
>
<div className="container__wrap">
<div className="container">
<div className="container__header">
<img src={coverUrl || defaultCoverUrl} className="course-cover" />
</div>
<div className="container__body">
<div className="title__name">{courseName}</div>
<div className="title__categery">课程分类：{categoryName}</div>
</div>
<div className="container__introduction">
<div className="title">
<span
className={`title-word${type === 'detail' ? ' selected' : ''}`}
onClick={() => this.setState({ type: 'detail' })}
>图文详情</span>
<span
className={`title-word${type === 'introduction' ? ' selected' : ''}`}
onClick={() => this.setState({ type: 'introduction' })}
>图文简介</span>
</div>
<div className="container__introduction__list editor-box">
<div
className="intro-item text"
dangerouslySetInnerHTML={{
__html: type === 'detail' ? courseMedia : introduce
}}
/>
</div>
</div>
</div>
</div>
</Modal>
)
}
}
export default PreviewGraphicsModal;
src/modules/course-manage/modal/PreviewGraphicsModal.less 0 → 100644
.preview-live-graphics-modal {
.ant-modal-body {
background-image: url('https://image.xiaomaiketang.com/xm/xZWdziTCAf.png');
background-size: 100% 100%;
}
.container__wrap {
width: 340px;
height: 618px;
padding: 67px 46px 48px 47px;
margin: auto;
background-image: url('https://image.xiaomaiketang.com/xm/DHMzHiGc2E.png');
background-size: 100% 100%;
}
.container {
overflow: scroll;
height: 100%;;
.course-cover, .course-url {
width: 100%;
height: 141px;
background: #000;
}
&__body {
background-color: #FFF;
padding: 7px 0 11px 0;;
.title__name {
color: #333333;
font-weight: 500;
}
.title__categery {
font-size: 12px;
color: #999999;
}
}
&__introduction {
margin-top: 10px;
padding: 12px 0;
position: relative;
&::after {
content: '';
position: absolute;
width: 241px;
top: -10px;
height: 10px;
background: #F4F6FA;
}
.title {
height: 24px;
display: flex;
align-items: center;
font-size: 12px;
color: #333333;
padding: 0 10px;
border-bottom: 1px solid #E8E8E8;
.title-word {
position: relative;
margin-right: 15px;
cursor: pointer;
}
.selected {
color: #FFB714;
&::after {
content: '';
position: absolute;
bottom: -4px;
width: 20px;
height: 1px;
background: #FFB714;
left: 50%;
transform: translateX(-50%);
}
}
}
&__list {
margin-top: 12px;
.intro-item:not(:first-child) {
margin-top: 13px;
}
.text {
color: #666;
line-height: 17px;
p {
font-size: 12px;
}
}
.picture {
img {
width: 100%;
}
}
}
}
}
}
\ No newline at end of file
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: 吴文洁 * @Last Modified by: chenshu
* @Last Modified time: 2020-07-20 20:25:13 * @Last Modified time: 2021-03-16 17:41:40
* @Description: 大班直播分享弹窗 * @Description: 大班直播分享弹窗
*/ */
...@@ -130,7 +130,7 @@ class ShareLiveModal extends React.Component { ...@@ -130,7 +130,7 @@ class ShareLiveModal extends React.Component {
} }
render() { render() {
const { needStr, data, type } = 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;
...@@ -139,7 +139,7 @@ class ShareLiveModal extends React.Component { ...@@ -139,7 +139,7 @@ class ShareLiveModal extends React.Component {
let coverImgSrc = coverUrl; let coverImgSrc = coverUrl;
if(type === 'videoClass'){ if(type === 'videoClass'){
if(!coverUrl || isDefaultCover){ if((!coverUrl || isDefaultCover) && 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{
...@@ -153,7 +153,7 @@ class ShareLiveModal extends React.Component { ...@@ -153,7 +153,7 @@ class ShareLiveModal extends React.Component {
return ( return (
<Modal <Modal
title={type === 'videoClass' ? '分享视频课' : '分享直播课'} title={`分享${title}`}
width={680} width={680}
visible={true} visible={true}
footer={null} footer={null}
...@@ -197,10 +197,10 @@ class ShareLiveModal extends React.Component { ...@@ -197,10 +197,10 @@ class ShareLiveModal extends React.Component {
<div className="share-poster right__item"> <div className="share-poster right__item">
<div className="title">① 海报分享</div> <div className="title">① 海报分享</div>
{ type === "liveClass" && { type === "liveClass" &&
<div className="sub-title">用户可通过微信扫描海报二维码，观看直播</div> <div className="sub-title">用户可通过微信扫描海报二维码，观看{title}</div>
} }
{ type === "videoClass" && { type === "videoClass" &&
<div className="sub-title">用户可通过微信识别二维码，报名观看视频</div> <div className="sub-title">用户可通过微信识别二维码，报名观看{title}</div>
} }
<div className="content" onClick={this.handleDownloadPoster}>下载海报</div> <div className="content" onClick={this.handleDownloadPoster}>下载海报</div>
...@@ -209,10 +209,10 @@ class ShareLiveModal extends React.Component { ...@@ -209,10 +209,10 @@ class ShareLiveModal extends React.Component {
<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">用户可通过微信打开以下链接，观看直播</div> <div className="sub-title">用户可通过微信打开以下链接，观看{title}</div>
} }
{ type === "videoClass" && { type === "videoClass" &&
<div className="sub-title">用户可通过打开链接，报名观看视频</div> <div className="sub-title">用户可通过打开链接，报名观看{title}</div>
} }
<div className="content url-content"> <div className="content url-content">
<div className="share-url" id="shareUrl">{shareUrl}</div> <div className="share-url" id="shareUrl">{shareUrl}</div>
......
src/modules/course-manage/video-course/components/VideoCourseList.jsx
...@@ -311,6 +311,7 @@ class VideoCourseList extends React.Component { ...@@ -311,6 +311,7 @@ class VideoCourseList extends React.Component {
needStr={needStr} needStr={needStr}
data={shareData} data={shareData}
type="videoClass" type="videoClass"
title="视频课"
close={() => { close={() => {
this.setState({ this.setState({
shareLiveModal: null shareLiveModal: null
......
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