Skip to content

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

111222

parent 78db3ca0
Hide whitespace changes
Inline Side-by-side
Showing with 515 additions and 103 deletions
src/common/api.js
View file @ eb4204d4
...@@ -182,6 +182,7 @@ export default { ...@@ -182,6 +182,7 @@ export default {
}, },
onlineclasses: { onlineclasses: {
selectcourse: `${dakaapi}member/online_courses`, selectcourse: `${dakaapi}member/online_courses`,
courseputaway: `${dakaapi}member/online_courses/status`,
}, },
courseMateria: { courseMateria: {
index: `${dakaapi}member/materials`, index: `${dakaapi}member/materials`,
......
src/common/menuconfig.js
View file @ eb4204d4
...@@ -163,8 +163,8 @@ export default { ...@@ -163,8 +163,8 @@ export default {
width: '20px', width: '20px',
height: '20px', height: '20px',
}, },
activeurl: `${__IMGCDN__}menu/minappactive.png`, activeurl: `${__IMGCDN__}menu/onlineactive.png`,
notactiveurl: `${__IMGCDN__}menu/minapp.png`, notactiveurl: `${__IMGCDN__}menu/online.png`,
isFather: true, isFather: true,
subMenues: [ subMenues: [
{ {
...@@ -178,7 +178,7 @@ export default { ...@@ -178,7 +178,7 @@ export default {
isFather: false, isFather: false,
noIcon: true, noIcon: true,
path: '/sjd/singleclass', path: '/sjd/singleclass',
relativePath: ['/sjd/singleclass'], relativePath: ['/sjd/singleclass', '/sjd/singleclass/detail/:id'],
}, },
{ {
id: '32', id: '32',
......
src/models/onlineclasses.js
View file @ eb4204d4
...@@ -16,13 +16,17 @@ export default { ...@@ -16,13 +16,17 @@ export default {
courseList: [], courseList: [],
courseListParams: { courseListParams: {
page: 1, page: 1,
perPage: 20, perPage: 12,
}, },
courseListTotal: 0,
addCourseObj: { addCourseObj: {
title: '', title: '',
start_time: '', start_time: '',
charge_type: '', charge_type: '',
created_at: '', created_at: '',
cover: '',
type: '',
audio: '',
content: [ content: [
{ type: 'text', value: '' }, { type: 'text', value: '' },
], ],
...@@ -35,19 +39,26 @@ export default { ...@@ -35,19 +39,26 @@ export default {
}, },
effects: { effects: {
* selectCourseList({ payload }, { call, put, select }) { * selectCourseList({ payload }, { call, put, select }) {
const { params } = payload;
const { sid } = yield select(state => state.webapp); const { sid } = yield select(state => state.webapp);
const { type } = payload;
const loadmessage = message.loading('数据加载中...', 0); const loadmessage = message.loading('数据加载中...', 0);
const data = yield call(onlineAjax.courseList, { const { courseListTotal, courseListParams } = yield select(state => state.onlineclasses);
type, let newTotal = courseListTotal;
const newParams = Object.assign(courseListParams, params, {
type: 1,
school_id: sid, school_id: sid,
}); });
const data = yield call(onlineAjax.courseList, newParams);
setTimeout(loadmessage); setTimeout(loadmessage);
if (data.code == 200) { if (data.code === 200) {
if (data.data.total != undefined) {
newTotal = data.data.total;
}
yield put({ yield put({
type: 'updateState', type: 'updateState',
payload: { payload: {
courseList: data.data && data.data.list, courseList: data.data && data.data.list,
courseListTotal: newTotal,
}, },
}); });
} else { } else {
...@@ -61,10 +72,11 @@ export default { ...@@ -61,10 +72,11 @@ export default {
}, },
* findCourse({ payload }, { call, put, select }) { * findCourse({ payload }, { call, put, select }) {
const { sid } = yield select(state => state.webapp); const { sid } = yield select(state => state.webapp);
const { id, type } = payload; const { id } = payload;
const { addCourseObj } = yield select(state => state.onlineclasses);
const data = yield call(onlineAjax.findCourse, { const data = yield call(onlineAjax.findCourse, {
id, id,
type, type: 1,
school_id: sid, school_id: sid,
}); });
if (data.code == 200) { if (data.code == 200) {
...@@ -78,9 +90,12 @@ export default { ...@@ -78,9 +90,12 @@ export default {
charge_type: data.data.charge_type, charge_type: data.data.charge_type,
created_at: data.data.created_at, created_at: data.data.created_at,
type: data.data.type, type: data.data.type,
content: [ content: data.data.content ? JSON.parse(data.data.content) : addCourseObj.content,
{ type: 'text', value: '' }, remark: data.data.remark,
], study_count: data.data.study_count,
status: data.data.status,
cover: data.data.cover,
audio: data.data.audio,
}, },
}, },
}); });
...@@ -170,7 +185,6 @@ export default { ...@@ -170,7 +185,6 @@ export default {
} = payload; } = payload;
addCourseObj.content = JSON.stringify(addCourseObj.content); addCourseObj.content = JSON.stringify(addCourseObj.content);
const newCourseObj = { ...addCourseObj }; const newCourseObj = { ...addCourseObj };
console.log(newCourseObj, 'newCourseObj1111111');
const loadmessage = message.loading('保存中...', 0); const loadmessage = message.loading('保存中...', 0);
const newParams = Object.assign(newCourseObj, { const newParams = Object.assign(newCourseObj, {
title, title,
...@@ -217,6 +231,51 @@ export default { ...@@ -217,6 +231,51 @@ export default {
}); });
} }
}, },
* deleteCourse({ payload }, { call, put, select }) {
const { id } = payload;
const data = yield call(onlineAjax.deleteCourse, {
id,
});
if (data.code == 200) {
message.success('删除成功', 0.5);
yield put({
type: 'selectCourseList',
payload: {
},
});
} else {
yield put({
type: 'webapp/errorrequestresolve',
payload: {
data,
},
});
}
},
* changeCourseStatus({ payload }, { call, put, select }) {
const { status } = payload;
const { addCourseObj } = yield select(state => state.onlineclasses);
const data = yield call(onlineAjax.changeCourseStatus, {
status,
id: addCourseObj.id,
});
if (data.code == 200) {
yield put({
type: 'findCourse',
payload: {
id: data.data.id,
},
});
message.success('修改成功', 0.5);
} else {
yield put({
type: 'webapp/errorrequestresolve',
payload: {
data,
},
});
}
},
* goEditCourse({ payload }, { call, put, select }) { * goEditCourse({ payload }, { call, put, select }) {
const { id } = payload; const { id } = payload;
yield put(routerRedux.push(`/sjd/singleclass/detail/${id}`)); yield put(routerRedux.push(`/sjd/singleclass/detail/${id}`));
...@@ -281,6 +340,14 @@ export default { ...@@ -281,6 +340,14 @@ export default {
addCourseObj: { ...addCourseObj }, addCourseObj: { ...addCourseObj },
}, },
}); });
} else if (uploadtype == 'uploadCover') {
addCourseObj.cover = imageUrl;
yield put({
type: 'updateState',
payload: {
addCourseObj: { ...addCourseObj },
},
});
} }
setTimeout(uploaderLoading); setTimeout(uploaderLoading);
}, },
...@@ -339,6 +406,66 @@ export default { ...@@ -339,6 +406,66 @@ export default {
} }
setTimeout(uploaderLoading); setTimeout(uploaderLoading);
}, },
* queryvoiceignature({ payload }, { call, put, select }) {
const { userInfo, sid } = yield select(state => state.webapp);
const { files, uploadtype } = payload;
const file = files.files ? files.files[0] : null;
const REGEXP_VIDEO = /^audio\/\w+/;
const params = { type: 2, token: userInfo.token, schoolId: sid };
let signature = {};
if (file && (REGEXP_VIDEO.test(file.type) || file.type === '')) {
const uploaderLoading = message.loading('正在上传音频');
const uploadSignature = yield call(uploader.uploadImageSignature, params);
if (uploadSignature.code == 200) {
signature = uploadSignature.data;
yield put({
type: 'uploadaudio',
payload: {
signature,
files,
uploaderLoading,
uploadtype,
},
});
} else {
setTimeout(uploaderLoading);
yield put({
type: 'webapp/errorrequestresolve',
payload: {
code: uploadSignature,
},
});
}
}
},
* uploadaudio({ payload }, { call, put, select }) {
const {
signature, files, uploaderLoading, uploadtype,
} = payload;
const file = files.files ? files.files[0] : null;
const { addCourseObj } = yield select(state => state.onlineclasses);
const filename = `${signature.dir}${getRandomFilename(file.name)}`;
const params = {
key: filename,
policy: signature.policy,
OSSAccessKeyId: signature.accessid,
signature: signature.signature,
file,
url: signature.host,
};
const audioUrl = filename;
const uploadImg = yield call(uploader.uploadImg, params);
if (uploadtype == 'uploadAudio') {
addCourseObj.audio = audioUrl;
yield put({
type: 'updateState',
payload: {
addCourseObj: { ...addCourseObj },
},
});
}
setTimeout(uploaderLoading);
},
* courseChangeSize({ payload }, { call, put, select }) { * courseChangeSize({ payload }, { call, put, select }) {
const { textValue, index } = payload; const { textValue, index } = payload;
const { addCourseObj } = yield select(state => state.onlineclasses); const { addCourseObj } = yield select(state => state.onlineclasses);
...@@ -365,6 +492,26 @@ export default { ...@@ -365,6 +492,26 @@ export default {
}, },
}); });
}, },
* deleteCover({ payload }, { call, put, select }) {
const { addCourseObj } = yield select(state => state.onlineclasses);
addCourseObj.cover = '';
yield put({
type: 'updateState',
payload: {
addCourseObj: { ...addCourseObj },
},
});
},
* deleteAudio({ payload }, { call, put, select }) {
const { addCourseObj } = yield select(state => state.onlineclasses);
addCourseObj.audio = '';
yield put({
type: 'updateState',
payload: {
addCourseObj: { ...addCourseObj },
},
});
},
* courseMoveContent({ payload }, { call, put, select }) { * courseMoveContent({ payload }, { call, put, select }) {
const { index, direction } = payload; const { index, direction } = payload;
const { addCourseObj } = yield select(state => state.onlineclasses); const { addCourseObj } = yield select(state => state.onlineclasses);
...@@ -405,20 +552,24 @@ export default { ...@@ -405,20 +552,24 @@ export default {
type: 'updateState', type: 'updateState',
payload: { payload: {
courseList: [], courseList: [],
courseListTotal: 0,
courseListParams: {
page: 1,
perPage: 12,
},
addCourseObj: { addCourseObj: {
title: '', title: '',
start_time: '', start_time: '',
charge_type: '', charge_type: '',
created_at: '', created_at: '',
cover: '',
type: '',
audio: '',
content: [ content: [
{ type: 'text', value: '' }, { type: 'text', value: '' },
], ],
}, },
addLoading: false, addLoading: false,
courseListParams: {
page: 1,
perPage: 20,
},
}, },
}); });
}, },
......
src/models/webapp.js
View file @ eb4204d4
...@@ -834,7 +834,6 @@ export default { ...@@ -834,7 +834,6 @@ export default {
dispatch({ dispatch({
type: 'onlineclasses/selectCourseList', type: 'onlineclasses/selectCourseList',
payload: { payload: {
type: 1,
}, },
}); });
dispatch({ dispatch({
...@@ -853,7 +852,6 @@ export default { ...@@ -853,7 +852,6 @@ export default {
type: 'onlineclasses/findCourse', type: 'onlineclasses/findCourse',
payload: { payload: {
id: courseactive[1], id: courseactive[1],
type: 1,
}, },
}); });
dispatch({ dispatch({
......
src/pages/onlineclasses/singleclass/AddCourseModal.js
View file @ eb4204d4
...@@ -14,7 +14,7 @@ import { ...@@ -14,7 +14,7 @@ import {
Avatar, Avatar,
DatePicker, DatePicker,
Modal, Modal,
InputNumber, Checkbox, Radio, message, Checkbox, Radio,
} from 'antd'; } from 'antd';
import moment from 'moment'; import moment from 'moment';
import pageStyle from './AddCourseModal.less'; import pageStyle from './AddCourseModal.less';
...@@ -48,6 +48,14 @@ class AddCourseModalForm extends React.Component { ...@@ -48,6 +48,14 @@ class AddCourseModalForm extends React.Component {
const { dispatch, form } = this.props; const { dispatch, form } = this.props;
e.preventDefault(); e.preventDefault();
this.props.form.validateFields((err, values) => { this.props.form.validateFields((err, values) => {
if (values.title === '') {
message.error('请先返回上一步输入标题', 0.5);
return;
}
if (values.time === '') {
message.error('请先返回上一步选择时间', 0.5);
return;
}
if (!err) { if (!err) {
const { const {
title, title,
...@@ -57,7 +65,6 @@ class AddCourseModalForm extends React.Component { ...@@ -57,7 +65,6 @@ class AddCourseModalForm extends React.Component {
time, time,
password, password,
} = values; } = values;
console.log(moment(time[0]).format('YYYY-MM-DD HH:mm'), '1111111111');
dispatch({ dispatch({
type: 'onlineclasses/addCourse', type: 'onlineclasses/addCourse',
payload: { payload: {
...@@ -72,6 +79,10 @@ class AddCourseModalForm extends React.Component { ...@@ -72,6 +79,10 @@ class AddCourseModalForm extends React.Component {
} }
}); });
} }
close = () => {
const { close } = this.props;
close();
}
render() { render() {
const { const {
form: { getFieldDecorator, getFieldValue }, form: { getFieldDecorator, getFieldValue },
...@@ -99,6 +110,7 @@ class AddCourseModalForm extends React.Component { ...@@ -99,6 +110,7 @@ class AddCourseModalForm extends React.Component {
bodyStyle={{ bodyStyle={{
padding: '40px 20px', padding: '40px 20px',
}} }}
onCancel={this.close}
> >
<div className={pageStyle.wrap}> <div className={pageStyle.wrap}>
<div className={pageStyle.tabList}> <div className={pageStyle.tabList}>
...@@ -125,7 +137,7 @@ class AddCourseModalForm extends React.Component { ...@@ -125,7 +137,7 @@ class AddCourseModalForm extends React.Component {
message: '请输入标题', message: '请输入标题',
}, },
], ],
})(<Input placeholder="请输入标题" />)} })(<Input maxLength={40} placeholder="请输入标题" />)}
</FormItem> </FormItem>
<FormItem {...formItemModalLineLayout} label="开课时间"> <FormItem {...formItemModalLineLayout} label="开课时间">
{getFieldDecorator('time', { {getFieldDecorator('time', {
......
src/pages/onlineclasses/singleclass/CourseDetail.js
View file @ eb4204d4
...@@ -138,6 +138,42 @@ class CourseDetailForm extends React.Component { ...@@ -138,6 +138,42 @@ class CourseDetailForm extends React.Component {
} }
}); });
} }
uploadCover = (e) => {
const { dispatch } = this.props;
dispatch({
type: 'onlineclasses/queryimagesignature',
payload: {
files: e.target,
uploadtype: 'uploadCover',
},
});
}
deleteCover = () => {
const { dispatch } = this.props;
dispatch({
type: 'onlineclasses/deleteCover',
payload: {
},
});
}
deleteAudio = () => {
const { dispatch } = this.props;
dispatch({
type: 'onlineclasses/deleteAudio',
payload: {
},
});
}
uploadAudio = (e) => {
const { dispatch } = this.props;
dispatch({
type: 'onlineclasses/queryvoiceignature',
payload: {
files: e.target,
uploadtype: 'uploadAudio',
},
});
}
render() { render() {
const { const {
form: { getFieldDecorator, getFieldValue }, form: { getFieldDecorator, getFieldValue },
...@@ -164,16 +200,31 @@ class CourseDetailForm extends React.Component { ...@@ -164,16 +200,31 @@ class CourseDetailForm extends React.Component {
<div className={pageStyle.container}> <div className={pageStyle.container}>
<Form hideRequiredMark className={pageStyle.modalform} labelAlign="left" onSubmit={this.save}> <Form hideRequiredMark className={pageStyle.modalform} labelAlign="left" onSubmit={this.save}>
<FormItem {...formItemModalLineLayout} label="封面" className={pageStyle.imgFormItem}> <FormItem {...formItemModalLineLayout} label="封面" className={pageStyle.imgFormItem}>
<div className={pageStyle.photoWrap}> {
<div className={pageStyle.material}> addCourseObj.cover ?
<img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="" /> <div className={pageStyle.photoWrap}>
<div className={pageStyle.tip}>从素材库选择</div> <div className={pageStyle.photoCover}>
</div> <img src={imagify(addCourseObj.cover)} alt="封面" />
<div className={pageStyle.material}> <Icon onClick={this.deleteCover} className={pageStyle.coverDelete} type="delete" />
<img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="" /> </div>
<div className={pageStyle.tip}>上传图片</div> </div> :
</div> <div className={pageStyle.photoWrap}>
</div> <div className={pageStyle.material}>
<img src={`${__IMGCDN__}/course/check.png`} alt="从素材库选择" />
<div className={pageStyle.tip}>从素材库选择</div>
</div>
<div className={pageStyle.material}>
<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.uploadCover(e); }}
/>
</div>
</div>
}
<span className="ant-form-text">图片建议格式位JPG/PNG，尺寸140*140，图片大小不超过10MB</span> <span className="ant-form-text">图片建议格式位JPG/PNG，尺寸140*140，图片大小不超过10MB</span>
</FormItem> </FormItem>
<FormItem {...formItemModalLineLayout} label="标题"> <FormItem {...formItemModalLineLayout} label="标题">
...@@ -190,13 +241,13 @@ class CourseDetailForm extends React.Component { ...@@ -190,13 +241,13 @@ class CourseDetailForm extends React.Component {
</FormItem> </FormItem>
<FormItem {...formItemModalLineLayout} label="课程简述"> <FormItem {...formItemModalLineLayout} label="课程简述">
{getFieldDecorator('remark', { {getFieldDecorator('remark', {
initialValue: '', initialValue: addCourseObj.remark,
})(<Input style={{ width: 520, marginRight: 30 }} placeholder="请输入课程简述" />)} })(<Input style={{ width: 520, marginRight: 30 }} placeholder="请输入课程简述" />)}
<span className="ant-form-text">分享课程给好友时，作为描述信息在标题下方显示</span> <span className="ant-form-text">分享课程给好友时，作为描述信息在标题下方显示</span>
</FormItem> </FormItem>
<FormItem {...formItemModalLineLayout} label="学习人数"> <FormItem {...formItemModalLineLayout} label="学习人数">
{getFieldDecorator('study_count', { {getFieldDecorator('study_count', {
initialValue: '', initialValue: addCourseObj.study_count,
rules: [ rules: [
{ {
required: false, required: false,
...@@ -204,13 +255,13 @@ class CourseDetailForm extends React.Component { ...@@ -204,13 +255,13 @@ class CourseDetailForm extends React.Component {
pattern: new RegExp(/^[1-9]\d*$/, 'g'), pattern: new RegExp(/^[1-9]\d*$/, 'g'),
}, },
], ],
})(<InputNumber style={{ width: 520, marginRight: 30 }} placeholder="请输入学习人数" />)} })(<InputNumber max={999999} style={{ width: 520, marginRight: 30 }} placeholder="请输入学习人数" />)}
<span className="ant-form-text">设置学习人数基数，让学员更有东西学习喔</span> <span className="ant-form-text">设置学习人数基数，让学员更有东西学习喔</span>
</FormItem> </FormItem>
<FormItem {...formItemModalLineLayout} label="课程类型"> <FormItem {...formItemModalLineLayout} label="课程类型">
<div className={pageStyle.courseType}>免费</div> <div className={pageStyle.courseType}>免费</div>
<span className={pageStyle.typeEdit}>点击修改</span> {/* <span className={pageStyle.typeEdit}>点击修改</span> */}
<span className="ant-form-text">有人报名则无法修改课程类型</span> {/* <span className="ant-form-text">有人报名则无法修改课程类型</span> */}
</FormItem> </FormItem>
<FormItem {...formItemModalLineLayout} label="开课时间"> <FormItem {...formItemModalLineLayout} label="开课时间">
{getFieldDecorator('start_time', { {getFieldDecorator('start_time', {
...@@ -228,7 +279,22 @@ class CourseDetailForm extends React.Component { ...@@ -228,7 +279,22 @@ class CourseDetailForm extends React.Component {
/>)} />)}
</FormItem> </FormItem>
<FormItem {...formItemModalLineLayout} label="语音介绍"> <FormItem {...formItemModalLineLayout} label="语音介绍">
<span className={pageStyle.voice}>添加语音介绍</span> {
addCourseObj.audio ?
<div className={pageStyle.voice}>
<audio controls src={imagify(addCourseObj.audio)} />
<Icon onClick={this.deleteAudio} className={pageStyle.audioDelete} type="delete" />
</div> :
<div className={pageStyle.voice}>
添加语音介绍
<input
type="file"
className={pageStyle.voiceUpload}
accept="audio/*"
onChange={(e) => { this.uploadAudio(e); }}
/>
</div>
}
</FormItem> </FormItem>
<FormItem {...formItemModalLineLayout} label="课程介绍"> <FormItem {...formItemModalLineLayout} label="课程介绍">
<ThemeEditor <ThemeEditor
......
src/pages/onlineclasses/singleclass/CourseDetail.less
View file @ eb4204d4
.container { .container {
background-color: #fff; background-color: #fff;
padding: 20px; padding:0 20px;
} }
.modalform { .modalform {
margin-top: 20px; margin-top: 20px;
...@@ -13,6 +13,24 @@ ...@@ -13,6 +13,24 @@
.photoWrap { .photoWrap {
display: inline-flex; display: inline-flex;
width: 320px; width: 320px;
.photoCover {
width: 140px;
height: 140px;
position: relative;
&>img {
width: 140px;
height: 140px;
border-radius: 6px;
}
.coverDelete {
font-size: 22px;
color: #fa4f53;
cursor: pointer;
position: absolute;
right: -40px;
top: 0;
}
}
.material { .material {
width: 140px; width: 140px;
height: 140px; height: 140px;
...@@ -24,6 +42,17 @@ ...@@ -24,6 +42,17 @@
flex-direction: column; flex-direction: column;
margin-right: 11px; margin-right: 11px;
cursor: pointer; cursor: pointer;
position: relative;
.uploadInput {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.tip { .tip {
font-size:14px; font-size:14px;
font-weight:400; font-weight:400;
...@@ -64,4 +93,28 @@ ...@@ -64,4 +93,28 @@
} }
.voice { .voice {
margin: 0; margin: 0;
position: relative;
width: 400px;
height: 40px;
&>audio {
height: 30px;
}
.audioDelete {
position: absolute;
top: 3px;
right: 0;
font-size: 22px;
color: #fa4f53;
cursor: pointer;
}
.voiceUpload {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
z-index: 1;
cursor: pointer;
}
} }
src/pages/onlineclasses/singleclass/index.js
View file @ eb4204d4
import { connect } from 'dva'; import { connect } from 'dva';
import React from 'react'; import React from 'react';
import { Icon, Button, Tabs, Select, Form, List, Row, Col, Input, Card, Avatar, message } from 'antd'; import {
Icon,
Button,
Tabs,
Select,
Form,
List,
Row,
Col,
Input,
Card,
Avatar,
message,
Modal,
Pagination,
} from 'antd';
import pageStyle from './index.less'; import pageStyle from './index.less';
import AddCourseModal from './AddCourseModal'; import AddCourseModal from './AddCourseModal';
import { pageIn, hasBtnPower } from '../../../utils'; import { pageIn, hasBtnPower, imagify } from '../../../utils';
const { TabPane } = Tabs; const { TabPane } = Tabs;
const FormItem = Form.Item; const FormItem = Form.Item;
const { Option } = Select; const { Option } = Select;
...@@ -27,6 +42,27 @@ class ClassMgtForm extends React.Component { ...@@ -27,6 +42,27 @@ class ClassMgtForm extends React.Component {
type: 'onlineclasses/updateState', type: 'onlineclasses/updateState',
payload: { payload: {
courseVisible: true, courseVisible: true,
addCourseObj: {
title: '',
start_time: '',
charge_type: '',
created_at: '',
cover: '',
type: '',
audio: '',
content: [
{ type: 'text', value: '' },
],
},
},
});
}
addCourseClose = () => {
const { dispatch } = this.props;
dispatch({
type: 'onlineclasses/updateState',
payload: {
courseVisible: false,
}, },
}); });
} }
...@@ -39,76 +75,122 @@ class ClassMgtForm extends React.Component { ...@@ -39,76 +75,122 @@ class ClassMgtForm extends React.Component {
}, },
}); });
} }
deleteCourse = (item) => {
const { dispatch } = this.props;
console.log(item, 'item');
Modal.confirm({
title: `确定删除“${item.title}”?`,
content: '删除后不可恢复，请谨慎操作！',
okText: '确定',
cancelText: '取消',
icon: <Icon type="close-circle" style={{ color: 'red' }} />,
onOk() {
dispatch({
type: 'onlineclasses/deleteCourse',
payload: {
id: item.id,
},
});
},
okButtonProps: {
type: 'danger',
style: {
color: '#fff',
backgroundColor: '#ff4d4f',
borderColor: '#ff4d4f',
},
},
});
}
onChangeCourseList = (page, perPage) => {
const { dispatch } = this.props;
dispatch({
type: 'onlineclasses/selectCourseList',
payload: {
params: {
page,
perPage,
},
},
});
console.log(page, perPage, '111111111');
}
render() { render() {
const { const {
form: { getFieldDecorator, getFieldValue }, form: { getFieldDecorator, getFieldValue },
courseVisible, courseVisible,
courseList, courseList,
courseListTotal,
courseListParams,
} = this.props; } = this.props;
console.log(courseList, 'courseList');
const listData = [];
for (let i = 0; i < 23; i++) {
listData.push({
title: `超值体验课，只需要一元速来抢购，机不可失！${i}`,
avatar: 'https://cdn.img.shangjiadao.cn/clock/member/212519/2019-11-18/a2ceab5ca61e5893019d4e39efe65070.png',
description: '2019-11-12 18:21',
});
}
return ( return (
<div className={pageStyle.container}> <div className={pageStyle.container}>
<div className={pageStyle.head}> <div className={pageStyle.head}>
<Button type="primary" onClick={this.handleCreateCourse}>创建线上课程</Button> <Button type="primary" onClick={this.handleCreateCourse}>创建线上课程</Button>
</div> </div>
<div className={pageStyle.courseWrap}> {
<div className={pageStyle.courseTip}><span>课程列表</span>(共3个)</div> courseList && courseList.length > 0 ?
<div className={pageStyle.courseList}> <div className={pageStyle.courseWrap}>
<List <div className={pageStyle.courseTip}><span>课程列表</span>(共{courseListTotal}个)</div>
size="large" <div className={pageStyle.courseList}>
grid={{ <List
gutter: 20, size="large"
xs: 3, grid={{
sm: 3, gutter: 20,
md: 4, xs: 3,
lg: 4, sm: 3,
xl: 4, md: 4,
xxl: 4, lg: 4,
}} xl: 4,
dataSource={courseList} xxl: 4,
renderItem={item => ( }}
<List.Item> footer={
<Card bodyStyle={{ padding: 20 }}> <div className={pageStyle.tablefooterbox}>
<Card.Meta <Pagination
style={{ padding: 0 }} total={Number(courseListTotal)}
avatar={<img className={pageStyle.itemImg} alt="图片" src={item.cover} />} onChange={this.onChangeCourseList}
title={ pageSize={courseListParams.perPage}
<div className={pageStyle.itemTitleWrap}> />
<div className={pageStyle.itemTitle}>{item.title}</div>
<div className={pageStyle.deleteIcon}><Icon type="delete" /></div>
</div>
}
description={
<span className={pageStyle.itemTime}>{item.description}</span>
}
/>
<div className={pageStyle.itemBtn} onClick={() => this.goEditCourse(item.id)}>
<Icon style={{ marginRight: 5 }} type="edit" /> 编辑课程
</div> </div>
</Card> }
</List.Item> dataSource={courseList}
)} renderItem={item => (
/>, <List.Item>
</div> <Card bodyStyle={{ padding: 20 }}>
</div> <Card.Meta
<div className={pageStyle.noData}> style={{ padding: 0 }}
<img className={pageStyle.defaultImg} src="https://cdn.img.shangjiadao.cn/clock/member/212519/2019-11-18/a2ceab5ca61e5893019d4e39efe65070.png" alt="图片" /> avatar={<img className={pageStyle.itemImg} alt="图片" src={imagify(item.cover)} />}
<h3>创建线上课程</h3> title={
<h5>两步完成创建</h5> <div className={pageStyle.itemTitleWrap}>
<p>1.设置课程标题、开课时间；</p> <div className={pageStyle.itemTitle}>{item.title}</div>
<p>2.选择课程类型，免费 或者 付费</p> <div className={pageStyle.deleteIcon} onClick={() => this.deleteCourse(item)}><Icon type="delete" /></div>
<Button type="primary" className={pageStyle.createBtn} onClick={this.handleCreateCourse}>立即创建</Button> </div>
</div> }
description={
<span className={pageStyle.itemTime}>{item.created_at}</span>
}
/>
<div className={pageStyle.itemBtn} onClick={() => this.goEditCourse(item.id)}>
<Icon style={{ marginRight: 5 }} type="edit" /> 编辑课程
</div>
</Card>
</List.Item>
)}
/>
</div>
</div> :
<div className={pageStyle.noData}>
<img className={pageStyle.defaultImg} src={`${__IMGCDN__}/course/no_data.png`} alt="缺省图" />
<h3>创建线上课程</h3>
<h5>两步完成创建</h5>
<p>1.设置课程标题、开课时间；</p>
<p>2.选择课程类型，免费 或者 付费</p>
<Button type="primary" className={pageStyle.createBtn} onClick={this.handleCreateCourse}>立即创建</Button>
</div>
}
<AddCourseModal <AddCourseModal
visible={courseVisible} visible={courseVisible}
close={this.addCourseClose}
/> />
</div> </div>
); );
...@@ -123,10 +205,14 @@ function mapStateToProps(state) { ...@@ -123,10 +205,14 @@ function mapStateToProps(state) {
const { const {
courseVisible, courseVisible,
courseList, courseList,
courseListTotal,
courseListParams,
} = state.onlineclasses; } = state.onlineclasses;
return { return {
courseVisible, courseVisible,
courseList, courseList,
courseListTotal,
courseListParams,
}; };
} }
export default connect(mapStateToProps)(ClassMgt); export default connect(mapStateToProps)(ClassMgt);
......
src/pages/onlineclasses/singleclass/index.less
View file @ eb4204d4
...@@ -72,18 +72,20 @@ ...@@ -72,18 +72,20 @@
font-weight:400; font-weight:400;
color:rgba(128,128,128,1); color:rgba(128,128,128,1);
margin: 20px auto 0; margin: 20px auto 0;
cursor: pointer;
} }
} }
} }
.noData { .noData {
display: none;
width: 100%; width: 100%;
text-align: center; text-align: center;
padding-bottom: 12%;
.defaultImg { .defaultImg {
width: 110px; width: 110px;
height: 110px; height: 110px;
background-color: #E0E0E0; background-color: #E0E0E0;
margin: 85px 0 25px; margin: 85px 0 25px;
border-radius: 50%;
} }
&>h3 { &>h3 {
font-size:22px; font-size:22px;
...@@ -107,3 +109,7 @@ ...@@ -107,3 +109,7 @@
} }
} }
} }
.tablefooterbox {
display: flex;
justify-content: flex-end;
}
src/pages/onlineclasses/singleclass/singleDetail.js
View file @ eb4204d4
...@@ -10,8 +10,8 @@ import { ...@@ -10,8 +10,8 @@ import {
Row, Row,
Col, Col,
Input, Input,
Card, Menu,
Avatar, Dropdown,
DatePicker, DatePicker,
Modal, Modal,
InputNumber, Checkbox, Radio, InputNumber, Checkbox, Radio,
...@@ -41,6 +41,15 @@ class singleDetailForm extends React.Component { ...@@ -41,6 +41,15 @@ class singleDetailForm extends React.Component {
} }
componentWillUnmount() { // 卸载 componentWillUnmount() { // 卸载
} }
changeStatus = (key) => {
const { dispatch } = this.props;
dispatch({
type: 'onlineclasses/changeCourseStatus',
payload: {
status: key === 1 ? 2 : 1,
},
});
}
render() { render() {
const { const {
form: { getFieldDecorator, getFieldValue }, form: { getFieldDecorator, getFieldValue },
...@@ -56,16 +65,27 @@ class singleDetailForm extends React.Component { ...@@ -56,16 +65,27 @@ class singleDetailForm extends React.Component {
sm: { span: 17 }, sm: { span: 17 },
}, },
}; };
const menu = (
<Menu>
<Menu.Item key="0">
<span onClick={() => this.changeStatus(addCourseObj.status)}>{addCourseObj.status === 1 ? '下架' : '上架'}</span>
</Menu.Item>
</Menu>
);
return ( return (
<div className={pageStyle.container}> <div className={pageStyle.container}>
<div className={pageStyle.head}> <div className={pageStyle.head}>
<div className={pageStyle.hedaTitle}> <div className={pageStyle.hedaTitle}>
<img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="" /> <img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="" />
<div className={pageStyle.title}>{addCourseObj.title}</div> <div className={pageStyle.title}>{addCourseObj.title}</div>
<Icon type="edit" /> <Dropdown className={pageStyle.editStatus} overlay={menu} trigger={['click']}>
<a className="ant-dropdown-link" href="#">
编辑 <Icon type="down" />
</a>
</Dropdown>
</div> </div>
<div className={pageStyle.publish}> <div className={pageStyle.publish}>
<div className={pageStyle.tip}>已发布</div> 创建于：{addCourseObj.created_at} <div className={pageStyle.tip}>{addCourseObj.status === 1 ? '已发布' : '未发布'}</div> 创建于：{addCourseObj.created_at}
</div> </div>
</div> </div>
<Tabs className={pageStyle.tabs} defaultActiveKey="1" onChange={this.callback}> <Tabs className={pageStyle.tabs} defaultActiveKey="1" onChange={this.callback}>
......
src/pages/onlineclasses/singleclass/singleDetail.less
View file @ eb4204d4
...@@ -43,3 +43,14 @@ ...@@ -43,3 +43,14 @@
background-color: #fff; background-color: #fff;
} }
} }
.editStatus {
width: 57px;
height: 27px;
line-height: 27px;
color: #575757;
font-size: 14px;
border: 1px solid #959595;
text-align: center;
border-radius: 4px;
margin-left: 10px;
}
src/services/onlineclasses.js
View file @ eb4204d4
...@@ -41,3 +41,11 @@ export function findCourse(params) { ...@@ -41,3 +41,11 @@ export function findCourse(params) {
data, data,
}); });
} }
export function changeCourseStatus(params) {
const data = qs.stringify(params);
return request({
url: `${api.onlineclasses.courseputaway}/${params.id}`,
method: 'POST',
data,
});
}
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