Skip to content

B
biz.qingxiao.com
Commit 77958b28 authored by baixian's avatar baixian
Browse files
Options

一键部署功能完成

parent a50a5b22
Hide whitespace changes
Inline Side-by-side
Showing with 273 additions and 51 deletions
src/common/api.js
View file @ 77958b28
......@@ -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
View file @ 77958b28
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
View file @ 77958b28
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
View file @ 77958b28
......@@ -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
View file @ 77958b28
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
View file @ 77958b28
......@@ -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
View file @ 77958b28
......@@ -66,7 +66,6 @@ export default function request(options) {
message: 'error'
}
}
console.log(user, 'user');
options.headers = {
Authorization: `bearer ${user.token}`
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment