Skip to content

B
biz.qingxiao.com
Commit 78db3ca0 authored by baixian's avatar baixian
Browse files
Options

111222

parents c5fdd7e6 710dbd9e
Hide whitespace changes
Inline Side-by-side
Showing with 434 additions and 98 deletions
src/common/api.js
View file @ 78db3ca0
......@@ -183,4 +183,7 @@ export default {
onlineclasses: {
selectcourse: `${dakaapi}member/online_courses`,
},
courseMateria: {
index: `${dakaapi}member/materials`,
},
};
src/models/coursemateria.js
View file @ 78db3ca0
......@@ -2,23 +2,182 @@
import { routerRedux } from 'dva/router';
import { message } from 'antd';
import {
LocalStorage,
SessionStorage,
isExpired,
showWeekDay,
showMonthDay,
getFileType,
getRandomFilename,
} from '../utils/index';
import * as uploader from '../services/uploader';
import errorcode from '../common/errorcode';
import * as headquartersAjax from '../services/headquarters';
import * as courseMateriaAjax from '../services/courseMateria';
export default {
namespace: 'coursemateria',
state: {
queryParams: {
type: '',
page: 1,
perPage: 20,
},
materiaList: [],
materiaListTotal: 0,
tabIndex: 0,
},
subscriptions: {
setup({ dispatch, history }) { // eslint-disable-line
},
},
effects: {
* queryinfo({ payload }, { call, put, select }) {
yield put({
type: 'querymaterialist',
payload: {
params: {},
},
});
},
* querymaterialist({ payload }, { call, put, select }) {
const { params } = payload;
const { queryParams } = yield select(state => state.coursemateria);
const { sid } = yield select(state => state.webapp);
const querymaterialistData = yield call(courseMateriaAjax.getMateriaList, {
school_id: sid,
...queryParams,
...params,
});
const { code, msg, data } = querymaterialistData;
if (data.total != undefined) {
yield put({
type: 'updateState',
payload: {
materiaListTotal: data.total,
},
});
}
if (code == 200) {
yield put({
type: 'updateState',
payload: {
materiaList: data.list,
queryParams: {
...queryParams,
...params,
},
},
});
} else {
message.error(msg, 1);
}
yield put({
type: 'updateState',
});
},
* querysignature({ payload }, { call, put, select }) {
const { userInfo, sid } = yield select(state => state.webapp);
const {
files,
successCallBack,
} = payload;
const REGEXP_IMAGE = /^image\/\w+/;
const params = { type: 1, token: userInfo.token, schoolId: sid };
let signature = {};
const uploaderLoading = message.loading('素材上传中...');
const uploadSignature = yield call(uploader.uploadImageSignature, params);
signature = uploadSignature.data;
yield put({
type: 'uploadFile',
payload: {
signature,
successCallBack,
files,
uploaderLoading,
},
});
// if (file && (REGEXP_IMAGE.test(file.type) || file.type === '')) {
// const filesize = file.size / 1024;
// if (filesize > avatorUploader.maxsize) {
// message.error(`图片大小请控制在${Math.floor(avatorUploader.maxsize)}KB 以内`);
// }
// }
},
* delMateria({ payload }, { call, put }) {
const { id } = payload;
const loading = message.loading('删除中...', 0);
const delMateriaData = yield call(courseMateriaAjax.delMateria, {
id,
});
setTimeout(loading);
const { code, data, msg } = delMateriaData;
if (code == 200) {
yield put({
type: 'querymaterialist',
payload: {
params: {},
},
});
message.success('删除成功', 1);
} else {
message.loading(msg, 1);
}
},
* uploadFile({ payload }, { call, put }) {
const {
signature,
files,
successCallBack,
uploaderLoading,
} = payload;
const file = files ? files[0] : null;
const filename = `${signature.dir}${getRandomFilename(file.name)}`;
const { name, size, type: fileType } = file;
const params = {
key: filename,
policy: signature.policy,
OSSAccessKeyId: signature.accessid,
signature: signature.signature,
file,
url: signature.host,
};
const uploadFileData = yield call(uploader.uploadImg, params);
// setTimeout(uploaderLoading);
yield put({
type: 'createCourseMateria',
payload: {
content: {
name,
size,
fileType,
},
filename,
type: getFileType(fileType),
uploaderLoading,
},
});
if (successCallBack && (typeof successCallBack == 'function')) {
successCallBack();
}
},
* createCourseMateria({ payload }, { call, put, select }) {
const { sid } = yield select(state => state.webapp);
const {
content, filename, type, uploaderLoading,
} = payload;
const createCourseMateriaData = yield call(courseMateriaAjax.createMateria, {
school_id: sid,
type,
src: filename,
content: JSON.stringify(content),
});
setTimeout(uploaderLoading);
const { code, data, msg } = createCourseMateriaData;
if (code == 200) {
yield put({
type: 'querymaterialist',
payload: {
params: {},
},
});
} else {
message.error(msg, 1);
}
},
},
reducers: {
save(state, action) {
......
src/models/webapp.js
View file @ 78db3ca0
......@@ -872,6 +872,20 @@ export default {
},
});
}
if (pathname === '/sjd/coursemateria') {
dispatch({
type: 'coursemateria/queryinfo',
});
dispatch({
type: 'updateState',
payload: {
breadcrumbList: [{
path: pathname,
name: '素材管理',
}],
},
});
}
});
},
},
......
src/pages/coursemateria/MediaCard.js
View file @ 78db3ca0
import React from 'react';
import { Icon } from 'antd';
import PropTypes from 'prop-types';
import pageStyle from './MediaCard.less';
const MediaCard = (props) => {
const {
type,
style,
} = props;
return (
<div className={pageStyle.box} {...props}>
{type == 1 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.imgBox}`}>
<img className={pageStyle.image} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-07-08/240ef0e06262ffb11253e03bf986143c.jpg?x-oss-process=image/resize,w_640/rotate,360/crop,x_176,y_36,w_288,h_288" alt="" />
<img className={pageStyle.imageicon} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-07-08/240ef0e06262ffb11253e03bf986143c.jpg?x-oss-process=image/resize,w_640/rotate,360/crop,x_176,y_36,w_288,h_288" alt="" />
</div>}
{type == 2 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.videoBox}`}>
<img className={pageStyle.videoposter} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-07-08/240ef0e06262ffb11253e03bf986143c.jpg?x-oss-process=image/resize,w_640/rotate,360/crop,x_176,y_36,w_288,h_288" alt="" />
<img className={pageStyle.videoicon} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-07-08/240ef0e06262ffb11253e03bf986143c.jpg?x-oss-process=image/resize,w_640/rotate,360/crop,x_176,y_36,w_288,h_288" alt="" />
<div className={pageStyle.videoplay}>
<img className={pageStyle.videoplayicon} src={`${__IMGCDN__}smallplayicon.png`} alt="" />
</div>
</div>}
{type == 3 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.fileBox}`}>
<img className={pageStyle.fileIcon} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-07-08/240ef0e06262ffb11253e03bf986143c.jpg?x-oss-process=image/resize,w_640/rotate,360/crop,x_176,y_36,w_288,h_288" alt="" />
<div className={pageStyle.fileName}>11月上课素材.doc</div>
</div>}
{type == 4 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.audioBox}`}>
<img className={pageStyle.audioIcon} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-07-08/240ef0e06262ffb11253e03bf986143c.jpg?x-oss-process=image/resize,w_640/rotate,360/crop,x_176,y_36,w_288,h_288" alt="" />
<div className={pageStyle.audioTime}>60&ldquo;</div>
</div>}
<div className={pageStyle.bottom}>
<span className={pageStyle.time}>2019-11-12</span>
<Icon type="delete" className={pageStyle.deleteIcon} />
import {
imagify,
videoPoster,
} from '../../utils/index';
class MediaCard extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
const {
info,
delmateria,
} = this.props;
let content = null;
try {
content = JSON.parse(info.content);
} catch (error) {
content = {};
}
return (
<div className={pageStyle.box} {...this.props}>
{info.type == 1 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.imgBox}`}>
<img className={pageStyle.image} src={`${imagify(info.src)}`} alt="" />
<img className={pageStyle.imageicon} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-07-08/240ef0e06262ffb11253e03bf986143c.jpg?x-oss-process=image/resize,w_640/rotate,360/crop,x_176,y_36,w_288,h_288" alt="" />
</div>}
{info.type == 2 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.videoBox}`}>
<img className={pageStyle.videoposter} src={`${videoPoster(info.src)}`} alt="" />
<img className={pageStyle.videoicon} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-07-08/240ef0e06262ffb11253e03bf986143c.jpg?x-oss-process=image/resize,w_640/rotate,360/crop,x_176,y_36,w_288,h_288" alt="" />
<div className={pageStyle.videoplay}>
<img className={pageStyle.videoplayicon} src={`${__IMGCDN__}smallplayicon.png`} alt="" />
</div>
</div>}
{info.type == 4 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.fileBox}`}>
<img className={pageStyle.fileIcon} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-07-08/240ef0e06262ffb11253e03bf986143c.jpg?x-oss-process=image/resize,w_640/rotate,360/crop,x_176,y_36,w_288,h_288" alt="" />
<div className={pageStyle.fileName}>{content.name}</div>
</div>}
{info.type == 3 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.audioBox}`}>
<img className={pageStyle.audioIcon} src="https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-07-08/240ef0e06262ffb11253e03bf986143c.jpg?x-oss-process=image/resize,w_640/rotate,360/crop,x_176,y_36,w_288,h_288" alt="" />
<div className={pageStyle.audioTime}>60&ldquo;</div>
</div>}
<div className={pageStyle.bottom}>
<span className={pageStyle.time}>{info.created_at}</span>
<Icon type="delete" className={pageStyle.deleteIcon} onClick={() => delmateria(info.id)} />
</div>
</div>
</div>
);
);
}
}
MediaCard.propTypes = {
};
export default MediaCard;
src/pages/coursemateria/index.js
View file @ 78db3ca0
import React from 'react';
import {
Router,
Route,
Switch,
Redirect,
routerRedux,
} from 'dva/router';
import $ from 'jquery';
import { connect } from 'dva';
import { Button, Row, Col, Modal, Icon, DatePicker, Spin } from 'antd';
import {
Button, Pagination, Modal, Icon,
} from 'antd';
import MediaCard from './MediaCard';
import pageStyle from './index.less';
import { pageIn } from '../../utils/index';
const { RangePicker } = DatePicker;
class StaticCenter extends React.Component {
componentDidMount() { // 挂载
pageIn('轻校-素材库');
......@@ -21,58 +14,137 @@ class StaticCenter extends React.Component {
}
componentWillUnmount() { // 卸载
}
uploadCourseMateria = (e) => {
const { dispatch } = this.props;
dispatch({
type: 'coursemateria/querysignature',
payload: {
files: e.target.files,
successCallBack() {
document.getElementById('uploadMateria').value = '';
},
},
});
}
sizeChange = (page, perPage) => {
const { dispatch } = this.props;
dispatch({
type: 'coursemateria/querymaterialist',
payload: {
params: {
page: 1,
perPage,
},
},
});
}
changePagination = (page, perPage) => {
const { dispatch } = this.props;
dispatch({
type: 'coursemateria/querymaterialist',
payload: {
params: {
page,
perPage,
},
},
});
}
tabClick = (type, tab) => {
const { dispatch } = this.props;
dispatch({
type: 'coursemateria/updateState',
payload: {
tabIndex: tab,
},
});
dispatch({
type: 'coursemateria/querymaterialist',
payload: {
params: {
page: 1,
type,
},
},
});
}
delMateria = (id) => {
const { dispatch } = this.props;
Modal.confirm({
title: '您确定删除这条素材吗?',
content: '删除之后不能恢复',
okButtonProps: {
type: 'danger',
style: {
color: '#fff',
backgroundColor: '#ff4d4f',
borderColor: '#ff4d4f',
},
},
centered: true,
icon: <Icon type="close-circle" style={{ color: 'red' }} />,
onOk() {
dispatch({
type: 'coursemateria/delMateria',
payload: {
id,
},
});
},
zIndex: 1100,
onCancel() {
},
});
}
render() {
const that = this;
const {
materiaList,
materiaListTotal,
queryParams,
tabIndex,
} = this.props;
return (
<div className={pageStyle.container}>
<div className={pageStyle.tabbox}>
<div className={`${pageStyle.tabitem} ${pageStyle.active}`}>全部</div>
<div className={pageStyle.tabitem}>图片</div>
<div className={pageStyle.tabitem}>音频</div>
<div className={pageStyle.tabitem}>视频</div>
<div className={pageStyle.tabitem}>文件</div>
<Button type="primary" className={pageStyle.uploadbtn}>添加素材</Button>
<div className={`${pageStyle.tabitem} ${tabIndex == 0 ? pageStyle.active : ''}`} onClick={() => this.tabClick('', 0)}>全部</div>
<div className={`${pageStyle.tabitem} ${tabIndex == 1 ? pageStyle.active : ''}`} onClick={() => this.tabClick(1, 1)}>图片</div>
<div className={`${pageStyle.tabitem} ${tabIndex == 3 ? pageStyle.active : ''}`} onClick={() => this.tabClick(3, 3)}>音频</div>
<div className={`${pageStyle.tabitem} ${tabIndex == 2 ? pageStyle.active : ''}`} onClick={() => this.tabClick(2, 2)}>视频</div>
<div className={`${pageStyle.tabitem} ${tabIndex == 4 ? pageStyle.active : ''}`} onClick={() => this.tabClick(4, 4)}>文件</div>
<Button type="primary" className={pageStyle.uploadbtn}>
添加素材
<input
type="file"
className={pageStyle.uploadInput}
accept=".ppt, image/*, application/vnd.ms-powerpoint, video/mp4, application/pdf, audio/*"
onChange={this.uploadCourseMateria}
id="uploadMateria"
/>
</Button>
</div>
<div className={pageStyle.mediaCardBox}>
<MediaCard
type={1}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
<MediaCard
type={2}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
<MediaCard
type={3}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
<MediaCard
type={4}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
<MediaCard
type={4}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
<MediaCard
type={4}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
<MediaCard
type={4}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
<MediaCard
type={4}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
<MediaCard
type={4}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
<MediaCard
type={4}
style={{ marginRight: '20px', marginBottom: '20px' }}
{
materiaList.map(ele => (
<MediaCard
delmateria={this.delMateria}
info={ele}
key={ele.id}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
))
}
</div>
<div className={pageStyle.tablefooterbox}>
<span className="tablefooterstatic">共{materiaListTotal}条数据</span>
<Pagination
showSizeChanger
showQuickJumper
onShowSizeChange={this.sizeChange}
total={Number(materiaListTotal)}
onChange={this.changePagination}
current={Number(queryParams.page) || 1}
pageSize={queryParams.perPage}
/>
</div>
</div>
......@@ -84,9 +156,17 @@ StaticCenter.propTypes = {
};
function mapStateToProps(state) {
// const {
// } = state.coursemateria;
const {
materiaList,
materiaListTotal,
queryParams,
tabIndex,
} = state.coursemateria;
return {
materiaList,
materiaListTotal,
queryParams,
tabIndex,
};
}
export default connect(mapStateToProps)(StaticCenter);
......
src/pages/coursemateria/index.less
View file @ 78db3ca0
......@@ -26,10 +26,29 @@
}
.uploadbtn {
margin-left: 60px;
position: relative;
padding: 0;
width: 74px;
.uploadInput {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
}
}
.mediaCardBox {
padding: 27px 20px;
display: flex;
flex-wrap: wrap;
}
.tablefooterbox {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px 27px;
}
\ No newline at end of file
src/services/courseMateria.js 0 → 100644
View file @ 78db3ca0
import qs from 'qs';
import request from '../utils/request';
import api from '../common/api';
export function createMateria(params) {
const data = qs.stringify(params);
return request({
url: `${api.courseMateria.index}`,
method: 'POST',
data,
});
}
export function getMateriaList(params) {
const data = qs.stringify(params);
return request({
url: `${api.courseMateria.index}?${data}`,
method: 'GET',
data,
});
}
export function delMateria(params) {
const data = qs.stringify(params);
return request({
url: `${api.courseMateria.index}/${params.id}`,
method: 'DELETE',
data,
});
}
src/utils/index.js
View file @ 78db3ca0
......@@ -774,6 +774,20 @@ function getWeekDay(day) {
const result = weekDay[myDate.getDay()];
return result;
}
function getFileType(type) {
let filetype = '';
if (/video/.test(type)) {
filetype = 2;
} else if (/audio/.test(type)) {
filetype = 3;
} else if (/image/.test(type)) {
filetype = 1;
} else {
filetype = 4;
}
console.log(filetype, 'type');
return filetype;
}
export {
pageIn,
SessionStorage,
......@@ -818,4 +832,5 @@ export {
unique1,
getWeekDay,
getDateStamp,
getFileType,
};
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