Skip to content

M
mr-julyedu
Commit 5ab9369e by FE
Options

student root doing

parent a4cd647e
Showing with 367 additions and 1 deletions
src/components/passport/index.js
...@@ -12,6 +12,7 @@ import ForgotPasswordEmail from './forgotPasswordEmail' ...@@ -12,6 +12,7 @@ import ForgotPasswordEmail from './forgotPasswordEmail'
import { connect } from "react-redux" import { connect } from "react-redux"
import { compose } from "redux" import { compose } from "redux"
import { getParam } from "@/utils" import { getParam } from "@/utils"
import StudentRoot from './studentRoot';
import account from './icons/account.png' import account from './icons/account.png'
import qq from './icons/qq.png' import qq from './icons/qq.png'
...@@ -103,6 +104,7 @@ class Passport extends Component { ...@@ -103,6 +104,7 @@ class Passport extends Component {
from={'/passport'} from={'/passport'}
to={{...location, ...{pathname: '/passport/login'}}} to={{...location, ...{pathname: '/passport/login'}}}
/> />
<Route path={match.url + '/student-login'} component={StudentRoot}/>
<Route path={match.url + '/login'} <Route path={match.url + '/login'}
render={props => { render={props => {
return <Login {...props} loginWays={this.state.loginWays}/> return <Login {...props} loginWays={this.state.loginWays}/>
......
src/components/passport/login/index.js
...@@ -66,6 +66,11 @@ class Login extends Component { ...@@ -66,6 +66,11 @@ class Login extends Component {
} }
} }
toStudentRegister = () => {
const { history } = this.props;
history.push('/passport/student-login')
}
render() { render() {
const { const {
loginWays, loginWays,
...@@ -117,8 +122,12 @@ class Login extends Component { ...@@ -117,8 +122,12 @@ class Login extends Component {
onVerify={this.onVerify} onVerify={this.onVerify}
/> />
<LoginButton active={values.tel && values.veriCode && isEmpty(errors)}/> <LoginButton active={values.tel && values.veriCode && isEmpty(errors)}/>
</Form>
{/* 助学计划 */}
<div className="student-root">
<a className="student-root__button" onClick={this.toStudentRegister}>助学计划</a>
</div>
</Form>
<LoginWays onClick={this.loginWaysClick} loginWays={loginWays}/> <LoginWays onClick={this.loginWaysClick} loginWays={loginWays}/>
</div> </div>
) )
......
src/components/passport/login/wechatLogin.scss
...@@ -25,5 +25,15 @@ ...@@ -25,5 +25,15 @@
} }
.student-root {
padding-top: 18px;
text-align: right;
}
.student-root__button {
font-size: 15px;
color: #0099FF;
line-height: 1;
cursor: pointer;
}
} }
\ No newline at end of file
src/components/passport/studentRoot/index.js 0 → 100644
import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import classnames from 'classnames';
import { Formik, Form, Field } from 'formik';
import { HeaderBar } from "@/common";
import Captcha from '@/common/Captcha'
import Header from '../common/Header';
import Input from '../common/inputWithCountryCodes';
import VeriCodeInput from '../common/veriCodeInput';
import './index.scss';
@connect((state) => ({
country: state.country
}))
class StudentRoot extends PureComponent {
constructor(props) {
super(props);
this.state = {
validate: null,
captchaInstance: null,
disabled: false,
isSchool: false,
isCollege: false,
};
}
onVerify = (err, data) => {
if (!err) {
this.setState({
validate: data.validate
});
}
}
selectSwitch = (key, value) => {
let param = {};
param[key] = value;
this.setState(param);
}
render() {
// console.log(this.props);
const { country } = this.props;
const { validate, captchaInstance, disabled, isSchool, isCollege } = this.state;
return (
<>
<HeaderBar title={'助学计划'} arrow={true}/>
<Header/>
<Formik
initialValues={{
tel: '',
code: '',
school: '',
college: '',
uid: '',
name: '',
}}
validate={({ tel, code, school, college, uid, name }) => {
let errors = {}
if (!/\d/.test(tel)) {
errors.tip = '请填写正确格式的手机号~';
return errors;
}
if (!/[0-9]{6}/.test(code)) {
errors.tip = '请填写验证码(先滑块验证呦)~';
return errors;
}
if (!school) {
errors.tip = '请选择学校~';
return errors;
}
if (!college) {
errors.tip = '请选择学院~';
return errors;
}
if (!uid) {
errors.tip = '请填写学号~';
return errors;
}
if (!name) {
errors.tip = '请填写姓名~';
return errors;
}
}}
onSubmit={(values, errors) => {
console.log(values, errors);
}}
>
{props => {
const isSubmit = Object.values(props.values).join('') !== '' && props.errors.tip === undefined;
return (
<Form className="student-form">
<Field
name='tel'
render={({field}) => (
<Input
{...field}
type={'tel'}
placeholder={'手机号快捷登录(免注册)'}
wrapperClass={'tel-input'}
country={country}
/>
)}
/>
<Captcha
mrBtm={'15px'}
getInstance={this.getCaptchaInstance}
onVerify={this.onVerify}
/>
{
validate &&
<Field
type='number'
name='code'
render={({field}) => (
<VeriCodeInput
{...field}
className={'student-form__code'}
icon={<i className={'iconfont iconduanxin'}
style={{fontSize: '20px', left: '12px'}}
/>}
tel={props.values.tel}
challenge={validate}
errors={props.errors}
placeholder={'请输入验证码'}
instance={captchaInstance}
country={country}
/>
)}
/>
}
<div className="student-form__item">
<label className="student-form__label">学校</label>
<StudentSelect
name="school"
value={props.values.school}
data={{
key: 'isSchool',
val: isSchool
}}
onChange={props.setFieldValue}
selectSwitch={this.selectSwitch}
/>
</div>
<div className="student-form__item">
<label className="student-form__label">学院</label>
<StudentSelect
name="college"
value={props.values.college}
data={{
key: 'isCollege',
val: isCollege
}}
onChange={props.setFieldValue}
selectSwitch={this.selectSwitch}
/>
</div>
<div className="student-form__item">
<label className="student-form__label">学号</label>
<Field className="student-form__input" type="text" name="uid" placeholder="不区分大小写"/>
</div>
<div className="student-form__item">
<label className="student-form__label">姓名</label>
<Field className="student-form__input" type="text" name="name" placeholder="请准确填写"/>
</div>
<div className="student-form__footer">
{
props.errors.tip &&
<p className="student-form__tip">*{props.errors.tip}</p>
}
<button className="student-form__submit" type="submit" disabled={!isSubmit}>注册</button>
</div>
</Form>
)
}}
</Formik>
</>
)
}
}
const StudentSelect = (props) => {
const {
options = [1,2,3,4],
data: { key = '' , val = false },
name,
value,
onChange,
selectSwitch
} = props;
return (
<div className="student-select">
<input
className={classnames({'active': val})}
value={value}
type="text"
placeholder="请选择"
readOnly
onClick={() => selectSwitch(key, true)}
/>
{
val &&
<ul className="student-select__list">
{
options.length > 0
? (<>
{
options.map((item, index) => (
<li
className="student-select__option"
key={index}
onClick={() => {
selectSwitch(key, false);
onChange(name, item);
}}
>{item}</li>
))
}
</>)
: <li className="student-select__option">暂无数据</li>
}
</ul>
}
</div>
)
}
export default StudentRoot;
\ No newline at end of file
src/components/passport/studentRoot/index.scss 0 → 100644
.student-form {
margin-top: -17px;
padding: 0 35px;
.input-with-country-codes {
margin-bottom: 15px;
}
}
.student-form__code {
margin: 0 0 15px;
&.input-wrapper {
width: 100%;
}
}
.student-form__item {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.student-form__label {
width: 44px;
font-size: 15px;
color: 333;
}
.student-form__input {
flex: 1;
height: 46px;
padding: 0 15px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
font-size: 15px;
color: #999;
}
.student-form__footer {
position: relative;
margin-top: 45px;
}
.student-form__tip {
position: absolute;
top: -35px;
margin: 0;
padding-left: 60px;
font-size: 12px;
color: #FF1717;
line-height: 1;
}
.student-form__submit {
width: 100%;
height: 44px;
padding: 0;
border-style: none;
border-radius: 3px;
font-size: 18px;
color: #fff;
background-color: #0099FF;
&:disabled {
background-color: #ccc;
}
}
.student-select {
position: relative;
flex: 1;
height: 46px;
input {
width: 100%;
height: 100%;
padding: 0 15px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
font-size: 15px;
color: #999;
&.active {
border-radius: 3px 3px 0 0;
}
}
}
.student-select__list {
position: absolute;
top: 45px;
width: 100%;
border: 1px solid #ccc;
border-radius: 0 0 3px 3px;
box-sizing: border-box;
background-color: #fff;
z-index: 99;
}
.student-select__option {
padding-left: 15px;
font-size: 14px;
color: #999;
line-height: 32px;
&:hover {
color: #0099FF;
}
}
\ No newline at end of file
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