111222dd

9172a53e · baixian · 4f481ca9 · 9172a53e · 9172a53e · 9172a53e
Commit 9172a53e authored Nov 21, 2019 by baixian
23 changed files
--- a/image/course/audio_default.png
+++ b/image/course/audio_default.png
--- a/image/course/ppt_default.png
+++ b/image/course/ppt_default.png
--- a/image/course/video_default.png
+++ b/image/course/video_default.png
--- a/src/common/api.js
+++ b/src/common/api.js
@@ -187,8 +187,11 @@ export default {
    staticTotal: `${dakaapi}member/online_courses_total`,
    staticChart: `${dakaapi}member/online_courses_chart`,
    comments: `${dakaapi}common/website/comments`,
+    strickcomments: `${dakaapi}member/website/comments`,
  },
  courseMateria: {
    index: `${dakaapi}member/materials`,
+    uploadcourseware: `${dakaapi}member/online_courses/upload_content`,
+
  },
 };
--- a/src/components/MaterialModal.js
+++ b/src/components/MaterialModal.js
@@ -91,7 +91,10 @@ 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 === 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="" />}
                      </Radio>
                    </div>
                  </List.Item>

--- a/src/components/MaterialModal.less
+++ b/src/components/MaterialModal.less
@@ -7,6 +7,9 @@
  .list {
    text-align: center;
  }
+  .tablefooterbox {
+    text-align: right;
+  }
  .item {
    width: 150px;
    height: 150px;

--- a/src/components/UploadCourseware.js
+++ b/src/components/UploadCourseware.js
@@ -27,14 +27,21 @@ class UploadCourseware extends React.Component {
  }
  save = () => {
    const { info, dispatch, callback } = this.props;
-    callback(JSON.parse(JSON.stringify(info)));
+    console.log(info, 'info');
    dispatch({
-      type: 'uploadcourseware/updateState',
+      type: 'uploadcourseware/uploadCourseware',
      payload: {
-        visible: false,
-        info: {},
+        info,
      },
    });
+    callback(JSON.parse(JSON.stringify(info)));
+    // dispatch({
+    //   type: 'uploadcourseware/updateState',
+    //   payload: {
+    //     visible: false,
+    //     info: {},
+    //   },
+    // });
  }
  hide = () => {
    const { dispatch } = this.props;

--- a/src/models/onlineclasses.js
+++ b/src/models/onlineclasses.js
@@ -206,6 +206,94 @@ export default {
      });
      if (data.code == 200) {
        message.success('修改成功', 0.5);
+        yield put({
+          type: 'selectComment',
+          payload: {
+            params: {
+              source_id: data.data.source_id,
+            },
+          },
+        });
+      } else {
+        yield put({
+          type: 'webapp/errorrequestresolve',
+          payload: {
+            data,
+          },
+        });
+      }
+    },
+    * commentDelete({ payload }, { call, put, select }) {
+      const { id } = payload;
+      const data = yield call(onlineAjax.commentDelete, {
+        id,
+      });
+      if (data.code == 200) {
+        message.success('删除成功', 0.5);
+        yield put({
+          type: 'selectComment',
+          payload: {
+            params: {
+              source_id: data.data.source_id,
+            },
+          },
+        });
+      } else {
+        yield put({
+          type: 'webapp/errorrequestresolve',
+          payload: {
+            data,
+          },
+        });
+      }
+    },
+    * saveComment({ payload }, { call, put, select }) {
+      const {
+        id,
+        content,
+        callBack,
+      } = payload;
+      const { replyLoading } = yield select(state => state.onlineclasses);
+      if (replyLoading) {
+        return;
+      }
+      yield put({
+        type: 'updateState',
+        payload: {
+          replyLoading: true,
+        },
+      });
+      const loadmessage = message.loading('保存中...', 0);
+      const data = yield call(onlineAjax.commentSave, {
+        id,
+        content,
+      });
+      yield put({
+        type: 'updateState',
+        payload: {
+          replyLoading: false,
+        },
+      });
+      setTimeout(loadmessage);
+      if (data.code == 200) {
+        message.success('保存成功', 0.5);
+        if (callBack && (typeof callBack == 'function')) {
+          callBack();
+        }
+        yield put({
+          type: 'updateState',
+          payload: {
+            replyVisible: false,
+          },
+        });
+        yield put({
+          type: 'selectComment',
+          payload: {
+            params: {
+              source_id: data.data.source_id,
+            },
+          },
+        });
      } else {
        yield put({
          type: 'webapp/errorrequestresolve',
@@ -361,7 +449,6 @@ export default {
        start_time,
        study_count,
        school_id: sid,
-        content: JSON.stringify(coursewareInfo),
      });
      const data = yield call(onlineAjax.editCourse, newParams);
      yield put({

--- a/src/models/uploadcourseware.js
+++ b/src/models/uploadcourseware.js
@@ -144,6 +144,32 @@ export default {
        });
      }
    },
+    * uploadCourseware({ payload }, { call, put, select }) {
+      const { info } = payload;
+      const { addCourseObj } = yield select(state => state.onlineclasses);
+      const loadmessage = message.loading('保存中...', 0);
+      const data = yield call(courseMateriaAjax.uploadCourseware, {
+        content: JSON.stringify(info),
+        id: addCourseObj.id,
+      });
+      setTimeout(loadmessage);
+      if (data.code == 200) {
+        yield put({
+          type: 'updateState',
+          payload: {
+            visible: false,
+            info: {},
+          },
+        });
+      } else {
+        yield put({
+          type: 'webapp/errorrequestresolve',
+          payload: {
+            data,
+          },
+        });
+      }
+    },
    * createCourseMateria({ payload }, { call, put, select }) {
      const { sid } = yield select(state => state.webapp);
      const {

--- a/src/pages/coursegather/detail/CommentList.js
+++ b/src/pages/coursegather/detail/CommentList.js
@@ -42,7 +42,11 @@ class CommentListForm extends React.Component {
  render() {
    const {
      form: { getFieldDecorator, getFieldValue },
+      allRelativeCourseList,
+      gatherDetail,
+      staticChartId,
    } = this.props;
+    console.log(allRelativeCourseList, 'allRelativeCourseList');
    const dataSource = [
      {
        key: '1',
@@ -98,8 +102,12 @@ class CommentListForm extends React.Component {
            className={pageStyle.searchBox}
          >
            <span className={pageStyle.searchname}>课程名称</span>
-            <Select style={{ width: '162px', marginRight: '21px' }}>
-              <Option value="">课程</Option>
+            <Select style={{ width: '162px', marginRight: '21px' }} value={Number(staticChartId)} onChange={this.change}>
+              <Option key={gatherDetail.id} value={Number(gatherDetail.id)}>全部</Option>
+              {allRelativeCourseList.map(ele => (
+                <Option key={ele.id} value={Number(ele.id)}>{ele.title}</Option>
+              ))
+              }
            </Select>
            <Button type="primary" style={{ marginRight: '19px' }}>搜索</Button>
            <Button type="primary" ghost>重置</Button>
@@ -117,10 +125,14 @@ CommentListForm.propTypes = {
 const CommentList = Form.create()(CommentListForm);
 function mapStateToProps(state) {
  const {
-    addCourseObj,
-  } = state.onlineclasses;
+    allRelativeCourseList,
+    gatherDetail,
+    staticChartId,
+  } = state.coursegatherdetail;
  return {
-    addCourseObj,
+    allRelativeCourseList,
+    gatherDetail,
+    staticChartId,
  };
 }
 export default connect(mapStateToProps)(CommentList);

--- a/src/pages/coursegather/detail/StaticBox.js
+++ b/src/pages/coursegather/detail/StaticBox.js
@@ -4,8 +4,23 @@ import {
  Col,
  Select,
  Button,
-  DatePicker,
+  DatePicker, Empty,
 } from 'antd';
+import {
+  G2,
+  Chart,
+  Geom,
+  Axis,
+  Tooltip,
+  Coord,
+  Label,
+  Legend,
+  View,
+  Guide,
+  Shape,
+  Facet,
+  Util,
+} from 'bizcharts';
 import moment from 'moment';
 import pageStyle from './StaticBox.less';
 const { RangePicker } = DatePicker;
@@ -17,6 +32,9 @@ class StaticBox extends React.Component {
  }
  componentWillUnmount() { // 卸载
  }
+  disabledDate=(current) => {
+    return current > moment();
+  }
  render() {
    const {
      staticTotalInfo,
@@ -32,6 +50,20 @@ class StaticBox extends React.Component {
      queryChartParams,
      dateChange,
    } = this.props;
+    const dataCols = {
+      month: {
+        type: 'time',
+        tickCount: 10,
+      },
+    };
+    const courseChart = staticChartInfo;
+    const dataChart = [];
+    const month = courseChart.dates;
+    const visitorCount = courseChart.visitor_count;
+    for (let i = 0; i < month.length && i < visitorCount.length; i++) {
+      dataChart.push({ month: month[i], count: visitorCount[i], name: '访问人数' });
+    }
+    console.log(this.props, ' this.props');
    return (
      <div>
        <div className={pageStyle.StaticBox}>
@@ -68,19 +100,68 @@ class StaticBox extends React.Component {
                defaultValue={[moment(queryChartParams.start, 'YYYY-MM-DD'), moment(queryChartParams.end, 'YYYY-MM-DD')]}
                format="YYYY-MM-DD"
                queryChartParams
+                ranges={{
+                  ' 最近7天': [moment().subtract(6, 'days'), moment()],
+                  ' 最近三十天 ': [moment().subtract(29, 'days'), moment()],
+                }}
+                disabledDate={this.disabledDate}
              />
-              <div className={`${pageStyle.chartitem} ${pageStyle.payitem}`}>
-                <div className={pageStyle.dot} />
-                <div className={pageStyle.chartitemname}>付费人数</div>
-              </div>
-              <div className={`${pageStyle.chartitem} ${pageStyle.visititem}`}>
-                <div className={pageStyle.dot} />
-                <div className={pageStyle.chartitemname}>访问人数</div>
-              </div>
+              {/* <div className={`${pageStyle.chartitem} ${pageStyle.payitem}`}> */}
+              {/*  <div className={pageStyle.dot} /> */}
+              {/*  <div className={pageStyle.chartitemname}>付费人数</div> */}
+              {/* </div> */}
+              {/* <div className={`${pageStyle.chartitem} ${pageStyle.visititem}`}> */}
+              {/*  <div className={pageStyle.dot} /> */}
+              {/*  <div className={pageStyle.chartitemname}>访问人数</div> */}
+              {/* </div> */}
            </Col>
          </Row>
          <Row style={{ marginBottom: '20px' }}>
-            图表页面
+            <div className={pageStyle.chartBox}>
+              {dataChart.length > 0 ?
+                <Chart height={350} data={dataChart} padding="auto" scale={dataCols} forceFit>
+                  <Legend
+                    textStyle={{ fontSize: '15', fill: '#5c5c5c', textBaseline: 'middle' }}
+                    marker="circle"
+                    offsetY={-45}
+                    position="top-right"
+                    items={[
+                      {
+                        value: 'visitor_count',
+                        marker: {
+                          fill: '#FFB879',
+                          radius: 2,
+                        },
+                      },
+                    ]}
+                  />
+                  <Axis name="month" />
+                  <Tooltip
+                    g2-tooltip={{
+                      backgroundColor: '#000',
+                      opacity: '0.75',
+                      color: '#FFFFFF',
+                    }}
+                    crosshairs={{
+                      type: 'y',
+                      fill: '#000',
+                      stroke: '#000',
+                    }}
+                  />
+                  <Geom
+                    type="line"
+                    position="month*count"
+                    color={['name', ['#FFB879']]}
+                    size={3}
+                    shape="smooth"
+                  />
+                </Chart>
+                :
+                <div className={pageStyle.chartEmpty}>
+                  <Empty />
+                </div>
+              }
+            </div>
          </Row>
        </div>
        <div className={pageStyle.divideLine} />

--- a/src/pages/coursegather/detail/index.js
+++ b/src/pages/coursegather/detail/index.js
@@ -39,6 +39,13 @@ class StaticCenter extends React.Component {
          tabIndex: tab,
        },
      });
+    } else if (tab == 4) {
+      dispatch({
+        type: 'coursegatherdetail/getAllRelativeCourseList',
+        payload: {
+          tabIndex: tab,
+        },
+      });
    }
  }
  toAddCourse = () => {

--- a/src/pages/onlineclasses/ReplyModal.js
+++ b/src/pages/onlineclasses/ReplyModal.js
+import { connect } from 'dva';
+import React from 'react';
+import {
+  Icon,
+  Divider,
+  Tabs,
+  Select,
+  Form,
+  Upload,
+  Row,
+  Col,
+  Input,
+  Radio,
+  Modal,
+  message,
+  DatePicker,
+  Button,
+} from 'antd';
+import pageStyle from './ThemeEditor.less';
+import { pageIn, hasBtnPower, imagify, ossVideofy } from '../../utils/index';
+const FormItem = Form.Item;
+const { TextArea } = Input;
+class ReplyModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+  }
+  componentDidMount() { // 挂载
+    pageIn('轻校-线上课堂');
+  }
+  componentDidUpdate() {
+  }
+  componentWillUnmount() { // 卸载
+  }
+  close = () => {
+    const { close } = this.props;
+    close();
+  }
+  save = (e) => {
+    const { save, form } = this.props;
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        const {
+          id,
+          content,
+        } = values;
+        save({
+          id,
+          content,
+          callBack: () => {
+            form.resetFields();
+          },
+        });
+      }
+    });
+  }
+  render() {
+    const {
+      visible,
+      form: { getFieldDecorator, getFieldValue },
+      record,
+      replyLoading,
+    } = this.props;
+    const formItemModalLineLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 3 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 20 },
+      },
+    };
+    console.log(record, 'record');
+    return (
+      <Modal
+        visible={visible}
+        maskClosable={false}
+        zIndex={110}
+        width={600}
+        bodyStyle={{
+          padding: '40px 20px',
+        }}
+        title="回复"
+        closable={false}
+        onCancel={this.close}
+        okText="保存"
+        cancelText="取消"
+        confirmLoading={replyLoading}
+        onOk={this.save}
+      >
+        <Form className={pageStyle.modalform} labelAlign="left" onSubmit={this.save}>
+          {getFieldDecorator('id', { initialValue: record && record.id })(<Input type="hidden" />)}
+          <FormItem {...formItemModalLineLayout} label="内容">
+            {getFieldDecorator('content', {
+              initialValue: '',
+              rules: [
+                {
+                  required: true,
+                  message: '请输入回复内容',
+                },
+              ],
+            })(<TextArea rows={2} />)}
+          </FormItem>
+        </Form>
+      </Modal>
+    );
+  }
+}
+ReplyModal.propTypes = {
+
+
+};
+const ReplyModalForm = Form.create()(ReplyModal);
+
+export default connect()(ReplyModalForm);
+
--- a/src/pages/onlineclasses/singleclass/AddCourseModal.js
+++ b/src/pages/onlineclasses/singleclass/AddCourseModal.js
@@ -65,6 +65,10 @@ class AddCourseModalForm extends React.Component {
          time,
          password,
        } = values;
+        if (password.length < 4) {
+          message.error('密码至少4位', 0.5);
+          return;
+        }
        dispatch({
          type: 'onlineclasses/addCourse',
          payload: {
@@ -179,11 +183,13 @@ class AddCourseModalForm extends React.Component {
                        rules: [
                          {
                            required: true,
-                            message: '请输入4-8位密码',
+                            message: '请输入正整数',
+                            pattern: new RegExp(/^[1-9]\d*$/, 'g'),
                          },
                        ],
                      })(
                        <Input style={{ width: 200 }} maxLength={8} placeholder="请输入4-8位密码" />,
+                        <span className="ant-form-text">请输入4-8位数字密码</span>,
                      )}
                    </FormItem> : ''
                }

--- a/src/pages/onlineclasses/singleclass/CommentList.js
+++ b/src/pages/onlineclasses/singleclass/CommentList.js
@@ -14,12 +14,13 @@ import {
  Divider,
  DatePicker,
  Table,
-  InputNumber, Checkbox, Radio,
+  Pagination, Checkbox, Radio, Modal,
+  Tooltip,
 } from 'antd';
-import moment from 'moment';
 import ThemeEditor from '../../newtheme/ThemeEditor';
 import pageStyle from './CommentList.less';
 import { pageIn, hasBtnPower, imagify } from '../../../utils';
+import ReplyModal from '../ReplyModal';
 const { TabPane } = Tabs;
 const FormItem = Form.Item;
 const { Option } = Select;
@@ -42,19 +43,97 @@ class CommentListForm extends React.Component {
  handleClickStick =(record) => {
    const { dispatch } = this.props;
    dispatch({
-      type: 'onlineclasses/changeCourseStatus',
+      type: 'onlineclasses/commentStick',
      payload: {
        place_top: 1,
        id: record.id,
      },
    });
  }
+  changePage = (page, perPage) => {
+    const { dispatch, addCourseObj } = this.props;
+    dispatch({
+      type: 'onlineclasses/selectComment',
+      payload: {
+        params: {
+          page,
+          perPage,
+          source_id: addCourseObj.id,
+        },
+      },
+    });
+  }
+  handleClickDelete = (record) => {
+    const { dispatch } = this.props;
+    Modal.confirm({
+      title: '确定删除这条评论吗?',
+      content: '删除后不可恢复，请谨慎操作！',
+      okText: '确定',
+      cancelText: '取消',
+      icon: <Icon type="close-circle" style={{ color: 'red' }} />,
+      onOk() {
+        dispatch({
+          type: 'onlineclasses/commentDelete',
+          payload: {
+            id: record.id,
+          },
+        });
+      },
+      okButtonProps: {
+        type: 'danger',
+        style: {
+          color: '#fff',
+          backgroundColor: '#ff4d4f',
+          borderColor: '#ff4d4f',
+        },
+      },
+    });
+  }
+  handleClickReview = (record) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'onlineclasses/updateState',
+      payload: {
+        replyVisible: true,
+      },
+    });
+    this.setState({
+      record,
+    });
+  }
+  closeReply = () => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'onlineclasses/updateState',
+      payload: {
+        replyVisible: false,
+      },
+    });
+    this.setState({
+      record: '',
+    });
+  }
+  saveReply = (values) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'onlineclasses/saveComment',
+      payload: {
+        id: values.id,
+        content: values.content,
+        callBack: values.callBack,
+      },
+    });
+  }
  render() {
    const {
      form: { getFieldDecorator, getFieldValue },
      commentList,
      commentListTotal,
+      commentParams,
+      replyVisible,
+      replyLoading,
    } = this.props;
+    const { record } = this.state;
    const columns = [
      {
        title: '序号',
@@ -74,6 +153,15 @@ class CommentListForm extends React.Component {
      {
        title: '内容',
        dataIndex: 'content',
+        render: (text, record) => {
+          return (
+            <div>
+              <Tooltip title={text}>
+                <span className={pageStyle.hreflink}>{text.substring(0, 20)}</span>
+              </Tooltip>
+            </div>
+          );
+        },
      },
      {
        title: '操作',
@@ -81,11 +169,17 @@ class CommentListForm extends React.Component {
        render: (text, record) => {
          return (
            <div>
-              <span className={pageStyle.hreflink}>回复</span>
+              { record.website_comment_reply === null ?
+                <span className={pageStyle.hreflink} onClick={() => this.handleClickReview(record)}>回复</span>
+                :
+                <Tooltip title={record.website_comment_reply.content}>
+                  <span className={pageStyle.hreflink}>已回复</span>
+                </Tooltip>
+              }
              <Divider type="vertical" />
              <span className={pageStyle.hreflink} onClick={() => this.handleClickStick(record)}>置顶</span>
              <Divider type="vertical" />
-              <span className={pageStyle.hreflink}>删除</span>
+              <span className={pageStyle.hreflink} onClick={() => this.handleClickDelete(record)}>删除</span>
            </div>
          );
        },
@@ -93,7 +187,29 @@ class CommentListForm extends React.Component {
    ];
    return (
      <div className={pageStyle.container}>
-        <Table rowKey="id" dataSource={commentList} columns={columns} />
+        <Table
+          rowKey="id"
+          dataSource={commentList}
+          columns={columns}
+          pagination={false}
+          footer={() => (
+            <div className="tablefooterbox">
+              <span className="tablefooterstatic">共{commentListTotal}条数据</span>
+              <Pagination
+                pageSize={commentParams.perPage}
+                total={Number(commentListTotal)}
+                onChange={this.changePage}
+              />
+            </div>
+          )}
+        />
+        <ReplyModal
+          visible={replyVisible}
+          record={record}
+          close={this.closeReply}
+          replyLoading={replyLoading}
+          save={this.saveReply}
+        />
      </div>
    );
  }
@@ -107,10 +223,18 @@ function mapStateToProps(state) {
  const {
    commentList,
    commentListTotal,
+    commentParams,
+    addCourseObj,
+    replyVisible,
+    replyLoading,
  } = state.onlineclasses;
  return {
    commentList,
    commentListTotal,
+    commentParams,
+    addCourseObj,
+    replyVisible,
+    replyLoading,
  };
 }
 export default connect(mapStateToProps)(CommentList);

--- a/src/pages/onlineclasses/singleclass/CommentList.less
+++ b/src/pages/onlineclasses/singleclass/CommentList.less
@@ -3,4 +3,5 @@
  font-family:PingFang SC;
  font-weight:400;
  color:rgba(24,144,255,1);
+  cursor: pointer;
 }
--- a/src/pages/onlineclasses/singleclass/CourseDetail.js
+++ b/src/pages/onlineclasses/singleclass/CourseDetail.js
@@ -260,6 +260,7 @@ class CourseDetailForm extends React.Component {
  }
  toUploadCourseware = () => {
    const { dispatch, coursewareInfo } = this.props;
+    console.log(coursewareInfo, 'coursewareInfo1111111');
    dispatch({
      type: 'uploadcourseware/updateState',
      payload: {
@@ -278,7 +279,10 @@ class CourseDetailForm extends React.Component {
      queryParams,
      materiaListTotal,
      coursewareInfo,
+      info,
    } = this.props;
+    console.log(info, 'coursewareInfo');
+    console.log(coursewareInfo, 'coursewareInfo');
    const formItemModalLineLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -376,10 +380,10 @@ class CourseDetailForm extends React.Component {
              placeholder="选择时间"
            />)}
          </FormItem>
-          <div>
-            <span>课件:</span>
-            <span>{(coursewareInfo.properties && coursewareInfo.properties.name) || '无'}</span>
-          </div>
+          {/* <div> */}
+          {/*  <span>课件:</span> */}
+          {/*  <span>{(coursewareInfo.properties && coursewareInfo.properties.name) || '无'}</span> */}
+          {/* </div> */}
          <FormItem {...formItemModalLineLayout} label="语音介绍">
            {
              addCourseObj.audio ?
@@ -449,6 +453,9 @@ function mapStateToProps(state) {
  //   queryParams,
  //   materiaListTotal,
  // } = state.coursemateria;
+  const {
+    info,
+  } = state.uploadcourseware;
  return {
    addCourseObj,
    editLoading,
@@ -457,6 +464,7 @@ function mapStateToProps(state) {
    queryParams,
    materiaListTotal,
    coursewareInfo,
+    info,
  };
 }
 export default connect(mapStateToProps)(CourseDetail);

--- a/src/pages/onlineclasses/singleclass/StaticBox.js
+++ b/src/pages/onlineclasses/singleclass/StaticBox.js
@@ -22,16 +22,31 @@ import {
  Facet,
  Util,
 } from 'bizcharts';
+import moment from 'moment';
 import pageStyle from './StaticBox.less';
 const { RangePicker } = DatePicker;
 const { Option } = Select;
 class StaticBox extends React.Component {
-  componentDidMount() { // 挂载
+  componentDidMount() {
  }
  componentDidUpdate() {
  }
  componentWillUnmount() { // 卸载
  }
+  disabledDate=(current) => {
+    return current > moment();
+  }
+  onChange = (dates, dateStrings) => {
+    const { dispatch, addCourseObj } = this.props;
+    dispatch({
+      type: 'onlineclasses/selectChart',
+      payload: {
+        start: dateStrings[0],
+        end: dateStrings[1],
+        id: addCourseObj.id,
+      },
+    });
+  }
  render() {
    const { courseChartData, dataAllTotal } = this.props;
    const dataCols = {
@@ -47,8 +62,10 @@ class StaticBox extends React.Component {
    for (let i = 0; i < month.length && i < visitorCount.length; i++) {
      dataChart.push({ month: month[i], count: visitorCount[i], name: '访问人数' });
    }
+    const yesterday = moment(moment().subtract(6, 'days').unix() * 1000);
+    const today = moment(moment().unix() * 1000);
    return (
-      <div>
+      <div className={pageStyle.container}>
        <div className={pageStyle.StaticBox}>
          <Row>
            <Col
@@ -59,64 +76,72 @@ class StaticBox extends React.Component {
              className={pageStyle.searchBox}
            >
              <span className={pageStyle.searchname}>日期</span>
-              <RangePicker onChange={this.onChange} style={{ marginRight: '42px' }} />
-              <div className={`${pageStyle.chartitem} ${pageStyle.payitem}`}>
-                <div className={pageStyle.dot} />
-                <div className={pageStyle.chartitemname}>付费人数</div>
-              </div>
-              <div className={`${pageStyle.chartitem} ${pageStyle.visititem}`}>
-                <div className={pageStyle.dot} />
-                <div className={pageStyle.chartitemname}>访问人数</div>
-              </div>
+              <RangePicker
+                onChange={this.onChange}
+                ranges={{
+                  ' 最近7天': [moment().subtract(6, 'days'), moment()],
+                  ' 最近三十天 ': [moment().subtract(29, 'days'), moment()],
+                }}
+                disabledDate={this.disabledDate}
+                allowClear={false}
+                style={{ marginRight: '42px' }}
+                defaultValue={[yesterday, today]}
+              />
+              {/* <div className={`${pageStyle.chartitem} ${pageStyle.payitem}`}> */}
+              {/*  <div className={pageStyle.dot} /> */}
+              {/*  <div className={pageStyle.chartitemname}>付费人数</div> */}
+              {/* </div> */}
+              {/* <div className={`${pageStyle.chartitem} ${pageStyle.visititem}`}> */}
+              {/*  <div className={pageStyle.dot} /> */}
+              {/*  <div className={pageStyle.chartitemname}>访问人数</div> */}
+              {/* </div> */}
            </Col>
          </Row>
-          <Row style={{ marginBottom: '20px', width: 800 }}>
-            <div>
-              {dataChart.length > 0 ?
-                <Chart height={350} data={dataChart} padding="auto" scale={dataCols} forceFit>
-                  <Legend
-                    textStyle={{ fontSize: '15', fill: '#5c5c5c', textBaseline: 'middle' }}
-                    marker="circle"
-                    offsetY={-45}
-                    position="top-left"
-                    items={[
-                      {
-                        value: 'visitor_count',
-                        marker: {
-                          fill: '#FFB879',
-                          radius: 2,
-                        },
+          <div className={pageStyle.chartBox}>
+            {dataChart.length > 0 ?
+              <Chart height={350} data={dataChart} padding="auto" scale={dataCols} forceFit>
+                <Legend
+                  textStyle={{ fontSize: '15', fill: '#5c5c5c', textBaseline: 'middle' }}
+                  marker="circle"
+                  offsetY={-45}
+                  position="top-right"
+                  items={[
+                    {
+                      value: 'visitor_count',
+                      marker: {
+                        fill: '#FFB879',
+                        radius: 2,
                      },
-                    ]}
-                  />
-                  <Axis name="month" />
-                  <Tooltip
-                    g2-tooltip={{
-                      backgroundColor: '#000',
-                      opacity: '0.75',
-                      color: '#FFFFFF',
-                    }}
-                    crosshairs={{
-                      type: 'y',
-                      fill: '#000',
-                      stroke: '#000',
-                    }}
-                  />
-                  <Geom
-                    type="line"
-                    position="month*count"
-                    color={['name', ['#FFB879']]}
-                    size={3}
-                    shape="smooth"
-                  />
-                </Chart>
-                :
-                <div className={pageStyle.chartEmpty}>
-                  <Empty />
-                </div>
-              }
-            </div>
-          </Row>
+                    },
+                  ]}
+                />
+                <Axis name="month" />
+                <Tooltip
+                  g2-tooltip={{
+                    backgroundColor: '#000',
+                    opacity: '0.75',
+                    color: '#FFFFFF',
+                  }}
+                  crosshairs={{
+                    type: 'y',
+                    fill: '#000',
+                    stroke: '#000',
+                  }}
+                />
+                <Geom
+                  type="line"
+                  position="month*count"
+                  color={['name', ['#FFB879']]}
+                  size={3}
+                  shape="smooth"
+                />
+              </Chart>
+              :
+              <div className={pageStyle.chartEmpty}>
+                <Empty />
+              </div>
+            }
+          </div>
        </div>
        <div className={pageStyle.divideLine} />
        <div className={pageStyle.staticDetail}>
@@ -239,10 +264,12 @@ function mapStateToProps(state) {
  const {
    courseChartData,
    dataAllTotal,
+    addCourseObj,
  } = state.onlineclasses;
  return {
    courseChartData,
    dataAllTotal,
+    addCourseObj,
  };
 }
 export default connect(mapStateToProps)(StaticBoxForm);

--- a/src/pages/onlineclasses/singleclass/StaticBox.less
+++ b/src/pages/onlineclasses/singleclass/StaticBox.less
+.container {
+    width: 100%;
+}
 .StaticBox {
    padding: 27px 20px;
    margin-bottom: 10px;
@@ -109,4 +112,7 @@
            }
        }
    }
-}
\ No newline at end of file
+}
+.chartBox {
+    width: 1000px;
+}
--- a/src/pages/onlineclasses/singleclass/index.js
+++ b/src/pages/onlineclasses/singleclass/index.js
@@ -81,7 +81,6 @@ class ClassMgtForm extends React.Component {
  }
  deleteCourse = (item) => {
    const { dispatch } = this.props;
-    console.log(item, 'item');
    Modal.confirm({
      title: `确定删除“${item.title}”?`,
      content: '删除后不可恢复，请谨慎操作！',

--- a/src/pages/onlineclasses/singleclass/singleDetail.less
+++ b/src/pages/onlineclasses/singleclass/singleDetail.less
 .container {
  padding-bottom: 20px;
+  width: 100%;
  .head {
-    height: 100px;
-    width: 100%;
+    //height: 100px;
+    //width: 100%;
    padding: 20px;
    background-color: #fff;
    .hedaTitle {

--- a/src/services/courseMateria.js
+++ b/src/services/courseMateria.js
@@ -25,3 +25,12 @@ export function delMateria(params) {
    data,
  });
 }
+export function uploadCourseware(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.courseMateria.uploadcourseware}/${params.id}`,
+    method: 'PUT',
+    data,
+  });
+}
+
--- a/src/services/onlineclasses.js
+++ b/src/services/onlineclasses.js
@@ -84,8 +84,24 @@ export function selectComment(params) {
 export function commentStick(params) {
  const data = qs.stringify(params);
  return request({
-    url: `${api.onlineclasses.comments}/${params.id}`,
+    url: `${api.onlineclasses.strickcomments}/${params.id}`,
    method: 'PUT',
    data,
  });
 }
+export function commentDelete(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.onlineclasses.strickcomments}/${params.id}`,
+    method: 'DELETE',
+    data,
+  });
+}
+export function commentSave(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.onlineclasses.strickcomments}?${data}`,
+    method: 'POST',
+    data,
+  });
+}