ERP新增需求

354b19fb · baixian · 6c0680a9 · 354b19fb · 354b19fb · 354b19fb
Commit 354b19fb authored Feb 20, 2020 by baixian
17 changed files
--- a/src/common/api.js
+++ b/src/common/api.js
@@ -236,4 +236,10 @@ export default {
  holidays: {
    holidaysList: `${dakaapi}member/erp/holidays`,
  },
+  officialtheme: {
+    subject: `${dakaapi}member/website/subject`,
+    subjectDetail: `${dakaapi}member/website/subject/detail`,
+    subjectDelete: `${dakaapi}member/website/subject/destroy`,
+    subjectSort: `${dakaapi}member/website/subject/subject_sort`,
+  },
 };
--- a/src/common/menuconfig.js
+++ b/src/common/menuconfig.js
@@ -110,7 +110,7 @@ export default {
      activeurl: `${__IMGCDN__}menu/webactive.png`,
      notactiveurl: `${__IMGCDN__}menu/web.png`,
      path: '/sjd/officialweb',
-      relativePath: ['/sjd/officialweb', '/sjd/officialwebeditor'],
+      relativePath: ['/sjd/officialweb', '/sjd/officialwebeditor', '/sjd/themeClass'],
    },
    {
      id: '10',

--- a/src/models/createtheme.js
+++ b/src/models/createtheme.js
@@ -158,6 +158,8 @@ export default {
        },
      ],
      sign_up_content: '',
+      ad_banner: '',
+      jump_type: 1,
    },
    radioname: '',
    radioList: [],
@@ -518,6 +520,8 @@ export default {
                  content: emigratedDate.data.introduce && emigratedDate.data.introduce != null && JSON.parse(emigratedDate.data.introduce).content ? JSON.parse(emigratedDate.data.introduce).content : (JSON.parse(emigratedDate.data.introduce) || []),
                },
              ],
+              ad_banner: emigratedDate.data.ad_banner,
+              jump_type: emigratedDate.data.jump_type,
            },
            radioname: emigratedDate.data.sign_up_content ? JSON.parse(emigratedDate.data.sign_up_content).radioname : '',
            radioList: emigratedDate.data.sign_up_content ? JSON.parse(emigratedDate.data.sign_up_content).radioList : [],
@@ -966,6 +970,14 @@ export default {
            customsParams: { ...customsParams },
          },
        });
+      } else if (uploadtype == 'uploadAdBanner') {
+        customsParams.ad_banner = imageUrl;
+        yield put({
+          type: 'updateState',
+          payload: {
+            customsParams: { ...customsParams },
+          },
+        });
      }
      setTimeout(uploaderLoading);
    },
@@ -1423,6 +1435,7 @@ export default {
        unlock_limit,
        callBack,
        sign_up_status,
+        jump_type,
      } = payload;
      if (sign_up_status == 1) {
        if (radioList.length > 0) {
@@ -1482,6 +1495,7 @@ export default {
        sign_up_status,
        introduce: newParams.introduce ? JSON.stringify(newParams.introduce) : '',
        sign_up_content: newParams.sign_up_content ? JSON.stringify(newParams.sign_up_content) : '',
+        jump_type,
      }));
      yield put({
        type: 'updateState',
@@ -1519,6 +1533,8 @@ export default {
                },
              ],
              sign_up_content: '',
+              ad_banner: '',
+              jump_type: 1,
            },
            radioList: [],
            radioname: '',
@@ -2158,6 +2174,35 @@ export default {
        });
      }
    },
+    * deleteUnclock({ payload }, { call, put, select }) {
+      const { id } = payload;
+      const { emigratedObj } = yield select(state => state.createtheme);
+      const data = yield call(themeAjax.unlockDelete, {
+        id,
+      });
+      if (data.code == 200) {
+        message.success('删除成功', 0.5);
+        yield put({
+          type: 'getSubjectList',
+          payload: {
+            id: emigratedObj.id,
+          },
+        });
+        yield put({
+          type: 'querySubjectNumber',
+          payload: {
+            id: emigratedObj.id,
+          },
+        });
+      } else {
+        yield put({
+          type: 'webapp/errorrequestresolve',
+          payload: {
+            data,
+          },
+        });
+      }
+    },
    * pageInit({ payload }, { call, put, select }) {
      yield put({
        type: 'updateState',
@@ -2297,6 +2342,8 @@ export default {
              },
            ],
            sign_up_content: '',
+            ad_banner: '',
+            jump_type: 1,
          },
          radioname: '',
          radioList: [],

--- a/src/models/index.js
+++ b/src/models/index.js
@@ -55,6 +55,7 @@ import crm from './crm';
 import addcrm from './addcrm';
 import crmdetail from './crmdetail';
 import holidays from './holidays';
+import officialtheme from './officialtheme';
 export default {
  loginModel,
  indexstaicModel,
@@ -104,4 +105,5 @@ export default {
  addcrm,
  crmdetail,
  holidays,
+  officialtheme,
 };
--- a/src/models/officialtheme.js
+++ b/src/models/officialtheme.js
--- a/src/models/officialweb.js
+++ b/src/models/officialweb.js
@@ -701,7 +701,7 @@ export default {
        signature, avatorUploader, files, uploaderLoading, uploadtype,
      } = payload;
      const file = files.files ? files.files[0] : null;
-      const { bannerImg } = yield select(state => state.officialweb);
+      const { bannerImg, editThemeInfo } = yield select(state => state.officialweb);
      const newBannerImg = JSON.parse(JSON.stringify(bannerImg));
      // uploaderLoading();
      const filename = `${signature.dir}${getRandomFilename(file.name)}`;
@@ -717,13 +717,13 @@ export default {
      const imageUrl = filename;
      if (uploadtype == 'banner') {
        newBannerImg.push(imageUrl);
+        yield put({
+          type: 'updateState',
+          payload: {
+            bannerImg: newBannerImg,
+          },
+        });
      }
-      yield put({
-        type: 'updateState',
-        payload: {
-          bannerImg: newBannerImg,
-        },
-      });
    },
    * bannersave({ payload }, { call, put, select }) {
      const {

--- a/src/models/webapp.js
+++ b/src/models/webapp.js
@@ -188,6 +188,9 @@ export default {
          });
        }
        if (pathname === '/sjd/themeClass') {
+          dispatch({
+            type: 'officialtheme/queryInfo',
+          });
          dispatch({
            type: 'updateState',
            payload: {

--- a/src/pages/newtheme/customsclock/ContentSetting.js
+++ b/src/pages/newtheme/customsclock/ContentSetting.js
@@ -229,6 +229,36 @@ class ContentSettingForm extends React.Component {
      },
    });
  }
+  delete = (record) => {
+    const { dispatch } = this.props;
+    if (record.sort === 1) {
+      message.error('第一关不能删除!', 0.5);
+      return;
+    }
+    Modal.confirm({
+      title: '确定删除这个关卡吗?',
+      content: '删除后不可恢复，请谨慎操作！',
+      okText: '确定',
+      cancelText: '取消',
+      icon: <Icon type="close-circle" style={{ color: 'red' }} />,
+      onOk() {
+        dispatch({
+          type: 'createtheme/deleteUnclock',
+          payload: {
+            id: record.id,
+          },
+        });
+      },
+      okButtonProps: {
+        type: 'danger',
+        style: {
+          color: '#fff',
+          backgroundColor: '#ff4d4f',
+          borderColor: '#ff4d4f',
+        },
+      },
+    });
+  }
  render() {
    const { isShow, textLength } = this.state;
    const {
@@ -286,7 +316,11 @@ class ContentSettingForm extends React.Component {
                <div className={pageStyle.subjectItem} key={item.id}>
                  <div className={pageStyle.subjectBlock}><span>关卡名称：</span>{item.title}</div>
                  <div className={pageStyle.subjectBlock}><span>关卡顺序：</span>{item.sort}</div>
-                  <div className={pageStyle.subjectBlock}><span className="hreflink" onClick={() => this.goEdit(item)}>编辑</span></div>
+                  <div className={pageStyle.subjectBlock}>
+                    <span className="hreflink" onClick={() => this.goEdit(item)}>编辑</span>
+                    <Divider type="vertical" />
+                    <span className="hreflink" onClick={() => this.delete(item)}>删除</span>
+                  </div>
                </div>
              ),
            )

--- a/src/pages/newtheme/customsclock/Unclock.js
+++ b/src/pages/newtheme/customsclock/Unclock.js
@@ -59,6 +59,7 @@ class UnClockForm extends React.Component {
          unlock_limit,
          sign_up_status,
          max_clock_count,
+          jump_type,
        } = values;
        dispatch({
          type: 'createtheme/addCutomsClock',
@@ -74,6 +75,7 @@ class UnClockForm extends React.Component {
            subject_count,
            unlock_limit,
            sign_up_status: sign_up_status && sign_up_status === true ? 1 : 2,
+            jump_type,
            callBack: () => {
              form.resetFields();
              this.setState({
@@ -269,6 +271,16 @@ class UnClockForm extends React.Component {
      },
    });
  }
+  uploadAdBanner = (e) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'createtheme/queryimagesignature',
+      payload: {
+        files: e.target,
+        uploadtype: 'uploadAdBanner',
+      },
+    });
+  }
  handleLastStep = () => {
    const { dispatch } = this.props;
    confirm({
@@ -338,6 +350,11 @@ class UnClockForm extends React.Component {
    const selectBefore = (
      <div>{textLength + customsParams.title.length}/40</div>
    );
+    const radioStyle = {
+      display: 'block',
+      height: '30px',
+      lineHeight: '30px',
+    };
    return (
      <div className={pageStyle.container}>
        <div className={pageStyle.title}>闯关打卡基本设置</div>
@@ -527,6 +544,36 @@ class UnClockForm extends React.Component {
            </div>
            <span className="ant-form-text">图片建议格式位JPG/PNG，尺寸750*422</span>
          </FormItem>
+          <FormItem {...formItemModalLineLayout} label="广告设置" className={pageStyle.imgFormItem}>
+            <div className={pageStyle.photoWrap}>
+              <div className={pageStyle.photoCover}>
+                <img src={imagify(customsParams.ad_banner)} alt="封面" />
+                <div className={pageStyle.chooseType}>
+                  <div className={pageStyle.material}>
+                    <img src={`${__IMGCDN__}course/upload_icon1.png`} alt="上传图片" />
+                    <div className={pageStyle.tip}>上传图片</div>
+                    <input
+                      type="file"
+                      className={pageStyle.uploadInput}
+                      accept="image/png, image/jpeg"
+                      id="upload2"
+                      onChange={(e) => { this.uploadAdBanner(e); }}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <span className="ant-form-text">设置广告可以精准让进来的访客到达营销页面,图片建议格式位JPG/PNG，推荐尺寸: 660*290</span>
+          </FormItem>
+          <FormItem {...formItemModalLineLayout} label="点击跳转到">
+            {getFieldDecorator('jump_type', { initialValue: Number(customsParams.jump_type) },
+            )(
+              <Radio.Group>
+                <Radio style={radioStyle} value={1}>主页 <span className={pageStyle.jumpTip}>（主页里面包含机构介绍、环境、师资等宣传视频)</span></Radio>
+                <Radio style={radioStyle} value={2}>主题课<span className={pageStyle.jumpTip}>（主题课里面为其他打卡课程列表，主题可里面的课程可以自定义设置）</span></Radio>
+              </Radio.Group>,
+            )}
+          </FormItem>
          <FormItem {...formItemModaltypeLayout} label="闯关介绍">
            <div className={pageStyle.introduceWrap}>
              <ThemeEditorOne

--- a/src/pages/newtheme/customsclock/Unclock.less
+++ b/src/pages/newtheme/customsclock/Unclock.less
@@ -243,4 +243,11 @@
  transition: 0.1s width;
  z-index: 20;
  text-align: center;
+}
+.jumpTip {
+  font-size:12px;
+  font-family:PingFang SC;
+  font-weight:400;
+  color:rgba(173,173,173,1);
+  line-height:18px;
 }
\ No newline at end of file
--- a/src/pages/newtheme/customsclock/detail.js
+++ b/src/pages/newtheme/customsclock/detail.js
@@ -119,6 +119,37 @@ class SuccessStoreForm extends React.Component {
      },
    });
  }
+  delete = (record) => {
+    const { dispatch } = this.props;
+    console.log(record, 'record');
+    if (record.sort === 1) {
+      message.error('第一关不能删除!', 0.5);
+      return;
+    }
+    Modal.confirm({
+      title: '确定删除这个关卡吗?',
+      content: '删除后不可恢复，请谨慎操作！',
+      okText: '确定',
+      cancelText: '取消',
+      icon: <Icon type="close-circle" style={{ color: 'red' }} />,
+      onOk() {
+        dispatch({
+          type: 'createtheme/deleteUnclock',
+          payload: {
+            id: record.id,
+          },
+        });
+      },
+      okButtonProps: {
+        type: 'danger',
+        style: {
+          color: '#fff',
+          backgroundColor: '#ff4d4f',
+          borderColor: '#ff4d4f',
+        },
+      },
+    });
+  }
  render() {
    const {
      form: { getFieldDecorator, getFieldValue },
@@ -129,6 +160,7 @@ class SuccessStoreForm extends React.Component {
      previewQrcode,
      downloadTitle,
    } = this.props;
+    console.log(emigratedObj, 'emigratedObj');
    const columns = [
      {
        title: '关卡名称',
@@ -180,6 +212,8 @@ class SuccessStoreForm extends React.Component {
          return (
            <div>
              <span className="hreflink" onClick={() => this.edit(record)}>编辑</span>
+              <Divider type="vertical" />
+              <span className="hreflink" onClick={() => this.delete(record)}>删除</span>
            </div>
          );
        },

--- a/src/pages/officialweb/themeclass/AddThemeClassModal.js
+++ b/src/pages/officialweb/themeclass/AddThemeClassModal.js
 import { connect } from 'dva';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { message, Row, Col, Input, Select, Modal, Form, InputNumber, Checkbox, Radio, Tabs,
-  Icon } from 'antd';
+import {
+  message, Row, Col, Input, Select, Modal, Form, InputNumber, Checkbox, Radio, Tabs,
+  Icon, Pagination,
+} from 'antd';
 import { imagify, pageIn } from '../../../utils/index';
 import pageStyle from './AddThemeClassModal.less';
 const FormItem = Form.Item;
@@ -24,13 +26,16 @@ class AddThemeClassModal extends React.Component {
  save = () => {
    const { form, save } = this.props;
    form.validateFields((err, values) => {
-      console.log(values, 'values');
      if (!err) {
        const {
-          schedule_remind,
+          title,
+          invent_student_count,
+          invent_clock_count,
        } = values;
        save({
-          schedule_remind: schedule_remind ? 1 : 2,
+          title,
+          invent_student_count,
+          invent_clock_count,
          callBack: () => {
            form.resetFields();
          },
@@ -50,11 +55,45 @@ class AddThemeClassModal extends React.Component {
      timeKey,
    });
  }
+  themeUploadImg = (e) => {
+    const { themeUploadImg } = this.props;
+    themeUploadImg({
+      files: e.target,
+      uploadtype: 'themeUploadBanner',
+    });
+  }
+  getSubjectType = (type) => {
+    switch (type) {
+      case 1:
+        return '作业打卡';
+      case 2:
+        return '日历打卡';
+      case 3:
+        return '闯关打卡';
+      default:
+        return '-';
+    }
+  }
+  handleCheck = (item) => {
+    const { handleCheck } = this.props;
+    handleCheck(item);
+  }
+  changePagination = (page, perPage) => {
+    const { changePagination } = this.props;
+    changePagination({
+      page,
+      perPage,
+    });
+  }
  render() {
    const {
      visible,
      loading,
      form: { getFieldDecorator, getFieldValue },
+      themeList,
+      editThemeInfo,
+      themeListTotal,
+      themeListParams,
    } = this.props;
    const formItemModalLineLayout = {
      labelCol: {
@@ -72,7 +111,7 @@ class AddThemeClassModal extends React.Component {
    return (
      <Modal
        visible={visible}
-        title="添加课程"
+        title={editThemeInfo.id && editThemeInfo.id != 0 ? '编辑课程' : '添加课程'}
        confirmLoading={loading}
        onCancel={this.close}
        onOk={this.save}
@@ -84,9 +123,9 @@ class AddThemeClassModal extends React.Component {
        <Form hideRequiredMark className={pageStyle.modalform} labelAlign="left">
          <div className={pageStyle.commonTitle}>课程封面</div>
          <div className={pageStyle.imgWrap}>
-            <div className={pageStyle.imgLeft}><img src="https://cdn.img.shangjiadao.cn/qingxiao/daka/images/2c/sharemoretheme/newunlockbg.png" alt="" /></div>
+            <div className={pageStyle.imgLeft}><img src={imagify(editThemeInfo.banner)} alt="" /></div>
            <div className={pageStyle.imgRight}>
-              <div className={pageStyle.courseName}><span>已选课程：</span>练字集训</div>
+              <div className={pageStyle.courseName}><span>已选课程：</span>{editThemeInfo.subject_title}</div>
              <div className={pageStyle.imgTip}>建议尺寸：660*290，jpg/png格式，大小不超过300kb</div>
              <div className={pageStyle.uploadImg}>
                <Icon type="upload" />
@@ -95,46 +134,52 @@ class AddThemeClassModal extends React.Component {
                  type="file"
                  className={pageStyle.uploadInput}
                  accept="image/png, image/jpeg"
-                  onChange={(e) => { this.toUploadBanner(e); }}
+                  onChange={(e) => { this.themeUploadImg(e); }}
                />
              </div>
            </div>
          </div>
          <FormItem colon={false} {...formItemModalLineLayout} label="课程标题">
-            {getFieldDecorator('push_type', {
-              initialValue: '0',
+            {getFieldDecorator('title', {
+              initialValue: editThemeInfo.title,
              rules: [
                {
                  required: true,
                  message: '请输入课程标题',
                },
+                {
+                  max: 40,
+                  message: '不能超过40个字',
+                },
              ],
-            })(<Input style={{ width: 350 }} placeholder="请输入课程标题" />,
+            })(<Input style={{ width: 350 }} maxLength={50} placeholder="请输入课程标题" />,
            )}
          </FormItem>
          <div className={pageStyle.modalLine}>
            <span className={pageStyle.commonTitle}>虚拟数据</span>
            <FormItem {...formItemModalLineLayout} className={pageStyle.formNumberOne}>
-              {getFieldDecorator('push_type', {
-                initialValue: '0',
+              {getFieldDecorator('invent_student_count', {
+                initialValue: editThemeInfo.invent_student_count,
                rules: [
                  {
                    required: true,
                    message: '请输入',
                  },
+                  { pattern: /^[1-9]\d*$/, message: '请输入正整数!' },
                ],
              })(<InputNumber placeholder="请输入" />,
              )}
              <span className="ant-form-text">人参与，</span>
            </FormItem>
            <FormItem {...formItemModalLineLayout} className={pageStyle.formNumberTwo}>
-              {getFieldDecorator('push_type', {
-                initialValue: '0',
+              {getFieldDecorator('invent_clock_count', {
+                initialValue: editThemeInfo.invent_clock_count,
                rules: [
                  {
                    required: true,
                    message: '请输入',
                  },
+                  { pattern: /^[1-9]\d*$/, message: '请输入正整数!' },
                ],
              })(<InputNumber placeholder="请输入" />,
              )}
@@ -142,29 +187,38 @@ class AddThemeClassModal extends React.Component {
            </FormItem>
          </div>
          <div className={pageStyle.commonTitle}>选择跳转课程</div>
-          <div >
-            <Form.Item className={pageStyle.radioList}>
-              {getFieldDecorator('radiobutton',
-                {
-                  initialValue: 'a',
-                },
-              )(
-                <Radio.Group>
-                  <div className={pageStyle.radioTitle}>
-                    <div>课程名称</div>
-                    <div>课程类型</div>
-                  </div>
-                  <div className={pageStyle.radioItem}>
-                    <Radio style={radioStyle} value="a">小行星英语练习第一课</Radio>
-                    <div>闯关打卡</div>
-                  </div>
-                  <div className={pageStyle.radioItem}>
-                    <Radio style={radioStyle} value="b">小行星英语练习第一课11</Radio>
-                    <div>闯关打卡</div>
-                  </div>
-                </Radio.Group>,
-              )}
-            </Form.Item>
+          <div>
+            <div className={pageStyle.radioList}>
+              <div className={pageStyle.radioTitle}>
+                <div>课程名称</div>
+                <div>课程类型</div>
+              </div>
+              {
+                  themeList.length > 0 && themeList.map((item, index) =>
+                    (
+                      <div className={pageStyle.radioItem} onClick={() => this.handleCheck(item)}>
+                        <div className={pageStyle.radioLeft}>
+                          {
+                            editThemeInfo.source_id == item.id ?
+                              <img className={pageStyle.checkImg} src={`${__IMGCDN__}developschool/checked.png`} alt="" />
+                              :
+                              <img className={pageStyle.checkImg} src={`${__IMGCDN__}/developschool/un_checked.png`} alt="" />
+                          }
+                          <div>{item.title}</div>
+                        </div>
+                        <div>{this.getSubjectType(item.subject_type)}</div>
+                      </div>
+                    ),
+                  )
+                }
+            </div>
+            <Pagination
+              className={pageStyle.paging}
+              total={Number(themeListTotal)}
+              onChange={this.changePagination}
+              current={Number(themeListParams.page) || 1}
+              pageSize={themeListParams.perPage}
+            />
          </div>
        </Form>
      </Modal>

--- a/src/pages/officialweb/themeclass/AddThemeClassModal.less
+++ b/src/pages/officialweb/themeclass/AddThemeClassModal.less
@@ -81,8 +81,14 @@
 }
 .radioList {
  border:1px solid rgba(229,229,229,1);
-
+  margin-top: 10px;
  border-radius: 8px;
+  .checkImg {
+    width: 25px;
+    height: 25px;
+    cursor: pointer;
+    margin-right: 5px;
+  }
  :global {
    .ant-radio-group {
      width: 100%;
@@ -93,9 +99,29 @@
    display: flex;
    align-items: center;
    justify-content: space-between;
-    padding:0 20px;
  }
  .radioTitle {
    border-bottom: 1px solid #E5E5E5;
+    font-size:14px;
+    font-family:PingFang SC;
+    font-weight:bold;
+    color:rgba(148,148,148,1);
+    line-height:36px;
+    padding:0 20px;
+  }
+  .radioItem {
+    padding: 5px 20px;
+    font-size:14px;
+    font-family:PingFang SC;
+    font-weight:400;
+    color:rgba(0,0,0,1);
+    line-height:36px;
+    .radioLeft {
+      display: flex;
+      align-items: center;
+    }
  }
 }
+.paging {
+  margin-top: 15px;
+}
\ No newline at end of file
--- a/src/pages/officialweb/themeclass/themeclass.js
+++ b/src/pages/officialweb/themeclass/themeclass.js
@@ -37,19 +37,154 @@ class ThemeClassForm extends React.Component {
  goAddCourse = () => {
    const { dispatch } = this.props;
    dispatch({
-      type: 'officialweb/updateState',
+      type: 'officialtheme/updateState',
      payload: {
        addThemeVisible: true,
      },
    });
  }
+  closeThemeModal = () => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'officialtheme/updateState',
+      payload: {
+        addThemeVisible: false,
+        editThemeInfo: {
+          title: '',
+          source_type: '',
+          invent_student_count: '',
+          invent_clock_count: '',
+          banner: '',
+          source_id: 0,
+          introduce: '',
+          subject_title: '',
+        },
+      },
+    });
+  }
+  themeUploadImg = ({ files, uploadtype }) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'officialtheme/queryimagesignature',
+      payload: {
+        files,
+        uploadtype,
+      },
+    });
+  }
+  themeHandleCheck = (item) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'officialtheme/themeHandleCheck',
+      payload: {
+        item,
+      },
+    });
+  }
+  saveTheme = (values) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'officialtheme/saveTheme',
+      payload: values,
+    });
+  }
+  editTheme = (item) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'officialtheme/editTheme',
+      payload: {
+        item,
+      },
+    });
+  }
+  changePagination = ({ page, perPage }) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'officialtheme/queryThemeList',
+      payload: {
+        params: {
+          page,
+          perPage,
+        },
+      },
+    });
+  }
+  moveCourse = (index, direction) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'officialtheme/moveCourse',
+      payload: {
+        index,
+        direction,
+      },
+    });
+  }
+  deleteTheme = (item) => {
+    const { dispatch } = this.props;
+    Modal.confirm({
+      title: '确定删除这个课程吗?',
+      content: '删除后不可恢复，请谨慎操作！',
+      okText: '确定',
+      cancelText: '取消',
+      icon: <Icon type="close-circle" style={{ color: 'red' }} />,
+      onOk() {
+        dispatch({
+          type: 'officialtheme/deleteTheme',
+          payload: {
+            id: item.id,
+          },
+        });
+      },
+      okButtonProps: {
+        type: 'danger',
+        style: {
+          color: '#fff',
+          backgroundColor: '#ff4d4f',
+          borderColor: '#ff4d4f',
+        },
+      },
+    });
+  }
+  handleLastStep = () => {
+    const { dispatch } = this.props;
+    Modal.confirm({
+      title: '提示',
+      content: '是否确认放弃当前编辑内容？\n',
+      icon: <Icon type="info-circle" theme="filled" style={{ color: '#1890ff', fontSize: 30 }} />,
+      onOk() {
+        dispatch({
+          type: 'officialtheme/handleLastStep',
+          payload: {
+          },
+        });
+      },
+      onCancel() {
+      },
+    });
+  }
+  saveThemeSort = () => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'officialtheme/saveThemeSort',
+      payload: {
+      },
+    });
+  }
  render() {
    const {
      form: { getFieldDecorator, getFieldValue },
      collapsed,
      screenIsBig,
      addThemeVisible,
+      themeList,
+      editThemeInfo,
+      themeLoading,
+      courseList,
+      themeListTotal,
+      themeListParams,
+      themeSortLoading,
    } = this.props;
+    console.log(courseList, 'courseList');
    return (
      <div className={pageStyle.container}>
        <div className={pageStyle.topHead}>
@@ -59,23 +194,31 @@ class ThemeClassForm extends React.Component {
          </div>
        </div>
        <div className={pageStyle.courseList}>
-          <div className={pageStyle.courseItem}>
-            <div className={pageStyle.courseHead}>
-              <div className={pageStyle.courseTitle}>21天0基础书法入门训练营</div>
-              <div className={pageStyle.courseNum}><span style={{ marginRight: 20 }}>3456人参与</span><span>100次打卡</span></div>
-            </div>
-            <div className={pageStyle.courseBody}>
-              <div className={pageStyle.courseLeft}>
-                <img src="https://cdn.img.shangjiadao.cn/qingxiao/daka/images/2c/sharemoretheme/newunlockbg.png" alt="" />
-              </div>
-              <div className={pageStyle.courseRight}>
-                <span className={pageStyle.link}>编辑</span>
-                <span className={pageStyle.link}>删除</span>
-                <span className={pageStyle.link}>上移</span>
-                <span className={pageStyle.link}>下移</span>
-              </div>
-            </div>
-          </div>
+          {
+            courseList.length > 0 && courseList.map((item, index) =>
+              (
+                <div className={pageStyle.courseItem}>
+                  <div className={pageStyle.courseHead}>
+                    <div className={pageStyle.courseTitle}>{item.title}</div>
+                    <div className={pageStyle.courseNum}><span style={{ marginRight: 20 }}>{item.invent_student_count}人参与</span><span>{item.invent_clock_count}次打卡</span></div>
+                  </div>
+                  <div className={pageStyle.courseBody}>
+                    <div className={pageStyle.courseLeft}>
+                      <img src={imagify(item.banner)} alt="" />
+                    </div>
+                    <div className={pageStyle.courseRight}>
+                      <span className={pageStyle.link} onClick={() => this.editTheme(item)}>编辑</span>
+                      <span className={pageStyle.link} onClick={() => this.deleteTheme(item)}>删除</span>
+                      { index === 0 && <span className={pageStyle.nolink}>上移</span> }
+                      { index > 0 && <span onClick={() => this.moveCourse(index, 'up')} className={pageStyle.link}>上移</span> }
+                      { index === (courseList.length - 1) && <span className={pageStyle.nolink}>下移</span> }
+                      { index < (courseList.length - 1) && <span onClick={() => this.moveCourse(index, 'down')} className={pageStyle.link}>下移</span> }
+                    </div>
+                  </div>
+                </div>
+              ),
+            )
+          }
        </div>
        <div
          className={pageStyle.footerBox}
@@ -85,12 +228,22 @@ class ThemeClassForm extends React.Component {
          }}
        >
          <div>
-            <Button ghost type="primary">取消</Button>
-            <Button type="primary">保存</Button>
+            <Button ghost type="primary" style={{ marginRight: 15 }} onClick={this.handleLastStep}>取消</Button>
+            <Button type="primary" loading={themeSortLoading} onClick={this.saveThemeSort}>保存</Button>
          </div>
        </div>
        <AddThemeClassModal
          visible={addThemeVisible}
+          close={this.closeThemeModal}
+          themeUploadImg={this.themeUploadImg}
+          themeList={themeList}
+          editThemeInfo={editThemeInfo}
+          handleCheck={this.themeHandleCheck}
+          loading={themeLoading}
+          save={this.saveTheme}
+          themeListTotal={themeListTotal}
+          themeListParams={themeListParams}
+          changePagination={this.changePagination}
        />
      </div>
    );
@@ -103,12 +256,26 @@ const ThemeClass = Form.create()(ThemeClassForm);
 function mapStateToProps(state) {
  const {
    addThemeVisible,
-  } = state.officialweb;
+    themeList,
+    editThemeInfo,
+    themeLoading,
+    courseList,
+    themeListTotal,
+    themeListParams,
+    themeSortLoading,
+  } = state.officialtheme;
  const { collapsed, screenIsBig } = state.webapp;
  return {
    collapsed,
    screenIsBig,
    addThemeVisible,
+    themeList,
+    editThemeInfo,
+    themeLoading,
+    courseList,
+    themeListTotal,
+    themeListParams,
+    themeSortLoading,
  };
 }
 export default connect(mapStateToProps)(ThemeClass);

--- a/src/pages/officialweb/themeclass/themeclass.less
+++ b/src/pages/officialweb/themeclass/themeclass.less
@@ -3,6 +3,7 @@
  padding: 20px;
  border-radius: 2px;
  padding-bottom: 100px;
+  min-height: 90vh;
 }
 .topHead {
  border-bottom: 1px solid #E5E5E5;
@@ -68,7 +69,7 @@
        }
      }
      .courseRight {
-        .link {
+        .nolink,.link {
          font-size:14px;
          font-family:PingFang SC;
          font-weight:400;
@@ -78,6 +79,10 @@
          margin-right: 30px;
          cursor: pointer;
        }
+        .nolink {
+          color: #B1B1B1;
+          cursor: no-drop;
+        }
      }
    }


--- a/src/services/createtheme.js
+++ b/src/services/createtheme.js
@@ -101,3 +101,11 @@ export function unlockAddSubjectCount(params) {
    data,
  });
 }
+export function unlockDelete(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.createtheme.deleteTheme}/${params.id}`,
+    method: 'DELETE',
+    data,
+  });
+}
--- a/src/services/officialtheme.js
+++ b/src/services/officialtheme.js
+import qs from 'qs';
+import request from '../utils/request';
+import api from '../common/api';
+export function addSubject(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.officialtheme.subject}`,
+    method: 'POST',
+    data,
+  });
+}
+export function editSubject(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.officialtheme.subject}/${params.id}`,
+    method: 'PUT',
+    data,
+  });
+}
+export function selectSubject(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.officialtheme.subject}?${data}`,
+    method: 'GET',
+  });
+}
+export function subjectDetail(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.officialtheme.subjectDetail}?${data}`,
+    method: 'GET',
+  });
+}
+export function deleteSubject(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.officialtheme.subjectDelete}`,
+    method: 'POST',
+    data,
+  });
+}
+export function subjectSort(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.officialtheme.subjectSort}`,
+    method: 'POST',
+    data,
+  });
+}