Skip to content

B
biz.qingxiao.com
Commit 7cd658ea authored by wangxuelai's avatar wangxuelai
Browse files
Options

''

parent 43171c84
Hide whitespace changes
Inline Side-by-side
Showing with 11963 additions and 0 deletions
src/components/UserGuide.js 0 → 100644
View file @ 7cd658ea
import React from 'react';
import { Modal, Button } from 'antd';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import componentStyle from './UserGuide.less';
import { audioorigin } from '../utils/index';
class UserGuide extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
componentDidMount() {
}
componentWillUpdate() {
}
skipGuide = () => {
const { dispatch } = this.props;
dispatch({
type: 'userguide/updateState',
payload: {
guideShow: false, // 引导是否开启
guideStep: 1, // 引导步骤
},
});
}
continueGuide = () => {
const { dispatch, classList, guideStep } = this.props;
let plancoursebtn = null;
let classdetailTab3 = null;
let callwarnbtn = null;
let planwarnbtn = null;
let birthwarnbtn = null;
let paywarnbtn = null;
switch (Number(guideStep)) {
case 1:
dispatch(routerRedux.push({
pathname: '/sjd/course',
}));
break;
case 2:
document.body.style.maxHeight = '100vh';
document.body.style.overflowY = 'hidden';
if (document.getElementById('course_addcourse')) {
document.getElementById('course_addcourse').style.position = '';
document.getElementById('course_addcourse').style.zIndex = '';
}
if (document.getElementById('menu_6')) {
document.getElementById('menu_6').style.position = '';
document.getElementById('menu_6').style.zIndex = '';
}
dispatch(routerRedux.push({
pathname: '/sjd/student',
}));
break;
case 3:
if (document.getElementById('menu_5')) {
document.getElementById('menu_5').style.position = '';
document.getElementById('menu_5').style.zIndex = '';
}
if (document.getElementById('student_addStudent')) {
document.getElementById('student_addStudent').style.position = '';
document.getElementById('student_addStudent').style.zIndex = '';
}
if (document.getElementById('student_bindQrcode')) {
document.getElementById('student_bindQrcode').style.position = '';
document.getElementById('student_bindQrcode').style.zIndex = '';
}
if (document.getElementById('student_inviteQrcode')) {
document.getElementById('student_inviteQrcode').style.position = '';
document.getElementById('student_inviteQrcode').style.zIndex = '';
}
dispatch(routerRedux.push({
pathname: '/sjd/classmgt',
}));
break;
case 4:
if (document.getElementById('class_0')) {
document.getElementById('class_0').style.position = '';
document.getElementById('class_0').style.zIndex = '';
document.getElementById('class_0').style.backgroundColor = '';
}
if (document.getElementById('class_addClass')) {
document.getElementById('class_addClass').style.position = '';
document.getElementById('class_addClass').style.zIndex = '';
}
if (document.getElementById('menu_3')) {
document.getElementById('menu_3').style.position = '';
document.getElementById('menu_3').style.zIndex = '';
}
dispatch(routerRedux.push({
pathname: `/sjd/classdetail/${classList[0].id}`,
query: {
tab: 2,
},
}));
break;
case 5:
if (document.getElementById('classdetail_addStudent')) {
document.getElementById('classdetail_addStudent').style.position = '';
document.getElementById('classdetail_addStudent').style.zIndex = '';
}
if (document.getElementById('menu_3')) {
document.getElementById('menu_3').style.position = '';
document.getElementById('menu_3').style.zIndex = '';
}
dispatch({
type: 'classdetail/tabChange',
payload: {
tab: 1,
},
}).then(() => {
plancoursebtn = document.getElementById('classdetail_plancoursebtn');
classdetailTab3 = document.getElementById('classdetail_tab3');
if (plancoursebtn) {
dispatch({
type: 'userguide/getposition',
payload: {
page: 'classdetailtab1',
doms: {
plancoursebtn,
classdetailTab3,
menuBtn: document.getElementById('menu_3'),
},
},
});
}
});
break;
case 6:
if (document.getElementById('classdetail_plancoursebtn')) {
document.getElementById('classdetail_plancoursebtn').style.position = '';
document.getElementById('classdetail_plancoursebtn').style.zIndex = '';
}
if (document.getElementById('classdetail_tab3')) {
document.getElementById('classdetail_tab3').style.position = '';
document.getElementById('classdetail_tab3').style.zIndex = '';
}
if (document.getElementById('menu_3')) {
document.getElementById('menu_3').style.position = '';
document.getElementById('menu_3').style.zIndex = '';
}
dispatch(routerRedux.push({
pathname: '/sjd/indexstaic',
}));
break;
case 7:
if (document.getElementById('index_studentjoin')) {
document.getElementById('index_studentjoin').style.position = '';
document.getElementById('index_studentjoin').style.zIndex = '';
}
callwarnbtn = document.getElementById('index_callwarn');
if (callwarnbtn) {
dispatch({
type: 'userguide/getposition',
payload: {
page: 'indexstatic2',
doms: {
callwarnbtn,
},
},
});
}
break;
case 8:
if (document.getElementById('index_callwarn')) {
document.getElementById('index_callwarn').style.position = '';
document.getElementById('index_callwarn').style.zIndex = '';
}
planwarnbtn = document.getElementById('index_planwarn');
if (planwarnbtn) {
dispatch({
type: 'userguide/getposition',
payload: {
page: 'indexstatic3',
doms: {
planwarnbtn,
},
},
});
}
break;
case 9:
if (document.getElementById('index_planwarn')) {
document.getElementById('index_planwarn').style.position = '';
document.getElementById('index_planwarn').style.zIndex = '';
}
birthwarnbtn = document.getElementById('index_birthwarn');
if (birthwarnbtn) {
dispatch({
type: 'userguide/getposition',
payload: {
page: 'indexstatic4',
doms: {
birthwarnbtn,
},
},
});
}
break;
case 10:
if (document.getElementById('index_birthwarn')) {
document.getElementById('index_birthwarn').style.position = '';
document.getElementById('index_birthwarn').style.zIndex = '';
}
paywarnbtn = document.getElementById('index_paywarn');
if (paywarnbtn) {
dispatch({
type: 'userguide/getposition',
payload: {
page: 'indexstatic5',
doms: {
paywarnbtn,
},
},
});
}
break;
case 11:
if (document.getElementById('index_paywarn')) {
document.getElementById('index_paywarn').style.position = '';
document.getElementById('index_paywarn').style.zIndex = '';
}
// dispatch({
// type: 'userguide/updateState',
// payload: {
// guideShow: false, // 引导步骤
// guideStep: 1, // 引导步骤
// },
// });
break;
case 12:
document.body.style.maxHeight = 'initial';
document.body.style.overflowY = 'initial';
dispatch({
type: 'userguide/updateState',
payload: {
guideShow: false, // 引导步骤
guideStep: 1, // 引导步骤
},
});
break;
default:
break;
}
const step = guideStep + 1;
dispatch({
type: 'userguide/updateState',
payload: {
guideStep: step, // 引导步骤
},
});
}
render() {
const {
guideShow, guideStep, position,
} = this.props;
return (
<div>
{guideShow &&
<div className={`${componentStyle.UserGuide} UserGuide`}>
<Modal
visible={guideStep == 1}
footer={null}
closable={false}
wrapClassName="UserGuideModal"
title={<div className={componentStyle.modalHeader}><span className={componentStyle.title}>页面新人引导</span><span className={componentStyle.skip} onClick={this.skipGuide}>跳过</span></div>}
>
<img className={componentStyle.guidecover} src={`${__IMGCDN__}guide/guidecover.png`} alt="" />
<div className={componentStyle.guidedesc}>完成以下引导，更快了解教务系统</div>
<div className={componentStyle.btnbox}>
<Button type="primary" onClick={this.continueGuide}>开始引导</Button>
</div>
</Modal>
{guideStep == 2 && position.menuBtn && position.addCourseBtn &&
<div className={componentStyle.guidemask}>
<div className={componentStyle.circledot} style={position.menuBtn} />
<div className={componentStyle.circledot} style={position.addCourseBtn} />
<div
className={componentStyle.textdesc}
style={{
top: position.menuBtn.top - 8,
left: position.addCourseBtn.left + 38,
}}
>
创建机构课程
</div>
{/* 横线 */}
<div
className={componentStyle.linetype1}
style={{
width: (position.addCourseBtn.left - position.menuBtn.right) + 6,
left: position.menuBtn.right + 2,
top: position.menuBtn.top + 8,
}}
/>
{/* 竖线 */}
<div
className={componentStyle.linetype2}
style={{
height: (position.menuBtn.top - position.addCourseBtn.bottom) + 8,
left: position.addCourseBtn.left + 7,
top: position.addCourseBtn.bottom + 2,
}}
/>
<div
className={componentStyle.nextStep}
style={{
top: position.menuBtn.top + 74,
left: position.addCourseBtn.left + 150,
}}
onClick={this.continueGuide}
>
下一步
</div>
</div>
}
{guideStep == 3 && position.addStudentBtn && position.menuBtn && position.bindQrcodeBtn && position.inviteQrcodeBtn &&
<div className={componentStyle.guidemask}>
<div className={componentStyle.circledot} style={position.menuBtn} />
<div className={componentStyle.circledot} style={position.addStudentBtn} />
<div className={componentStyle.circledot} style={position.bindQrcodeBtn} />
<div className={componentStyle.circledot} style={position.inviteQrcodeBtn} />
{/* 横线 */}
<div
className={componentStyle.linetype1}
style={{
width: (position.addStudentBtn.left - position.menuBtn.right) + 6,
left: position.menuBtn.right + 2,
top: position.menuBtn.top + 8,
}}
/>
{/* 横线 */}
<div
className={componentStyle.linetype1}
style={{
width: 30,
left: position.inviteQrcodeBtn.right + 2,
top: position.inviteQrcodeBtn.top + 8,
}}
/>
{/* 竖线 */}
<div
className={componentStyle.linetype2}
style={{
height: (position.menuBtn.top - position.addStudentBtn.bottom) + 8,
left: position.addStudentBtn.left + 7,
top: position.addStudentBtn.bottom + 2,
}}
/>
{/* 竖线 */}
<div
className={componentStyle.linetype2}
style={{
height: 210,
left: position.bindQrcodeBtn.left + 7,
top: position.bindQrcodeBtn.bottom + 2,
}}
/>
<div
className={componentStyle.textdesc}
style={{
top: position.menuBtn.bottom + 24,
left: position.menuBtn.right - 50,
// width
}}
>
① 学员管理添加学员
</div>
<div
className={componentStyle.textdesc}
style={{
top: position.bindQrcodeBtn.bottom + 220,
left: position.bindQrcodeBtn.right - 130,
// width
}}
>
② 添加学员后可生成自助绑定二维码邀请学员绑定<br />自己的微信喔，这样学员就能收到上课，消课等各种服务通知了。
</div>
<div
className={componentStyle.textdesc}
style={{
top: position.inviteQrcodeBtn.top - 8,
left: position.inviteQrcodeBtn.left + 60,
// width
}}
>
③ 如果机构学员过多，逐个添加学员太耗时，<br />可以使用“快捷邀请学员”功能，将二维码发给学员<br />自助报名喔~
</div>
<div
className={componentStyle.nextStep}
style={{
top: position.inviteQrcodeBtn.top + 150,
left: position.inviteQrcodeBtn.left + 300,
}}
onClick={this.continueGuide}
>
下一步
</div>
</div>
}
{guideStep == 4 && position.addClassBtn && position.firstClassBtn &&
<div className={componentStyle.guidemask}>
<div className={componentStyle.circledot} style={position.menuBtn} />
<div className={componentStyle.circledot} style={position.addClassBtn} />
<div className={componentStyle.circledot} style={position.firstClassBtn} />
{/* 横线 */}
<div
className={componentStyle.linetype1}
style={{
width: (position.addClassBtn.left - position.menuBtn.right) + 6,
left: position.menuBtn.right + 2,
top: position.menuBtn.top + 8,
}}
/>
{/* 竖线 */}
<div
className={componentStyle.linetype2}
style={{
height: (position.menuBtn.top - position.addClassBtn.bottom) + 8,
left: position.addClassBtn.left + 7,
top: position.addClassBtn.bottom + 2,
}}
/>
{/* 横线 */}
<div
className={componentStyle.linetype1}
style={{
width: 30,
left: position.firstClassBtn.right + 4,
top: position.firstClassBtn.top + 7,
}}
/>
<div
className={componentStyle.textdesc}
style={{
top: position.addClassBtn.bottom + 90,
left: position.addClassBtn.right + 40,
// width
}}
>
① 添加班级，绑定新建课程，一个班级只能关联一个课程喔
</div>
<div
className={componentStyle.textdesc}
style={{
top: position.firstClassBtn.bottom - 20,
left: position.firstClassBtn.right + 50,
lineHeight: 1,
// width
}}
>
② 添加班级成功后，点击班级名称进入班级详情页
</div>
<div
className={componentStyle.nextStep}
style={{
top: position.firstClassBtn.bottom + 40,
left: position.firstClassBtn.left + 350,
}}
onClick={this.continueGuide}
>
下一步
</div>
</div>
}
{guideStep == 5 && position.addClassStudentbtn &&
<div className={componentStyle.guidemask}>
<div className={componentStyle.circledot} style={position.menuBtn} />
<div className={componentStyle.circledot} style={position.addClassStudentbtn} />
{/* 横线 */}
<div
className={componentStyle.linetype1}
style={{
width: (position.addClassStudentbtn.left - position.menuBtn.right) + 6,
left: position.menuBtn.right + 2,
top: position.menuBtn.top + 8,
}}
/>
{/* 竖线 */}
<div
className={componentStyle.linetype2}
style={{
height: (position.addClassStudentbtn.top - position.menuBtn.bottom) + 2,
left: position.addClassStudentbtn.left + 7,
top: position.menuBtn.bottom - 8,
}}
/>
<div
className={componentStyle.textdesc}
style={{
top: position.menuBtn.bottom + 10,
left: position.addClassStudentbtn.right + 20,
lineHeight: 1,
// width
}}
>
点击添加学员就能把报读该课程的学员添加到班级里面来啦
</div>
<div
className={componentStyle.nextStep}
style={{
top: position.addClassStudentbtn.bottom - 60,
left: position.addClassStudentbtn.left + 370,
}}
onClick={this.continueGuide}
>
下一步
</div>
</div>
}
{guideStep == 6 && position.plancoursebtn &&
<div className={componentStyle.guidemask}>
<div className={componentStyle.circledot} style={position.menuBtn} />
<div className={componentStyle.circledot} style={position.plancoursebtn} />
<div className={componentStyle.circledot} style={position.classdetailTab3} />
{/* 横线 */}
<div
className={componentStyle.linetype1}
style={{
width: (position.plancoursebtn.left - position.menuBtn.right) + 6,
left: position.menuBtn.right + 2,
top: position.menuBtn.top + 8,
}}
/>
{/* 横线 */}
<div
className={componentStyle.linetype1}
style={{
width: (position.classdetailTab3.left - position.plancoursebtn.right),
left: position.plancoursebtn.left + 8,
top: position.classdetailTab3.top + 8,
}}
/>
{/* 竖线 */}
<div
className={componentStyle.linetype2}
style={{
height: (position.plancoursebtn.top - position.menuBtn.bottom) + 2,
left: position.plancoursebtn.left + 7,
top: position.menuBtn.bottom - 8,
}}
/>
<div
className={componentStyle.textdesc}
style={{
top: position.plancoursebtn.bottom + 50,
left: position.plancoursebtn.right - 50,
// lineHeight: 1,
// width
}}
>
① 查看排课信息，点击一键排课。<br />
根据机构课表完成排课。<br />
学员端就能查看课表，收到上课，消课等服务通知啦。
</div>
<div
className={componentStyle.textdesc}
style={{
top: position.classdetailTab3.bottom - 30,
left: position.classdetailTab3.right + 70,
// lineHeight: 1,
// width
}}
>
② 老师点击点名情况进行点名喔。<br />
点名开始时间为上课前2小时。
</div>
<div
className={componentStyle.nextStep}
style={{
top: position.plancoursebtn.bottom,
left: position.plancoursebtn.left + 490,
}}
onClick={this.continueGuide}
>
下一步
</div>
</div>
}
{guideStep == 7 && position.studentjoinbtn &&
<div className={componentStyle.guidemask}>
<div className={componentStyle.circledot} style={position.studentjoinbtn} />
{/* 竖线 */}
<div
className={componentStyle.linetype2}
style={{
height: 50,
left: position.studentjoinbtn.left + 7,
top: position.studentjoinbtn.bottom + 2,
}}
/>
<div
className={componentStyle.textdesc}
style={{
top: position.studentjoinbtn.bottom + 60,
left: position.studentjoinbtn.right - 120,
// lineHeight: 1,
// width
}}
>
学员报名入口：点击填写信息即可为新学员报名喔。
</div>
<div
className={componentStyle.nextStep}
style={{
top: position.studentjoinbtn.bottom + 160,
left: position.studentjoinbtn.left + 300,
}}
onClick={this.continueGuide}
>
下一步
</div>
</div>
}
{guideStep == 8 && position.callwarnbtn &&
<div className={componentStyle.guidemask}>
<div className={componentStyle.circledot} style={position.callwarnbtn} />
{/* 竖线 */}
<div
className={componentStyle.linetype2}
style={{
height: 50,
left: position.callwarnbtn.left + 7,
top: position.callwarnbtn.bottom + 2,
}}
/>
<div
className={componentStyle.textdesc}
style={{
top: position.callwarnbtn.bottom + 60,
left: position.callwarnbtn.right - 120,
// lineHeight: 1,
// width
}}
>
点名提醒：已经上完课的班级如果老师忘记点名，<br />点名提醒中就会增加一条提醒喔，点击立刻跳转至未点名课次；
</div>
<div
className={componentStyle.nextStep}
style={{
top: position.callwarnbtn.bottom + 160,
left: position.callwarnbtn.left + 300,
}}
onClick={this.continueGuide}
>
下一步
</div>
</div>
}
{guideStep == 9 && position.planwarnbtn &&
<div className={componentStyle.guidemask}>
<div className={componentStyle.circledot} style={position.planwarnbtn} />
{/* 竖线 */}
<div
className={componentStyle.linetype2}
style={{
height: 50,
left: position.planwarnbtn.left + 7,
top: position.planwarnbtn.bottom + 2,
}}
/>
<div
className={componentStyle.textdesc}
style={{
top: position.planwarnbtn.bottom + 60,
left: position.planwarnbtn.right - 120,
// lineHeight: 1,
// width
}}
>
分配提醒：如果学员已经购买了课时，老师却迟迟没有给学员分配班级，<br />
就会增加一条分配提醒喔；
</div>
<div
className={componentStyle.nextStep}
style={{
top: position.planwarnbtn.bottom + 160,
left: position.planwarnbtn.left + 300,
}}
onClick={this.continueGuide}
>
下一步
</div>
</div>
}
{guideStep == 10 && position.birthwarnbtn &&
<div className={componentStyle.guidemask}>
<div className={componentStyle.circledot} style={position.birthwarnbtn} />
{/* 竖线 */}
<div
className={componentStyle.linetype2}
style={{
height: 50,
left: position.birthwarnbtn.left + 7,
top: position.birthwarnbtn.bottom + 2,
}}
/>
<div
className={componentStyle.textdesc}
style={{
top: position.birthwarnbtn.bottom + 60,
left: position.birthwarnbtn.right - 120,
// lineHeight: 1,
// width
}}
>
生日提醒：机构学员太多记不住每个学员生日不要紧，<br />
在添加学员时只要输入了学员生日，系统都会及时的提醒老师喔；
</div>
<div
className={componentStyle.nextStep}
style={{
top: position.birthwarnbtn.bottom + 160,
left: position.birthwarnbtn.left + 200,
}}
onClick={this.continueGuide}
>
下一步
</div>
</div>
}
{guideStep == 11 && position.paywarnbtn &&
<div className={componentStyle.guidemask}>
<div className={componentStyle.circledot} style={position.paywarnbtn} />
{/* 竖线 */}
<div
className={componentStyle.linetype2}
style={{
height: 50,
left: position.paywarnbtn.left + 7,
top: position.paywarnbtn.bottom + 2,
}}
/>
<div
className={componentStyle.textdesc}
style={{
top: position.paywarnbtn.bottom + 60,
left: position.paywarnbtn.right - 200,
// lineHeight: 1,
// width
}}
>
续费提醒：学员课时小于等于3时，<br />
就会增加一条续费提醒，<br />
学员也会收到续费提醒的微信服务通知喔；
</div>
<div
className={componentStyle.nextStep}
style={{
top: position.paywarnbtn.bottom + 200,
left: position.paywarnbtn.left - 100,
}}
onClick={this.continueGuide}
>
下一步
</div>
</div>
}
{guideStep == 12 &&
<div className={componentStyle.guidemask}>
<img
src={`${__IMGCDN__}guide/callguide.png`}
className={componentStyle.callguide}
alt=""
style={{
position: 'absolute',
bottom: 27,
left: 400,
}}
/>
<div
className={componentStyle.nextStep}
style={{
bottom: 200,
left: 1000,
}}
onClick={this.continueGuide}
>
完成
</div>
</div>
}
</div>
}
</div>
);
}
}
function mapStateToProps(state) {
const {
guideStep,
guideShow,
position,
} = state.userguide;
const { classList } = state.classmgt;
return {
classList,
guideStep,
guideShow,
position,
};
}
export default connect(mapStateToProps)(UserGuide);
src/components/UserGuide.less 0 → 100644
View file @ 7cd658ea
.UserGuide {
.guidemask {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 103;
background-color: rgba(0, 0, 0, 0.5);
}
.textdesc {
color: #FFFFFF;
font-size: 18px;
font-weight: 700;
position: absolute;
}
.linetype1 { // 横线
height: 2px;
background-color: #fff;
position: absolute;
}
.linetype2 { // 竖向
width: 2px;
position: absolute;
background-color: #fff;
}
.circledot {
width: 16px;
height: 16px;
position: absolute;
z-index: 1;
border-radius: 50%;
border: 2px solid rgba(255,255,255,1);
display: flex;
align-items: center;
justify-content: center;
&::after {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,1);
}
}
.nextStep {
width:95px;
height:32px;
background:rgba(255,182,26,1);
border-radius:4px;
color: #fff;
text-align: center;
line-height: 32px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
position: absolute;
z-index: 1;
}
}
.guidecover {
width: 256px;
height: 132px;
display: block;
margin: 0 auto 27px;
}
.guidedesc {
line-height: 1;
color: #848484;
font-size: 14px;
text-align: center;
margin-bottom: 68px;
}
.btnbox {
text-align: center;
}
.modalHeader {
text-align: center;
position: relative;
line-height: 1;
margin-top: 10px;
.title {
color: #2D2D2D;
font-size: 22px;
font-weight: 700;
}
.skip {
color: #1890FF;
font-size: 14px;
line-height: 22px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.callguide {
}
}
:global {
.UserGuideModal {
.ant-modal-header {
border-bottom: none;
}
}
}
\ No newline at end of file
src/models/deployschool.js 0 → 100644
View file @ 7cd658ea
import { routerRedux } from 'dva/router';
import { message } from 'antd';
import queryString from 'qs';
import { delay } from 'redux-saga';
import {
LocalStorage,
SessionStorage,
isExpired,
} from '../utils/index';
import errorcode from '../common/errorcode';
import * as newregister from '../services/newregister';
import * as schoolajax from '../services/schooladd';
import * as commonajax from '../services/common';
import rootMap from '../common/constants';
export default {
namespace: 'deployschool',
state: {
deployType: 3, // 类型 1-口才 2-美术 3-书法 4-跆拳道 5-通用
sid: 0,
schoolUserInfo: {},
schoolStatus: '', // 1-部署中 2-部署结束
},
subscriptions: {
setup({ dispatch, history }) { // eslint-disable-line
},
},
effects: {
* queryinfo({ payload }, { call, put, select }) { // 释放该页面存储的所有状态
const { id } = payload;
yield put({
type: 'updateState',
payload: {
sid: id,
},
});
yield put({
type: 'querymemberinfo',
});
yield put({
type: 'selectStatus',
});
},
* querymemberinfo({ payload }, { call, put, select }) { // 释放该页面存储的所有状态
const { sid } = yield select(state => state.deployschool);
const nickname = yield call(commonajax.myNickname, {
school_id: sid,
});
if (nickname.code == 200) {
yield put({
type: 'updateState',
payload: {
schoolUserInfo: nickname.data,
},
});
}
},
* selectStatus({ payload }, { call, put, select }) { // 释放该页面存储的所有状态
const { sid } = yield select(state => state.deployschool);
yield put({
type: 'updateState',
payload: {
schoolStatus: '',
},
});
const data = yield call(newregister.selectDeploySchool, {
school_id: sid,
});
if (data.code == 200) {
yield put({
type: 'updateState',
payload: {
schoolStatus: data.data.status,
},
});
}
},
* developSchool({ payload }, { call, put, select }) {
const { deployType, sid } = yield select(state => state.deployschool);
const data = yield call(newregister.deploySchool, {
school_id: sid,
type: deployType,
});
if (data.code == 200) {
yield put({
type: 'updateState',
payload: {
deployType: 3,
},
});
} else {
yield put({
type: 'webapp/errorrequestresolve',
payload: {
data,
},
});
}
},
* developSkip({ payload }, { call, put, select }) {
const { schoolUserInfo, sid } = yield select(state => state.deployschool);
const data = yield call(newregister.deploySchool, {
school_id: sid,
type: 6,
});
if (data.code == 200) {
LocalStorage.setItem('sid', sid);
LocalStorage.setItem('role', schoolUserInfo.schoolTeacher ? schoolUserInfo.schoolTeacher.type : 5);
if (schoolUserInfo.schoolTeacher) {
LocalStorage.setItem('rootMap', rootMap.rootMap);
} else {
LocalStorage.setItem('rootMap', rootMap.emptyRootMap);
}
yield put({
type: 'webapp/updateState',
payload: {
sid,
role: schoolUserInfo.schoolTeacher ? schoolUserInfo.schoolTeacher.type : '',
},
});
yield call(commonajax.schoolLoginTime, {
id: sid,
type: 1,
});
yield put(routerRedux.push({
pathname: '/sjd/indexstaic',
}));
} else {
yield put({
type: 'webapp/errorrequestresolve',
payload: {
data,
},
});
}
},
* goHome({ payload }, { put, call, select }) {
const { schoolUserInfo, sid } = yield select(state => state.deployschool);
LocalStorage.setItem('sid', sid);
LocalStorage.setItem('role', schoolUserInfo.schoolTeacher ? schoolUserInfo.schoolTeacher.type : 5);
if (schoolUserInfo.schoolTeacher) {
LocalStorage.setItem('rootMap', rootMap.rootMap);
} else {
LocalStorage.setItem('rootMap', rootMap.emptyRootMap);
}
yield put({
type: 'webapp/updateState',
payload: {
sid,
role: schoolUserInfo.schoolTeacher ? schoolUserInfo.schoolTeacher.type : '',
},
});
yield call(commonajax.schoolLoginTime, {
id: sid,
type: 1,
});
yield put(routerRedux.push({
pathname: '/sjd/indexstaic',
}));
yield delay(200);
const { screenIsBig } = yield select(state => state.webapp);
if (!screenIsBig) {
return;
}
yield put({
type: 'userguide/updateState',
payload: {
guideShow: true, // 引导是否开启
guideStep: 1, // 引导步骤
},
});
},
* pageInit({ payload }, { call, put, select }) {
yield put({
type: 'updateState',
payload: {
deployType: 3,
schoolStatus: '',
},
});
},
},
reducers: {
updateState(state, { payload }) {
return {
...state,
...payload,
};
},
},
};
src/models/newregister.js 0 → 100644
View file @ 7cd658ea
import { routerRedux } from 'dva/router';
import { message } from 'antd';
import queryString from 'qs';
import { delay } from 'redux-saga';
import {
LocalStorage,
SessionStorage,
isExpired,
} from '../utils/index';
import errorcode from '../common/errorcode';
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,
});
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,
});
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: {
registering: false,
userInfo: LocalStorage.getItem('user'),
location_address: '',
},
});
yield put({
type: 'schooladd/updateState',
payload: {
longitude: '',
latitude: '',
locationAddress: '',
province: '',
city: '',
district: '',
address: '',
},
});
// yield delay(200);
yield put(routerRedux.push({
pathname: `/deploySchool/${schooladd.data.id}`,
}));
}
} else {
message.error(data.msg, 1);
yield put({
type: 'updateState',
payload: {
registering: false,
},
});
}
},
* goToUserInfo({ payload }, { put }) {
yield put(routerRedux.push({
pathname: '/userinfo',
}));
},
* 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);
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) {
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/models/userguide.js 0 → 100644
View file @ 7cd658ea
import { routerRedux } from 'dva/router';
import queryString from 'query-string';
import { message, Modal } from 'antd';
import moment from 'moment';
import { delay } from 'redux-saga';
import errorcode from '../common/errorcode';
import menuConfig from '../common/menuconfig';
import headquartersmenuConfig from '../common/headquartersmenuconfig';
import * as commonajax from '../services/common';
import * as users from '../services/users';
import {
caculateCirclePosition,
} from '../utils/index';
const pathToRegexp = require('path-to-regexp');
export default {
namespace: 'userguide',
state: {
guideShow: false, // 引导是否开启
guideStep: 1, // 引导步骤
position: {},
},
subscriptions: {
setup({ dispatch, history }) {
},
},
effects: {
* getposition({ payload }, { call, put, select }) {
const { page, doms } = payload;
const { screenIsBig } = yield select(state => state.webapp);
if (!screenIsBig) {
return;
}
switch (page) {
case 'course':
doms.addCourseBtn.style.position = 'relative';
doms.addCourseBtn.style.zIndex = 105;
doms.menuBtn.style.position = 'relative';
doms.menuBtn.style.zIndex = 105;
yield put({
type: 'updateState',
payload: {
position: {
addCourseBtn: caculateCirclePosition('bottom', doms.addCourseBtn.getClientRects()[0]),
menuBtn: caculateCirclePosition('right', doms.menuBtn.getClientRects()[0]),
},
},
});
break;
case 'student':
doms.addStudentBtn.style.position = 'relative';
doms.addStudentBtn.style.zIndex = 105;
doms.menuBtn.style.position = 'relative';
doms.menuBtn.style.zIndex = 105;
doms.bindQrcodeBtn.style.position = 'relative';
doms.bindQrcodeBtn.style.zIndex = 105;
doms.inviteQrcodeBtn.style.position = 'relative';
doms.inviteQrcodeBtn.style.zIndex = 105;
yield put({
type: 'updateState',
payload: {
position: {
addStudentBtn: caculateCirclePosition('bottom', doms.addStudentBtn.getClientRects()[0]),
menuBtn: caculateCirclePosition('right', doms.menuBtn.getClientRects()[0]),
bindQrcodeBtn: caculateCirclePosition('bottom', doms.bindQrcodeBtn.getClientRects()[0]),
inviteQrcodeBtn: caculateCirclePosition('right', doms.inviteQrcodeBtn.getClientRects()[0]),
},
},
});
break;
case 'class':
doms.addClassBtn.style.position = 'relative';
doms.addClassBtn.style.zIndex = 105;
doms.menuBtn.style.position = 'relative';
doms.menuBtn.style.zIndex = 105;
doms.firstClassBtn.style.position = 'relative';
doms.firstClassBtn.style.zIndex = 105;
doms.firstClassBtn.style.backgroundColor = '#fff';
yield put({
type: 'updateState',
payload: {
position: {
addClassBtn: caculateCirclePosition('bottom', doms.addClassBtn.getClientRects()[0]),
menuBtn: caculateCirclePosition('right', doms.menuBtn.getClientRects()[0]),
firstClassBtn: caculateCirclePosition('right', doms.firstClassBtn.getClientRects()[0]),
},
},
});
break;
case 'classdetailtab2':
doms.addClassStudentbtn.style.position = 'relative';
doms.addClassStudentbtn.style.zIndex = 105;
doms.menuBtn.style.position = 'relative';
doms.menuBtn.style.zIndex = 105;
yield put({
type: 'updateState',
payload: {
position: {
addClassStudentbtn: caculateCirclePosition('top', doms.addClassStudentbtn.getClientRects()[0]),
menuBtn: caculateCirclePosition('right', doms.menuBtn.getClientRects()[0]),
},
},
});
break;
case 'classdetailtab1':
doms.plancoursebtn.style.position = 'relative';
doms.plancoursebtn.style.zIndex = 105;
doms.menuBtn.style.position = 'relative';
doms.menuBtn.style.zIndex = 105;
doms.classdetailTab3.style.position = 'relative';
doms.classdetailTab3.style.zIndex = 105;
yield put({
type: 'updateState',
payload: {
position: {
plancoursebtn: caculateCirclePosition('top', doms.plancoursebtn.getClientRects()[0]),
classdetailTab3: caculateCirclePosition('left', doms.classdetailTab3.getClientRects()[0]),
menuBtn: caculateCirclePosition('right', doms.menuBtn.getClientRects()[0]),
},
},
});
break;
case 'indexstatic1':
doms.studentjoinbtn.style.position = 'relative';
doms.studentjoinbtn.style.zIndex = 105;
yield put({
type: 'updateState',
payload: {
position: {
studentjoinbtn: caculateCirclePosition('bottom', doms.studentjoinbtn.getClientRects()[0]),
},
},
});
break;
case 'indexstatic2':
doms.callwarnbtn.style.position = 'relative';
doms.callwarnbtn.style.zIndex = 105;
yield put({
type: 'updateState',
payload: {
position: {
callwarnbtn: caculateCirclePosition('bottom', doms.callwarnbtn.getClientRects()[0]),
},
},
});
break;
case 'indexstatic3':
doms.planwarnbtn.style.position = 'relative';
doms.planwarnbtn.style.zIndex = 105;
yield put({
type: 'updateState',
payload: {
position: {
planwarnbtn: caculateCirclePosition('bottom', doms.planwarnbtn.getClientRects()[0]),
},
},
});
break;
case 'indexstatic4':
doms.birthwarnbtn.style.position = 'relative';
doms.birthwarnbtn.style.zIndex = 105;
yield put({
type: 'updateState',
payload: {
position: {
birthwarnbtn: caculateCirclePosition('bottom', doms.birthwarnbtn.getClientRects()[0]),
},
},
});
break;
case 'indexstatic5':
doms.paywarnbtn.style.position = 'relative';
doms.paywarnbtn.style.zIndex = 105;
yield put({
type: 'updateState',
payload: {
position: {
paywarnbtn: caculateCirclePosition('bottom', doms.paywarnbtn.getClientRects()[0]),
},
},
});
break;
default:
break;
}
},
},
reducers: {
save(state, action) {
const newState = state;
newState.count += action.payload;
return { ...state, ...newState };
},
updateState(state, { payload }) {
return {
...state,
...payload,
};
},
},
};
src/pages/deployschool/index.js 0 → 100644
View file @ 7cd658ea
import React from 'react';
import { connect } from 'dva';
import { Row, Col, Form, Input, Button, Icon, Select, Cascader, message, Modal } from 'antd';
import { withRouter, Link } from 'dva/router';
import pageStyle from './index.less';
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,
curStep: 1,
numberPercent: 1,
};
}
componentDidMount() {
pageIn('轻校-注册页面');
clearInterval(this.timeInterver);
clearInterval(this.numberInterver);
}
componentWillUnmount() {
}
handleClick = () => {
const { curStep, numberPercent } = this.state;
const { dispatch } = this.props;
dispatch({
type: 'deployschool/developSchool',
payload: {
},
});
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);
}
handleCancelDeploy = () => {
this.setState({
deployVisible: false,
});
}
handleChooseType = (id) => {
const { dispatch } = this.props;
dispatch({
type: 'deployschool/updateState',
payload: {
deployType: id,
},
});
}
goHome = () => {
const { dispatch } = this.props;
dispatch({
type: 'deployschool/goHome',
payload: {
},
});
}
handleSkip = () => {
const { dispatch } = this.props;
dispatch({
type: 'deployschool/developSkip',
payload: {
},
});
}
handleGoIndex = () => {
const { dispatch } = this.props;
dispatch({
type: 'deployschool/goHome',
payload: {
},
});
}
render() {
const {
deployType,
schoolStatus,
} = this.props;
const { deployVisible, curStep, numberPercent } = this.state;
const typeList = [
{ id: 3, title: '书法练字', img: 'developschool/type_icon1.png' },
{ id: 2, title: '美术创意', img: 'developschool/type_icon2.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}`}>
<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 key={index} className={pageStyle.typeItem} onClick={() => this.handleChooseType(item.id)}>
<div className={pageStyle.typeImg}>
<img className={pageStyle.img} src={`${__IMGCDN__}${item.img}`} alt="" />
{
deployType === Number(item.id) && <div className={pageStyle.imgBg}></div>
}
{
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>
);
})
}
</div>
{
schoolStatus === 2 ?
<div><Button type="primary" className={pageStyle.createBtn} onClick={this.handleGoIndex}>您已部署成功，请直接进入体验</Button></div> :
<div><Button type="primary" className={pageStyle.createBtn} onClick={this.handleClick}>一键部署（30899位校长已部署）</Button></div>
}
<div className={pageStyle.skip} onClick={this.handleSkip}>跳过</div>
<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={curStep >= 1 ? pageStyle.checkedcircle : pageStyle.circle}>
<img src={`${__IMGCDN__}developschool/modal_circle_checked.png`} alt="" />
</div>
<div className={pageStyle.line}>
<div className={curStep >= 1 ? pageStyle.innerBlueShow : pageStyle.innerBlueLine}></div>
</div>
<div className={curStep >= 2 ? pageStyle.checkedcircle : pageStyle.circle}>
<img src={`${__IMGCDN__}developschool/modal_circle_checked.png`} alt="" />
</div>
<div className={pageStyle.line}>
<div className={curStep >= 2 ? pageStyle.innerBlueShow : pageStyle.innerBlueLine}></div>
</div>
<div className={curStep >= 3 ? pageStyle.checkedcircle : pageStyle.circle}>
<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_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_checked.png`} alt="" />
</div>
</div>
<div className={pageStyle.lineTitleWrap}>
<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>
<div className={pageStyle.stepWrap}>
<div className={pageStyle.stepLeft}>督学营销</div>
<div className={pageStyle.stepRight1}>
<div className={pageStyle.lineBox}>
<div className={curStep >= 6 ? pageStyle.checkedcircle : pageStyle.circle}>
<img src={`${__IMGCDN__}developschool/modal_circle_checked.png`} alt="" />
</div>
<div className={pageStyle.line}>
<div className={curStep >= 6 ? pageStyle.innerBlueShow : pageStyle.innerBlueLine}></div>
</div>
<div className={curStep >= 7 ? pageStyle.checkedcircle : pageStyle.circle}>
<img src={`${__IMGCDN__}developschool/modal_circle_checked.png`} alt="" />
</div>
<div className={pageStyle.line}>
<div className={curStep >= 7 ? pageStyle.innerBlueShow : pageStyle.innerBlueLine}></div>
</div>
<div className={curStep >= 8 ? pageStyle.checkedcircle : pageStyle.circle}>
<img src={`${__IMGCDN__}developschool/modal_circle_checked.png`} alt="" />
</div>
<div className={pageStyle.line}>
<div className={curStep >= 8 ? pageStyle.innerBlueShow : pageStyle.innerBlueLine}></div>
</div>
<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={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>
<div className={pageStyle.stepWrap}>
<div className={pageStyle.stepLeft} style={{ marginRight: 50 }}>个性化展示</div>
<div className={pageStyle.stepRight}>
<div className={pageStyle.lineBox}>
<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={curStep >= 10 ? pageStyle.lineTitleActive : pageStyle.lineTitle} style={{ marginLeft: -15 }}>个性微官网</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.innerTextWrap}><div className={pageStyle.innerText}>部署中...{numberPercent}%</div></div></div>
: <div className={pageStyle.enterIndex} onClick={this.goHome}>进入轻校</div>
}
</div>
</div>
</Modal>
</div>
</div>
);
}
}
const DeploySchool = Form.create()(DeploySchoolForm);
DeploySchool.propTypes = {
};
function mapStateToProps(state) {
const {
deployType,
schoolStatus,
} = state.deployschool;
const { locationQuery } = state.webapp;
return {
locationQuery,
deployType,
schoolStatus,
};
}
export default connect(mapStateToProps)(DeploySchool);
src/pages/deployschool/index.less 0 → 100644
View file @ 7cd658ea
@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: 70px;
.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%;
}
.imgBg {
position: absolute;
width: 108px;
height: 108px;
border-radius: 50%;
top: 4px;
left: 4px;
background-color: rgba(0,0,0,0.15);
}
.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: 130px;
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;
&>img {
display: none;
}
}
.checkedcircle {
width: 23px;
height: 23px;
border-radius: 50%;
&>img {
width: 23px;
height: 23px;
}
}
.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-weight:500;
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;
}
}
}
.stepRight1 {
.lineBox {
display: flex;
align-items: center;
}
.circle {
width: 23px;
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;
height:4px;
background:rgba(220,220,220,1);
}
.lineTitleWrap {
display: flex;
align-items: center;
margin-left: -20px;
.lineTitle {
font-size:18px;
font-weight:500;
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;
}
.lineTitle:not(:last-child),.lineTitleActive:not(:last-child) {
padding-right: 78px;
}
}
}
.line {
position: relative;
.innerBlueLine {
width: 0%;
height: 5px;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
background: #21BCFF;
}
.innerBlueShow {
width: 0%;
height: 5px;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
background: #21BCFF;
animation: innerBlueShow .5s forwards;
}
}
}
}
}
@keyframes innerBlueShow{
0% {
width: 0%;
}
30% {
width: 0%;
}
100% {
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;
.innerTextWrap {
width: 630px;
font-size:18px;
height: 48px;
font-family:PingFang SC;
font-weight:bold;
color:rgba(0,0,0,1);
text-align: center;
position: relative;
.innerText {
position: absolute;
width: 100%;
height: 100%;
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;
top:-2px;
left: -1px;
position: absolute;
}
.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);
top:-2px;
left: -1px;
position: absolute;
}
.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;
}
}
.skip {
font-size:16px;
font-family:PingFang SC;
font-weight:400;
color:rgba(99,99,99,1);
line-height:48px;
text-align: center;
margin-top: 45px;
cursor: pointer;
}
src/pages/login/QxLogin.js 0 → 100644
View file @ 7cd658ea
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';
const { TabPane } = Tabs;
const FormItem = Form.Item;
class QxLoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
qxLoginType: 'psd',
qxpwdvisible: false,
};
}
componentDidMount() {
pageIn('轻校-登录页面');
}
componentWillUnmount() {
const { dispatch } = this.props;
dispatch({
type: 'register/unloadstate',
});
}
handleQxSubmit = (e) => {
const { dispatch } = this.props;
const { qxLoginType } = this.state;
e.preventDefault();
this.props.form.validateFields((err, values) => {
const {
mobile, code, needlogin, password,
} = values;
if (!err) {
if (qxLoginType == 'verifycode') {
dispatch({
type: 'login/qxLogin',
payload: {
mobile,
code,
type: 'verify',
needlogin: true,
},
});
} else if (qxLoginType == 'psd') {
dispatch({
type: 'login/qxLogin',
payload: {
mobile,
type: 'pwd',
password,
needlogin: true,
},
});
}
}
});
}
sendCode = () => {
const {
dispatch, form, gettingVerifyCoding, counting,
} = this.props;
if (gettingVerifyCoding || counting) {
return;
}
const mobile = form.getFieldValue('mobile');
if (mobile === undefined) {
message.error('请输入手机号', 1);
return;
}
if (!/^1[345789]{1}[0-9]{9}$/.test(mobile)) {
message.error('请输入正确的手机号', 1);
return;
}
dispatch({
type: 'newregister/getverifycode',
payload: {
sms_type: 6,
mobile,
dispatch,
},
});
}
goResetPsd = () => {
const { dispatch } = this.props;
dispatch({
type: 'login/goresetpsd',
});
}
qxpwdcansee = () => {
this.setState({
qxpwdvisible: !this.state.qxpwdvisible,
});
}
qxGoPwdLogin = () => {
this.setState({
qxLoginType: 'psd',
});
}
qxGoVerifyLogin = () => {
this.setState({
qxLoginType: 'verifycode',
});
}
render() {
const { getFieldDecorator } = this.props.form;
const {
qxLoginType, qxpwdvisible,
} = this.state;
const {
locationQuery, qxLoading, countdown, counting,
} = this.props;
return (
<div>
<div className={LoginStyles.businessloginbox}>
<Form onSubmit={this.handleQxSubmit} className={LoginStyles.loginform}>
<FormItem className="loginrow">
{getFieldDecorator('mobile', {
rules: [
{ required: true, message: '请输入您的手机号!' },
{ pattern: /^1[3456789]{1}[0-9]{9}$/, message: '请输入正确的手机号码!' },
{ max: 11, message: '手机号长度为11位!' },
],
initialValue: locationQuery.mobile || '',
})(
<Input
placeholder="请输入手机号"
maxLength={11}
/>,
)}
</FormItem>
{qxLoginType == 'verifycode' &&
<Row className={`loginrow ${LoginStyles.verycoderow}`}>
<Col span={16}>
<FormItem>
{getFieldDecorator('code', {
rules: [
{ required: true, message: '请输入验证码!' },
{ pattern: /^[0-9]{4}$/, message: '验证码是4位数字验证码' },
],
})(
<Input className="no_border" type="text" autoComplete="off" placeholder="输入验证码" maxLength={4} />,
)}
</FormItem>
</Col>
<Col span={8}>
<div className={`${LoginStyles.verycodebtn} ${counting ? LoginStyles.verycodebtndisable : ''}`} onClick={this.sendCode}>{counting ? `${countdown}秒后重新获取` : '获取验证码'}</div>
</Col>
</Row>
}
{qxLoginType == 'psd' &&
<Row className={`loginrow ${LoginStyles.verycoderow}`}>
<Col span={20}>
<FormItem>
{getFieldDecorator('password', {
rules: [
{ required: qxLoginType == 'psd', message: '请输入您的密码!' },
{ pattern: /^[a-zA-Z0-9]{6,20}$/, message: '密码格式不正确(6-20位字母和数字组合)!' },
],
})(
<Input className="no_border" type={!qxpwdvisible ? 'password' : 'text'} autoComplete="off" placeholder="请输入密码" />,
)}
</FormItem>
</Col>
<Col span={4} className={LoginStyles.eyebox} onClick={() => this.qxpwdcansee()}>
{qxpwdvisible && <img src={`${__IMGCDN__}eyeopen.png`} alt="" className={LoginStyles.eyeopen} />}
{!qxpwdvisible && <img src={`${__IMGCDN__}eyeclose.png`} alt="" className={LoginStyles.eyeclose} />}
</Col>
</Row>
}
<FormItem className="loginrow">
{qxLoginType == 'verifycode' && <div className={LoginStyles.loginformforgot} onClick={this.qxGoPwdLogin}>密码登录</div>}
{qxLoginType == 'psd' &&
<div className={LoginStyles.loginformforgotbox}>
<div onClick={this.qxGoVerifyLogin}>验证码登录</div>
<div className={LoginStyles.resetpsd} onClick={this.goResetPsd}>忘记密码</div>
</div>
}
<div className={`${LoginStyles.btncontent} 'clearfix'`}>
<Button type="primary" htmlType="submit" size="large" className={LoginStyles.loginformbutton} loading={qxLoading}>
{qxLoading ? '登录中...' : '登录'}
</Button>
</div>
</FormItem>
</Form>
<div className={LoginStyles.registerbox}>
<div className={LoginStyles.noaccount}>还没有账号？</div>
<Link className={LoginStyles.goregister} to="/register">去注册</Link>
</div>
</div>
</div>
);
}
}
const QxLogin = Form.create()(QxLoginForm);
QxLogin.propTypes = {
};
function mapStateToProps(state) {
const { collapsed, locationQuery } = state.webapp;
const {
countdown, counting, gettingVerifyCoding,
} = state.newregister;
const {
qxLoading, tabtype, teacherLoginQrcode,
} = state.login;
return {
collapsed, locationQuery, qxLoading, countdown, counting, tabtype, teacherLoginQrcode, gettingVerifyCoding,
};
}
export default connect(mapStateToProps)(QxLogin);
src/pages/login/SjdLogin.js 0 → 100644
View file @ 7cd658ea
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';
const { TabPane } = Tabs;
const FormItem = Form.Item;
class SjdLoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
pwdvisible: false,
loginType: 'psd',
};
}
componentDidMount() {
pageIn('轻校-登录页面');
}
componentWillUnmount() {
const { dispatch } = this.props;
dispatch({
type: 'register/unloadstate',
});
}
handleSubmit = (e) => {
const { dispatch } = this.props;
const { loginType } = this.state;
e.preventDefault();
this.props.form.validateFields((err, values) => {
const {
mobile, verifycode, needlogin, password,
} = values;
if (!err) {
if (loginType == 'verifycode') {
dispatch({
type: 'login/sjdLogin',
payload: {
mobile,
verifycode,
type: 'verify',
needlogin: true,
},
});
} else if (loginType == 'psd') {
dispatch({
type: 'login/sjdLogin',
payload: {
mobile,
type: 'pwd',
password,
needlogin: true,
},
});
}
}
});
}
sendVerifyCode = () => {
const {
dispatch, form, gettingVerifyCoding, counting,
} = this.props;
if (gettingVerifyCoding || counting) {
return;
}
const mobile = form.getFieldValue('mobile');
if (mobile === undefined) {
message.error('请输入手机号', 1);
return;
}
if (!/^1[345789]{1}[0-9]{9}$/.test(mobile)) {
message.error('请输入正确的手机号', 1);
return;
}
dispatch({
type: 'register/getverifycode',
payload: {
type: 5,
mobile,
dispatch,
},
});
}
goResetPsd = () => {
const { dispatch } = this.props;
dispatch({
type: 'login/goresetpsd',
});
}
goPwdLogin = () => {
this.setState({
loginType: 'psd',
});
}
goVerifyLogin = () => {
this.setState({
loginType: 'verifycode',
});
}
generateIcon = (name) => {
return <i className={`${name} bg_icon`} />;
}
tabshift = (type) => {
const { dispatch } = this.props;
dispatch({
type: 'login/tabshift',
payload: {
type,
},
});
}
pwdcansee = () => {
this.setState({
pwdvisible: !this.state.pwdvisible,
});
}
render() {
const { getFieldDecorator } = this.props.form;
const {
pwdvisible, loginType,
} = this.state;
const {
locationQuery, logining, countdown, counting, tabtype,
} = this.props;
return (
<div>
{ tabtype == 2 &&
<div className={LoginStyles.businessloginbox}>
<Form onSubmit={this.handleSubmit} className={LoginStyles.loginform}>
<FormItem className="loginrow">
{getFieldDecorator('mobile', {
rules: [
{ required: true, message: '请输入您的手机号!' },
{ pattern: /^1[3456789]{1}[0-9]{9}$/, message: '请输入正确的手机号码!' },
{ max: 11, message: '手机号长度为11位!' },
],
initialValue: locationQuery.mobile || '',
})(
<Input
placeholder="请输入手机号"
maxLength={11}
/>,
)}
</FormItem>
{loginType == 'verifycode' &&
<Row className={`loginrow ${LoginStyles.verycoderow}`}>
<Col span={16}>
<FormItem>
{getFieldDecorator('verifycode', {
rules: [
{ required: true, message: '请输入验证码!' },
{ pattern: /^[0-9]{4}$/, message: '验证码是4位数字验证码' },
],
})(
<Input className="no_border" type="text" autoComplete="off" placeholder="输入验证码" maxLength={4} />,
)}
</FormItem>
</Col>
<Col span={8}>
<div className={`${LoginStyles.verycodebtn} ${counting ? LoginStyles.verycodebtndisable : ''}`} onClick={this.sendVerifyCode}>{counting ? `${countdown}秒后重新获取` : '获取验证码'}</div>
</Col>
</Row>
}
{loginType == 'psd' &&
<Row className={`loginrow ${LoginStyles.verycoderow}`}>
<Col span={20}>
<FormItem>
{getFieldDecorator('password', {
rules: [
{ required: true, message: '请输入您的密码!' },
{ pattern: /^[a-zA-Z0-9]{6,20}$/, message: '密码格式不正确(6-20位字母和数字组合)!' },
],
})(
<Input className="no_border" type={!pwdvisible ? 'password' : 'text'} autoComplete="off" placeholder="请输入密码" />,
)}
</FormItem>
</Col>
<Col span={4} className={LoginStyles.eyebox} onClick={() => this.pwdcansee()}>
{pwdvisible && <img src={`${__IMGCDN__}eyeopen.png`} alt="" className={LoginStyles.eyeopen} />}
{!pwdvisible && <img src={`${__IMGCDN__}eyeclose.png`} alt="" className={LoginStyles.eyeclose} />}
</Col>
</Row>
}
<FormItem className="loginrow">
{loginType == 'verifycode' && <div className={LoginStyles.loginformforgot} onClick={this.goPwdLogin}>密码登录</div>}
{loginType == 'psd' &&
<div className={LoginStyles.loginformforgotbox}>
<div onClick={this.goVerifyLogin}>验证码登录</div>
{/* <div className={LoginStyles.resetpsd} onClick={this.goResetPsd}>忘记密码</div> */}
</div>
}
<div className={`${LoginStyles.btncontent} 'clearfix'`}>
<Button type="primary" htmlType="submit" size="large" className={LoginStyles.loginformbutton} loading={logining}>
{logining ? '登录中...' : '登录'}
</Button>
</div>
</FormItem>
</Form>
<div className={LoginStyles.registerbox}>
<div className={LoginStyles.noaccount}>还没有账号？</div>
<Link className={LoginStyles.goregister} to="/register">去注册</Link>
</div>
</div>}
</div>
);
}
}
const SjdLogin = Form.create()(SjdLoginForm);
SjdLogin.propTypes = {
};
function mapStateToProps(state) {
const { collapsed, locationQuery } = state.webapp;
const {
countdown, counting, gettingVerifyCoding,
} = state.register;
const { logining, tabtype, teacherLoginQrcode } = state.login;
return {
collapsed, locationQuery, logining, countdown, counting, tabtype, teacherLoginQrcode, gettingVerifyCoding,
};
}
export default connect(mapStateToProps)(SjdLogin);
src/pages/newregister/index.js 0 → 100644
View file @ 7cd658ea
import React from 'react';
import { connect } from 'dva';
import qs from 'qs';
import { Row, Col, Form, Input, Button, Checkbox, Select, Cascader, message, Modal } from 'antd';
import LoginStyles from './index.less';
import disData from '../../common/dis.data';
import { LocalStorage, SessionStorage, pageIn } from '../../utils/index';
import ChoosePosition from '../schooledit/SelectPlace';
const { TextArea } = Input;
const { Option } = Select;
const FormItem = Form.Item;
class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: true,
positionVisible: false,
};
}
componentDidMount() {
pageIn('轻校-注册页面');
}
componentWillUnmount() {
const { dispatch } = this.props;
dispatch({
type: 'newregister/unloadstate',
});
}
changeType = (e) => {
if (e.target.getAttribute('type') === 'password') {
console.log('禁止设置');
}
e.target.setAttribute('type', 'password');
}
handleSubmit = (e) => {
const { dispatch } = this.props;
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
const {
mobile, code, password, from,
title,
location_address,
} = values;
if (location_address === '') {
message.error('请选择校区地址');
return;
}
dispatch({
type: 'newregister/register',
payload: {
mobile,
code,
password,
from,
title,
},
});
}
});
}
filter = (inputValue, path) => {
return (path.some(option => (option.label).toLowerCase().indexOf(inputValue.toLowerCase()) > -1));
}
sendVerifyCode = () => {
const {
dispatch, form, gettingVerifyCoding, counting,
} = this.props;
if (gettingVerifyCoding || counting) {
return;
}
const mobile = form.getFieldValue('mobile');
if (mobile === undefined) {
message.error('请输入手机号', 1);
return;
}
if (!/^1[345789]{1}[0-9]{9}$/.test(mobile)) {
message.error('请输入正确的手机号', 1);
return;
}
dispatch({
type: 'newregister/getverifycode',
payload: {
sms_type: 7,
mobile,
dispatch,
},
});
}
goLogin = () => {
const { dispatch } = this.props;
dispatch({
type: 'newregister/gologin',
payload: {
mobile: '',
},
});
}
handleModal = () => {
const { dispatch } = this.props;
this.props.form.setFieldsValue({
checked: true,
});
dispatch({
type: 'newregister/updateState',
payload: {
modalVisible: false,
pwdvisible: false,
},
});
}
pwdcansee = () => {
this.setState({
pwdvisible: !this.state.pwdvisible,
});
}
choosePosition = () => {
this.setState({
positionVisible: true,
});
}
handleCancelPosition = () => {
const { dispatch } = this.props;
this.setState({
positionVisible: false,
});
dispatch({
type: 'newregister/updateState',
payload: {
location_address: '',
},
});
}
handlePositionOk = () => {
const { dispatch } = this.props;
this.setState({
positionVisible: false,
});
dispatch({
type: 'newregister/setlocation',
payload: {
},
});
}
render() {
const { getFieldDecorator } = this.props.form;
const { checked, pwdvisible, positionVisible } = this.state;
const {
countdown, counting, registering, modalVisible, protocolData,
location_address,
} = this.props;
const tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0,
},
sm: {
span: 16,
offset: 5,
},
},
};
return (
<div className={`login register ${LoginStyles.logincontainer}`}>
<div className={LoginStyles.header}>
<img src={`${__IMGCDN__}qxlogo3.png`} className={LoginStyles.headerlogo} alt="轻校" />
</div>
<Row type="flex" className={LoginStyles.loginbg}>
<Col className={LoginStyles.loginformcontent}>
<div className={LoginStyles.loginbox}>
<div className={LoginStyles.sjd_name}>
免费注册
</div>
<Form onSubmit={this.handleSubmit} className={LoginStyles.loginform}>
<FormItem className="loginrow">
{getFieldDecorator('mobile', {
rules: [
{ required: true, message: '请输入您的手机号!' },
{ pattern: /^1[3456789]{1}[0-9]{9}$/, message: '请输入正确的手机号码!' },
{ max: 11, message: '手机号长度为11位!' },
],
})(
<Input placeholder="请输入手机号" autoComplete="off" maxLength={11} />,
)}
</FormItem>
<Row className={`loginrow ${LoginStyles.verycoderow}`}>
<Col span={16}>
<FormItem>
{getFieldDecorator('code', {
rules: [
{ required: true, message: '请输入验证码!' },
{ pattern: /^[0-9]{4}$/, message: '验证码是4位数字验证码' },
],
})(
<Input className="no_border" type="text" autoComplete="off" placeholder="输入验证码" maxLength={4} />,
)}
</FormItem>
</Col>
<Col span={8}>
<div className={`${LoginStyles.verycodebtn} ${counting ? LoginStyles.verycodebtndisable : ''}`} onClick={this.sendVerifyCode}>{counting ? `${countdown}秒后重新获取` : '发送验证码'}</div>
</Col>
</Row>
{getFieldDecorator('from', { initialValue: 2 })(<Input type="hidden" />)}
<Row className={`loginrow ${LoginStyles.verycoderow}`}>
<Col span={20}>
<FormItem>
{getFieldDecorator('password', {
rules: [
{ required: true, message: '设置密码（6-16位）!' },
{ pattern: /^[a-zA-Z0-9]{6,20}$/, message: '密码格式不正确(6-20位字母和数字组合)!' },
],
})(
<Input maxLength={20} className="no_border" type={!pwdvisible ? 'password' : 'text'} autoComplete="off" placeholder="设置密码（6-16位）" />,
)}
</FormItem>
</Col>
<Col span={4} className={LoginStyles.eyebox} onClick={() => this.pwdcansee()}>
{pwdvisible && <img src={`${__IMGCDN__}eyeopen.png`} alt="" className={LoginStyles.eyeopen} />}
{!pwdvisible && <img src={`${__IMGCDN__}eyeclose.png`} alt="" className={LoginStyles.eyeclose} />}
</Col>
</Row>
<FormItem className="loginrow">
{getFieldDecorator('title', {
rules: [
{ required: true, message: '请输入机构名称!' },
],
})(
<Input maxLength={30} placeholder="请输入机构名称" autoComplete="off" />,
)}
<span className={LoginStyles.formTip}>机构名称后期支持自由修改</span>
</FormItem>
<FormItem className="loginrow">
{getFieldDecorator('location_address', {
initialValue: location_address,
})(
<Input style={{ cursor: 'pointer' }} readOnly="readOnly" onClick={this.choosePosition} placeholder="获取位置" />,
)}
</FormItem>
<FormItem>
<div className={`${LoginStyles.btncontent} clearfix`}>
<Button type="primary" htmlType="submit" size="small" className={LoginStyles.loginformbutton} loading={registering}>
{registering ? '提交中...' : '完成注册'}
</Button>
</div>
</FormItem>
</Form>
<div className={LoginStyles.registerbox}>
<div className={LoginStyles.noaccount}>已有账号？</div>
<div className={LoginStyles.goregister} onClick={this.goLogin}>去登录</div>
</div>
</div>
</Col>
</Row>
<Modal
title="地区选择"
visible={positionVisible}
onOk={this.handlePositionOk}
onCancel={this.handleCancelPosition}
cancelText="取消"
okText="确认"
width={1300}
height={666}
bodyStyle={{ padding: '24px 0' }}
>
<ChoosePosition />
</Modal>
</div>
);
}
}
const Login = Form.create()(LoginForm);
Login.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)(Login);
src/pages/newregister/index.less 0 → 100644
View file @ 7cd658ea
@import '../../less/variables.less';
@images: '@{imagesroot}/login/';
.loginbg{
min-width: 600px;
height: ~"calc(100vh - 300px)";
display: flex;
align-items: center;
justify-content: center;
}
.logincontainer {
height: 100vh;
}
.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;
}
.qxdescbox {
flex: 1;
background-color: #19B5FE;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.qxbiglogo {
width: 201px;
height: 201px;
display: block;
}
.qxdesc {
font-size: 14px;
width: 383px;
color: #fff;
text-align: center;
}
}
.loginbox {
flex: 1;
padding-top: 42px;
}
.sjd_logo{
text-align: center;
margin-bottom: 10px;
img{
width: 200px;
}
}
.sjd_name {
text-align: center;
font-size: 40px;
font-weight: 700;
line-height: 1;
margin-bottom: 45px;
color: #1BB6FF;
letter-spacing: 2px;
}
.loginform {
margin-bottom: 20px;
margin: 0 auto;
padding-top: 48px;
width: 440px;
}
.loginformforgot {
color: #22B8FF;
font-size: 14px;
padding-left: 11px;
margin-bottom: 72px;
line-height: 1;
margin-top: 24px;
cursor: pointer;
}
.loginformforgotbox {
color: #22B8FF;
font-size: 14px;
padding-left: 11px;
margin-bottom: 72px;
line-height: 1;
margin-top: 24px;
display: flex;
align-items: center;
justify-content: space-between;
div {
cursor: pointer;
}
.resetpsd {
color: #959595;
}
}
.forgotpwd {
float: right;
padding: 8px 10px;
}
.loginformbutton {
height: 52px;
line-height: 52px;
width: 100%;
background-color: #1890FF;
border: none;
font-size: 16px;
}
.loginformbutton:hover {
background-color: #1890FF;
}
.loginformbutton:active {
background-color: #1890FF;
}
.loginformbutton:focus {
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%;
height: 40px;
line-height: 40px;
text-align: right;
// border-color: #0000ff;
color: rgba(27,182,254,1);;
border-radius: 0;
padding-right: 14px;
font-size: 14px;
cursor: pointer;
&.verycodebtndisable {
color: rgba(27,182,254,0.5);
}
}
.verycodeinput {
border-bottom: none!important;
.ant-row{
margin-bottom: 0!important;
}
.ant-form-item{
margin-bottom: 0!important;
}
}
.btncontent{
margin-top: 80px;
text-align: left;
}
.registerformbutton {
float: right;
width: 178px;
height: 55px;
border-color: #0000ff;
color: #0000ff;
}
.verycoderow{
border-bottom: 1px solid #cccccc;
}
:global {
.register {
min-height: 700px;
.ant-input{
border: none;
border-bottom: 1px solid #cccccc;
border-radius: 0;
outline: none;
}
.no_border {
&.ant-input {
border-bottom: none!important;
}
}
.ant-input:focus{
box-shadow: initial;
}
.ant-checkbox{
.ant-checkbox-inner{
border-radius: 50%;
}
}
.ant-checkbox::after{
border-radius: 50%;
}
.ant-form-item{
margin-bottom: 0;
}
.ant-select-selection {
border: none;
border-bottom: 1px solid #d9d9d9;
border-radius: 0;
}
.loginrow{
margin-bottom: 15px;
}
.ant-form-explain {
padding-left: 11px;
}
}
.bg_icon {
display: inline-block;
width: 27px;
height: 27px;
background: url('@{images}phone.png') no-repeat;
background-size: 100%;
margin-left: -10px;
&.verify {
background-image: url('@{images}verify.png');
}
}
}
.header {
height: 64px;
padding-left: 34px;
background-color: #fff;
display: flex;
align-items: center;
}
.headerlogo {
height: 40px;
display: block;
}
@media (max-width: @screen-small-min){
.loginformcontent{
box-shadow: none;
}
.header {
height: 50px;
padding-left: 34px;
}
.headerlogo {
height: 50px;
display: block;
}
}
.shifttbbox {
display: flex;
align-items: center;
justify-content: space-around;
}
.shifttb {
cursor: pointer;
}
.tabname {
color: #1BB6FF;
color: #000000;
font-size: 18px;
line-height: 1;
margin-bottom: 17px;
text-align: center;
}
.tabborder {
width: 107px;
height: 3px;
background-color: transparent;
margin: 0 auto;
}
.active .tabname {
color: #1BB6FF;
}
.shifttb.active .tabborder {
background-color: #1BB6FF;
}
.teacherloginbox {
padding-top: 87px;
text-align: center;
}
.loginwarntext {
color: #969696;
font-size: 14px;
line-height: 1;
margin-bottom: 43px;
}
.loginqrcode {
width: 240px;
height: 240px;
}
.businessloginbox {
}
.registerbox {
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
margin-top: 30px;
}
.noaccount {
color: #959595;
font-size: 14px;
}
.goregister {
color: #1890FF;
cursor: pointer;
font-size: 14px;
}
.eyebox {
text-align: right;
display: flex;
align-items: flex-end;
justify-content: flex-end;
height: 32px;
}
.eyeopen {
width: 23px;
height: 15px;
cursor: pointer;
}
.eyeclose {
width: 22px;
height: 11px;
cursor: pointer;
}
src/services/newregister.js 0 → 100644
View file @ 7cd658ea
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,
});
}
export function deploySchool(params) {
const data = qs.stringify(params);
return request({
url: `${api.deployschool}`,
method: 'POST',
data,
});
}
export function forgetPassword(params) {
const data = qs.stringify(params);
return request({
url: `${api.newRegister.forget_password}`,
method: 'POST',
data,
needAuth: false,
});
}
export function selectDeploySchool(params) {
const data = qs.stringify(params);
return request({
url: `${api.selectdeployschool}?${data}`,
method: 'GET',
data,
});
}
yarn-error.log 0 → 100644
View file @ 7cd658ea
This source diff could not be displayed because it is too large. You can view the blob instead.
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