Skip to content

B
biz.qingxiao.com
Commit 3beb371b authored by wangxuelai's avatar wangxuelai
Browse files
Options

''

parent 0ea48be7
Hide whitespace changes
Inline Side-by-side
Showing with 183 additions and 17 deletions
index.html
View file @ 3beb371b
......@@ -17,6 +17,6 @@
</head>
<body>
<div id="root"></div>
<script src="dist/main.js?1574677618779" charset="utf-8"></script>
<script src="dist/main.js?1574731516071" charset="utf-8"></script>
</body>
</html>
\ No newline at end of file
src/components/MaterialModal.js
View file @ 3beb371b
import React from 'react';
import { Button, Form, Input, Icon, Modal, Select, Upload, message, Radio, Pagination, List, Card } from 'antd';
import pageStyle from './MaterialModal.less';
import { imagify } from '../utils';
import { imagify, voiceTimeFormat, videoPoster } from '../utils';
const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;
......@@ -90,10 +90,33 @@ class MaterialModalForm extends React.Component {
<List.Item>
<div className={pageStyle.item}>
<Radio value={item}>
{item.type === 1 && <img className={pageStyle.img} src={imagify(item.src)} alt="" />}
{item.type === 2 && <img className={pageStyle.img} src={`${__IMGCDN__}course/video_default.png`} alt="" />}
{item.type === 3 && <img className={pageStyle.img} src={`${__IMGCDN__}course/audio_default.png`} alt="" />}
{item.type === 4 && <img className={pageStyle.img} src={`${__IMGCDN__}course/ppt_default.png`} alt="" />}
{item.type === 1 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.imgBox}`} title={JSON.parse(item.content).name}>
<img className={pageStyle.img} src={imagify(item.src)} alt="" />
<img className={pageStyle.imageicon} src={`${__IMGCDN__}/course/photo_icon.png`} alt="" />
</div>
}
{item.type === 2 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.videoBox}`} title={JSON.parse(item.content).name}>
<img className={pageStyle.img} src={`${videoPoster(item.src)}`} alt="" />
<img className={pageStyle.videoicon} src={`${__IMGCDN__}/course/video_icon.png`} alt="" />
<div className={pageStyle.videoplay}>
<img className={pageStyle.videoplayicon} src={`${__IMGCDN__}smallplayicon.png`} alt="" />
</div>
</div>
}
{item.type === 3 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.audioBox}`} title={JSON.parse(item.content).name}>
<img className={pageStyle.img} src={`${__IMGCDN__}course/audio_icon.png`} alt="" />
<div className={pageStyle.fileName}>{JSON.parse(item.content).name}</div>
</div>
}
{item.type === 4 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.fileBox}`} title={JSON.parse(item.content).name}>
<img className={pageStyle.img} src={`${__IMGCDN__}course/ppt_icon.png`} alt="" />
<div className={pageStyle.fileName}>{JSON.parse(item.content).name}</div>
</div>
}
</Radio>
</div>
</List.Item>
......
src/components/MaterialModal.less
View file @ 3beb371b
......@@ -28,15 +28,119 @@
position: absolute;
top: 5px;
left: 20px;
z-index: 8;
}
.ant-radio + span {
display: block;
}
.ant-radio-inner {
background-color: transparent;
}
}
.img {
.mediaBox {
width: 150px;
height: 150px;
border-radius: 8px;
overflow: hidden;
position: relative;
&.imgBox {
.img {
width: 150px;
height: 150px;
}
.imageicon {
position: absolute;
width: 28px;
height: 28px;
z-index: 5;
display: block;
right: 4px;
top: 4px;
}
}
&.videoBox {
.videoicon {
z-index: 5;
position: absolute;
width: 25px;
height: 25px;
display: block;
right: 4px;
top: 4px;
}
.img {
width: 150px;
height: 150px;
}
.videoplay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 55px;
height: 55px;
border-radius: 50%;
border:2px solid rgba(255,255,255,1);
background:rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
.videoplayicon {
width: 14px;
height: 16px;
}
}
}
&.audioBox {
background-color: #1EB8FF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.img {
width: 88px;
height: 35px;
margin-bottom: 27px;
}
.fileName {
color: #FFFFFF;
font-size: 14px;
line-height: 1;
text-align: center;
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&.fileBox {
background-color: #FFB879;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.img {
width: 57px;
height: 51px;
margin-bottom: 20px;
}
.fileName {
color: #FFFFFF;
font-size: 14px;
line-height: 1;
text-align: center;
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.img {
// width: 150px;
// height: 150px;
// border-radius: 8px;
}
}
}
src/models/coursegatherdetail.js
View file @ 3beb371b
......@@ -920,7 +920,9 @@ export default {
},
* queryvoiceignature({ payload }, { call, put, select }) {
const { userInfo, sid } = yield select(state => state.webapp);
const { files, uploadtype } = payload;
const {
files, uploadtype, time,
} = payload;
const file = files.files ? files.files[0] : null;
const REGEXP_VIDEO = /^audio\/\w+/;
const params = { type: 2, token: userInfo.token, schoolId: sid };
......@@ -937,6 +939,7 @@ export default {
files,
uploaderLoading,
uploadtype,
time,
},
});
} else {
......@@ -952,7 +955,7 @@ export default {
},
* uploadaudio({ payload }, { call, put, select }) {
const {
signature, files, uploaderLoading, uploadtype,
signature, files, uploaderLoading, uploadtype, time,
} = payload;
const file = files.files ? files.files[0] : null;
const { addCourseObj } = yield select(state => state.coursegatherdetail);
......@@ -979,6 +982,7 @@ export default {
addCourseObj.intro.push({
type: 'audio',
value: audioUrl,
duration: Number(time).toFixed(0),
});
yield put({
type: 'updateState',
......
src/pages/coursegather/detail/CourseDetail.js
View file @ 3beb371b
......@@ -109,11 +109,13 @@ class CourseDetailForm extends React.Component {
}
courseUploadAudio = (e) => {
const { dispatch } = this.props;
const { files, uploadtype, time } = e;
dispatch({
type: 'coursegatherdetail/queryvoiceignature',
payload: {
files: e.target,
uploadtype: 'uploadDescAudio',
files,
uploadtype,
time,
},
});
}
......
src/pages/coursemateria/MediaCard.js
View file @ 3beb371b
......@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
import pageStyle from './MediaCard.less';
import {
imagify,
voiceTimeFormat,
videoPoster,
} from '../../utils/index';
class MediaCard extends React.Component {
......@@ -45,7 +46,7 @@ class MediaCard extends React.Component {
{info.type == 3 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.audioBox}`} onClick={() => methods.preview(info)}>
<img className={pageStyle.audioIcon} src={`${__IMGCDN__}/course/audio_icon.png`} alt="" />
<div className={pageStyle.audioTime}>60&ldquo;</div>
<div className={pageStyle.audioTime}>{voiceTimeFormat(content.duration)}</div>
</div>}
<div className={pageStyle.bottom}>
<span className={pageStyle.time}>{info.created_at}</span>
......
src/pages/onlineclasses/singleclass/index.js
View file @ 3beb371b
......@@ -117,6 +117,18 @@ class ClassMgtForm extends React.Component {
},
});
}
sizeChange = (page, perPage) => {
const { dispatch } = this.props;
dispatch({
type: 'onlineclasses/selectCourseList',
payload: {
params: {
page: 1,
perPage,
},
},
});
}
render() {
const {
form: { getFieldDecorator, getFieldValue },
......@@ -139,19 +151,24 @@ class ClassMgtForm extends React.Component {
size="large"
grid={{
gutter: 20,
xs: 3,
sm: 3,
md: 4,
lg: 4,
xl: 4,
xs: 1,
sm: 1,
md: 2,
lg: 2,
xl: 3,
xxl: 4,
}}
footer={
<div className={pageStyle.tablefooterbox}>
<Pagination
showSizeChanger
showQuickJumper
onShowSizeChange={this.sizeChange}
total={Number(courseListTotal)}
onChange={this.onChangeCourseList}
current={Number(courseListParams.page) || 1}
pageSize={courseListParams.perPage}
pageSizeOptions={['12', '24', '36', '48', '60']}
/>
</div>
}
......
src/utils/index.js
View file @ 3beb371b
......@@ -854,7 +854,22 @@ function getVideoDuration(file) {
}, false);
});
}
function voiceTimeFormat(time) {
if (!time) return '00:00';
const hour = Math.floor(time / 3600);
const minuteLeft = time % 3600;
const minute = Math.floor(minuteLeft / 60);
const secondLeft = minuteLeft % 60;
let _time = '';
if (hour > 0) {
_time = `${hour > 10 ? hour : `0${hour}`}:${minute > 10 ? minute : `0${minute}`}:${secondLeft > 10 ? secondLeft : `0${secondLeft}`}`;
} else {
_time = `${minute > 10 ? minute : `0${minute}`}:${secondLeft > 10 ? secondLeft : `0${secondLeft}`}`;
}
return _time;
}
export {
voiceTimeFormat,
getAudioDuration,
pageIn,
SessionStorage,
......
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