Skip to content

B
biz.qingxiao.com
Commit 9cb36330 authored by wangxuelai's avatar wangxuelai
Browse files
Options

''

parent 2d0f6108
Show whitespace changes
Inline Side-by-side
Showing with 1452 additions and 64 deletions
image/coursetemplate/mobilebg.png 0 → 100644
View file @ 9cb36330
This diff is collapsed.
index.html
View file @ 9cb36330
......@@ -17,6 +17,6 @@
</head>
<body>
<div id="root"></div>
<script src="dist/main.js?1576316635860" charset="utf-8"></script>
<script src="dist/main.js?1576463174026" charset="utf-8"></script>
</body>
</html>
\ No newline at end of file
src/pages/onlineclasses/ReviewCourseTemplate.js 0 → 100644
View file @ 9cb36330
import React from 'react';
import {
Form,
Modal,
} from 'antd';
import pageStyle from './ReviewCourseTemplate.less';
class ReviewTemplate extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
componentDidMount() { // 挂载
}
componentDidUpdate() {
}
componentWillUnmount() { // 卸载
}
close = () => {
const { close } = this.props;
close();
}
render() {
const {
visible,
templatehtml,
} = this.props;
return (
<Modal
visible={visible}
maskClosable
footer={null}
header={null}
closable={false}
onCancel={this.close}
width={629}
style={{ backgroundColor: 'transparent' }}
bodyStyle={{ padding: 0, backgroundColor: 'transparent' }}
wrapClassName="ReviewCourseTemplateModal"
>
<div
style={{
width: '629px',
height: '762px',
backgroundSize: '100% 100%',
backgroundImage: `url(${__IMGCDN__}coursetemplate/mobilebg.png)`,
}}
>
<div
className={pageStyle.htmlbox}
style={{
backgroundColor: '#fff',
width: '306px',
position: 'absolute',
left: '135px',
top: '90px',
height: '580px',
overflowY: 'auto',
borderBottomLeftRadius: '10px',
borderBottomRightRadius: '10px',
}}
dangerouslySetInnerHTML={{ __html: templatehtml }}
/>
</div>
</Modal>
);
}
}
ReviewTemplate.propTypes = {
};
export default ReviewTemplate;
src/pages/onlineclasses/ReviewCourseTemplate.less 0 → 100644
View file @ 9cb36330
:global {
.ReviewCourseTemplateModal {
.ant-modal-content {
box-shadow: none;
background-color: transparent;
}
}
}
.htmlbox {
&::-webkit-scrollbar {
display:none
}
}
\ No newline at end of file
src/pages/onlineclasses/ThemeEditor.js
View file @ 9cb36330
......@@ -4,6 +4,8 @@ import { Icon, Divider, Tabs, Select, Form, Upload, Row, Col, Input, Radio, Moda
import pageStyle from './ThemeEditor.less';
import api from '../../common/api';
import { pageIn, hasBtnPower, LocalStorage, imagify, ossVideofy, audioorigin } from '../../utils/index';
import template from './template';
import ReviewCourseTemplate from './ReviewCourseTemplate';
const upImg = `${__IMGCDN__}subjectUp.png`;
const { TabPane } = Tabs;
const { TextArea } = Input;
......@@ -13,17 +15,47 @@ class ThemeEditor extends React.Component {
this.state = {
previewVisible: false,
previewImage: '',
mobileshow: false,
templatehtml: '',
};
}
closemobile = () => {
this.setState({
mobileshow: false,
});
}
chooseTemplate = (ele) => {
this.setState({
mobileshow: true,
templatehtml: ele.template,
});
}
reviewHtml = () => {
if (this.uEditor) {
this.setState({
mobileshow: true,
templatehtml: this.uEditor.getContent(),
});
// this.uEditor.setContent(commentParams.intro[0].value);
}
}
clearHtml = () => {
if (this.uEditor) {
this.uEditor.execCommand('cleardoc');
}
}
componentWillUnmount() {
if (this.uEditor) {
this.uEditor.destroy();
}
}
componentDidMount() { // 挂载
const { sid, commentParams } = this.props;
const that = this;
setTimeout(() => {
if (UE) {
that.uEditor = UE.getEditor('editor_id', {
autoHeightEnabled: false,
zIndex: 10,
allowDivTransToP: false,
removeFormatAttributes: false,
......@@ -93,6 +125,9 @@ class ThemeEditor extends React.Component {
],
],
});
that.uEditor.ready(() => {
that.uEditor.setHeight(600);
});
setTimeout(() => {
const { sid, commentParams } = this.props;
if (commentParams.intro && commentParams.intro.length == 1) {
......@@ -108,7 +143,7 @@ class ThemeEditor extends React.Component {
that.props.uEditorChange(this.uEditor.getContent());
});
}
});
}, 800);
}
priviewImg = (img) => {
this.setState({
......@@ -164,6 +199,9 @@ class ThemeEditor extends React.Component {
}, false);
}, false);
}
useTemplate = (ele) => {
this.uEditor.setContent(ele.template);
}
render() {
const { previewVisible, previewImage, time } = this.state;
const {
......@@ -178,7 +216,31 @@ class ThemeEditor extends React.Component {
} = this.props;
return (
<div className={pageStyle.container}>
<div className={pageStyle.editorwrap}>
<div className="clearfix">
<div className={pageStyle.templatesbox} style={{ float: 'left' }}>
<div className={pageStyle.templatesheader}>推荐模板</div>
<div className={pageStyle.templatesbody}>
{template.map(ele => (
<div className={pageStyle.templatesitem} key={ele.id}>
<div className={pageStyle.imgbox}>
<img src={`${__IMGCDN__}coursetemplate/template/${ele.id}.png`} alt="" />
<div className={pageStyle.templateoperate}>
<div className={`${pageStyle.operateitem} ${pageStyle.preview}`} onClick={() => this.chooseTemplate(ele)}>
<img alt="" className={pageStyle.operateicon} src={`${__IMGCDN__}coursetemplate/eyeicon.png`} />
<span>预览<span style={{ opacity: 0 }}>预览</span></span>
</div>
<div className={`${pageStyle.operateitem} ${pageStyle.use}`} onClick={() => this.useTemplate(ele)}>
<img alt="" className={pageStyle.operateicon} src={`${__IMGCDN__}coursetemplate/use.png`} />
<span>整套使用</span>
</div>
</div>
</div>
<div className={pageStyle.templatename}>{ele.name}</div>
</div>
))}
</div>
</div>
<div className={pageStyle.editorwrap} style={{ float: 'left' }}>
{/* eslint-disable-next-line array-callback-return,consistent-return */}
{commentParams.intro.map((item, index) => {
// eslint-disable-next-line default-case
......@@ -246,6 +308,16 @@ class ThemeEditor extends React.Component {
<div key={index} className={pageStyle.editorwrap}>
<textarea id="editor_id" name="content" style={{ width: '700px', height: '300px' }}>
</textarea>
<div className={pageStyle.extraoperatebox}>
<div className={pageStyle.extraoperateitem} onClick={this.clearHtml}>
<img alt="" className={pageStyle.del} src={`${__IMGCDN__}coursetemplate/del.png`} />
<span>清空内容</span>
</div>
<div className={pageStyle.extraoperateitem} onClick={this.reviewHtml}>
<img alt="" className={pageStyle.mobile} src={`${__IMGCDN__}coursetemplate/mobile.png`} />
<span>手机预览</span>
</div>
</div>
</div>
);
}
......@@ -253,6 +325,7 @@ class ThemeEditor extends React.Component {
)}
</div>
</div>
{!commentParams.intro.find(ele => ele.type == 'editor') &&
<div className={pageStyle.uploadflex}>
<div className={pageStyle.uploadimg} onClick={editorAddText}><Icon style={{ marginRight: 10 }} type="font-size" />添加文字</div>
......@@ -264,6 +337,11 @@ class ThemeEditor extends React.Component {
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
<img alt="图片" style={{ width: '100%' }} src={imagify(previewImage)} />
</Modal>
<ReviewCourseTemplate
close={this.closemobile}
visible={this.state.mobileshow}
templatehtml={this.state.templatehtml}
/>
</div>
);
}
......
src/pages/onlineclasses/ThemeEditor.less
View file @ 9cb36330
......@@ -13,10 +13,129 @@
right: 10px;
}
}
.templatesbox {
line-height: initial;
width: 282px;
border:1px solid rgba(0,0,0,0.15);
.templatesheader {
background-color: #D9D9D9;
line-height: 37px;
color: #616161;
font-size: 16px;
text-align: center;
}
.templatesbody {
padding: 9px;
max-height: 550px;
overflow-y: scroll;
.templatesitem {
margin-bottom: 12px;
.imgbox {
width: 100%;
height: 135px;
border-radius: 6px;
overflow: hidden;
position: relative;
img {
height: 135px;
display: block;
width: 100%;
}
&:hover .templateoperate {
display: flex;
}
.templateoperate {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
left: 0;
top: 0;
z-index: 1;
// display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
.operateitem {
letter-spacing: 1px;
line-height: 40px;
color: #FFFFFF;
font-size: 14px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.operateicon {
margin-right: 4px;
}
&.preview {
.operateicon {
width: 16px;
height: 12px;
}
}
&.use {
.operateicon {
width: 16px;
height: 16px;
}
}
cursor: pointer;
&:hover {
background-color: rgba(0,0,0,0.5);
}
}
}
}
.templatename {
color: #616161;
font-size: 12px;
text-align: center;
margin-top: 4px;
}
}
}
}
.editorwrap {
width: 424px;
margin-top: 15px;
// width: 424px;
// margin-top: 15px;
position: relative;
.extraoperatebox {
line-height: initial;
position: absolute;
top: 0;
width: 105px;
right: -105px;
z-index: 5;
.extraoperateitem {
background: #404040;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #fff;
padding: 6px 19px;
margin-bottom: 14px;
cursor: pointer;
font-size: 12px;
margin-bottom: 10px;
display: flex;
align-items: center;
.del {
width: 14px;
height: 16px;
display: block;
margin-right: 3px;
}
.mobile {
width: 10px;
height: 14px;
display: block;
margin-left: 2px;
margin-right: 5px;
}
}
}
.videowrap {
width: 100%;
height: 200px;
......
src/pages/onlineclasses/template.js 0 → 100644
View file @ 9cb36330
This source diff could not be displayed because it is too large. You can view the blob instead.
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