一键部署功能完成

src/common/api.js

@@ -180,4 +180,5 @@ export default {
     change_password: `${dakaapi}member/erp/account/change_password`,
     send_code: `${dakaapi}common/sms`,
   },
+  deployschool: `${dakaapi}member/one_key_deploy`,
 };

src/models/newregister.js

-
 import { routerRedux } from 'dva/router';
-import queryString from 'qs';
 import { message } from 'antd';
-import errorcode from '../common/errorcode';
+import queryString from 'qs';
+import { delay } from 'redux-saga';
 import {
   LocalStorage,
   SessionStorage,
   isExpired,
 } from '../utils/index';
-import * as login from '../services/login';
+import errorcode from '../common/errorcode';
 import * as newregister from '../services/newregister';
 import * as schoolajax from '../services/schooladd';
 export default {
@@ -24,6 +23,7 @@ export default {
     protocolData: '',
     timer: null,
     location_address: '',
+    deployType: 3, // 类型 1-口才 2-美术 3-书法 4-跆拳道 5-通用
   },
   subscriptions: {
     setup({ dispatch, history }) {  // eslint-disable-line
@@ -54,7 +54,6 @@ export default {
         password,
         from,
       });
-      console.log(data, 'data');
       if (data.code === 200) {
         if (data.data && data.data.token) {
           LocalStorage.setItem('user', {
@@ -91,6 +90,21 @@ export default {
           area: district,
           token: data.data.token,
         });
+        if (schooladd.code === 200) {
+          LocalStorage.setItem('sid', schooladd.data.id);
+          yield put({
+            type: 'webapp/updateState',
+            payload: {
+              sid: LocalStorage.getItem('sid'),
+            },
+          });
+          yield put({
+            type: 'updateState',
+            payload: {
+              schoolId: schooladd.data.id,
+            },
+          });
+        }
         yield put({
           type: 'updateState',
           payload: {
@@ -99,6 +113,22 @@ export default {
             location_address: '',
           },
         });
+        yield put({
+          type: 'schooladd/updateState',
+          payload: {
+            longitude: '',
+            latitude: '',
+            locationAddress: '',
+            province: '',
+            city: '',
+            district: '',
+            address: '',
+          },
+        });
+        yield delay(200);
+        yield put(routerRedux.push({
+          pathname: '/deploySchool',
+        }));
       } else {
         message.error(data.msg, 1);
         yield put({
@@ -114,6 +144,34 @@ export default {
         pathname: '/userinfo',
       }));
     },
+    * developSchool({ payload }, { call, put, select }) {
+      const { deployType, schoolId } = yield select(state => state.newregister);
+      const { sid } = yield select(state => state.webapp);
+      const data = yield call(newregister.deploySchool, {
+        school_id: schoolId || sid,
+        type: deployType,
+      });
+      if (data.code == 200) {
+        yield put({
+          type: 'updateState',
+          payload: {
+            deployType: 3,
+          },
+        });
+      } else {
+        yield put({
+          type: 'webapp/errorrequestresolve',
+          payload: {
+            data,
+          },
+        });
+      }
+    },
+    * goHome({ payload }, { put }) {
+      yield put(routerRedux.push({
+        pathname: '/sjd/indexstaic',
+      }));
+    },
     * getverifycode({ payload }, { call, put, select }) {
       const { countdown, counting, gettingVerifyCoding } = yield select(state => state.newregister);
       const { timer } = yield select(state => state.register);
@@ -130,7 +188,6 @@ export default {
       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({
@@ -208,7 +265,6 @@ export default {
     * unloadstate({ payload }, { call, put, select }) {
       const { timer } = yield select(state => state.register);
       if (timer) clearInterval(timer);
-
       yield put({
         type: 'updateState',
         payload: {
@@ -245,6 +301,7 @@ export default {
           protocolData: '',
           timer: null,
           location_address: '',
+          deployType: 3,
         },
       });
     },

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;
@@ -14,27 +12,83 @@ class DeploySchoolForm extends React.Component {
     this.state = {
       deployVisible: false,
       curStep: 1,
+      numberPercent: 1,
     };
   }
   componentDidMount() {
     pageIn('轻校-注册页面');
+    clearInterval(this.timeInterver);
+    clearInterval(this.numberInterver);
+  }
+  componentWillUnmount() {
   }
   handleClick = () => {
+    const { curStep, numberPercent } = this.state;
+    const { dispatch } = this.props;
     this.setState({
       deployVisible: true,
     });
+    clearInterval(this.timeInterver);
+    clearInterval(this.numberInterver);
+    this.timeInterver = setInterval(() => {
+      if (curStep >= 10) {
+        clearInterval(this.timeInterver);
+        return;
+      }
+      if (curStep === 4) {
+        this.setState({
+          curStep: 5,
+        });
+      } else {
+        this.setState({
+          curStep: this.state.curStep += 1,
+        });
+      }
+    }, 500);
+    this.numberInterver = setInterval(() => {
+      if (numberPercent === 100) {
+        clearInterval(this.numberInterver);
+        return;
+      }
+      this.setState({
+        numberPercent: this.state.numberPercent += 1,
+      });
+    }, 45);
+    dispatch({
+      type: 'newregister/developSchool',
+      payload: {
+      },
+    });
   }
   handleCancelDeploy = () => {
     this.setState({
       deployVisible: false,
     });
   }
+  handleChooseType = (id) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'newregister/updateState',
+      payload: {
+        deployType: id,
+      },
+    });
+  }
+  goHome = () => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'newregister/goHome',
+      payload: {
+      },
+    });
+  }
   render() {
     const { getFieldDecorator } = this.props.form;
     const {
       countdown,
+      deployType,
     } = this.props;
-    const { deployVisible, curStep } = this.state;
+    const { deployVisible, curStep, numberPercent } = this.state;
     const tailFormItemLayout = {
       wrapperCol: {
         xs: {
@@ -48,12 +102,11 @@ class DeploySchoolForm extends React.Component {
       },
     };
     const typeList = [
-      { id: 1, title: '书法练字', img: '/developschool/type_icon1.png' },
+      { id: 3, 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' },
+      { id: 4, title: '体育跆拳道', img: '/developschool/type_icon3.png' },
+      { id: 1, title: '口才表演', img: '/developschool/type_icon4.png' },
+      { id: 5, title: '通用', img: '/developschool/type_default.png' },
     ];
     return (
       <div className={`login register ${pageStyle.logincontainer}`}>
@@ -68,10 +121,13 @@ class DeploySchoolForm extends React.Component {
             {
               typeList.map((item, index) => {
                 return (
-                  <div className={pageStyle.typeItem}>
+                  <div className={pageStyle.typeItem} onClick={() => this.handleChooseType(item.id)}>
                     <div className={pageStyle.typeImg}>
                       <img className={pageStyle.img} src={`${__IMGCDN__}${item.img}`} alt="" />
-                      <img className={pageStyle.checkImg} src={`${__IMGCDN__}/developschool/un_checked.png`} alt="" />
+                      {
+                        deployType === Number(item.id) ? <img className={pageStyle.checkImg} src={`${__IMGCDN__}/developschool/checked.png`} alt="" />
+                        : <img className={pageStyle.checkImg} src={`${__IMGCDN__}/developschool/un_checked.png`} alt="" />
+                      }
                     </div>
                     <div className={pageStyle.typeSize}>{item.title}</div>
                   </div>
@@ -115,27 +171,27 @@ class DeploySchoolForm extends React.Component {
                         <div className={curStep >= 2 ? pageStyle.innerBlueShow : pageStyle.innerBlueLine}></div>
                       </div>
                       <div className={curStep >= 3 ? pageStyle.checkedcircle : pageStyle.circle}>
-                        {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
+                        <img src={`${__IMGCDN__}/developschool/modal_circle_checked.png`} alt="" />
                       </div>
                       <div className={pageStyle.line}>
                         <div className={curStep >= 3 ? pageStyle.innerBlueShow : pageStyle.innerBlueLine}></div>
                       </div>
                       <div className={curStep >= 4 ? pageStyle.checkedcircle : pageStyle.circle}>
-                        {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
+                        <img src={`${__IMGCDN__}/developschool/modal_circle_checked.png`} alt="" />
                       </div>
                       <div className={pageStyle.line}>
                         <div className={curStep >= 4 ? pageStyle.innerBlueShow : pageStyle.innerBlueLine}></div>
                       </div>
                       <div className={curStep >= 5 ? pageStyle.checkedcircle : pageStyle.circle}>
-                        {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
+                        <img src={`${__IMGCDN__}/developschool/modal_circle_checked.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 className={curStep >= 1 ? pageStyle.lineTitleActive : pageStyle.lineTitle}>课程创建</div>
+                      <div className={curStep >= 2 ? pageStyle.lineTitleActive : pageStyle.lineTitle}>班级创建</div>
+                      <div className={curStep >= 3 ? pageStyle.lineTitleActive : pageStyle.lineTitle}>实例学员</div>
+                      <div className={curStep >= 4 ? pageStyle.lineTitleActive : pageStyle.lineTitle}>实例排课</div>
+                      <div className={curStep >= 5 ? pageStyle.lineTitleActive : pageStyle.lineTitle}>实例点名</div>
                     </div>
                   </div>
                 </div>
@@ -143,33 +199,33 @@ class DeploySchoolForm extends React.Component {
                   <div className={pageStyle.stepLeft}>督学营销</div>
                   <div className={pageStyle.stepRight1}>
                     <div className={pageStyle.lineBox}>
-                      <div className={pageStyle.circle}>
-                        {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
+                      <div className={curStep >= 6 ? pageStyle.checkedcircle : pageStyle.circle}>
+                        <img src={`${__IMGCDN__}/developschool/modal_circle_checked.png`} alt="" />
                       </div>
                       <div className={pageStyle.line}>
-                        <div className={pageStyle.innerBlueLine}></div>
+                        <div className={curStep >= 6 ? pageStyle.innerBlueShow : pageStyle.innerBlueLine}></div>
                       </div>
-                      <div className={pageStyle.circle}>
-                        {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
+                      <div className={curStep >= 7 ? pageStyle.checkedcircle : pageStyle.circle}>
+                        <img src={`${__IMGCDN__}/developschool/modal_circle_checked.png`} alt="" />
                       </div>
                       <div className={pageStyle.line}>
-                        <div className={pageStyle.innerBlueLine}></div>
+                        <div className={curStep >= 7 ? pageStyle.innerBlueShow : pageStyle.innerBlueLine}></div>
                       </div>
-                      <div className={pageStyle.circle}>
-                        {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
+                      <div className={curStep >= 8 ? pageStyle.checkedcircle : pageStyle.circle}>
+                        <img src={`${__IMGCDN__}/developschool/modal_circle_checked.png`} alt="" />
                       </div>
                       <div className={pageStyle.line}>
-                        <div className={pageStyle.innerBlueLine}></div>
+                        <div className={curStep >= 8 ? pageStyle.innerBlueShow : pageStyle.innerBlueLine}></div>
                       </div>
-                      <div className={pageStyle.circle}>
-                        {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
+                      <div className={curStep >= 9 ? pageStyle.checkedcircle : pageStyle.circle}>
+                        <img src={`${__IMGCDN__}/developschool/modal_circle_checked.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={curStep >= 6 ? pageStyle.lineTitleActive : pageStyle.lineTitle}>打卡作业</div>
+                      <div className={curStep >= 7 ? pageStyle.lineTitleActive : pageStyle.lineTitle}>日历打卡</div>
+                      <div className={curStep >= 8 ? pageStyle.lineTitleActive : pageStyle.lineTitle}>闯关打卡</div>
+                      <div className={curStep >= 9 ? pageStyle.lineTitleActive : pageStyle.lineTitle}>积分商城</div>
                     </div>
                   </div>
                 </div>
@@ -177,16 +233,22 @@ class DeploySchoolForm extends React.Component {
                   <div className={pageStyle.stepLeft} style={{ marginRight: 40 }}>个性化展示</div>
                   <div className={pageStyle.stepRight}>
                     <div className={pageStyle.lineBox}>
-                      <div className={pageStyle.circle}>
-                        {/* <img src={`${__IMGCDN__}/developschool/modal_circle.png`} alt="" /> */}
+                      <div className={curStep >= 10 ? pageStyle.checkedcircle : pageStyle.circle}>
+                        <img src={`${__IMGCDN__}/developschool/modal_circle_checked.png`} alt="" />
                       </div>
                     </div>
                     <div className={pageStyle.lineTitleWrap}>
-                      <div className={pageStyle.lineTitle}>个性微官网</div>
+                      <div className={curStep >= 10 ? pageStyle.lineTitleActive : pageStyle.lineTitle}>个性微官网</div>
                     </div>
                   </div>
                 </div>
               </div>
+              <div className={pageStyle.progress} style={{ border: numberPercent > 100 ? 'none' : '' }}>
+                {
+                  numberPercent < 100 ? <div className={deployVisible ? pageStyle.innerAnimation : pageStyle.innerProgress}><div className={pageStyle.innerText}>部署中...{numberPercent}%</div></div>
+                    : <div className={pageStyle.enterIndex} onClick={this.goHome}>进入轻校</div>
+                 }
+              </div>
             </div>
           </Modal>
         </div>
@@ -203,6 +265,7 @@ function mapStateToProps(state) {
   const {
     gettingVerifyCoding, countdown, counting, registering, resolves, modalVisible, protocolData,
     location_address,
+    deployType,
   } = state.newregister;
   const { locationQuery } = state.webapp;
   return {
@@ -215,6 +278,7 @@ function mapStateToProps(state) {
     modalVisible,
     protocolData,
     location_address,
+    deployType,
   };
 }
 export default connect(mapStateToProps)(DeploySchool);

src/pages/deployschool/index.less

@@ -137,11 +137,19 @@
                     margin-left: -15px;
                     .lineTitle {
                         font-size:18px;
-                        font-family:PingFang SC;
                         font-weight:500;
-                        color:rgba(210,210,210,1);
+                        color:#D2D2D2;
                         line-height:30px;
                         padding-right: 40px;
+                        margin-top: 17px;
+                    }
+                    .lineTitleActive {
+                        font-size:18px;
+                        font-weight:500;
+                        color:#4C4C4C;
+                        line-height:30px;
+                        padding-right: 40px;
+                        margin-top: 17px;
                     }
                 }
             }
@@ -155,6 +163,18 @@
                     height: 23px;
                     border-radius: 50%;
                     border: 6px solid #DCDCDC;
+                    &>img {
+                        display: none;
+                    }
+                }
+                .checkedcircle {
+                    width: 23px;
+                    height: 23px;
+                    border-radius: 50%;
+                    &>img {
+                        width: 23px;
+                        height: 23px;
+                    }
                 }
                 .line {
                     width: 130px;
@@ -167,12 +187,21 @@
                     margin-left: -20px;
                     .lineTitle {
                         font-size:18px;
-                        font-family:PingFang SC;
                         font-weight:500;
-                        color:rgba(210,210,210,1);
+                        color:#D2D2D2;
                         line-height:30px;
+                        padding-right: 40px;
+                        margin-top: 17px;
                     }
-                    .lineTitle:not(:last-child) {
+                    .lineTitleActive {
+                        font-size:18px;
+                        font-weight:500;
+                        color:#4C4C4C;
+                        line-height:30px;
+                        padding-right: 40px;
+                        margin-top: 17px;
+                    }
+                    .lineTitle:not(:last-child),.lineTitleActive:not(:last-child) {
                         padding-right: 78px;
                     }
                 }
@@ -215,3 +244,66 @@
         width: 100%;
     }
 }
+.progress {
+    position: relative;
+    width: 630px;
+    height: 48px;
+    margin: 40px 0 30px 177px;
+    background:rgba(255,255,255,1);
+    border:2px solid rgba(220,220,220,1);
+    border-radius:24px;
+    .innerText {
+        width: 100%;
+        font-size:18px;
+        font-family:PingFang SC;
+        font-weight:bold;
+        color:rgba(0,0,0,1);
+        text-align: center;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        z-index: 2;
+    }
+}
+.innerProgress {
+    width: 630px;
+    height: 48px;
+    background:rgba(255,255,255,1);
+    border:2px solid rgba(220,220,220,1);
+    border-radius:24px;
+    text-align: center;
+}
+.innerAnimation{
+    animation: dailogBtnChange 6s linear forwards;
+    width: 630px;
+    height: 48px;
+    background:linear-gradient(90deg,rgba(51,168,255,1),rgba(4,222,254,1));
+    border-radius:24px;
+    text-align: center;
+    line-height: 48px;
+    font-size:18px;
+    font-family:PingFang SC;
+    font-weight:bold;
+    color:rgba(0,0,0,1);
+}
+.enterIndex {
+    width: 630px;
+    height: 48px;
+    background:linear-gradient(90deg,rgba(51,168,255,1),rgba(4,222,254,1));
+    border-radius:24px;
+    text-align: center;
+    line-height: 48px;
+    font-size:18px;
+    font-family:PingFang SC;
+    font-weight:bold;
+    color:#fff;
+    cursor: pointer;
+}
+@keyframes dailogBtnChange{
+    0% {
+        width: 0px;
+    }
+    100% {
+        width: 630px;
+    }
+}

src/pages/login/index.js

 import React from 'react';
 import { connect } from 'dva';
+import { withRouter, Link } from 'dva/router';
 import { Row, Col, Form, Input, Button, Checkbox, message, Tabs } from 'antd';
 import LoginStyles from './index.less';
 import { LocalStorage, imagifyorigin, pageIn } from '../../utils/index';
@@ -230,7 +231,8 @@ class LoginForm extends React.Component {
                   </Form>
                   <div className={LoginStyles.registerbox}>
                     <div className={LoginStyles.noaccount}>还没有账号？</div>
-                    <div className={LoginStyles.goregister} onClick={this.goRegister}>去注册</div>
+                    <Link className={LoginStyles.goregister} to="/newregister" target="_blank">去注册</Link>
+                    {/* <div className={LoginStyles.goregister} onClick={this.goRegister}>去注册</div> */}
                   </div>
                 </div>}
             </div>

src/services/newregister.js

@@ -19,4 +19,11 @@ export function getVerifyCode(params) {
     needAuth: false,
   });
 }
-
+export function deploySchool(params) {
+  const data = qs.stringify(params);
+  return request({
+    url: `${api.deployschool}`,
+    method: 'POST',
+    data,
+  });
+}

src/utils/request.js

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