优化

src/common/api.js

@@ -173,4 +173,11 @@ export default {
     delete_unlock_subject: `${dakaapi}member/unlock_subject`,
   },
   getschooluuid: `${dakaapi}member/school_uuid`,
+  // 新版注册接口
+  newRegister: {
+    register: `${dakaapi}common/qx_login/register`,
+    forget_password: `${dakaapi}common/qx_login/forget_password`,
+    change_password: `${dakaapi}member/erp/account/change_password`,
+    send_code: `${dakaapi}common/sms`,
+  },
 };

src/models/index.js

@@ -38,6 +38,7 @@ import playaudioModel from './playaudio';
 import hqstatistical from './hqstatistical';
 import integralModel from './integral';
 import createThemeModal from './createtheme';
+import newregister from './newregister';
 export default {
   loginModel,
   indexstaicModel,
@@ -70,4 +71,5 @@ export default {
   hqstatistical,
   integralModel,
   createThemeModal,
+  newregister,
 };

src/models/newregister.js

+
+import { routerRedux } from 'dva/router';
+import queryString from 'qs';
+import { message } from 'antd';
+import errorcode from '../common/errorcode';
+import {
+  LocalStorage,
+  SessionStorage,
+  isExpired,
+} from '../utils/index';
+import * as login from '../services/login';
+import * as newregister from '../services/newregister';
+import * as schoolajax from '../services/schooladd';
+export default {
+  namespace: 'newregister',
+  state: {
+    mobile: '',
+    gettingVerifyCoding: false, // 防止获取验证码重复提交
+    countdown: 60,
+    counting: false,
+    registering: false,
+    resolves: [],
+    modalVisible: false,
+    protocolData: '',
+    timer: null,
+    location_address: '',
+  },
+  subscriptions: {
+    setup({ dispatch, history }) {  // eslint-disable-line
+    },
+  },
+  effects: {
+    * register({ payload }, { call, put, select }) {
+      const {
+        mobile,
+        code,
+        password,
+        from,
+        title,
+      } = payload;
+      const { locationQuery } = yield select(state => state.webapp);
+      const {
+        longitude, latitude, locationAddress, province, city, district,
+      } = yield select(state => state.schooladd);
+      yield put({
+        type: 'updateState',
+        payload: {
+          registering: true,
+        },
+      });
+      const data = yield call(newregister.register, {
+        mobile,
+        code,
+        password,
+        from,
+      });
+      console.log(data, 'data');
+      if (data.code === 200) {
+        if (data.data && data.data.token) {
+          LocalStorage.setItem('user', {
+            expiresIn: data.data.expiresIn,
+            token: data.data.token,
+            tokenType: data.data.tokenType,
+            avatar: (data.data.business && data.data.business.avatar) || '',
+            consumerId: (data.data.business && data.data.business.consumer_id) || 0,
+            createdAt: (data.data.business && data.data.business.created_at) || '',
+            deletedAt: (data.data.business && data.data.business.deleted_at) || '',
+            id: (data.data.business && data.data.business.id) || 0,
+            memberId: (data.data.business && data.data.business.member_id) || 0,
+            mobile: (data.data.business && data.data.business.mobile) || '',
+            nickname: (data.data.business && data.data.business.nickname) || '',
+            expiresDateTime: data.data.expiresDateTime || '',
+          });
+        }
+        message.success('注册成功!', 1);
+        yield put({
+          type: 'webapp/updateState',
+          payload: {
+            userInfo: LocalStorage.getItem('user'),
+          },
+        });
+        const schooladd = yield call(schoolajax.memberSchoolAdd, {
+          title,
+          longitude,
+          latitude,
+          location_address: province + city + district + locationAddress,
+          address: locationAddress,
+          logo: '',
+          province,
+          city,
+          area: district,
+          token: data.data.token,
+        });
+        yield put({
+          type: 'updateState',
+          payload: {
+            registering: false,
+            userInfo: LocalStorage.getItem('user'),
+            location_address: '',
+          },
+        });
+      } else {
+        message.error(data.msg, 1);
+        yield put({
+          type: 'updateState',
+          payload: {
+            registering: false,
+          },
+        });
+      }
+    },
+    * goToUserInfo({ payload }, { put }) {
+      yield put(routerRedux.push({
+        pathname: '/userinfo',
+      }));
+    },
+    * getverifycode({ payload }, { call, put, select }) {
+      const { countdown, counting, gettingVerifyCoding } = yield select(state => state.newregister);
+      const { timer } = yield select(state => state.register);
+      const { mobile, sms_type } = payload;
+      let newCountdowm = countdown;
+      let newCounting = counting;
+      yield put({
+        type: 'updateState',
+        payload: {
+          gettingVerifyCoding: true,
+          counting: false,
+        },
+      });
+      const verifycodehide = message.loading('正在获取验证码....', 0);
+      const data = yield call(newregister.getVerifyCode, { mobile, sms_type });
+      if (data.code === 200) {
+        console.log(data, 'data');
+        setTimeout(verifycodehide);
+        message.success('验证码获取成功', 1);
+        yield put({
+          type: 'updateState',
+          payload: {
+            gettingVerifyCoding: false,
+          },
+        });
+        newCounting = true;
+        yield put({
+          type: 'updateState',
+          payload: {
+            counting: newCounting,
+          },
+        });
+        const setTimer = setInterval(() => {
+          newCountdowm--;
+          if (newCountdowm <= 0) {
+            newCountdowm = 60;
+            newCounting = false;
+            clearInterval(setTimer);
+          }
+          payload.dispatch({
+            type: 'newregister/updateState',
+            payload: {
+              countdown: newCountdowm,
+              counting: newCounting,
+              timer: setTimer,
+            },
+          });
+        }, 1000);
+      } else {
+        setTimeout(verifycodehide);
+        yield put({
+          type: 'updateState',
+          payload: {
+            gettingVerifyCoding: false,
+            counting: false,
+            countdown: 60,
+          },
+        });
+        message.error(data.msg, 1);
+      }
+    },
+    * getMobile({ payload }, { call, put, select }) {
+      yield put({
+        type: 'updateState',
+        payload: {
+          mobile: payload.mobile,
+        },
+      });
+    },
+    * gologin({ payload }, { call, put, select }) {
+      const action = {
+        pathname: '/login',
+      };
+      if (payload.mobile !== '') {
+        action.search = queryString.stringify({
+          mobile: payload.mobile,
+        });
+      }
+      yield put(routerRedux.push(action));
+    },
+    * goVerifyLogin({ payload }, { call, put, select }) {
+      const action = {
+        pathname: '/login',
+      };
+      if (payload.mobile !== '') {
+        action.search = queryString.stringify({
+          mobile: payload.mobile,
+        });
+      }
+      yield put(routerRedux.push(action));
+    },
+    * unloadstate({ payload }, { call, put, select }) {
+      const { timer } = yield select(state => state.register);
+      if (timer) clearInterval(timer);
+
+      yield put({
+        type: 'updateState',
+        payload: {
+          mobile: '',
+          gettingVerifyCoding: false, // 防止获取验证码重复提交
+          countdown: 60,
+          counting: false,
+          registering: false,
+        },
+      });
+    },
+    * setlocation({ payload }, { call, put, select }) {
+      const {
+        locationAddress, province, city, district,
+      } = yield select(state => state.schooladd);
+      yield put({
+        type: 'updateState',
+        payload: {
+          location_address: province + city + district + locationAddress,
+        },
+      });
+    },
+    * pageInit({ payload }, { call, put, select }) {
+      yield put({
+        type: 'updateState',
+        payload: {
+          mobile: '',
+          gettingVerifyCoding: false, // 防止获取验证码重复提交
+          countdown: 60,
+          counting: false,
+          registering: false,
+          resolves: [],
+          modalVisible: false,
+          protocolData: '',
+          timer: null,
+          location_address: '',
+        },
+      });
+    },
+  },
+  reducers: {
+    updateState(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+};

src/pages/deployschool/index.js

+import React from 'react';
+import { connect } from 'dva';
+import qs from 'qs';
+import { Row, Col, Form, Input, Button, Icon, Select, Cascader, message, Modal } from 'antd';
+import pageStyle from './index.less';
+import disData from '../../common/dis.data';
+import { LocalStorage, SessionStorage, pageIn } from '../../utils/index';
+const { TextArea } = Input;
+const { Option } = Select;
+const FormItem = Form.Item;
+class DeploySchoolForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      deployVisible: false,
+    };
+  }
+  componentDidMount() {
+    pageIn('轻校-注册页面');
+  }
+  handleClick = () => {
+    this.setState({
+      deployVisible: true,
+    });
+  }
+  handleCancelDeploy = () => {
+    this.setState({
+      deployVisible: false,
+    });
+  }
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    const {
+      countdown,
+    } = this.props;
+    const { deployVisible } = this.state;
+    const tailFormItemLayout = {
+      wrapperCol: {
+        xs: {
+          span: 24,
+          offset: 0,
+        },
+        sm: {
+          span: 16,
+          offset: 5,
+        },
+      },
+    };
+    const typeList = [
+      { id: 1, title: '书法练字', img: '/developschool/type_icon1.png' },
+      { id: 2, title: '美术创意', img: '/developschool/type_icon2.png' },
+      { id: 3, title: '体育跆拳道', img: '/developschool/type_icon3.png' },
+      { id: 4, title: '口才表演', img: '/developschool/type_icon4.png' },
+      { id: 5, title: 'K12辅导', img: '/developschool/type_icon5.png' },
+      { id: 6, title: '其他', img: '/developschool/type_default.png' },
+    ];
+    return (
+      <div className={`login register ${pageStyle.logincontainer}`}>
+        <div className={pageStyle.header}>
+          <img src={`${__IMGCDN__}qxlogo3.png`} className={pageStyle.headerlogo} alt="轻校" />
+        </div>
+        <div className={pageStyle.content}>
+          <h3><Icon style={{ color: '#52c41a', marginRight: 10 }} type="check-circle" theme="filled" />恭喜您！校区创建成功，快去给校区部署内容吧！</h3>
+          <h2>选择你的机构类型偏好</h2>
+          <p>开启个性化机构内容部署服务</p>
+          <div className={pageStyle.typeList}>
+            {
+              typeList.map((item, index) => {
+                return (
+                  <div className={pageStyle.typeItem}>
+                    <div className={pageStyle.typeImg}>
+                      <img className={pageStyle.img} src={`${__IMGCDN__}${item.img}`} alt="" />
+                      <img className={pageStyle.checkImg} src={`${__IMGCDN__}/developschool/un_checked.png`} alt="" />
+                    </div>
+                    <div className={pageStyle.typeSize}>{item.title}</div>
+                  </div>
+                );
+              })
+            }
+          </div>
+          <Button type="primary" className={pageStyle.createBtn} onClick={this.handleClick}>一键部署（80999位校长已部署）</Button>
+          <Modal
+            visible={deployVisible}
+            onOk={this.handlePositionOk}
+            onCancel={this.handleCancelDeploy}
+            cancelText="取消"
+            okText="确认"
+            width={990}
+            height={625}
+            bodyStyle={{ padding: '30px 0' }}
+            footer={null}
+            maskClosable={false}
+            keyboard={false}
+            closable={false}
+          >
+            <div className={pageStyle.modalWrap}>
+              <h3>校区一键部署</h3>
+              <p>所有一键部署的内容后期都可以修改调整！十分便利</p>
+              <div className={pageStyle.stepBox}>
+                <div className={pageStyle.stepWrap}>
+                  <div className={pageStyle.stepLeft}>教务部署</div>
+                  <div className={pageStyle.stepRight}>
+                    <div className={pageStyle.lineBox}>
+                      <div className={pageStyle.circle}>
+                        {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
+                      </div>
+                      <div className={pageStyle.line}>
+                        <div className={pageStyle.innerBlueLine}></div>
+                      </div>
+                      <div className={pageStyle.circle}>
+                        {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
+                      </div>
+                      <div className={pageStyle.line}>
+                        <div className={pageStyle.innerBlueLine}></div>
+                      </div>
+                      <div className={pageStyle.circle}>
+                        {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
+                      </div>
+                      <div className={pageStyle.line}>
+                        <div className={pageStyle.innerBlueLine}></div>
+                      </div>
+                      <div className={pageStyle.circle}>
+                        {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
+                      </div>
+                      <div className={pageStyle.line}>
+                        <div className={pageStyle.innerBlueLine}></div>
+                      </div>
+                      <div className={pageStyle.circle}>
+                        {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
+                      </div>
+                    </div>
+                    <div className={pageStyle.lineTitleWrap}>
+                      <div className={pageStyle.lineTitle}>课程创建</div>
+                      <div className={pageStyle.lineTitle}>班级创建</div>
+                      <div className={pageStyle.lineTitle}>实例学员</div>
+                      <div className={pageStyle.lineTitle}>实例排课</div>
+                      <div className={pageStyle.lineTitle}>实例点名</div>
+                    </div>
+                  </div>
+                </div>
+                <div className={pageStyle.stepWrap}>
+                  <div className={pageStyle.stepLeft}>督学营销</div>
+                  <div className={pageStyle.stepRight}>
+                    <div className={pageStyle.lineBox}>
+                      <div className={pageStyle.circle}>
+                        {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
+                      </div>
+                      <div className={pageStyle.line}>
+                        <div className={pageStyle.innerBlueLine}></div>
+                      </div>
+                      <div className={pageStyle.circle}>
+                        {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
+                      </div>
+                      <div className={pageStyle.line}>
+                        <div className={pageStyle.innerBlueLine}></div>
+                      </div>
+                      <div className={pageStyle.circle}>
+                        {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
+                      </div>
+                      <div className={pageStyle.line}>
+                        <div className={pageStyle.innerBlueLine}></div>
+                      </div>
+                      <div className={pageStyle.circle}>
+                        {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
+                      </div>
+                    </div>
+                    <div className={pageStyle.lineTitleWrap}>
+                      <div className={pageStyle.lineTitle}>打卡作业</div>
+                      <div className={pageStyle.lineTitle}>日历打卡</div>
+                      <div className={pageStyle.lineTitle}>闯关打卡</div>
+                      <div className={pageStyle.lineTitle}>积分商城</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Modal>
+        </div>
+      </div>
+    );
+  }
+}
+const DeploySchool = Form.create()(DeploySchoolForm);
+DeploySchool.propTypes = {
+
+
+};
+function mapStateToProps(state) {
+  const {
+    gettingVerifyCoding, countdown, counting, registering, resolves, modalVisible, protocolData,
+    location_address,
+  } = state.newregister;
+  const { locationQuery } = state.webapp;
+  return {
+    gettingVerifyCoding,
+    countdown,
+    counting,
+    registering,
+    resolves,
+    locationQuery,
+    modalVisible,
+    protocolData,
+    location_address,
+  };
+}
+export default connect(mapStateToProps)(DeploySchool);

src/pages/deployschool/index.less

+@import '../../less/variables.less';
+.header {
+    height: 64px;
+    padding-left: 34px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+}
+.headerlogo {
+    height: 40px;
+    display: block;
+}
+.content {
+    text-align: center;
+    margin-top: 20px;
+    &>h3 {
+        font-size:20px;
+        font-family:PingFang SC;
+        font-weight:bold;
+        color:rgba(0,0,0,1);
+    }
+    &>h2 {
+        font-size:26px;
+        font-family:PingFang SC;
+        font-weight:bold;
+        color:rgba(0,0,0,1);
+        margin-top: 100px;
+    }
+    &>p {
+        font-size:22px;
+        color:#636363;
+        font-weight: 400;
+    }
+}
+.typeList {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 40px;
+    .typeItem {
+        .typeImg {
+            width: 115px;
+            height: 115px;
+            position: relative;
+            margin-right: 30px;
+            cursor: pointer;
+            .img {
+                width: 115px;
+                height: 115px;
+                //box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.08);
+                border-radius: 50%;
+            }
+            .checkImg {
+                width: 34px;
+                height: 34px;
+                position: absolute;
+                bottom: 0;
+                right: 0;
+            }
+        }
+        .typeSize {
+            font-size:16px;
+            font-family:PingFang SC;
+            font-weight:bold;
+            color:rgba(33,33,33,1);
+            margin-top: 10px;
+        }
+    }
+}
+.createBtn {
+    height: 60px;
+    line-height: 60px;
+    font-size: 16px;
+    color: #fff;
+    margin-top: 110px;
+    width: 390px;
+}
+.modalWrap {
+    text-align: center;
+    &>h3 {
+        font-size:26px;
+        font-family:PingFang SC;
+        font-weight:bold;
+        color:rgba(0,0,0,1);
+    }
+    &>p {
+        font-size:22px;
+        font-family:PingFang SC;
+        font-weight:400;
+        color: #636363;
+    }
+    .stepBox {
+        width: 700px;
+        margin: 0 auto;
+        .stepWrap {
+            display: flex;
+            align-items: center;
+            margin-top: 70px;
+            .stepLeft {
+                font-size:20px;
+                font-family:PingFang SC;
+                font-weight:bold;
+                color:rgba(85,85,85,1);
+                margin-right: 70px;
+            }
+            .stepRight {
+                .lineBox {
+                    display: flex;
+                    align-items: center;
+                }
+                .circle {
+                    width: 23px;
+                    height: 23px;
+                    border-radius: 50%;
+                    border: 6px solid #DCDCDC;
+                }
+                .line {
+                    width: 92px;
+                    height:4px;
+                    background:rgba(220,220,220,1);
+                }
+                .lineTitleWrap {
+                    display: flex;
+                    align-items: center;
+                    margin-left: -15px;
+                    .lineTitle {
+                        font-size:18px;
+                        font-family:PingFang SC;
+                        font-weight:500;
+                        color:rgba(210,210,210,1);
+                        line-height:30px;
+                        padding-right: 40px;
+                    }
+                }
+
+            }
+        }
+
+    }
+}

src/pages/newregister/index.less

@@ -2,26 +2,24 @@
 @images: '@{imagesroot}/login/';
 .loginbg{
     min-width: 600px;
-    height: ~"calc(100vh - 64px)";
+    height: ~"calc(100vh - 300px)";
     display: flex;
     align-items: center;
     justify-content: center;
 }
 .logincontainer {
     height: 100vh;
-    background-image: url('@{imagesroot}loginbg.png');
-    background-size: cover;
 }
 .loginformcontent{
-    width: 1000px;
-    // height: 600px;
-    background-color: #fff;
-    margin: 0 auto;
-    border-radius: 20px;
-    box-shadow:0px 6px 24px 0px rgba(0,0,0,0.08);
-    height: 600px;
-    display: flex;
-    overflow: hidden;
+    //width: 1000px;
+    //// height: 600px;
+    //background-color: #fff;
+    //margin: 0 auto;
+    //border-radius: 20px;
+    //box-shadow:0px 6px 24px 0px rgba(0,0,0,0.08);
+    //height: 600px;
+    //display: flex;
+    //overflow: hidden;
 }
 .qxdescbox {
     flex: 1;
@@ -63,10 +61,10 @@
     letter-spacing: 2px;
 }
 .loginform {
-    max-width: 400px;
     margin-bottom: 20px;
     margin: 0 auto;
     padding-top: 48px;
+    width: 440px;
 }
 .loginformforgot {
     color: #22B8FF;
@@ -102,17 +100,26 @@
     height: 52px;
     line-height: 52px;
     width: 100%;
-    background-color: #1BB6FE;
+    background-color: #1890FF;
     border: none;
+    font-size: 16px;
 }
 .loginformbutton:hover {
-    background-color: #1BB6FE;
+    background-color: #1890FF;
 }
 .loginformbutton:active {
-    background-color: #1BB6FE;
+    background-color: #1890FF;
 }
 .loginformbutton:focus {
-    background-color: #1BB6FE;
+    background-color: #1890FF;
+}
+.formTip {
+    font-size:12px;
+    font-weight:400;
+    color:#acacac;
+    display: flex;
+    justify-content: flex-end;
+    line-height: 1.6;
 }
 .verycodebtn {
     width: 100%;
@@ -121,7 +128,7 @@
     text-align: right;
     // border-color: #0000ff;
     color: rgba(27,182,254,1);;
-    border-radius: none;
+    border-radius: 0;
     padding-right: 14px;
     font-size: 14px;
     cursor: pointer;
@@ -278,14 +285,14 @@
     align-items: center;
     justify-content: center;
     line-height: 1;
-    margin-top: 47px;
+    margin-top: 30px;
 }
 .noaccount {
     color: #959595;
     font-size: 14px;
 }
 .goregister {
-    color: #1BB6FE;
+    color: #1890FF;
     cursor: pointer;
     font-size: 14px;
 }
@@ -305,4 +312,4 @@
     width: 22px;
     height: 11px;
     cursor: pointer;
-}
\ No newline at end of file
+}

src/router.js

@@ -185,6 +185,17 @@ const CalendarClock = props => (
     { CalendarClock => (<CalendarClock {...props} />) }
   </Bundle>
 );
+const NewRegister = props => (
+  <Bundle load={() => import(/* webpackChunkName:"NewRegister" */'./pages/newregister/index')}>
+    { NewRegister => (<NewRegister {...props} />) }
+  </Bundle>
+);
+const DeploySchool = props => (
+  <Bundle load={() => import(/* webpackChunkName:"DeploySchool" */'./pages/deployschool/index')}>
+    { DeploySchool => (<DeploySchool {...props} />) }
+  </Bundle>
+);
+
 function RouterConfig({ history }) {
   return (
     <ConfigProvider locale={zhCN}>
@@ -248,6 +259,8 @@ function RouterConfig({ history }) {
           <Route path="/login" exact component={Login} />
           <Route path="/register" exact component={Register} />
           <Route path="/rechargedesc" exact component={RechargeDesc} />
+          <Route path="/newregister" exact component={NewRegister} />
+          <Route path="/deploySchool" exact component={DeploySchool} />
           <Route path="/404" render={() => (<Errorpage />)} />
         </Switch>
       </Router>

src/services/newregister.js

+import qs from 'qs';
+import request from '../utils/request';
+import api from '../common/api';
+export function register(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.newRegister.register}`,
+    method: 'POST',
+    data,
+    needAuth: false,
+  });
+}
+export function getVerifyCode(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.newRegister.send_code}`,
+    method: 'POST',
+    data,
+    needAuth: false,
+  });
+}
+

src/utils/request.js

@@ -66,6 +66,7 @@ export default function request(options) {
         message: 'error'
       }
     }
+    console.log(user, 'user');
     options.headers = {
       Authorization: `bearer ${user.token}`
     }