ERP新增需求

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`,
+  },
 };

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',

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: [],

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,
 };

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 {

src/models/webapp.js

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

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>
               ),
             )

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

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

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>
           );
         },

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>

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

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);

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;
+        }
       }
     }
 

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,
+  });
+}

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,
+  });
+}