Skip to content

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

111222

parents eb4204d4 732213e1
Hide whitespace changes
Inline Side-by-side
Showing with 1322 additions and 81 deletions
src/common/api.js
View file @ 5ec6da9f
......@@ -183,6 +183,7 @@ export default {
onlineclasses: {
selectcourse: `${dakaapi}member/online_courses`,
courseputaway: `${dakaapi}member/online_courses/status`,
importCourse: `${dakaapi}member/online_courses_import_sub_course`,
},
courseMateria: {
index: `${dakaapi}member/materials`,
......
src/models/coursegatherdetail.js 0 → 100644
View file @ 5ec6da9f
import { routerRedux } from 'dva/router';
import { message } from 'antd';
import { delay } from 'redux-saga';
import co from 'co';
import {
LocalStorage,
SessionStorage,
isExpired,
getRandomFilename,
} from '../utils/index';
import * as onlineAjax from '../services/onlineclasses';
export default {
namespace: 'coursegatherdetail',
state: {
courseVisible: false,
saveCourseGatherSubmitting: false,
courseList: [],
courseListTotal: 0,
gatherList: [],
gatherListTotal: 0,
id: 0,
tabIndex: 1,
courseQueryParams: {
page: 1,
perPage: 12,
},
gatherDetail: {},
allCourseList: [],
allCourseListTotal: 0,
courseIds: [],
copyCourseIds: [],
addCourseShow: false,
addCourseSubmitting: false,
},
subscriptions: {
setup({ dispatch, history }) { // eslint-disable-line
},
},
effects: {
* queryinfo({ payload }, { call, put, select }) {
const { id } = payload;
yield put({
type: 'updateState',
payload: {
id,
},
});
yield put({
type: 'getGatherDetail',
payload: {
id,
},
});
yield put({
type: 'selectCourseList',
payload: {
params: {},
},
});
},
* saveGatherCourse({ payload }, { call, put, select }) {
const { values, successCallback } = payload;
const { addCourseSubmitting, id } = yield select(state => state.coursegatherdetail);
if (addCourseSubmitting) {
return;
}
yield put({
type: 'updateState',
payload: {
addCourseSubmitting: true,
},
});
const loading = message.loading('保存中...', 0);
const importdata = yield call(onlineAjax.importCourse, {
id,
course_ids: values.course_ids.join(','),
});
setTimeout(loading);
yield put({
type: 'updateState',
payload: {
addCourseSubmitting: false,
},
});
const { data, code } = importdata;
if (code == 200) {
if (successCallback && (typeof successCallback == 'function')) {
successCallback();
}
yield put({
type: 'selectCourseList',
payload: {
params: {},
},
});
yield put({
type: 'updateState',
payload: {
addCourseShow: false,
},
});
} else {
yield put({
type: 'webapp/errorrequestresolve',
payload: {
importdata,
},
});
}
},
* getGatherDetail({ payload }, { call, put, select }) {
const { id } = yield select(state => state.coursegatherdetail);
const loading = message.loading('数据加载中...', 0);
const detaildata = yield call(onlineAjax.findCourse, {
id,
});
const { data, msg, code } = detaildata;
if (code == 200) {
yield put({
type: 'updateState',
payload: {
gatherDetail: { ...data },
},
});
} else {
yield put({
type: 'webapp/errorrequestresolve',
payload: {
detaildata,
},
});
}
setTimeout(loading);
},
* pageInit({ payload }, { call, put, select }) {
yield put({
type: 'updateState',
payload: {
},
});
},
* selectCourseList({ payload }, { call, put, select }) {
const { sid } = yield select(state => state.webapp);
const { id, courseQueryParams } = yield select(state => state.coursegatherdetail);
const { params } = payload;
const data = yield call(onlineAjax.courseList, {
type: 1,
school_id: sid,
pid: id,
...courseQueryParams,
...params,
});
if (data.code == 200) {
if (data.data.total != undefined) {
yield put({
type: 'updateState',
payload: {
courseListTotal: data.data && data.data.total,
},
});
}
yield put({
type: 'updateState',
payload: {
courseList: data.data && data.data.list,
courseQueryParams: {
...courseQueryParams,
...params,
},
},
});
} else {
yield put({
type: 'webapp/errorrequestresolve',
payload: {
data,
},
});
}
},
* getGatherList({ payload }, { call, put, select }) {
const { sid } = yield select(state => state.webapp);
const { gatherQueryParams } = yield select(state => state.coursegatherindex);
const { params } = payload;
const data = yield call(onlineAjax.courseList, {
type: 2,
school_id: sid,
...gatherQueryParams,
...params,
});
if (data.code == 200) {
if (data.data.total != undefined) {
yield put({
type: 'updateState',
payload: {
gatherListTotal: data.data && data.data.total,
},
});
}
yield put({
type: 'updateState',
payload: {
gatherList: data.data && data.data.list,
gatherQueryParams: {
...gatherQueryParams,
...params,
},
},
});
} else {
yield put({
type: 'webapp/errorrequestresolve',
payload: {
data,
},
});
}
},
* getAllCourseList({ payload }, { call, put, select }) {
const { sid } = yield select(state => state.webapp);
const data = yield call(onlineAjax.courseList, {
type: 1,
school_id: sid,
page: 1,
perPage: 200,
});
if (data.code == 200) {
if (data.data.total != undefined) {
yield put({
type: 'updateState',
payload: {
allCourseListTotal: data.data && data.data.total,
},
});
}
yield put({
type: 'updateState',
payload: {
allCourseList: data.data && data.data.list,
},
});
} else {
yield put({
type: 'webapp/errorrequestresolve',
payload: {
data,
},
});
}
},
},
reducers: {
save(state, action) {
return { ...state, ...action.payload };
},
updateState(state, action) {
return { ...state, ...action.payload };
},
},
};
src/models/coursegatherindex.js 0 → 100644
View file @ 5ec6da9f
import { routerRedux } from 'dva/router';
import { message } from 'antd';
import { delay } from 'redux-saga';
import co from 'co';
import {
LocalStorage,
SessionStorage,
isExpired,
getRandomFilename,
} from '../utils/index';
import * as onlineAjax from '../services/onlineclasses';
export default {
namespace: 'coursegatherindex',
state: {
courseVisible: false,
saveCourseGatherSubmitting: false,
courseList: [],
courseListTotal: 0,
gatherList: [],
gatherListTotal: 0,
gatherQueryParams: {
page: 1,
perPage: 12,
},
},
subscriptions: {
setup({ dispatch, history }) { // eslint-disable-line
},
},
effects: {
* queryinfo({ payload }, { call, put, select }) {
yield put({
type: 'getGatherList',
payload: {
params: {},
},
});
},
* pageInit({ payload }, { call, put, select }) {
yield put({
type: 'updateState',
payload: {
},
});
},
* gogatherdetail({ payload }, { call, put, select }) {
const { id } = payload;
yield put(routerRedux.push({
pathname: `/sjd/gatherdetail/${id}`,
}));
},
* addCourseGather({ payload }, { call, put, select }) {
const { values, successCallback } = payload;
const { saveCourseGatherSubmitting } = yield select(state => state.coursegatherindex);
const { sid } = yield select(state => state.webapp);
if (saveCourseGatherSubmitting) {
return;
}
yield put({
type: 'updateState',
payload: {
saveCourseGatherSubmitting: true,
},
});
const loading = message.loading('保存中...', 1);
const savedata = yield call(onlineAjax.addCourse, {
...values,
school_id: sid,
type: 2,
});
setTimeout(loading);
yield put({
type: 'updateState',
payload: {
saveCourseGatherSubmitting: false,
},
});
const { data, code, msg } = savedata;
if (code == 200) {
yield put({
type: 'updateState',
payload: {
courseVisible: false,
},
});
if (successCallback && (typeof successCallback == 'function')) {
successCallback();
}
} else {
yield put({
type: 'webapp/errorrequestresolve',
payload: {
savedata,
},
});
}
// yield put
},
* selectCourseList({ payload }, { call, put, select }) {
const { sid } = yield select(state => state.webapp);
const data = yield call(onlineAjax.courseList, {
type: 1,
school_id: sid,
page: 1,
perPage: 100,
});
if (data.code == 200) {
if (data.data.total != undefined) {
yield put({
type: 'updateState',
payload: {
courseListTotal: data.data && data.data.total,
},
});
}
yield put({
type: 'updateState',
payload: {
courseList: data.data && data.data.list,
},
});
} else {
yield put({
type: 'webapp/errorrequestresolve',
payload: {
data,
},
});
}
},
* getGatherList({ payload }, { call, put, select }) {
const { sid } = yield select(state => state.webapp);
const { gatherQueryParams } = yield select(state => state.coursegatherindex);
const { params } = payload;
const data = yield call(onlineAjax.courseList, {
type: 2,
school_id: sid,
...gatherQueryParams,
...params,
});
if (data.code == 200) {
if (data.data.total != undefined) {
yield put({
type: 'updateState',
payload: {
gatherListTotal: data.data && data.data.total,
},
});
}
yield put({
type: 'updateState',
payload: {
gatherList: data.data && data.data.list,
gatherQueryParams: {
...gatherQueryParams,
...params,
},
},
});
} else {
yield put({
type: 'webapp/errorrequestresolve',
payload: {
data,
},
});
}
},
},
reducers: {
save(state, action) {
return { ...state, ...action.payload };
},
updateState(state, action) {
return { ...state, ...action.payload };
},
},
};
src/models/index.js
View file @ 5ec6da9f
......@@ -40,7 +40,9 @@ import integralModel from './integral';
import createThemeModal from './createtheme';
import analyzecenterModal from './analyzecenter';
import onlineclassesModal from './onlineclasses';
import coursegatherindex from './coursegatherindex';
import coursemateria from './coursemateria';
import coursegatherdetail from './coursegatherdetail';
export default {
loginModel,
indexstaicModel,
......@@ -76,4 +78,6 @@ export default {
analyzecenterModal,
onlineclassesModal,
coursemateria,
coursegatherindex,
coursegatherdetail,
};
src/models/webapp.js
View file @ 5ec6da9f
......@@ -870,6 +870,20 @@ export default {
},
});
}
if (pathname === '/sjd/coursegather') {
dispatch({
type: 'coursegatherindex/queryinfo',
});
dispatch({
type: 'updateState',
payload: {
breadcrumbList: [{
path: pathname,
name: '课程专栏',
}],
},
});
}
if (pathname === '/sjd/coursemateria') {
dispatch({
type: 'coursemateria/queryinfo',
......@@ -884,6 +898,30 @@ export default {
},
});
}
const gatherdetailMath = pathToRegexp('/sjd/gatherdetail/:id').exec(pathname);
if (gatherdetailMath) {
dispatch({
type: 'coursegatherdetail/queryinfo',
payload: {
id: gatherdetailMath[1],
},
});
dispatch({
type: 'updateState',
payload: {
breadcrumbList: [
{
path: 'sjd/singleclass',
name: '线上课程',
},
{
path: pathname,
name: '课程详情',
},
],
},
});
}
});
},
},
......
src/pages/coursegather/detail/AddCourseModal.js 0 → 100644
View file @ 5ec6da9f
import { connect } from 'dva';
import React from 'react';
import {
Icon,
Button,
Tabs,
Select,
Form,
List,
Row,
Col,
Input,
Card,
Avatar,
Empty,
Modal,
InputNumber, Checkbox, Radio, message,
} from 'antd';
import moment from 'moment';
import pageStyle from './AddCourseModal.less';
import { pageIn, hasBtnPower, imagify } from '../../../utils';
const { TabPane } = Tabs;
const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;
class AddCourseModal extends React.Component {
constructor(props) {
super(props);
this.state = {
course_ids: [],
// title: '',
};
}
componentDidMount() { // 挂载
}
componentDidUpdate() {
}
componentWillUnmount() { // 卸载
}
submit = (e) => {
const { save } = this.props;
const { course_ids } = this.state;
e.preventDefault();
if (course_ids.length == 0) {
message.warn('请选择您要添加的课程', 1);
return;
}
save({ course_ids }, () => {
this.setState({
course_ids: [],
});
});
}
close = () => {
const { form, close } = this.props;
this.setState({
course_ids: [],
});
close();
}
checkedChange = (id) => {
const { course_ids } = this.state;
const newcourse_ids = [...course_ids];
const idIndex = course_ids.indexOf(id);
if (idIndex == -1) {
newcourse_ids.push(id);
} else {
newcourse_ids.splice(idIndex, 1);
}
this.setState({
course_ids: newcourse_ids,
});
}
render() {
const {
visible,
loading,
courseList,
courseListTotal,
} = this.props;
const {
course_ids,
} = this.state;
return (
<Modal
visible={visible}
title="选择需要添加的课程"
maskClosable={false}
zIndex={110}
width={600}
onCancel={this.close}
confirmLoading={loading}
onOk={this.submit}
bodyStyle={{
padding: '40px 20px',
}}
>
{courseListTotal == 0 && <Empty description={<span className={pageStyle.emptytext}>您还没有创建单课<br />请直接点击“创建专栏”完成创建</span>} />}
{courseListTotal > 0 &&
<Row className={pageStyle.courseListBox}>
{courseList.map(ele => (
<Col span={6} style={{ marginBottom: '10px' }} key={ele.id}>
<Checkbox style={{ display: 'flex', alignItems: 'flex-start' }} onChange={() => this.checkedChange(ele.id)} checked={course_ids.indexOf(ele.id) != -1}>
<img className={pageStyle.courseCover} src={imagify(ele.cover)} alt="" />
</Checkbox>
</Col>
))}
</Row>
}
</Modal>
);
}
}
AddCourseModal.propTypes = {
};
export default AddCourseModal;
src/pages/coursegather/detail/AddCourseModal.less 0 → 100644
View file @ 5ec6da9f
.tabList {
display: flex;
align-items: center;
.tabLine {
width: 140px;
height: 1px;
background:rgba(0,0,0,0.1);
margin: 0 20px;
}
.tabItem {
display: flex;
align-items: center;
.tabNum {
width: 32px;
height: 32px;
background-color: #1890FF;
border: 1px solid #1890FF;
border-radius: 50% ;
font-size: 16px;
color: #fff;
line-height: 32px;
text-align: center;
margin-right: 14px;
}
.tabNormal {
width: 32px;
height: 32px;
background-color: #fff;
border: 1px solid #1890FF;
border-radius: 50% ;
font-size: 16px;
color: #1890FF;
line-height: 32px;
text-align: center;
margin-right: 14px;
}
&>span {
font-size:16px;
font-family:PingFang SC;
font-weight:400;
color:rgba(0,0,0,1);
}
}
}
.modalform {
margin-top: 30px;
:global {
.ant-form-item {
margin-bottom: 5px;
}
}
}
.formWrap {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.modalFooter {
text-align: right;
}
.courseCover {
width: 90px;
height: 90px;
border-radius: 6px;
}
.active2title {
font-size: 14px;
color: #131313;
margin-bottom: 20px;
}
.emptytext {
text-align: center;
}
.courseListBox {
max-height: 300px;
overflow-y: auto;
padding: 10px 0;
}
\ No newline at end of file
src/pages/coursegather/detail/CourseBox.js
View file @ 5ec6da9f
import React from 'react';
import { List, Icon, DatePicker, Spin, Card, Button } from 'antd';
import pageStyle from './index.less';
import { imagify } from '../../../utils';
const CourseBox = (props) => {
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',
});
}
const {
list,
total,
toAddCourse,
} = props;
return (
<div className={pageStyle.mediaCardBox}>
<div className={pageStyle.mediaCardBoxHeader}>
<div className={pageStyle.mediaCardBoxHeaderTitle}>课程列表</div>
<div className={pageStyle.courseCount}>(共3个)</div>
<div className={pageStyle.courseCount}>(共{total}个)</div>
<Button type="primary" style={{ marginRight: '20px', marginBottom: '26px' }}>创建课程</Button>
<Button type="primary" style={{ marginRight: '20px', marginBottom: '26px' }}>批量添加课程</Button>
<Button type="primary" style={{ marginRight: '20px', marginBottom: '26px' }} onClick={() => toAddCourse()}>批量添加课程</Button>
<Button type="primary" style={{ marginRight: '20px', marginBottom: '26px' }}>课程排序</Button>
<Button type="primary" style={{ marginRight: '20px', marginBottom: '26px' }}>批量管理课程</Button>
</div>
......@@ -29,22 +27,22 @@ const CourseBox = (props) => {
md: 2,
lg: 2,
xl: 3,
xxl: 4,
xxl: 3,
}}
dataSource={listData}
dataSource={list}
renderItem={item => (
<List.Item style={{ minWidth: '320px' }}>
<Card bodyStyle={{ padding: 20, minWidth: '320px' }}>
<Card.Meta
style={{ padding: 0, borderRadius: '6px' }}
avatar={<img className={pageStyle.itemImg} alt="图片" src={item.avatar} />}
avatar={<img className={pageStyle.itemImg} alt="图片" src={imagify(item.cover)} />}
title={
<div className={pageStyle.itemTitleWrap}>
<div className={pageStyle.itemTitle}>{item.title}</div>
</div>
}
description={
<span className={pageStyle.itemTime}>{item.description}</span>
<span className={pageStyle.itemTime}>{item.created_at}</span>
}
/>
<div className={pageStyle.editbtn}>
......
src/pages/coursegather/detail/StaticBox.js
View file @ 5ec6da9f
......@@ -17,6 +17,10 @@ class StaticBox extends React.Component {
componentWillUnmount() { // 卸载
}
render() {
const {
list,
total,
} = this.props;
return (
<div>
<div className={pageStyle.StaticBox}>
......
src/pages/coursegather/detail/index.js
View file @ 5ec6da9f
......@@ -15,6 +15,7 @@ import CourseBox from './CourseBox';
import CourseDetail from './CourseDetail';
import StaticBox from './StaticBox';
import CommentList from './CommentList';
import AddCourseModal from './AddCourseModal';
class StaticCenter extends React.Component {
componentDidMount() { // 挂载
pageIn('轻校-专栏详情');
......@@ -23,8 +24,62 @@ class StaticCenter extends React.Component {
}
componentWillUnmount() { // 卸载
}
tabShift = (tab) => {
const { dispatch } = this.props;
dispatch({
type: 'coursegatherdetail/updateState',
payload: {
tabIndex: tab,
},
});
}
toAddCourse = () => {
const { dispatch } = this.props;
dispatch({
type: 'coursegatherdetail/getAllCourseList',
});
dispatch({
type: 'coursegatherdetail/updateState',
payload: {
addCourseShow: true,
},
});
}
addCourseClose = () => {
const { dispatch } = this.props;
dispatch({
type: 'coursegatherdetail/updateState',
payload: {
addCourseShow: false,
},
});
}
saveGatherCourse = (values, callback) => {
const { dispatch } = this.props;
dispatch({
type: 'coursegatherdetail/saveGatherCourse',
payload: {
values,
successCallback() {
if (callback && (typeof callback == 'function')) {
callback();
}
},
},
});
}
render() {
const that = this;
const {
tabIndex,
gatherDetail,
courseList,
courseListTotal,
allCourseList,
allCourseListTotal,
addCourseShow,
addCourseSubmitting,
} = this.props;
const listData = [];
for (let i = 0; i < 23; i++) {
listData.push({
......@@ -40,26 +95,45 @@ class StaticCenter extends React.Component {
<img className={pageStyle.titleicon} 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.gatherDetail}>
<div className={pageStyle.titlebox}>
<span className={pageStyle.title}>每日阅读的专栏</span>
<span className={pageStyle.title}>{gatherDetail.title || ''}</span>
<img className={pageStyle.editicon} 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>
<div className={pageStyle.timebox}>
<div className={pageStyle.gatherstatus}>已发布</div>
<div className={pageStyle.gathertime}>创建于：2019-11-12 18:30</div>
{gatherDetail.status && gatherDetail.status == 1 &&
<div className={pageStyle.gatherstatus}>已发布</div>
}
{gatherDetail.status && gatherDetail.status == 2 &&
<div className={pageStyle.gatherstatus}>已下架</div>
}
<div className={pageStyle.gathertime}>创建于：{gatherDetail.created_at || ''}</div>
</div>
</div>
</div>
<div className={pageStyle.shiftbox}>
<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} ${tabIndex == 1 ? pageStyle.active : ''}`} onClick={() => this.tabShift(1)}>课程管理</div>
<div className={`${pageStyle.tabitem} ${tabIndex == 2 ? pageStyle.active : ''}`} onClick={() => this.tabShift(2)}>数据分析</div>
<div className={`${pageStyle.tabitem} ${tabIndex == 3 ? pageStyle.active : ''}`} onClick={() => this.tabShift(3)}>编辑专栏</div>
<div className={`${pageStyle.tabitem} ${tabIndex == 4 ? pageStyle.active : ''}`} onClick={() => this.tabShift(4)}>评论管理</div>
</div>
</div>
{/* <CourseBox /> */}
{/* <StaticBox /> */}
{/* <CourseDetail /> */}
<CommentList />
{tabIndex == 1 && <CourseBox
list={courseList}
total={courseListTotal}
// allList={allCourseList}
// allTotal={allCourseListTotal}
toAddCourse={this.toAddCourse}
/>}
{tabIndex == 2 && <StaticBox />}
{tabIndex == 3 && <CourseDetail />}
{tabIndex == 4 && <CommentList />}
<AddCourseModal
courseList={allCourseList}
courseListTotal={allCourseListTotal}
visible={addCourseShow}
close={this.addCourseClose}
save={this.saveGatherCourse}
loading={addCourseSubmitting}
/>
</div>
);
}
......@@ -69,9 +143,27 @@ StaticCenter.propTypes = {
};
function mapStateToProps(state) {
// const {
// } = state.coursemateria;
const {
tabIndex,
gatherDetail,
courseList,
courseListTotal,
allCourseList,
allCourseListTotal,
courseIds,
addCourseShow,
addCourseSubmitting,
} = state.coursegatherdetail;
return {
tabIndex,
gatherDetail,
courseList,
courseListTotal,
allCourseList,
allCourseListTotal,
courseIds,
addCourseShow,
addCourseSubmitting,
};
}
export default connect(mapStateToProps)(StaticCenter);
......
src/pages/coursegather/index/AddCourseModal.js 0 → 100644
View file @ 5ec6da9f
import { connect } from 'dva';
import React from 'react';
import {
Icon,
Button,
Tabs,
Select,
Form,
List,
Row,
Col,
Input,
Card,
Avatar,
Empty,
Modal,
InputNumber, Checkbox, Radio,
} from 'antd';
import moment from 'moment';
import pageStyle from './AddCourseModal.less';
import { pageIn, hasBtnPower, imagify } from '../../../utils';
const { TabPane } = Tabs;
const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;
class AddCourseModalForm extends React.Component {
constructor(props) {
super(props);
this.state = {
isActive: 1,
okText: '下一步',
cancelText: '上一步',
title: '',
charge_type: '',
is_encrypt: '',
password: '',
course_ids: [],
// title: '',
};
}
componentDidMount() { // 挂载
pageIn('轻校-线上课堂');
}
componentDidUpdate() {
}
componentWillUnmount() { // 卸载
}
handleClick = (key) => {
this.setState({
isActive: key,
});
}
submit = (e) => {
const { save, form } = this.props;
const { isActive } = this.state;
e.preventDefault();
if (isActive == 1) {
form.validateFields((err, values) => {
if (!err) {
this.setState({
okText: '创建专栏',
title: values.title,
charge_type: 1,
is_encrypt: values.is_encrypt,
password: values.password,
isActive: 2,
});
}
});
} else {
const {
title, charge_type, is_encrypt, password, course_ids,
} = this.state;
save({
title,
charge_type,
is_encrypt: is_encrypt && is_encrypt === true ? 1 : 2,
password,
course_ids: course_ids.join(','),
}, () => {
this.setState({
isActive: 1,
okText: '下一步',
cancelText: '上一步',
title: '',
charge_type: '',
is_encrypt: '',
password: '',
});
});
}
}
close = () => {
const { form, close } = this.props;
form.resetFields();
this.setState({
isActive: 1,
okText: '下一步',
cancelText: '上一步',
title: '',
charge_type: '',
is_encrypt: '',
password: '',
});
close();
}
goBack = () => {
this.setState({
isActive: 1,
okText: '下一步',
});
}
checkedChange = (id) => {
const { course_ids } = this.state;
const newcourse_ids = [...course_ids];
const idIndex = course_ids.indexOf(id);
if (idIndex == -1) {
newcourse_ids.push(id);
} else {
newcourse_ids.splice(idIndex, 1);
}
this.setState({
course_ids: newcourse_ids,
});
}
render() {
const {
form: { getFieldDecorator, getFieldValue },
visible,
loading,
courseList,
courseListTotal,
} = this.props;
const {
isActive, okText, cancelText, closable, course_ids,
} = this.state;
const formItemModalLineLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 7 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 17 },
},
};
return (
<Modal
visible={visible}
maskClosable={false}
closable={closable}
footer={<div>{isActive == 2 && <Button onClick={this.goBack}>{cancelText}</Button>}<Button type="primary" loading={loading} onClick={this.submit}>{loading ? '保存中...' : okText}</Button></div>}
zIndex={110}
width={600}
onCancel={this.close}
bodyStyle={{
padding: '40px 20px',
}}
>
<div className={pageStyle.wrap}>
<div className={pageStyle.tabList}>
<div className={pageStyle.tabItem}>
<div className={isActive === 1 ? pageStyle.tabNum : pageStyle.tabNormal}>1</div>
<span>填写专栏信息</span>
</div>
<div className={pageStyle.tabLine}></div>
<div className={pageStyle.tabItem}>
<div className={isActive === 2 ? pageStyle.tabNum : pageStyle.tabNormal}>2</div>
<span>创建专栏</span>
</div>
</div>
<Form
className={pageStyle.modalform}
labelAlign="left"
hideRequiredMark
>
<div className={pageStyle.modalbody} hidden={isActive !== 1}>
<div className={pageStyle.formWrap}>
<div className={pageStyle.formLeft}>
<FormItem {...formItemModalLineLayout} label="标题">
{getFieldDecorator('title', {
initialValue: '',
rules: [
{
required: true,
message: '请输入标题',
},
],
})(<Input placeholder="请输入标题" />)}
</FormItem>
<FormItem>
{getFieldDecorator('is_encrypt', {
// initialValue: 2,
valuePropName: 'checked',
})(<Checkbox><span className={pageStyle.tip}>设置密码</span></Checkbox>)}
</FormItem>
{
Number(getFieldValue('is_encrypt')) === 1 ?
<FormItem {...formItemModalLineLayout} label=" " colon={false}>
{getFieldDecorator('password', {
initialValue: '',
rules: [
{
required: true,
message: '请输入正整数',
pattern: new RegExp(/^[1-9]\d*$/, 'g'),
},
],
})(
<Input placeholder="请输入4-8位密码" min={0} />,
)}
</FormItem> : ''
}
{/* <FormItem className={pageStyle.firstItem} {...formItemModalLineLayout}> //免费课先传1
{getFieldDecorator('charge_type', {
initialValue: 1,
rules: [
{
required: true,
message: '请输入正整数',
},
],
})(
<Radio.Group>
<Radio value={1}>免费</Radio>
<Radio value={2}>付费</Radio>
</Radio.Group>,
)}
</FormItem>
{
Number(getFieldValue('charge_type')) === 2 &&
<FormItem {...formItemModalLineLayout} label=" " colon={false}>
{getFieldDecorator('dd', {
initialValue: '1',
rules: [
{
required: true,
message: '请输入正整数',
},
],
})(
<InputNumber min={0} />,
)}
<span className="ant-form-text">元</span>
</FormItem>
} */}
</div>
</div>
{/* <Button onClick={() => this.handleClick(2)}>下一步</Button> */}
</div>
<div className={pageStyle.modalbody} hidden={isActive !== 2}>
<div className={pageStyle.active2title}>选择单课</div>
{courseListTotal == 0 && <Empty description={<span className={pageStyle.emptytext}>您还没有创建单课<br />请直接点击“创建专栏”完成创建</span>} />}
{courseListTotal > 0 &&
<Row className={pageStyle.courseListBox}>
{courseList.map(ele => (
<Col span={6} style={{ marginBottom: '10px' }} key={ele.id}>
<Checkbox style={{ display: 'flex', alignItems: 'flex-start' }} onChange={() => this.checkedChange(ele.id)} checked={course_ids.indexOf(ele.id) != -1}>
<img className={pageStyle.courseCover} src={imagify(ele.cover)} alt="" />
</Checkbox>
</Col>
))}
</Row>
}
</div>
</Form>
</div>
</Modal>
);
}
}
AddCourseModalForm.propTypes = {
};
const AddCourseModal = Form.create()(AddCourseModalForm);
export default AddCourseModal;
src/pages/coursegather/index/AddCourseModal.less 0 → 100644
View file @ 5ec6da9f
.tabList {
display: flex;
align-items: center;
.tabLine {
width: 140px;
height: 1px;
background:rgba(0,0,0,0.1);
margin: 0 20px;
}
.tabItem {
display: flex;
align-items: center;
.tabNum {
width: 32px;
height: 32px;
background-color: #1890FF;
border: 1px solid #1890FF;
border-radius: 50% ;
font-size: 16px;
color: #fff;
line-height: 32px;
text-align: center;
margin-right: 14px;
}
.tabNormal {
width: 32px;
height: 32px;
background-color: #fff;
border: 1px solid #1890FF;
border-radius: 50% ;
font-size: 16px;
color: #1890FF;
line-height: 32px;
text-align: center;
margin-right: 14px;
}
&>span {
font-size:16px;
font-family:PingFang SC;
font-weight:400;
color:rgba(0,0,0,1);
}
}
}
.modalform {
margin-top: 30px;
:global {
.ant-form-item {
margin-bottom: 5px;
}
}
}
.formWrap {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.modalFooter {
text-align: right;
}
.courseCover {
width: 90px;
height: 90px;
border-radius: 6px;
}
.active2title {
font-size: 14px;
color: #131313;
margin-bottom: 20px;
}
.emptytext {
text-align: center;
}
.courseListBox {
max-height: 300px;
overflow-y: auto;
padding: 10px 0;
}
\ No newline at end of file
src/pages/coursegather/index/Card.js
View file @ 5ec6da9f
......@@ -3,20 +3,20 @@ import { Icon } from 'antd';
import pageStyle from './Card.less';
const MediaCard = (props) => {
const {
type,
style,
info,
method,
} = props;
return (
<div className={pageStyle.box} {...props}>
<div className={pageStyle.box} {...props} onClick={() => method.gogatherdetail(info.id)}>
<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="" />
<div className={pageStyle.infobox}>
<div className={pageStyle.topbox}>
<div className={pageStyle.title}>超值体验课，</div>
<div className={pageStyle.time}>2019-11-12 18:21</div>
<div className={pageStyle.title}>{info.title}</div>
<div className={pageStyle.time}>{info.created_at}</div>
</div>
<div className={pageStyle.bottombox}>
<div className={pageStyle.bluedot} />
<div className={pageStyle.coursecount}>5个课程</div>
<div className={pageStyle.coursecount}><span style={{ color: 'red', paddingRight: '2px' }}>{info.sub_courses_count}</span>个课程</div>
</div>
</div>
</div>
......
src/pages/coursegather/index/Card.less
View file @ 5ec6da9f
......@@ -8,6 +8,7 @@
background:rgba(255,255,255,1);
padding: 10px;
display: flex;
cursor: pointer;
.image {
width: 90px;
height: 90px;
......
src/pages/coursegather/index/index.js
View file @ 5ec6da9f
......@@ -8,9 +8,10 @@ import {
} from 'dva/router';
import $ from 'jquery';
import { connect } from 'dva';
import { Button, Row, Col, Modal, Icon, DatePicker, Spin } from 'antd';
import { Button, Row, Col, Modal, Icon, DatePicker, Spin, Pagination } from 'antd';
import Card from './Card';
import pageStyle from './index.less';
import AddCourseModal from './AddCourseModal';
import { pageIn } from '../../../utils/index';
class StaticCenter extends React.Component {
componentDidMount() { // 挂载
......@@ -20,55 +21,133 @@ class StaticCenter extends React.Component {
}
componentWillUnmount() { // 卸载
}
toAddGather = () => {
const { dispatch } = this.props;
dispatch({
type: 'coursegatherindex/selectCourseList',
payload: {
type: 1,
},
});
dispatch({
type: 'coursegatherindex/updateState',
payload: {
courseVisible: true,
},
});
}
saveCourseGather = (values, callback) => {
const { dispatch } = this.props;
dispatch({
type: 'coursegatherindex/addCourseGather',
payload: {
values,
successCallback() {
if (callback && (typeof callback == 'function')) {
callback();
}
},
},
});
}
closeCourseGather = () => {
const { dispatch } = this.props;
dispatch({
type: 'coursegatherindex/updateState',
payload: {
courseVisible: false,
},
});
}
sizeChange = (page, perPage) => {
const { dispatch } = this.props;
dispatch({
type: 'coursegatherindex/getGatherList',
payload: {
params: {
page: 1,
perPage,
},
},
});
}
changePagination = (page, perPage) => {
const { dispatch } = this.props;
dispatch({
type: 'coursegatherindex/getGatherList',
payload: {
params: {
page,
perPage,
},
},
});
}
gogatherdetail = (id) => {
const { dispatch } = this.props;
dispatch({
type: 'coursegatherindex/gogatherdetail',
payload: {
id,
},
});
}
render() {
const that = this;
const {
courseVisible,
saveCourseGatherSubmitting,
courseList,
courseListTotal,
gatherList,
gatherListTotal,
gatherQueryParams,
} = this.props;
return (
<div className={pageStyle.container}>
<div className={pageStyle.tabbox}>
<Button type="primary" className={pageStyle.uploadbtn}>创 建 专 栏</Button>
</div>
<div className={pageStyle.mediaCardBox}>
<Card
type={1}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
<Card
type={2}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
<Card
type={3}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
<Card
type={4}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
<Card
type={4}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
<Card
type={4}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
<Card
type={4}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
<Card
type={4}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
<Card
type={4}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
<Card
type={4}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
<Button type="primary" className={pageStyle.uploadbtn} onClick={this.toAddGather}>创 建 专 栏</Button>
</div>
{gatherListTotal == 0 && <div>空白页</div>}
{gatherListTotal > 0 &&
<div>
<div className={pageStyle.mediaCardBox}>
{gatherList.map(ele => (
<Card
method={{
gogatherdetail: (id) => {
this.gogatherdetail(id);
},
}}
type={1}
key={ele.id}
info={ele}
style={{ marginRight: '20px', marginBottom: '20px' }}
/>
))}
</div>
<div className={pageStyle.tablefooterbox}>
<span className="tablefooterstatic">共{gatherListTotal}条数据</span>
<Pagination
showSizeChanger
showQuickJumper
onShowSizeChange={this.sizeChange}
total={Number(gatherListTotal)}
onChange={this.changePagination}
current={Number(gatherQueryParams.page) || 1}
pageSize={gatherQueryParams.perPage}
pageSizeOptions={['12', '24', '36', '48', '60']}
/>
</div>
</div>
}
<AddCourseModal
visible={courseVisible}
save={this.saveCourseGather}
loading={saveCourseGatherSubmitting}
close={this.closeCourseGather}
courseList={courseList}
courseListTotal={courseListTotal}
/>
</div>
);
}
......@@ -78,9 +157,23 @@ StaticCenter.propTypes = {
};
function mapStateToProps(state) {
// const {
// } = state.coursemateria;
const {
courseVisible,
saveCourseGatherSubmitting,
courseList,
courseListTotal,
gatherList,
gatherListTotal,
gatherQueryParams,
} = state.coursegatherindex;
return {
courseVisible,
saveCourseGatherSubmitting,
courseList,
courseListTotal,
gatherList,
gatherListTotal,
gatherQueryParams,
};
}
export default connect(mapStateToProps)(StaticCenter);
......
src/pages/coursegather/index/index.less
View file @ 5ec6da9f
......@@ -14,4 +14,10 @@
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/router.js
View file @ 5ec6da9f
......@@ -252,7 +252,7 @@ function RouterConfig({ history }) {
<Route path="/sjd/singleclass" exact component={SingleClass} />
<Route path="/sjd/coursemateria" exact component={CourseMateria} />
<Route path="/sjd/coursegather" exact component={CourseGather} />
<Route path="/sjd/gatherdetail" exact component={CourseGatherDetail} />
<Route path="/sjd/gatherdetail/:id" exact component={CourseGatherDetail} />
<Route path="/sjd/singleclass/detail/:id" exact component={SingleDetail} />
</SjdIndex>
)}
......
src/services/onlineclasses.js
View file @ 5ec6da9f
......@@ -49,3 +49,11 @@ export function changeCourseStatus(params) {
data,
});
}
export function importCourse(params) {
const data = qs.stringify(params);
return request({
url: `${api.onlineclasses.importCourse}`,
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