erp营销页

src/common/api.js

@@ -11,8 +11,8 @@ if (ENVIRONMENT == 'pro') {
 } else if (ENVIRONMENT == 'dev') {
   // api = 'https://wx.m.shangjiadao.cn/v2/api/';
   // dakaapi = 'https://qxapi.qingxiao.online/daka/v3/';
-  api = 'http://test.wp53.cn/v2/api/';
-  dakaapi = 'http://clock.wp53.cn/v3/';
+  api = 'https://test.wp53.cn/v2/api/';
+  dakaapi = 'https://clock.wp53.cn/v3/';
 } else if (ENVIRONMENT == 'testenv') {
   api = 'https://test.wp53.cn/v2/api/';
   dakaapi = 'https:clock.wp53.cn/v3/';
@@ -182,8 +182,8 @@ export default {
     unlockSubjectDetail: `${dakaapi}member/unlock_subject/detail`,
     unlockAddSubjectCount: `${dakaapi}member/unlock_subject/add_subject_count`,
     unlock_student_export: `${dakaapi}member/erp/student/unlock_student_export`,
-    classList: `${dakaapi}member/erp/courses`,
-    landing_pages: `${dakaapi}member/erp/landing_pages`,
+    classCourseList: `${dakaapi}member/erp/courses`,
+    landing_pages: `${dakaapi}member/landing_pages`,
   },
   getschooluuid: `${dakaapi}member/school_uuid`,
   analyzeCenter: {

src/models/createtheme.js

@@ -19,7 +19,6 @@ import * as themeAjax from '../services/createtheme';
 import * as classMgtAjax from '../services/classmgt';
 import * as uploader from '../services/uploader';
 import { calendar } from '../utils/calendar';
-import * as goodsAjax from '../services/integral';
 import * as commonAjax from '../services/common';
 import exportExcel from '../utils/exportexcel';
 export default {
@@ -175,7 +174,21 @@ export default {
     themeAdInfo: {
       id: 0,
       title: '',
-    }, // 打卡营销页
+    },
+    landingParams: {
+      page: 1,
+      perPage: 5,
+    },
+    landingTotal: 0,
+    clockClassVisible: false,
+    clockClassList: [],
+    clockClassParams: {
+      page: 1,
+      perPage: 299,
+      extra: 'class',
+    },
+    classes: [],
+    chooseClasses: [],
   },
   subscriptions: {
     setup({ dispatch, history }) {  // eslint-disable-line
@@ -183,10 +196,38 @@ export default {
   },
   effects: {
     * queryInfo({ payload }, { call, put, select }) {
+      yield put({
+        type: 'querymemberinfo',
+      });
+      yield delay(500);
       yield put({
         type: 'queryLandingList',
+        payload: {
+          params: {},
+        },
+      });
+      yield put({
+        type: 'queryCourseClassList',
+        payload: {
+          params: {},
+        },
       });
     },
+    * querymemberinfo({ payload }, { call, put, select }) { // 释放该页面存储的所有状态
+      const { sid } = yield select(state => state.webapp);
+      const nickname = yield call(commonAjax.myNickname, {
+        school_id: sid,
+      });
+      if (nickname.code == 200) {
+        console.log(nickname.data, 'nickname.data');
+        yield put({
+          type: 'updateState',
+          payload: {
+            schoolUserInfo: nickname.data,
+          },
+        });
+      }
+    },
     * tabChange({ payload }, { call, put, select }) {
       const { tabIndex } = payload;
       yield put({
@@ -2258,20 +2299,31 @@ export default {
       }
     },
     // 查询班级列表
-    * queryMyClassList({ payload }, { call, put, select }) {
+    * queryCourseClassList({ payload }, { call, put, select }) {
       const { params } = payload;
       const { sid } = yield select(state => state.webapp);
-      const classListData = yield call(themeAjax.getClassList, Object.assign({
+      const { clockClassParams, schoolUserInfo } = yield select(state => state.createtheme);
+      const newParams = Object.assign({
         school_id: sid,
-        // page: 1,
-        // perPage: 1000,
-        extra: 'class',
-      }, params));
+      }, clockClassParams, params);
+      const classListData = yield call(themeAjax.getCourseClassList, newParams);
       if (classListData.code == 200) {
+        classListData.data.list.forEach((item) => {
+          const teachers = [];
+          item.classes.forEach((ele) => {
+            const name = ele.school_teachers.find(e => e.id == schoolUserInfo.schoolTeacher.id);
+            if (name) {
+              ele.school_teachers.unshift(name);
+            }
+            // eslint-disable-next-line no-param-reassign
+            ele.school_teachers = [...new Set(ele.school_teachers)];
+          });
+        });
         yield put({
           type: 'updateState',
           payload: {
-            classList: (classListData.data && classListData.data.list) || [],
+            clockClassList: (classListData.data && classListData.data.list) || [],
+            clockClassParams: { ...newParams },
           },
         });
       } else {
@@ -2285,19 +2337,25 @@ export default {
     },
     // 获取营销页列表
     * queryLandingList({ payload }, { call, put, select }) {
+      const { params } = payload;
+      const { landingParams } = yield select(state => state.createtheme);
       const { sid } = yield select(state => state.webapp);
-      const data = yield call(themeAjax.getlandingList, {
+      const newParams = Object.assign({
         school_id: sid,
-      });
+      }, landingParams, params);
+      const data = yield call(themeAjax.getlandingList, newParams);
       if (data.code == 200) {
         data.data.list.forEach((ele) => {
-          let content = [];
+          let _content = [];
           try {
-            content = JSON.parse(ele.content);
+            _content = JSON.parse(ele.content);
           } catch (e) {
-            content = [];
+            _content = [];
           }
-          const textobj = content.find(ele => ele.type == 'text' && ele.value != '');
+          let textobj = '';
+          _content.forEach((item, index) => {
+            textobj = item.content && item.content.find(item => item.type == 'text' && item.value != '');
+          });
           // eslint-disable-next-line no-param-reassign
           ele.desc = textobj ? textobj.value : '';
         });
@@ -2305,6 +2363,8 @@ export default {
           type: 'updateState',
           payload: {
             landingList: (data.data && data.data.list) || [],
+            landingParams: { ...newParams },
+            landingTotal: (data.data && data.data.total) || 0,
           },
         });
       } else {
@@ -2467,10 +2527,24 @@ export default {
           subjectList: [],
           storeImg: '',
           progressRate: 0,
-        },
-        themeAdInfo: {
-          id: 0,
-          title: '',
+          themeAdInfo: {
+            id: 0,
+            title: '',
+          },
+          landingParams: {
+            page: 1,
+            perPage: 5,
+          },
+          landingTotal: 0,
+          clockClassVisible: false,
+          clockClassList: [],
+          clockClassParams: {
+            page: 1,
+            perPage: 299,
+            extra: 'class',
+          },
+          classes: [],
+          chooseClasses: [],
         },
       });
     },

src/models/index.js

@@ -57,6 +57,7 @@ import crmdetail from './crmdetail';
 import holidays from './holidays';
 import officialtheme from './officialtheme';
 import liveclass from './liveclass';
+import createmarke from './createmarke';
 export default {
   loginModel,
   indexstaicModel,
@@ -108,4 +109,5 @@ export default {
   holidays,
   officialtheme,
   liveclass,
+  createmarke,
 };

src/pages/newtheme/components/AddMarkeModal.less

+.photoWrap {
+  display: inline-flex;
+  width: 375px;
+  height: 211px;
+  position: relative;
+  margin-right: 30px;
+  .defaultImgBox {
+    width: 375px;
+    height: 211px;
+    cursor: pointer;
+    .defaultImg {
+      width: 100%;
+      height: 100%;
+      border-radius: 6px;
+    }
+    &:hover .chooseType {
+      opacity: 1;
+      z-index: 0;
+    }
+  }
+  .chooseType {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: -10;
+    background: rgba(0,0,0,0.7);
+    transition: opacity  .3s linear;
+    border-radius: 6px;
+  }
+  .photoCover {
+    width: 375px;
+    height: 211px;
+    position: relative;
+    &:hover .chooseType {
+      opacity: 1;
+      z-index: 0;
+    }
+    &>img {
+      width: 424px;
+      height: 230px;
+      border-radius: 6px;
+    }
+    .coverDelete {
+      font-size: 22px;
+      color: #d5d5d5;
+      cursor: pointer;
+      position: absolute;
+      right: -25px;
+      top: 0;
+    }
+    .coverDelete:hover {
+      color: #fa4f53;
+    }
+  }
+  .material {
+    width: 50%;
+    height: 211px;
+    border-radius: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin-right: 11px;
+    cursor: pointer;
+    position: relative;
+    .uploadInput {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      opacity: 0;
+      cursor: pointer;
+      z-index: 1;
+    }
+    .tip {
+      font-size:14px;
+      font-weight:400;
+      color:#fff;
+    }
+    &>img {
+      width: 32px;
+      height: 32px;
+      margin-top: 10px;
+    }
+  }
+}
+.ediorWrap {
+  width: 650px;
+  min-height: 319px;
+  padding: 20px;
+  background-color: #fafafa;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  border: 1px solid #eee;
+  max-height: 350px;
+  overflow-y: scroll;
+}
+::-webkit-scrollbar {
+  width: 8px;
+  height: 10px;
+  background-color: rgba(0,0,0,0);
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 6px;
+  background-color: rgba(0,0,0,.2);
+  transition: all .4s ease;
+  -moz-transition: all .4s ease;
+  -webkit-transition: all .4s ease;
+  -o-transition: all .4s ease;
+}
+.modalform {
+  :global {
+    .ant-form-item {
+      margin-bottom: 10px;
+    }
+  }
+}
+.teahcerTip {
+  font-size: 14px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 600;
+  line-height: 24px;
+  color: rgba(0, 0, 0, 0.85);
+  margin-bottom: 20px;
+}
+.uploadFlex {
+  display: flex;
+  align-items: center;
+  .wxImg {
+    width: 100px;
+    height: 100px;
+    margin-right: 20px;
+    position: relative;
+    &>img {
+      width: 100%;
+      height: 100%;
+    }
+    .uploadInput {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      opacity: 0;
+      cursor: pointer;
+      z-index: 1;
+    }
+  }
+  .wxWrap {
+    width: 100px;
+    height: 100px;
+    position: relative;
+    cursor: pointer;
+    background-color: #fafafa;
+    border: 1px dashed #d9d9d9;
+    border-radius: 4px;
+    cursor: pointer;
+    -webkit-transition: border-color 0.3s ease;
+    transition: border-color 0.3s ease;
+    line-height: 100px;
+    text-align: center;
+    &:hover {
+      border-color: #1890ff;
+    }
+    .uploadInput {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      opacity: 0;
+      cursor: pointer;
+      z-index: 1;
+    }
+  }
+  .uploadText {
+    position: relative;
+    color: #16b0fd;
+    font-size: 16px;
+    .uploadInput {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      opacity: 0;
+      cursor: pointer;
+      z-index: 1;
+    }
+  }
+
+}

src/pages/newtheme/components/ChooseClass.js

@@ -5,6 +5,7 @@ import {
   Input,
   Modal,
   Checkbox,
+  Button,
 } from 'antd';
 import pageStyle from './ChooseClass.less';
 import { pageIn, hasBtnPower, imagify, ossVideofy } from '../../../utils/index';
@@ -22,89 +23,112 @@ class ChooseClassModal extends React.Component {
   }
   componentWillUnmount() { // 卸载
   }
+  indexOf = (arr, item) => {
+    return arr.indexOf(item);
+  }
   close = () => {
     const { close, form } = this.props;
     close();
-    form.resetFields();
   }
-  save = (e) => {
-    const { save, form } = this.props;
-    e.preventDefault();
-    this.props.form.validateFields((err, values) => {
-      if (!err) {
-        const {
-          is_encrypt,
-          password,
-        } = values;
-        save({
-          is_encrypt,
-          password,
-        }, () => {
-          form.resetFields();
-        });
-      }
-    });
+  changeCourseClass = (type) => {
+    const { changeCourseClass } = this.props;
+    changeCourseClass(type);
+  }
+  chooseClass = (item) => {
+    const { classes, chooseClasses, choose } = this.props;
+    const classesIndex = classes.indexOf(item.id);
+    const chooseClassesIndex = chooseClasses.findIndex(ele => ele.id == item.id);
+    if (classesIndex == -1) {
+      classes.push(item.id);
+    } else {
+      classes.splice(classesIndex, 1);
+    }
+    if (chooseClassesIndex == -1) {
+      chooseClasses.push({
+        title: item.title,
+        id: item.id,
+      });
+    } else {
+      chooseClasses.splice(classesIndex, 1);
+    }
+    choose({ classes, chooseClasses });
+  }
+  saveClasses = () => {
+    const { classes, saveClasses } = this.props;
+    saveClasses(classes);
   }
   render() {
     const {
       visible,
       form: { getFieldDecorator, getFieldValue },
-      record,
-      replyLoading,
-      info,
+      list,
+      clockClassParams,
+      classes,
+      chooseClasses,
     } = this.props;
-    const formItemModalLineLayout = {
-      labelCol: {
-        xs: { span: 24 },
-        sm: { span: 3 },
-      },
-      wrapperCol: {
-        xs: { span: 24 },
-        sm: { span: 20 },
-      },
-    };
     return (
       <Modal
         visible={visible}
-        maskClosable={false}
         zIndex={110}
         width={600}
         bodyStyle={{
-          padding: '40px 20px',
+          padding: '10px 20px',
         }}
-        title="修改密码"
-        closable={false}
+        title="选择参与打卡的班级"
         onCancel={this.close}
         okText="保存"
         cancelText="取消"
-        confirmLoading={replyLoading}
         onOk={this.save}
+        footer={null}
       >
-        <Form className={pageStyle.modalform} labelAlign="left" onSubmit={this.save}>
-          <FormItem>
-            {getFieldDecorator('is_encrypt', {
-                valuePropName: 'checked',
-                initialValue: info.is_encrypt == 1,
-              })(<Checkbox><span className={pageStyle.tip}>设置密码</span></Checkbox>)}
-          </FormItem>
-          {
-            Number(getFieldValue('is_encrypt')) === 1 ?
-              <FormItem {...formItemModalLineLayout}>
-                {getFieldDecorator('password', {
-                  initialValue: info.password,
-                  rules: [
+        <div>
+          <div className={pageStyle.topHead}>
+            <Button type={clockClassParams.extra == 'class' ? 'primary' : ''} className={pageStyle.btn} onClick={() => this.changeCourseClass('class')}>全部班级</Button>
+            <Button type={clockClassParams.extra == 'my_class' ? 'primary' : ''} className={pageStyle.btn} onClick={() => this.changeCourseClass('my_class')}>只看我的</Button>
+          </div>
+          <div className={pageStyle.classList}>
+            {
+              list.length > 0 && list.map((item, index) => {
+                return (
+                  <div className={pageStyle.classItem}>
+                    <div className={pageStyle.classTitle}>{item.title}</div>
                     {
-                      required: true,
-                      message: '请输入4-8位数字密码',
-                      pattern: new RegExp(/^\d{4,8}$/, 'g'),
-                    },
-                  ],
-                })(
-                  <Input style={{ width: 200 }} maxLength={8} placeholder="请输入4-8位数字密码" />,
-                )}
-              </FormItem> : ''
-          }
-        </Form>
+                      item.classes.map((ele, i) => {
+                        return (
+                          <div className={pageStyle.classFlex} onClick={() => this.chooseClass(ele)}>
+                            <div className={pageStyle.classLeft}>
+                              {ele.title}
+                            </div>
+                            <div className={pageStyle.classRight}>
+                              <div className={pageStyle.teacherList}>
+                                {
+                                  ele.school_teachers.map((ll, i) => {
+                                    return (
+                                      <span className={pageStyle.teacherName}>{ll.nickname}</span>
+                                    );
+                                  })
+                                }
+                              </div>
+                              {
+                                this.indexOf(classes, ele.id) == -1 ?
+                                  <img className={pageStyle.check} src={`${__IMGCDN__}theme/check.png`} alt="" />
+                                  :
+                                  <img className={pageStyle.check} src={`${__IMGCDN__}theme/check_active.png`} alt="" />
+                              }
+                            </div>
+                          </div>
+                        );
+                      })
+                    }
+                  </div>
+                );
+              })
+            }
+          </div>
+          <div className={pageStyle.save}>
+            <Button type="primary" onClick={this.saveClasses}>保存</Button>
+          </div>
+        </div>
       </Modal>
     );
   }

src/pages/newtheme/components/ChooseClass.less

+.topHead {
+  text-align: center;
+  .btn {
+    border-radius: 0;
+  }
+}
+.classList {
+  margin-top: 20px;
+  max-height: 400px;
+  min-height: 350px;
+  overflow-y: scroll;
+  .classItem {
+    margin-bottom: 20px;
+    .classTitle {
+      font-size:13px;
+      font-family:PingFangSC-Medium,PingFang SC;
+      font-weight:600;
+      color:rgba(34,34,34,1);
+      line-height:35px;
+      margin-bottom: 5px;
+    }
+    .classFlex {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #F1F2F3;
+      padding: 5px 0;
+      .classLeft {
+        font-size:13px;
+        font-family:PingFangSC-Regular,PingFang SC;
+        font-weight:400;
+        color:rgba(34,34,34,1);
+      }
+      .classRight {
+        display: flex;
+        align-items: center;
+        .teacherList {
+          overflow: hidden;
+          white-space: nowrap;
+          width: 150px;
+          text-overflow: ellipsis;
+          margin-right: 15px;
+          text-align: right;
+        }
+        .teacherName {
+          font-size: 12px;
+          color: #666666;
+        }
+        .teacherName:not(:last-child) {
+          &:after{
+            content: '、';
+          }
+        }
+        .teacherName:nth-child(1){
+          color: #FEA915;
+        }
+      }
+      .check {
+        width: 19px;
+        height: 19px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+.save {
+  text-align: center;
+  margin-top: 15px;
+}
+::-webkit-scrollbar {
+  width: 8px;
+  height: 10px;
+  background-color: rgba(0,0,0,0);
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 6px;
+  background-color: rgba(0,0,0,.2);
+  transition: all .4s ease;
+  -moz-transition: all .4s ease;
+  -webkit-transition: all .4s ease;
+  -o-transition: all .4s ease;
+}

src/pages/newtheme/components/MarkeEditor.less

+.textWrap {
+  width: 560px;
+  height: auto;
+  position: relative;
+  margin-bottom:10px;
+  :global {
+    .ant-input {
+      padding: 6px 15px 20px;
+    }
+  }
+  .sizeNumber {
+    position: absolute;
+    bottom: 8px;
+    right: 10px;
+  }
+}
+
+.editorwrap {
+  //width: 563px;
+  margin-top: 15px;
+  .videowrap {
+    width: 100%;
+    height: 200px;
+    position: relative;
+    margin-bottom: 10px;
+    .videoPoster {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .videowrap:hover {
+    cursor: pointer;
+    .videohide {
+      opacity: 1;
+      background-color: rgba(0,0,0,0.5);
+      transition: all .3s;
+      z-index: 1;
+      color: #fff;
+    }
+  }
+  .videohide {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    color: #fff;
+    z-index: -1;
+    a {
+      color: #fff;
+    }
+  }
+  .uploadimgbox {
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 18px;
+    flex-wrap: wrap;
+    .imgwrap {
+      width: 100%;
+      // height: 120px;
+      border-radius: 4px;
+      margin-right: 6px;
+      position: relative;
+      .uploadimgwrap {
+        width: 100%;
+        // height: 120px;
+        overflow: hidden;
+      }
+    }
+    .imgwrap:hover {
+      cursor: pointer;
+      .imghide {
+        opacity: 1;
+        background-color: rgba(0,0,0,0.5);
+        transition: all .3s;
+        z-index: 1;
+        color: #fff;
+      }
+    }
+    .imghide {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      opacity: 0;
+      color: #fff;
+      z-index: -1;
+      a {
+        color: #fff;
+      }
+    }
+    .teacheruploadimg {
+      object-fit: contain;
+      border-radius: 4px;
+      width: 100%;
+    }
+    .teacheruploadimg:nth-child(4n){
+      margin-right: 0;
+    }
+  }
+}
+
+.uploadflex {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+  .uploadimg {
+    cursor: pointer;
+    width: 106px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    border: 1px solid #D9D9D9;
+    border-radius: 4px;
+    color: rgba(0,0,0,0.65);
+    position: relative;
+    margin-right: 30px;
+    .fileuploadinput {
+      cursor: pointer;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      opacity: 0;
+      left: 0;
+      top: 0;
+    }
+  }
+}
+.toolList {
+  position: absolute;
+  right: -30px;
+  top: 0;
+  width: 30px;
+  height: 90px;
+  display: flex;
+  flex-direction: column;
+  background-color: #D3D3D3;
+  opacity: 0;
+  border-radius: 2px;
+  z-index: -1;
+  div {
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 14px;
+    cursor: pointer;
+  }
+  div>img {
+    width: 14px;
+    height: 14px;
+  }
+  .up:hover {
+    background-color: #1890FF;
+  }
+  .down,.nodown {
+    transform: rotate(180deg);
+  }
+  .nodown,.noup {
+    cursor: not-allowed;
+  }
+  .down:hover {
+    background-color: #1890FF;
+  }
+  .delete:hover {
+    background-color: #FF6060;
+  }
+}
+.textWrap:hover,.imgwrap:hover,.videowrap:hover {
+  .toolList {
+    opacity: 1;
+    z-index: 1;
+  }
+}
+.addPlate {
+  width: 214px;
+  height: 34px;
+  line-height: 34px;
+  text-align: center;
+  color: #65B8F4;
+  border: 1px solid #65B8F4;
+  border-radius: 17px;
+  margin: 40px auto 0;
+  cursor: pointer;
+}
+.plateWrap {
+  border:2px dashed rgba(208,208,208,1);
+  padding: 20px;
+  margin-bottom: 30px;
+  position: relative;
+}
+.plateDelete {
+  position: absolute;
+  right: -20px;
+  top: -25px;
+  font-size: 30px;
+  color: #FF6060;
+  cursor: pointer;
+}
+.progressWrap {
+  width: 300px;
+  height: 300px;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #f1f1f1;
+  border-radius: 15px;
+  z-index: 9999;
+  &>p {
+    font-size: 18px;
+    margin-top: 30px;
+    color: #1e8bff;
+  }
+}
\ No newline at end of file

src/pages/newtheme/components/MarketingListModal.js

@@ -4,7 +4,8 @@ import {
   Form,
   Input,
   Modal,
-  Checkbox,
+  Checkbox, Pagination,
+  Divider,
 } from 'antd';
 import pageStyle from './MarketingListModal.less';
 import { pageIn, hasBtnPower, imagify, ossVideofy } from '../../../utils/index';
@@ -34,14 +35,27 @@ class MarketingListModal extends React.Component {
     const { createMarke } = this.props;
     createMarke();
   }
+  changePagination = (page, perPage) => {
+    const { changePagination } = this.props;
+    changePagination({ page, perPage });
+  }
+  editMarke = (item) => {
+    const { editMarke } = this.props;
+    editMarke(item);
+  }
+  deleteMarke = (item) => {
+    const { deleteMarke } = this.props;
+    deleteMarke(item);
+  }
   render() {
     const {
       visible,
       form: { getFieldDecorator, getFieldValue },
       list,
       id,
+      landingParams,
+      landingTotal,
     } = this.props;
-    console.log(list);
     return (
       <Modal
         visible={visible}
@@ -58,7 +72,7 @@ class MarketingListModal extends React.Component {
         <div className={pageStyle.container}>
           <div className={pageStyle.list}>
             {
-              list.length > 0 && list.map((item, index) => {
+              list && list.length > 0 && list.map((item, index) => {
                 return (
                   <div className={pageStyle.item}>
                     <div className={pageStyle.itemLeft}>
@@ -72,8 +86,11 @@ class MarketingListModal extends React.Component {
                       <div className={pageStyle.itemFlex}>
                         <div className={pageStyle.now}>{item.id == id ? '当前使用' : ''}</div>
                         <div>
-                          <span className={pageStyle.nowBtn} onClick={() => this.getID(item)}>立即使用</span>
-                          <span className={pageStyle.lookBtn}>查看模板</span>
+                          <span className={pageStyle.lookBtn} onClick={() => this.getID(item)}>立即使用</span>
+                          <Divider type="vertical" />
+                          <span className={pageStyle.lookBtn} onClick={() => this.editMarke(item)}>编辑</span>
+                          <Divider type="vertical" />
+                          <span className={pageStyle.lookBtn} onClick={() => this.deleteMarke(item)}>删除</span>
                         </div>
                       </div>
                     </div>
@@ -82,6 +99,13 @@ class MarketingListModal extends React.Component {
               })
             }
           </div>
+          <div className={pageStyle.page}>
+            <Pagination
+              total={Number(landingTotal)}
+              onChange={this.changePagination}
+              pageSize={landingParams.perPage}
+            />
+          </div>
           <div className={pageStyle.footer} onClick={this.createMarke}>
             新建打卡营销页
           </div>

src/pages/newtheme/components/MarketingListModal.less

@@ -2,7 +2,8 @@
   .item {
     display: flex;
     align-items: center;
-    margin-bottom: 15px;
+    border-bottom: 1px solid #e8e8e8;
+    padding: 15px 0;
     .itemLeft {
       width: 128px;
       height: 100px;
@@ -32,7 +33,8 @@
         font-size: 12px;
         margin-bottom: 10px;
         word-break: break-all;
-        color: #666666
+        color: #666666;
+        min-width: 36px;
       }
       .itemFlex {
         display: flex;
@@ -42,26 +44,11 @@
           color: #FEA917;
           font-size: 12px;
         }
-        .nowBtn {
-          font-size: 12px;
-          color: #1890ff;
-          border-radius: 2px;
-          display: inline-block;
-          width: 52px;
-          height: 20px;
-          text-align: center;
-          line-height: 20px;
-          margin-right: 20px;
-          cursor: pointer;
-        }
         .lookBtn {
           font-size: 12px;
           color: #1890ff;
-          display: inline-block;
-          width: 52px;
-          height: 20px;
           text-align: center;
-          line-height: 20px;
+          line-height: 35px;
           cursor: pointer;
         }
       }
@@ -73,4 +60,10 @@
   line-height: 45px;
   color: #16B0FD;
   cursor: pointer;
+  width: 150px;
+  margin: 0 auto;
+}
+.page {
+  text-align: right;
+  margin-top: 10px;
 }

src/pages/newtheme/jobclock/index.js

@@ -242,12 +242,114 @@ class JobClockForm extends React.Component {
   addMarke = () => {
     const { dispatch } = this.props;
     dispatch({
-      type: 'createtheme/updateState',
+      type: 'createmarke/updateState',
       payload: {
         addMarkeVisible: true,
       },
     });
   }
+  handleChangeMarke = ({ page, perPage }) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'createtheme/queryLandingList',
+      payload: {
+        params: {
+          page,
+          perPage,
+        },
+      },
+    });
+  }
+  editMarke = (item) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'createmarke/editMarke',
+      payload: {
+        item,
+      },
+    });
+  }
+  deleteMarke = (item) => {
+    const { dispatch } = this.props;
+    Modal.confirm({
+      title: '确认要删除这个营销页吗？',
+      okText: '确认',
+      cancelText: '取消',
+      okType: 'danger',
+      centered: true,
+      okButtonProps: {
+        type: 'danger',
+        style: {
+          color: '#fff',
+          backgroundColor: '#ff4d4f',
+          borderColor: '#ff4d4f',
+        },
+      },
+      icon: <Icon type="close-circle" style={{ color: 'red' }} />,
+      onOk: () => {
+        dispatch({
+          type: 'createmarke/deleteMarke',
+          payload: {
+            item,
+          },
+        });
+      },
+      onCancel: () => {
+      },
+    });
+  }
+  handleChangeRadio = (e) => {
+    const { dispatch } = this.props;
+    if (Number(e.target.value) == 2 || Number(e.target.value) == 4) {
+      dispatch({
+        type: 'createtheme/updateState',
+        payload: {
+          clockClassVisible: true,
+        },
+      });
+    }
+  }
+  closeClassList = () => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'createtheme/updateState',
+      payload: {
+        clockClassVisible: false,
+        classes: [],
+        chooseClasses: [],
+      },
+    });
+  }
+  changeCourseClass = (type) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'createtheme/queryCourseClassList',
+      payload: {
+        params: {
+          extra: type,
+        },
+      },
+    });
+  }
+  handleChooseClass = ({ classes, chooseClasses }) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'createtheme/updateState',
+      payload: {
+        classes,
+        chooseClasses,
+      },
+    });
+  }
+  saveClasses = (classes) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'createtheme/updateState',
+      payload: {
+        classes,
+      },
+    });
+  }
   render() {
     const { isShow, textLength } = this.state;
     const {
@@ -262,6 +364,13 @@ class JobClockForm extends React.Component {
       landingList,
       themeAdInfo,
       addMarkeVisible,
+      landingParams,
+      landingTotal,
+      clockClassVisible,
+      clockClassList,
+      clockClassParams,
+      classes,
+      chooseClasses,
     } = this.props;
     const formItemModalLineLayout = {
       labelCol: {
@@ -406,17 +515,48 @@ class JobClockForm extends React.Component {
                   {getFieldDecorator('join_rule_type', {
                     initialValue: '',
                   })(
-                    <Radio.Group>
+                    <Radio.Group onChange={this.handleChangeRadio}>
                       <Radio style={radioStyle} value="1"><div className={pageStyle.radioText}>任何人都可参与&nbsp;<span>(无通知)</span></div></Radio>
                       <Radio style={radioStyle} value="2"><div className={pageStyle.radioText}>任何人都可参与&nbsp;<span>(指定班级学生收到通知)</span></div></Radio>
-                      <Radio style={radioStyle} value="3"><div className={pageStyle.radioText}>输入密码都可参与&nbsp;<span>(无通知)</span></div></Radio>
                       <Radio style={radioStyle} value="4"><div className={pageStyle.radioText}>指定班级学生参与</div></Radio>
+                      <Radio style={radioStyle} value="3"><div className={pageStyle.radioText}>输入密码都可参与&nbsp;<span>(无通知)</span></div>
+                      </Radio>
                     </Radio.Group>,
                   )}
+                  {Number(getFieldValue('join_rule_type')) == 3 ?
+                    <div>
+                      <FormItem {...formItemModaltypeLayout} label="" style={{ marginBottom: 0 }}>
+                        {getFieldDecorator('join_secret', {
+                          initialValue: '',
+                          rules: [
+                            {
+                              message: '请输入正整数',
+                              pattern: new RegExp(/^[0-9]\d*$/, 'g'),
+                            },
+                          ],
+                        })(
+                          <Input style={{ width: 200 }} maxLength={6} placeholder="请设置密码" />,
+                        )}
+                      </FormItem>
+                    </div>
+                    : null}
                 </FormItem>
               </div>
             </div>
-            {Number(getFieldValue('join_rule_type')) == 2 ? <ChooseClass /> : null}
+            {(Number(getFieldValue('join_rule_type')) == 2 || Number(getFieldValue('join_rule_type')) == 4) ?
+              <ChooseClass
+                visible={clockClassVisible}
+                close={this.closeClassList}
+                list={clockClassList}
+                clockClassParams={clockClassParams}
+                changeCourseClass={this.changeCourseClass}
+                classes={classes}
+                chooseClasses={chooseClasses}
+                choose={this.handleChooseClass}
+                saveClasses={this.saveClasses}
+              />
+              : null
+            }
             <div className={pageStyle.commonwrap}>
               <div className={pageStyle.commonleft}>
                 学生作业要求：
@@ -553,9 +693,14 @@ class JobClockForm extends React.Component {
             visible={marketingVisible}
             list={landingList}
             id={themeAdInfo.id}
+            landingTotal={landingTotal}
+            landingParams={landingParams}
             close={this.closeMarketing}
             getID={this.getMarketingId}
             createMarke={this.addMarke}
+            changePagination={this.handleChangeMarke}
+            editMarke={this.editMarke}
+            deleteMarke={this.deleteMarke}
           />
           <AddMarkeModal
             visible={addMarkeVisible}
@@ -585,8 +730,17 @@ function mapStateToProps(state) {
     marketingVisible,
     landingList,
     themeAdInfo,
-    addMarkeVisible,
+    landingParams,
+    landingTotal,
+    clockClassVisible,
+    clockClassList,
+    clockClassParams,
+    classes,
+    chooseClasses,
   } = state.createtheme;
+  const {
+    addMarkeVisible,
+  } = state.createmarke;
   return {
     themeAddLoading,
     classList,
@@ -598,6 +752,13 @@ function mapStateToProps(state) {
     landingList,
     themeAdInfo,
     addMarkeVisible,
+    landingParams,
+    landingTotal,
+    clockClassVisible,
+    clockClassList,
+    clockClassParams,
+    classes,
+    chooseClasses,
   };
 }
 export default connect(mapStateToProps)(JobClock);

src/services/createtheme.js

@@ -117,10 +117,10 @@ export function UnlockStudentExport(params) {
     data,
   });
 }
-export function getClassList(params) {
+export function getCourseClassList(params) {
   const data = qs.stringify(params);
   return request({
-    url: `${api.createtheme.classList}?${data}`,
+    url: `${api.createtheme.classCourseList}?${data}`,
     method: 'GET',
     data,
   });
@@ -133,4 +133,35 @@ export function getlandingList(params) {
     data,
   });
 }
-
+export function addMarke(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.createtheme.landing_pages}`,
+    method: 'POST',
+    data,
+  });
+}
+export function editMarke(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.createtheme.landing_pages}/${params.id}`,
+    method: 'PUT',
+    data,
+  });
+}
+export function deleteMarke(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.createtheme.landing_pages}/${params.id}`,
+    method: 'DELETE',
+    data,
+  });
+}
+export function markeDetail(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.createtheme.landing_pages}/${params.id}`,
+    method: 'GET',
+    data,
+  });
+}