新建闯关

src/common/api.js

@@ -160,6 +160,8 @@ export default {
   },
   createtheme: {
     addTheme: `${dakaapi}member/subject`,
+    unlock_subject: `${dakaapi}member/unlock_subject/store`,
+    find_subject_detail: `${dakaapi}member/unlock_subject/show`,
   },
 
 };

src/models/createtheme.js

@@ -42,6 +42,8 @@ export default {
     calendarData: {},
     currentTimestamp: 0,
     selectPlanDays: [],
+    stepNumber: 0,
+    emigratedObj: {},
   },
   subscriptions: {
     setup({ dispatch, history }) {  // eslint-disable-line
@@ -210,6 +212,104 @@ export default {
         });
       }
     },
+    * createThemeModalAddEmigrated({ payload }, { call, put, select }) {
+      const { sid } = yield select(state => state.webapp);
+      const {
+        unClockLoading, stepNumber,
+      } = yield select(state => state.createtheme);
+      if (unClockLoading) {
+        return;
+      }
+      yield put({
+        type: 'updateState',
+        payload: {
+          unClockLoading: true,
+        },
+      });
+      const {
+        title,
+        push_status,
+        push_time,
+        class_id,
+        unlock_rule_type,
+        password,
+        join_rule_type,
+        clock_start_time,
+        clock_end_time,
+        max_clock_count,
+        subject_count,
+        unlock_limit,
+        callBack,
+      } = payload;
+      const data = yield call(themeAjax.addEmigrated, {
+        title,
+        push_status,
+        push_time,
+        class_id,
+        unlock_rule_type,
+        password,
+        join_rule_type,
+        clock_start_time,
+        clock_end_time,
+        max_clock_count,
+        subject_count,
+        unlock_limit,
+      });
+      if (data.code === 200) {
+        yield put({
+          type: 'updateState',
+          payload: {
+          },
+        });
+        if (callBack && (typeof callBack == 'function')) {
+          callBack();
+        }
+        message.success('闯关打卡活动创建成功', 0.5);
+        yield put({
+          type: 'createtheme/changeStepNumber',
+          payload: {
+            value: stepNumber + 1,
+          },
+        });
+        yield put({
+          type: 'createtheme/createThemeModalfindEmigrated',
+          payload: {
+            store_id: data.data.id,
+          },
+        });
+      } else {
+        yield put({
+          type: 'webapp/errorrequestresolve',
+          payload: {
+            data,
+          },
+        });
+      }
+    },
+    * createThemeModalfindEmigrated({ payload }, { call, put, select }) {
+      const { store_id } = payload;
+      const { sid } = yield select(state => state.webapp);
+      const emigratedDate = yield call(themeAjax.findEmigrated, {
+        id: store_id,
+        school_id: sid,
+      });
+      console.log(emigratedDate, 'emigratedDate11111111111');
+      if (emigratedDate.code == 200) {
+        yield put({
+          type: 'updateState',
+          payload: {
+            emigratedObj: emigratedDate.data,
+          },
+        });
+      } else {
+        yield put({
+          type: 'webapp/errorrequestresolve',
+          payload: {
+            data: emigratedDate,
+          },
+        });
+      }
+    },
     * chooseWeek({ payload }, { call, put, select }) {
       const {
         day, start_time, end_time,
@@ -361,6 +461,15 @@ export default {
         },
       });
     },
+    * changeStepNumber({ payload }, { call, put, select }) {
+      const { value } = payload;
+      yield put({
+        type: 'updateState',
+        payload: {
+          stepNumber: value,
+        },
+      });
+    },
     * changeText({ payload }, { call, put, select }) {
       const { textValue } = payload;
       yield put({
@@ -582,6 +691,8 @@ export default {
           calendarParams: {
             content: [],
           },
+          stepNumber: 0,
+          emigratedObj: {},
         },
       });
     },

src/pages/newtheme/emigratedclock/ContentSetting.less

+.container {
+  background-color: #fff;
+  padding: 0 20px;
+  position: relative;
+  margin-top: 40px;
+}
+.title {
+  font-size:16px;
+  font-family:PingFangSC;
+  font-weight:600;
+  color:rgba(0,0,0,0.85);
+  line-height:24px;
+  position: relative;
+  padding-bottom: 30px;
+  .pack {
+    font-size:14px;
+    font-family:PingFangSC;
+    font-weight:400;
+    color:rgba(24,144,255,1);
+    line-height:20px;
+    display: inline-block;
+    margin-left: 36px;
+    cursor: pointer;
+  }
+}
+.title:after {
+  position: absolute;
+  content: '';
+  display: block;
+  width: 3px;
+  height: 19px;
+  background-color: #1890FF;
+  left: -10px;
+  top: 4px;
+  border-radius:2px;
+}
+.commonwrap {
+  display: flex;
+  align-items: flex-start;
+  :global {
+    .ant-form-item-label > label::after {
+      content: '';
+    }
+  }
+  .commonleft {
+    width: 105px;
+    font-size:14px;
+    font-family:PingFangSC;
+    font-weight:400;
+    color:rgba(0,0,0,0.85);
+    line-height:40px;
+  }
+  .commonright {
+    width: 80%;
+    :global {
+      .ant-form-text1 {
+        font-size:12px;
+        font-family:PingFangSC;
+        font-weight:400;
+        color:rgba(0,0,0,0.55);
+        line-height:22px;
+        display: inline-block;
+        margin-left: 10px;
+      }
+      .ant-form-item .ant-switch {
+        margin-left: -12px;
+      }
+    }
+  }
+}
+.panpelBox {
+  display: block;
+  transition: all .3s;
+}
+.panpelhideBox {
+  display: none;
+}
+.pushlocation {
+  :global {
+    .ant-form-item {
+      .ant-form-item-children {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+.stepsContent {
+  width: 400px;
+  margin-left: 140px;
+}
+.customs {
+  display: flex;
+  align-items: center;
+  .customItem {
+
+  }
+}

src/pages/newtheme/emigratedclock/Unclock.js

+import { connect } from 'dva';
+import React from 'react';
+import {
+  Form,
+  Icon,
+  Button,
+  Tabs,
+  Modal,
+  Row,
+  Col,
+  Steps,
+  Divider,
+  Switch,
+  TimePicker,
+  Collapse,
+  DatePicker,
+  Select, Radio, InputNumber, Input, message,
+} from 'antd';
+import pageStyle from './Unclock.less';
+import { hasBtnPower, imagify } from '../../../utils';
+import ThemeEditor from '../ThemeEditor';
+const { TabPane } = Tabs;
+const FormItem = Form.Item;
+const { Option } = Select;
+const { TextArea } = Input;
+const { RangePicker } = DatePicker;
+class UnClockForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isShow: true,
+      title: '',
+      current: 0,
+    };
+  }
+  componentDidUpdate() {
+  }
+  componentWillUnmount() { // 卸载
+  }
+  handleSubmit = (e) => {
+    const { dispatch, form, handleScoreCancel } = this.props;
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        console.log(values, 'values');
+        const {
+          title,
+          push_status,
+          push_time,
+          class_id,
+          password,
+          join_rule_type,
+          subject_count,
+          unlock_limit,
+        } = values;
+        dispatch({
+          type: 'createtheme/createThemeModalAddEmigrated',
+          payload: {
+            title,
+            push_status,
+            push_time: push_status == 1 ? push_time.format('HH:mm') : '18:00',
+            class_id,
+            unlock_rule_type: 1,
+            password,
+            join_rule_type,
+            clock_start_time: '00:00',
+            clock_end_time: '23:59',
+            max_clock_count: 1,
+            subject_count,
+            unlock_limit,
+            callBack: () => {
+              form.resetFields();
+              this.setState({
+                title: '',
+              });
+            },
+          },
+        });
+      }
+    });
+  }
+  titleChange = (e) => {
+    this.setState({
+      title: e.target.value,
+    });
+  }
+  render() {
+    const { isShow, title, current } = this.state;
+    const {
+      form: { getFieldDecorator, getFieldValue },
+      unClockLoading,
+      classList,
+      jobParams,
+      editorText,
+      stepNumber,
+    } = this.props;
+    const formItemModalLineLayout = {
+      labelCol: {
+        xs: { span: 3 },
+        md: { span: 3 },
+      },
+      wrapperCol: {
+        xs: { span: 21 },
+        md: { span: 21 },
+      },
+    };
+    const formItemverticalLayout = {
+      labelCol: {
+        xs: { span: 5 },
+        sm: { span: 5 },
+      },
+      wrapperCol: {
+        xs: { span: 19 },
+        sm: { span: 19 },
+      },
+    };
+    const formItemModaltypeLayout = {
+      labelCol: {
+        xs: { span: 3 },
+        sm: { span: 3 },
+      },
+      wrapperCol: {
+        xs: { span: 21 },
+        sm: { span: 21 },
+      },
+    };
+    const submitFormLayout = {
+      wrapperCol: {
+        xs: { span: 24, offset: 0 },
+        sm: { span: 10, offset: 7 },
+      },
+    };
+    const selectBefore = (
+      <div>{title.length || 0}/20</div>
+    );
+    return (
+      <div className={pageStyle.container}>
+        <div className={pageStyle.title}>闯关打卡基本设置</div>
+        <Form labelAlign="left" onSubmit={this.handleSubmit}>
+          <FormItem {...formItemModalLineLayout} label="闯关标题">
+            {getFieldDecorator('title', {
+              rules: [
+                {
+                  required: true,
+                  message: '请输入标题',
+                },
+              ],
+            })(
+              <Input maxLength={20} onChange={e => this.titleChange(e)} addonAfter={selectBefore} placeholder="请输入标题" style={{ width: 435 }} />,
+            )}
+          </FormItem>
+          <FormItem {...formItemModalLineLayout} label="选择班级">
+            {getFieldDecorator('class_id', {
+              rules: [
+                {
+                  required: true,
+                  message: '请选择班级',
+                },
+              ],
+            })(
+              <Select placeholder="请选择班级" style={{ width: 174 }} showSearch onChange={this.handleStudentChange}>
+                {classList.map(ele => <Option value={ele.id}>{ele.title}</Option>)}
+              </Select>,
+            )}
+          </FormItem>
+          <FormItem {...formItemModalLineLayout} label="关卡时长设置">
+            <span className="ant-form-text">共&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+            {getFieldDecorator('subject_count', {
+              initialValue: 1,
+              rules: [
+                {
+                  required: true,
+                  message: '请输入关卡时长设置',
+                },
+              ],
+            })(
+              <InputNumber min={0} style={{ width: 100 }} />,
+            )}
+            <span className="ant-form-text">关卡</span>
+          </FormItem>
+          <FormItem {...formItemModalLineLayout} label="每天闯关次数">
+            <span className="ant-form-text">每天可闯</span>
+            {getFieldDecorator('unlock_limit', {
+              initialValue: 1,
+              rules: [
+                {
+                  required: true,
+                  message: '请输入每天闯关次数',
+                },
+              ],
+            })(
+              <InputNumber min={0} style={{ width: 100 }} />,
+            )}
+            <span className="ant-form-text">关卡</span>
+          </FormItem>
+          <FormItem {...formItemModalLineLayout} label="参与规则">
+            {getFieldDecorator('join_rule_type', { initialValue: 1 },
+            )(
+              <Radio.Group>
+                <Radio value={1}>任何人加入</Radio>
+                <Radio value={2}>密码加入</Radio>
+              </Radio.Group>,
+            )}
+            <div style={{ display: 'inline-block' }}>
+              {getFieldValue('join_rule_type') === 2 ? (
+                <FormItem style={{ marginBottom: 0 }}>
+                  {getFieldDecorator('password', {
+                    rules: [
+                      {
+                        required: true,
+                        message: '请输入6位正整数的密码',
+                        pattern: new RegExp(/^[1-9]\d*$/, 'g'),
+                      },
+                    ],
+                  })(<Input maxLength={6} style={{ width: 100, marginRight: 5 }} placeholder="请输入密码" />)}
+                  <span className="ant-form-text"> (6位纯数字)</span>
+                </FormItem>
+              ) : (
+                ''
+              )}
+            </div>
+          </FormItem>
+          <div className={pageStyle.pushlocation}>
+            <FormItem {...formItemModalLineLayout} label="定时提醒">
+              {getFieldDecorator('push_status', { initialValue: 2 },
+              )(
+                <Radio.Group>
+                  <Radio value={2}>关闭提醒</Radio>
+                  <Radio value={1}>开启提醒</Radio>
+                </Radio.Group>,
+              )}
+              <div style={{ display: 'inline-block' }}>
+                {getFieldValue('push_status') === 1 ? (
+                  <FormItem style={{ marginBottom: 0 }}>
+                    {getFieldDecorator('push_time', {
+                      rules: [
+                        {
+                          required: true,
+                          message: '请选择时间',
+                        },
+                      ],
+                    })(<TimePicker style={{ width: 150 }} format="HH:mm" />)}
+                  </FormItem>
+                ) : (
+                  ''
+                )}
+              </div>
+            </FormItem>
+          </div>
+          <Divider />
+          <FormItem style={{ marginTop: 32 }}>
+            <Button type="primary" htmlType="submit" loading={unClockLoading}>
+              下一步
+            </Button>
+          </FormItem>
+        </Form>
+      </div>
+    );
+  }
+}
+UnClockForm.propTypes = {
+};
+const UnClock = Form.create()(UnClockForm);
+
+function mapStateToProps(state) {
+  const {
+    unClockLoading,
+    classList,
+    jobParams,
+    editorText,
+    stepNumber,
+  } = state.createtheme;
+  return {
+    unClockLoading,
+    classList,
+    jobParams,
+    editorText,
+    stepNumber,
+  };
+}
+export default connect(mapStateToProps)(UnClock);
+

src/pages/newtheme/emigratedclock/Unclock.less

+.container {
+  background-color: #fff;
+  padding: 0 20px;
+  position: relative;
+  margin-top: 40px;
+}
+.title {
+  font-size:16px;
+  font-family:PingFangSC;
+  font-weight:600;
+  color:rgba(0,0,0,0.85);
+  line-height:24px;
+  position: relative;
+  padding-bottom: 30px;
+  .pack {
+    font-size:14px;
+    font-family:PingFangSC;
+    font-weight:400;
+    color:rgba(24,144,255,1);
+    line-height:20px;
+    display: inline-block;
+    margin-left: 36px;
+    cursor: pointer;
+  }
+}
+.title:after {
+  position: absolute;
+  content: '';
+  display: block;
+  width: 3px;
+  height: 19px;
+  background-color: #1890FF;
+  left: -10px;
+  top: 4px;
+  border-radius:2px;
+}
+.commonwrap {
+  display: flex;
+  align-items: flex-start;
+  :global {
+    .ant-form-item-label > label::after {
+      content: '';
+    }
+  }
+  .commonleft {
+    width: 105px;
+    font-size:14px;
+    font-family:PingFangSC;
+    font-weight:400;
+    color:rgba(0,0,0,0.85);
+    line-height:40px;
+  }
+  .commonright {
+    width: 80%;
+    :global {
+      .ant-form-text1 {
+        font-size:12px;
+        font-family:PingFangSC;
+        font-weight:400;
+        color:rgba(0,0,0,0.55);
+        line-height:22px;
+        display: inline-block;
+        margin-left: 10px;
+      }
+      .ant-form-item .ant-switch {
+        margin-left: -12px;
+      }
+    }
+  }
+}
+.panpelBox {
+  display: block;
+  transition: all .3s;
+}
+.panpelhideBox {
+  display: none;
+}
+.pushlocation {
+  :global {
+    .ant-form-item {
+      .ant-form-item-children {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+

src/pages/newtheme/emigratedclock/index.less

@@ -84,3 +84,7 @@
     }
   }
 }
+.stepsContent {
+  width: 400px;
+  margin-left: 140px;
+}

src/pages/newtheme/index.js

@@ -18,10 +18,10 @@ class NewThemeForm extends React.Component {
   }
   tabChange=(key) => {
     const { dispatch, tabIndex } = this.props;
-    if (Number(key) === 3) {
-      message.warning('功能即将开放，敬请期待', 1);
-      return;
-    }
+    // if (Number(key) === 3) {
+    //   message.warning('功能即将开放，敬请期待', 1);
+    //   return;
+    // }
     dispatch({
       type: 'indexstaic/tabChange',
       payload: {

src/services/createtheme.js

@@ -9,3 +9,20 @@ export function addTheme(params) {
     data,
   });
 }
+export function addEmigrated(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.createtheme.unlock_subject}`,
+    method: 'POST',
+    data,
+  });
+}
+export function findEmigrated(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.createtheme.find_subject_detail}?${data}`,
+    method: 'GET',
+    data,
+  });
+}
+