Commit da35b936 authored by wangxuelai's avatar wangxuelai

''

parent 3c3737d4
......@@ -17,6 +17,6 @@
</head>
<body>
<div id="root"></div>
<script src="dist/main.js?1574757759016" charset="utf-8"></script>
<script src="dist/main.js?1574760381179" charset="utf-8"></script>
</body>
</html>
\ No newline at end of file
......@@ -72,6 +72,7 @@ export default {
content: '',
is_encrypt: 1,
password: '',
poster: '',
},
editLoading: false,
materialVisible: false,
......@@ -353,6 +354,7 @@ export default {
content: data.content,
is_encrypt: data.is_encrypt,
password: data.password,
poster: data.poster,
},
},
});
......@@ -917,6 +919,16 @@ export default {
addCourseObj: { ...addCourseObj },
},
});
} else if (uploadtype == 'uploadPoster') {
yield put({
type: 'updateState',
payload: {
addCourseObj: {
...addCourseObj,
poster: imageUrl,
},
},
});
}
if (successCallback && (typeof successCallback == 'function')) {
successCallback({
......@@ -936,7 +948,6 @@ export default {
if (file && (REGEXP_VIDEO.test(file.type) || file.type === '')) {
const uploadSignature = yield call(uploader.uploadVideoSignature, params);
signature = uploadSignature.data;
console.log('dadasdad');
yield put({
type: 'uploadvideo',
payload: {
......
......@@ -12,6 +12,7 @@ import * as uploader from '../services/uploader';
import errorcode from '../common/errorcode';
import * as courseMateriaAjax from '../services/courseMateria';
import * as commonAjax from '../services/common';
let uploadMateriaLoading = null;
export default {
namespace: 'coursemateria',
state: {
......@@ -23,6 +24,11 @@ export default {
materiaList: [],
materiaListTotal: 0,
tabIndex: 0,
uploadStatus: {
step: 0, // 1 文件解析中 2 文件上传中 3 素材转换中 4 素材转换中 5 上传成功
type: 0, // 1 ppt和pdf 2 视频 录音 3 图片
show: false,
},
},
subscriptions: {
setup({ dispatch, history }) { // eslint-disable-line
......@@ -34,7 +40,6 @@ export default {
content,
filename,
type,
uploaderLoading,
} = payload;
const transformData = yield call(commonAjax.fileTransForm, {
object: filename,
......@@ -48,7 +53,6 @@ export default {
content,
filename,
type,
uploaderLoading,
},
});
} else {
......@@ -66,7 +70,6 @@ export default {
content,
filename,
type,
uploaderLoading,
} = payload;
const transformData = yield call(commonAjax.fileConvertQuery, {
task_id,
......@@ -80,7 +83,6 @@ export default {
filename,
images: data.result,
type: getFileType(content.fileType).filetype,
uploaderLoading,
},
});
} else if (code == 40060) {
......@@ -92,7 +94,6 @@ export default {
content,
filename,
type,
uploaderLoading,
},
});
} else {
......@@ -164,6 +165,7 @@ export default {
const typeObject = getFileType(fileType);
let ajax = null;
let params = null;
uploadMateriaLoading = message.loading('素材上传中,请稍等...', 0);
switch (typeObject.fileSmalltype) {
case 1: // 图片
ajax = uploader.uploadImageSignature;
......@@ -194,7 +196,6 @@ export default {
return;
}
let signature = {};
const uploaderLoading = message.loading('课件上传中...');
const uploadSignature = yield call(ajax, params);
signature = uploadSignature.data;
if (uploadSignature.code == 200) {
......@@ -205,7 +206,6 @@ export default {
signature,
successCallBack,
file,
uploaderLoading,
},
});
} else {
......@@ -242,7 +242,6 @@ export default {
signature,
file,
successCallBack,
uploaderLoading,
duration,
} = payload;
const filename = `${signature.dir}${getRandomFilename(file.name)}`;
......@@ -256,7 +255,6 @@ export default {
url: signature.host,
};
const uploadFileData = yield call(uploader.uploadImg, params);
// setTimeout(uploaderLoading);
if (getFileType(fileType).filetype == 4) {
yield put({
type: 'fileTransForm',
......@@ -269,7 +267,6 @@ export default {
},
filename,
type: getFileType(fileType).filetype,
uploaderLoading,
successCallBack(data) {
},
},
......@@ -287,7 +284,6 @@ export default {
filename,
images: getFileType(fileType).filetype == 1 ? [filename] : [],
type: getFileType(fileType).filetype,
uploaderLoading,
},
});
}
......@@ -298,7 +294,7 @@ export default {
* createCourseMateria({ payload }, { call, put, select }) {
const { sid } = yield select(state => state.webapp);
const {
content, filename, type, uploaderLoading, images,
content, filename, type, images,
} = payload;
const createCourseMateriaData = yield call(courseMateriaAjax.createMateria, {
school_id: sid,
......@@ -309,9 +305,11 @@ export default {
images,
}),
});
setTimeout(uploaderLoading);
const { code, data, msg } = createCourseMateriaData;
if (code == 200) {
yield call(uploadMateriaLoading);
uploadMateriaLoading = null;
message.success('上传成功', 1);
yield put({
type: 'querymaterialist',
payload: {
......
......@@ -336,6 +336,7 @@ export default {
audio: data.data.audio,
content: data.data.content,
password: data.data.password,
poster: data.data.poster,
},
coursewareInfo: JSON.parse(data.data.content),
},
......@@ -624,6 +625,16 @@ export default {
addCourseObj: { ...addCourseObj },
},
});
} else if (uploadtype == 'uploadPoster') {
yield put({
type: 'updateState',
payload: {
addCourseObj: {
...addCourseObj,
poster: imageUrl,
},
},
});
}
setTimeout(uploaderLoading);
},
......@@ -881,6 +892,7 @@ export default {
study_count: '',
status: '',
content: '',
poster: '',
},
addLoading: false,
editLoading: false,
......
......@@ -157,6 +157,16 @@ class CourseDetailForm extends React.Component {
},
});
}
toUploadPoster = (e) => {
const { dispatch } = this.props;
dispatch({
type: 'coursegatherdetail/queryimagesignature',
payload: {
files: e.target,
uploadtype: 'uploadPoster',
},
});
}
deleteCover = () => {
const { dispatch } = this.props;
dispatch({
......@@ -201,6 +211,18 @@ class CourseDetailForm extends React.Component {
},
});
}
deletePoster = () => {
const { dispatch, addCourseObj } = this.props;
dispatch({
type: 'coursegatherdetail/updateState',
payload: {
addCourseObj: {
...addCourseObj,
poster: '',
},
},
});
}
render() {
const {
form: { getFieldDecorator, getFieldValue },
......@@ -209,6 +231,7 @@ class CourseDetailForm extends React.Component {
materialVisible,
materiaList,
queryParams,
choosePoster,
materiaListTotal,
toChangePsd,
} = this.props;
......@@ -326,6 +349,34 @@ class CourseDetailForm extends React.Component {
</div>
}
</FormItem> */}
<FormItem {...formItemModalLineLayout} label="宣传海报" className={pageStyle.imgFormItem}>
{!addCourseObj.poster ?
<div className={pageStyle.posterWrap}>
<div className={pageStyle.posterUploadBox} onClick={choosePoster}>
<img src={`${__IMGCDN__}/course/check.png`} alt="从素材库选择" />
<div className={pageStyle.tip}>选择模板</div>
</div>
<div className={pageStyle.posterUploadBox}>
<img src={`${__IMGCDN__}/course/uploadImg.png`} alt="上传图片" />
<div className={pageStyle.tip}>本地上传</div>
<input
type="file"
className={pageStyle.uploadInput}
accept="image/png, image/jpeg"
onChange={(e) => { this.toUploadPoster(e); }}
/>
</div>
<span className="ant-form-text">图片建议格式位JPG/PNG,尺寸750*982,图片大小不超过10MB</span>
</div>
:
<div className={pageStyle.posterWrap}>
<div className={pageStyle.photoPoster}>
<img src={imagify(addCourseObj.poster)} alt="封面" />
<Icon onClick={this.deletePoster} className={pageStyle.posterDelete} type="delete" />
</div>
</div>
}
</FormItem>
<FormItem {...formItemModalLineLayout} label="课程介绍">
<ThemeEditor
commentParams={addCourseObj}
......
......@@ -154,3 +154,51 @@
cursor: pointer;
}
}
.posterWrap {
display: flex;
.posterUploadBox {
display: flex;
align-items: center;
width: 190px;
height: 64px;
position: relative;
background-color: #F9F9F9;
border-radius: 6px;
justify-content: center;
cursor: pointer;
&:first-child {
margin-right: 40px;
}
.uploadInput {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
z-index: 5;
}
img {
width: 32px;
height: 32px;
display: block;
margin-right: 14px;
}
}
.photoPoster {
position: relative;
img {
width:170px;
height:222px;
border-radius:6px;
display: block;
}
.posterDelete {
font-size: 16px;
color: red;
position: absolute;
top: 0;
right: -30px;
}
}
}
\ No newline at end of file
......@@ -8,7 +8,7 @@ import {
} from 'dva/router';
import $ from 'jquery';
import { connect } from 'dva';
import { List, Icon, DatePicker, Spin, Card, Button, Dropdown, Menu, Modal } from 'antd';
import { List, Icon, DatePicker, Spin, Card, Button, Dropdown, Menu, Modal, Col, Row, Radio } from 'antd';
import pageStyle from './index.less';
import { pageIn, getFileType } from '../../../utils/index';
import CourseBox from './CourseBox';
......@@ -26,6 +26,8 @@ class StaticCenter extends React.Component {
this.state = {
addWareType: 1, // 1是批量操作时添加 2 单课添加课程
psdChangeShow: false,
posterShow: false,
choosedPoster: '',
};
}
componentDidMount() { // 挂载
......@@ -698,6 +700,38 @@ class StaticCenter extends React.Component {
},
});
}
choosePoster = () => {
this.setState({
posterShow: true,
});
}
closePoster = () => {
this.setState({
posterShow: false,
choosedPoster: '',
});
}
posterChange = (e) => {
this.setState({
choosedPoster: e.target.value,
});
}
savePoster = () => {
const { addCourseObj, dispatch } = this.props;
dispatch({
type: 'coursegatherdetail/updateState',
payload: {
addCourseObj: {
...addCourseObj,
poster: this.state.choosedPoster,
},
},
});
this.setState({
posterShow: false,
choosedPoster: '',
});
}
render() {
const that = this;
const {
......@@ -805,6 +839,7 @@ class StaticCenter extends React.Component {
/>}
{tabIndex == 3 && <CourseDetail
toChangePsd={this.toChangePsd}
choosePoster={this.choosePoster}
/>}
{tabIndex == 4 && <CommentList />}
<AddCourseModal
......@@ -847,6 +882,38 @@ class StaticCenter extends React.Component {
info={addCourseObj}
save={this.savePsd}
/>
<Modal
visible={this.state.posterShow}
title="选择海报模板"
onOk={this.savePoster}
onCancel={this.closePoster}
width={800}
>
<Radio.Group onChange={this.posterChange} value={this.state.choosedPoster || addCourseObj.poster}>
<Row className={`${pageStyle.posterSetBox} posterSetBox`}>
<Col span={6} style={{ marginBottom: '10px' }}>
<Radio id="1" style={{ display: 'flex', alignItems: 'flex-start' }} value="clock-test/member/12186/2019-11-26/f766995d6957b3ff91c983d97514986b.jpg">
<img className={pageStyle.posterImg} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-11-26/f766995d6957b3ff91c983d97514986b.jpg" alt="" />
</Radio>
</Col>
<Col span={6} style={{ marginBottom: '10px' }}>
<Radio id="1" style={{ display: 'flex', alignItems: 'flex-start' }} value="clock-test/member/12186/2019-11-26/b8d7da24f8bd0a1efa23e0cab68efc64.jpg">
<img className={pageStyle.posterImg} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-11-26/b8d7da24f8bd0a1efa23e0cab68efc64.jpg" alt="" />
</Radio>
</Col>
<Col span={6} style={{ marginBottom: '10px' }} >
<Radio id="1" style={{ display: 'flex', alignItems: 'flex-start' }} value="clock-test/member/12186/2019-11-26/0b6647b87af063e90288286cda9c7a1d.jpg">
<img className={pageStyle.posterImg} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-11-26/0b6647b87af063e90288286cda9c7a1d.jpg" alt="" />
</Radio>
</Col>
<Col span={6} style={{ marginBottom: '10px' }} >
<Radio id="1" style={{ display: 'flex', alignItems: 'flex-start' }} value="clock-test/member/12186/2019-11-26/dcedfa5eb225dbb7f05ae729ae05a5d7.jpg">
<img className={pageStyle.posterImg} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-11-26/dcedfa5eb225dbb7f05ae729ae05a5d7.jpg" alt="" />
</Radio>
</Col>
</Row>
</Radio.Group>
</Modal>
</div>
);
}
......
......@@ -183,4 +183,29 @@
background-color: #EEEEEE;
}
}
}
.posterSetBox {
.posterImg {
width: 170px;
height: 220px;
display: block;
border-radius: 6px;
}
}
:global {
.posterSetBox {
.ant-radio-wrapper {
display: inline-block!important;
padding-right: 0;
.ant-radio {
position: absolute;
z-index: 5;
right: 10px;
top: 10px;
}
.ant-radio + *{
padding: 0;
}
}
}
}
\ No newline at end of file
......@@ -26,12 +26,12 @@ class MediaCard extends React.Component {
return (
<div className={pageStyle.box} {...this.props}>
{info.type == 1 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.imgBox}`} onClick={() => methods.preview(info)}>
<div className={`${pageStyle.mediaBox} ${pageStyle.imgBox}`} title={content.name} onClick={() => methods.preview(info)}>
<img className={pageStyle.image} src={`${imagify(info.src)}`} alt="" />
<img className={pageStyle.imageicon} src={`${__IMGCDN__}/course/photo_icon.png`} alt="" />
</div>}
{info.type == 2 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.videoBox}`} onClick={() => methods.preview(info)}>
<div className={`${pageStyle.mediaBox} ${pageStyle.videoBox}`} title={content.name} onClick={() => methods.preview(info)}>
<img className={pageStyle.videoposter} src={`${videoPoster(info.src)}`} alt="" />
<img className={pageStyle.videoicon} src={`${__IMGCDN__}/course/video_icon.png`} alt="" />
<div className={pageStyle.videoplay}>
......@@ -39,12 +39,12 @@ class MediaCard extends React.Component {
</div>
</div>}
{info.type == 4 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.fileBox}`} onClick={() => methods.preview(info)}>
<div className={`${pageStyle.mediaBox} ${pageStyle.fileBox}`} title={content.name} onClick={() => methods.preview(info)}>
<img className={pageStyle.fileIcon} src={`${__IMGCDN__}/course/ppt_icon.png`} alt="" />
<div className={pageStyle.fileName}>{content.name}</div>
</div>}
{info.type == 3 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.audioBox}`} onClick={() => methods.preview(info)}>
<div className={`${pageStyle.mediaBox} ${pageStyle.audioBox}`} title={content.name} onClick={() => methods.preview(info)}>
<img className={pageStyle.audioIcon} src={`${__IMGCDN__}/course/audio_icon.png`} alt="" />
<div className={pageStyle.audioTime}>{voiceTimeFormat(content.duration)}</div>
</div>}
......
......@@ -267,6 +267,28 @@ class CourseDetailForm extends React.Component {
},
});
}
toUploadPoster = (e) => {
const { dispatch } = this.props;
dispatch({
type: 'onlineclasses/queryimagesignature',
payload: {
files: e.target,
uploadtype: 'uploadPoster',
},
});
}
deletePoster = () => {
const { dispatch, addCourseObj } = this.props;
dispatch({
type: 'onlineclasses/updateState',
payload: {
addCourseObj: {
...addCourseObj,
poster: '',
},
},
});
}
render() {
const {
form: { getFieldDecorator, getFieldValue },
......@@ -279,6 +301,7 @@ class CourseDetailForm extends React.Component {
coursewareInfo,
info,
toChangePsd,
choosePoster,
} = this.props;
const formItemModalLineLayout = {
labelCol: {
......@@ -413,6 +436,34 @@ class CourseDetailForm extends React.Component {
</div>
}
</FormItem> */}
<FormItem {...formItemModalLineLayout} label="宣传海报" className={pageStyle.imgFormItem}>
{!addCourseObj.poster ?
<div className={pageStyle.posterWrap}>
<div className={pageStyle.posterUploadBox} onClick={choosePoster}>
<img src={`${__IMGCDN__}/course/check.png`} alt="从素材库选择" />
<div className={pageStyle.tip}>选择模板</div>
</div>
<div className={pageStyle.posterUploadBox}>
<img src={`${__IMGCDN__}/course/uploadImg.png`} alt="上传图片" />
<div className={pageStyle.tip}>本地上传</div>
<input
type="file"
className={pageStyle.uploadInput}
accept="image/png, image/jpeg"
onChange={(e) => { this.toUploadPoster(e); }}
/>
</div>
<span className="ant-form-text">图片建议格式位JPG/PNG,尺寸750*982,图片大小不超过10MB</span>
</div>
:
<div className={pageStyle.posterWrap}>
<div className={pageStyle.photoPoster}>
<img src={imagify(addCourseObj.poster)} alt="封面" />
<Icon onClick={this.deletePoster} className={pageStyle.posterDelete} type="delete" />
</div>
</div>
}
</FormItem>
<FormItem {...formItemModalLineLayout} label="课程介绍">
<ThemeEditor
commentParams={addCourseObj}
......
......@@ -156,3 +156,51 @@
cursor: pointer;
}
}
.posterWrap {
display: flex;
.posterUploadBox {
display: flex;
align-items: center;
width: 190px;
height: 64px;
position: relative;
background-color: #F9F9F9;
border-radius: 6px;
justify-content: center;
cursor: pointer;
&:first-child {
margin-right: 40px;
}
.uploadInput {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
z-index: 5;
}
img {
width: 32px;
height: 32px;
display: block;
margin-right: 14px;
}
}
.photoPoster {
position: relative;
img {
width:170px;
height:222px;
border-radius:6px;
display: block;
}
.posterDelete {
font-size: 16px;
color: red;
position: absolute;
top: 0;
right: -30px;
}
}
}
\ No newline at end of file
......@@ -36,6 +36,8 @@ class singleDetailForm extends React.Component {
super(props);
this.state = {
psdChangeShow: false,
posterShow: false,
choosedPoster: '',
};
}
componentDidMount() { // 挂载
......@@ -173,6 +175,38 @@ class singleDetailForm extends React.Component {
callback();
}
}
choosePoster = () => {
this.setState({
posterShow: true,
});
}
closePoster = () => {
this.setState({
posterShow: false,
choosedPoster: '',
});
}
posterChange = (e) => {
this.setState({
choosedPoster: e.target.value,
});
}
savePoster = () => {
const { addCourseObj, dispatch } = this.props;
dispatch({
type: 'onlineclasses/updateState',
payload: {
addCourseObj: {
...addCourseObj,
poster: this.state.choosedPoster,
},
},
});
this.setState({
posterShow: false,
choosedPoster: '',
});
}
render() {
const {
form: { getFieldDecorator, getFieldValue },
......@@ -220,6 +254,7 @@ class singleDetailForm extends React.Component {
<TabPane tab="课程详情" key="1">
<CourseDetail
toChangePsd={this.toChangePsd}
choosePoster={this.choosePoster}
/>
</TabPane>
<TabPane tab="数据分析" key="2">
......@@ -249,6 +284,38 @@ class singleDetailForm extends React.Component {
info={addCourseObj}
save={this.savePsd}
/>
<Modal
visible={this.state.posterShow}
title="选择海报模板"
onOk={this.savePoster}
onCancel={this.closePoster}
width={800}
>
<Radio.Group onChange={this.posterChange} value={this.state.choosedPoster || addCourseObj.poster}>
<Row className={`${pageStyle.posterSetBox} posterSetBox`}>
<Col span={6} style={{ marginBottom: '10px' }}>
<Radio id="1" style={{ display: 'flex', alignItems: 'flex-start' }} value="clock-test/member/12186/2019-11-26/f766995d6957b3ff91c983d97514986b.jpg">
<img className={pageStyle.posterImg} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-11-26/f766995d6957b3ff91c983d97514986b.jpg" alt="" />
</Radio>
</Col>
<Col span={6} style={{ marginBottom: '10px' }}>
<Radio id="1" style={{ display: 'flex', alignItems: 'flex-start' }} value="clock-test/member/12186/2019-11-26/b8d7da24f8bd0a1efa23e0cab68efc64.jpg">
<img className={pageStyle.posterImg} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-11-26/b8d7da24f8bd0a1efa23e0cab68efc64.jpg" alt="" />
</Radio>
</Col>
<Col span={6} style={{ marginBottom: '10px' }} >
<Radio id="1" style={{ display: 'flex', alignItems: 'flex-start' }} value="clock-test/member/12186/2019-11-26/0b6647b87af063e90288286cda9c7a1d.jpg">
<img className={pageStyle.posterImg} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-11-26/0b6647b87af063e90288286cda9c7a1d.jpg" alt="" />
</Radio>
</Col>
<Col span={6} style={{ marginBottom: '10px' }} >
<Radio id="1" style={{ display: 'flex', alignItems: 'flex-start' }} value="clock-test/member/12186/2019-11-26/dcedfa5eb225dbb7f05ae729ae05a5d7.jpg">
<img className={pageStyle.posterImg} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-11-26/dcedfa5eb225dbb7f05ae729ae05a5d7.jpg" alt="" />
</Radio>
</Col>
</Row>
</Radio.Group>
</Modal>
</div>
);
}
......
......@@ -62,3 +62,28 @@
border-radius: 4px;
margin-left: 10px;
}
.posterSetBox {
.posterImg {
width: 170px;
height: 220px;
display: block;
border-radius: 6px;
}
}
:global {
.posterSetBox {
.ant-radio-wrapper {
display: inline-block!important;
padding-right: 0;
.ant-radio {
position: absolute;
z-index: 5;
right: 10px;
top: 10px;
}
.ant-radio + *{
padding: 0;
}
}
}
}
\ No newline at end of file
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