Skip to content

M
mr-julyedu
Commit b5b3ca0b by zhanghaozhe
Options

passport

parent 6bb84416
Showing with 594 additions and 122 deletions
package-lock.json
...@@ -4045,6 +4045,11 @@ ...@@ -4045,6 +4045,11 @@
"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
"integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=" "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
}, },
"deep-diff": {
"version": "0.3.8",
"resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz",
"integrity": "sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ="
},
"deep-equal": { "deep-equal": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz", "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
...@@ -5652,8 +5657,7 @@ ...@@ -5652,8 +5657,7 @@
}, },
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
...@@ -5671,13 +5675,11 @@ ...@@ -5671,13 +5675,11 @@
}, },
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
...@@ -5690,18 +5692,15 @@ ...@@ -5690,18 +5692,15 @@
}, },
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
...@@ -5804,8 +5803,7 @@ ...@@ -5804,8 +5803,7 @@
}, },
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
...@@ -5815,7 +5813,6 @@ ...@@ -5815,7 +5813,6 @@
"is-fullwidth-code-point": { "is-fullwidth-code-point": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
...@@ -5828,20 +5825,17 @@ ...@@ -5828,20 +5825,17 @@
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
}, },
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -5858,7 +5852,6 @@ ...@@ -5858,7 +5852,6 @@
"mkdirp": { "mkdirp": {
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
...@@ -5931,8 +5924,7 @@ ...@@ -5931,8 +5924,7 @@
}, },
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
...@@ -5942,7 +5934,6 @@ ...@@ -5942,7 +5934,6 @@
"once": { "once": {
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
...@@ -6018,8 +6009,7 @@ ...@@ -6018,8 +6009,7 @@
}, },
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
...@@ -6049,7 +6039,6 @@ ...@@ -6049,7 +6039,6 @@
"string-width": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
...@@ -6067,7 +6056,6 @@ ...@@ -6067,7 +6056,6 @@
"strip-ansi": { "strip-ansi": {
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
...@@ -6106,13 +6094,11 @@ ...@@ -6106,13 +6094,11 @@
}, },
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true
"optional": true
} }
} }
}, },
...@@ -11445,6 +11431,24 @@ ...@@ -11445,6 +11431,24 @@
"symbol-observable": "^1.2.0" "symbol-observable": "^1.2.0"
} }
}, },
"redux-immutable": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/redux-immutable/-/redux-immutable-4.0.0.tgz",
"integrity": "sha1-Ohoy32Y2ZGK2NpHw4dw15HK7yfM="
},
"redux-logger": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
"integrity": "sha1-91VZZvMJjzyIYExEnPC69XeCdL8=",
"requires": {
"deep-diff": "^0.3.5"
}
},
"redux-thunk": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
"integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw=="
},
"regenerate": { "regenerate": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
......
src/common/ClearableInput/clearable-input.scss 0 → 100644
.clearable-input-wrapper {
position: relative;
input {
width: 300px;
height: 46px;
padding-left: 17px;
border: 1px solid $border_ccc;
border-radius: 3px;
-webkit-appearance: none;
&::-webkit-input-placeholder {
color: $color_999;
font-size: $font_16;
}
}
.iconfont {
display: inline-block;
position: absolute;
top: 50%;
right: 13px;
transform: translateY(-50%);
font-size: 21px;
}
}
\ No newline at end of file
src/common/ClearableInput/index.js 0 → 100644
import React, { Component } from 'react';
import './clearable-input.scss'
import classnames from 'classnames'
class ClearableInput extends Component {
constructor(props) {
super(props);
this.state = {
value: ''
}
}
handleChange = (e) => {
let {onChange} = this.props
let val = e.target.value
this.setState({value: val})
onChange && onChange(val)
}
clearInput = () => {
this.setState({value: ''})
}
render() {
let {wrapperClass, inputClass, placeholder, type = 'text', onChange, ...rest} = this.props
let clearIconStyle = {
display: this.state.value.length ? 'block' : 'none'
}
return (
<div className={classnames('clearable-input-wrapper', wrapperClass)}>
<input
type={type}
className={inputClass}
value={this.state.value}
onChange={this.handleChange}
placeholder={placeholder}
{...rest}
/>
<i
className={'iconfont icondanseshixintubiao-3'}
onClick={this.clearInput}
style={clearIconStyle}
/>
</div>
);
}
}
export default ClearableInput;
\ No newline at end of file
src/common/Nav/index.scss
...@@ -27,6 +27,6 @@ ...@@ -27,6 +27,6 @@
} }
.iconfont{ .iconfont{
font-size: 24px !important; font-size: 24px;
margin-bottom: 4px; margin-bottom: 4px;
} }
\ No newline at end of file
src/components/coupons/common/Coupon/index.js
...@@ -4,10 +4,6 @@ import classnames from 'classnames' ...@@ -4,10 +4,6 @@ import classnames from 'classnames'
class Coupon extends Component { class Coupon extends Component {
constructor(props) {
super(props)
}
pick = () => { pick = () => {
let {purpose, select, invalid} = this.props let {purpose, select, invalid} = this.props
purpose === 'use' && !invalid && select && select(this.props.index) purpose === 'use' && !invalid && select && select(this.props.index)
...@@ -39,7 +35,7 @@ class Coupon extends Component { ...@@ -39,7 +35,7 @@ class Coupon extends Component {
{ {
purpose === 'use' && purpose === 'use' &&
<i className={classnames('iconfont icondanseshixintubiao-5', { <i className={classnames('iconfont icondanseshixintubiao-5', {
check: (selected != undefined && !invalid) && (selected === index) check: (selected !== undefined && !invalid) && (selected === index)
})} })}
/> />
} }
......
src/components/coupons/use-coupons/index.js
...@@ -46,7 +46,8 @@ class UseCoupon extends Component { ...@@ -46,7 +46,8 @@ class UseCoupon extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
selected: 0 selected: 0,
exchangeNum: ''
} }
} }
...@@ -57,6 +58,10 @@ class UseCoupon extends Component { ...@@ -57,6 +58,10 @@ class UseCoupon extends Component {
}) })
} }
handleChange = (val) => {
this.setState({exchangeNum: val})
}
componentDidMount() { componentDidMount() {
document.getElementsByClassName('tabbar')[0].style.display = 'none' document.getElementsByClassName('tabbar')[0].style.display = 'none'
} }
...@@ -64,7 +69,7 @@ class UseCoupon extends Component { ...@@ -64,7 +69,7 @@ class UseCoupon extends Component {
render() { render() {
return ( return (
<div className='use-coupon'> <div className='use-coupon'>
<ExchangeaBar/> <ExchangeaBar onChange={this.handleChange}/>
<div className="coupons-area"> <div className="coupons-area">
<Content <Content
coupons={mockData.valid} coupons={mockData.valid}
......
src/components/passport/accountLogin/accountLogin.scss
...@@ -12,6 +12,10 @@ ...@@ -12,6 +12,10 @@
margin-bottom: 24px; margin-bottom: 24px;
} }
.verification {
margin-bottom: 24px;
}
.place { .place {
width: 100%; width: 100%;
height: 39px; height: 39px;
...@@ -19,5 +23,13 @@ ...@@ -19,5 +23,13 @@
background: #56abff; background: #56abff;
} }
.forgot-password-btn {
display: block;
margin-top: 30px;
text-align: center;
font-size: $font_14;
color: $color_bbb;
}
} }
} }
\ No newline at end of file
src/components/passport/accountLogin/index.js
import React, { Component } from "react" import React, { Component } from "react"
import './accountLogin.scss' import './accountLogin.scss'
import { Link } from "react-router-dom";
import Header from "../common/Header"; import Header from "../common/Header";
import Input from '../common/Input' import Input from '../common/Input'
import LoginButton from '../common/LoginButton' import LoginButton from '../common/LoginButton'
import LoginWays from '../common/LoginWays' import VeriCodeButton from '../common/veriCodeInput'
// import LoginWays from '../common/LoginWays'
class AccountLogin extends Component { class AccountLogin extends Component {
constructor(props) {
super(props)
}
render() { render() {
return ( return (
...@@ -18,14 +18,13 @@ class AccountLogin extends Component { ...@@ -18,14 +18,13 @@ class AccountLogin extends Component {
<Header/> <Header/>
<div className="login-info"> <div className="login-info">
<Input inputType={'number'} placeholder={'手机/邮箱/昵称'} wrapperClass={'tel-input'}/> <Input inputType={'number'} placeholder={'手机/邮箱/昵称'} wrapperClass={'tel-input'}/>
<Input <VeriCodeButton
inputType={'number'} className={'verification'}
wrapperClass={'tel-input'}
placeholder={'密码'}
/> />
<LoginButton/> <LoginButton/>
<Link className={'forgot-password-btn'} to='/passport/forgot-password'>忘记密码</Link>
</div> </div>
<LoginWays loginWays={this.props.loginWays}/> {/*<LoginWays loginWays={this.props.loginWays}/>*/}
</div> </div>
); );
} }
......
src/components/passport/bindingTel/binding-tel.scss 0 → 100644
.binding-tel {
padding: 35px 38px;
.title {
margin-bottom: 13px;
font-size: $font_12;
color: $color_666;
}
.tel {
margin-bottom: 21px;
}
.place {
width: 100%;
height: 39px;
margin-bottom: 33px;
background: #56abff;
}
.verification {
margin-bottom: 21px;
}
.complete-btn {
background: $active;
color: $white;
}
}
\ No newline at end of file
src/components/passport/bindingTel/index.js 0 → 100644
import React, { Component } from 'react';
import './binding-tel.scss'
import ClearableInput from '@common/ClearableInput'
import Button from '../common/Button'
import VeriCodeInput from '../common/veriCodeInput'
class BindingTel extends Component {
constructor(props) {
super(props);
this.state = {
veriCode: ''
};
}
handleChange = (val) => {
this.setState({veriCode: val});
}
render() {
return (
<div className={'binding-tel'}>
<p className={'title'}>为提高您的账号安全，请绑定手机号</p>
<ClearableInput
type={'number'}
placeholder={'请输入需要绑定的手机号'}
wrapperClass={'tel'}
/>
<VeriCodeInput
type={'number'}
className={'verification'}
onChange={this.handleChange}
/>
<div className="place"/>
<Button className={'complete-btn'}>完成</Button>
</div>
);
}
}
export default BindingTel;
\ No newline at end of file
src/components/passport/common/Button/button.scss 0 → 100644
.custom-button {
width:300px;
height:44px;
border-radius:3px;
-webkit-appearance: none;
border: none;
font-size: $font_18;
}
\ No newline at end of file
src/components/passport/common/Button/index.js 0 → 100644
import React from 'react';
import './button.scss'
import classnames from 'classnames'
const Button = ({className, children}) => {
return (
<button className={classnames('custom-button', className)}>
{children}
</button>
);
};
export default Button;
\ No newline at end of file
src/components/passport/common/Input/index.js
...@@ -7,55 +7,30 @@ class Index extends Component { ...@@ -7,55 +7,30 @@ class Index extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
value: '', value: ''
count: 10,
counting: false
}
this.timer = null
}
countDown = () => {
let {count} = this.state
if (!this.state.counting) {
this.setState({count: count--})
this.setState({counting: true})
this.timer = setInterval(() => {
if(count <= 0){
this.setState({counting: false})
clearInterval(this.timer)
return
}
this.setState({count: count--})
}, 1000)
} }
} }
handleChange = (e) => { handleChange = (e) => {
this.setState({value: e.target.value}) let val = e.target.value
let {onChange} = this.props
this.setState({value: val})
onChange && onChange(val)
} }
render() { render() {
let {inputType, iconClass, placeholder, wrapperClass, type = 'tel'} = this.props let {type, iconClass, placeholder, wrapperClass, children} = this.props
return ( return (
<div className={classnames('input-wrapper', wrapperClass)}> <div className={classnames('input-wrapper', wrapperClass)}>
<input <input
type={inputType} type={type}
className='input' className='input'
placeholder={placeholder} placeholder={placeholder}
value={this.state.value} value={this.state.value}
onChange={this.handleChange} onChange={this.handleChange}
/> />
<i className={classnames('icon', iconClass)}/> <i className={classnames('icon', iconClass)}/>
{ {children}
type === 'verification' &&
<button className={classnames('verify', {active: !this.state.counting})} onClick={this.countDown}>
{
this.state.counting ?
(`重新发送${this.state.count}s`)
: '发送验证码'
}
</button>
}
</div> </div>
) )
} }
......
src/components/passport/common/Input/input.scss
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
.input { .input {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 15px 34px; padding: 15px 0 15px 34px;
border: 1px solid $bg_ccc; border: 1px solid $bg_ccc;
border-radius: 3px; border-radius: 3px;
-webkit-appearance: none; -webkit-appearance: none;
...@@ -21,23 +21,4 @@ ...@@ -21,23 +21,4 @@
} }
} }
.verify {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 84px;
height: 21px;
padding-left: 7px;
border: none;
border-left: 1px solid $bg_ccc;
color: $color_999;
background: transparent;
-webkit-appearance: none;
&.active {
color: $active;
}
}
} }
\ No newline at end of file
src/components/passport/common/LoginWays/index.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import './loginWays.scss' import './loginWays.scss'
import { Link } from "react-router-dom";
class LoginWays extends Component { class LoginWays extends Component {
handleClick = (index) => { handleClick = (index) => {
......
src/components/passport/common/passwordInput/index.js 0 → 100644
import React, { Component } from 'react';
import './password-input.scss'
import Input from '../Input'
class PasswordInput extends Component {
constructor(props) {
super(props);
this.state = {
showPassword: false
}
}
togglePasswordVisibility = () => {
this.setState({showPassword: !this.state.showPassword})
}
render() {
let {placeholder, onChange} = this.props
return (
<Input
type={this.state.showPassword ? 'text' : 'password'}
wrapperClass={'password-input'}
placeholder={placeholder}
onChange={onChange}
>
<i className={'iconfont iconiconfront-54'} onClick={this.togglePasswordVisibility}/>
</Input>
);
}
}
export default PasswordInput;
\ No newline at end of file
src/components/passport/common/passwordInput/password-input.scss 0 → 100644
.password-input {
margin-bottom: 24px;
.iconfont{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 16px;
font-size: 20px;
}
}
\ No newline at end of file
src/components/passport/common/veriCodeInput/index.js 0 → 100644
import React, { Component } from 'react';
import './veri-code-input.scss'
import classnames from 'classnames'
import Input from '../Input'
class VeriCodeInput extends Component {
constructor(props) {
super(props);
this.state = {
veriCode: '',
counting: false,
count: 20
}
this.timer = null
}
countDown = () => {
let {count} = this.state
if (!this.state.counting) {
this.sendCode()
this.setState({count: count--})
this.setState({counting: true})
this.timer = setInterval(() => {
if (count <= 0) {
this.setState({counting: false})
clearInterval(this.timer)
return
}
this.setState({count: count--})
}, 1000)
}
}
sendCode = () => {
}
handleChange = (val) => {
let {onChange} = this.props
this.setState({veriCode: val})
onChange && onChange(val)
}
render() {
return (
<Input
type={'number'}
placeholder={''}
onChange={this.handleChange}
wrapperClass={this.props.className}
>
<button className={classnames('verify', {active: !this.state.counting})} onClick={this.countDown}>
{
this.state.counting ?
(`重新发送${this.state.count}s`)
: '发送验证码'
}
</button>
</Input>
);
}
}
export default VeriCodeInput;
\ No newline at end of file
src/components/passport/common/veriCodeInput/veri-code-input.scss 0 → 100644
.verify {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 84px;
height: 21px;
padding-left: 7px;
border: none;
border-left: 1px solid $bg_ccc;
color: $color_999;
background: transparent;
-webkit-appearance: none;
&.active {
color: $active;
}
}
\ No newline at end of file
src/components/passport/forgotPassword/forgot-password.scss 0 → 100644
.forgot-password {
height: 100%;
padding: 38px 36px;
.place {
width: 100%;
height: 39px;
margin-bottom: 33px;
background: #56abff;
}
.tel-input {
margin-bottom: 21px;
}
.verify-code{
margin-bottom: 21px;
}
.next {
background: $active;
color: $white;
}
}
\ No newline at end of file
src/components/passport/forgotPassword/index.js 0 → 100644
import React, { Component } from 'react'
import './forgot-password.scss'
import ClearableInput from '@common/ClearableInput'
import VeriCodeButton from '../common/veriCodeInput'
import Button from '../common/Button'
class ForgotPassword extends Component {
constructor(props) {
super(props);
this.state = {
verificationCode: '',
password: ''
}
}
setTel = (val) => {
console.log(val)
this.setState({tel: val})
}
setVerificationCode = (val) => {
console.log(val)
this.setState({verificationCode: val});
}
render() {
return (
<div className={'forgot-password'}>
<ClearableInput
type={'tel'}
placeholder={'请输入注册时的邮箱账号或手机号'}
onChange={this.setTel}
wrapperClass={'tel-input'}
/>
<VeriCodeButton
className={'verify-code'}
onChange={this.setVerificationCode}
/>
<div className="place"/>
<Button className={'next'}>下一步</Button>
</div>
);
}
}
export default ForgotPassword
\ No newline at end of file
src/components/passport/index.js
import React, { Component } from 'react' import React, {Component} from 'react'
import { Route, Switch } from 'react-router-dom' import {Route, Switch} from 'react-router-dom'
import './passport.scss' import './passport.scss'
import WechatLogin from './wechatLogin' import WechatLogin from './wechatLogin'
import AccountLogin from './accountLogin' import AccountLogin from './accountLogin'
import ForgotPassword from './forgotPassword'
import SetPassword from './setPassword'
import BindingTel from './bindingTel'
import account from './account.png' import account from './account.png'
import qq from './qq.png' import qq from './qq.png'
...@@ -48,8 +51,10 @@ class Passport extends Component { ...@@ -48,8 +51,10 @@ class Passport extends Component {
<Switch> <Switch>
<Route path={match.url + '/wechat-login'} <Route path={match.url + '/wechat-login'}
render={() => <WechatLogin loginWays={this.state.loginWays}/>}/> render={() => <WechatLogin loginWays={this.state.loginWays}/>}/>
<Route path={match.url + '/account-login'} <Route path={match.url + '/account-login'} component={AccountLogin}/>
render={() => <AccountLogin loginWays={this.state.loginWays.slice(1)}/>}/> <Route path={match.url + '/forgot-password'} component={ForgotPassword}/>
<Route path={match.url + '/set-password'} component={SetPassword}/>
<Route path={match.url + '/binding-tel'} component={BindingTel}/>
</Switch> </Switch>
</div> </div>
) )
......
src/components/passport/setPassword/index.js 0 → 100644
import React, { Component } from 'react';
import './set-password.scss'
import PasswordInput from '../common/passwordInput'
import Button from '../common/Button'
import classnames from 'classnames'
class SetPassword extends Component {
constructor(props) {
super(props);
this.state = {
password: '',
agree: true
};
}
handleChange = (val) => {
console.log(val)
this.setState({password: val});
}
toggleAgree = () => {
this.setState({agree: !this.state.agree});
}
render() {
return (
<div className={'set-password'}>
<p className='title'>密码需要包含6-16位字母及数字</p>
<PasswordInput
placeholder={'设置密码'}
onChange={this.handleChange}
/>
<Button className={'btn-active'}>完成</Button>
<p className='user-agreement'>
<i className={classnames({
'iconfont iconiconfront-3': this.state.agree,
disagree: !this.state.agree
})} onClick={this.toggleAgree}/>
同意<span>《七月在线用户使用协议》</span>
</p>
<p className='skip'>跳过</p>
</div>
);
}
}
export default SetPassword;
\ No newline at end of file
src/components/passport/setPassword/set-password.scss 0 → 100644
.set-password {
position: relative;
padding: 35px 38px;
.title {
margin-bottom: 12px;
font-size: $font_12;
color: $color_666;
}
.btn-active {
margin-bottom: 20px;
background: $active;
color: $white;
}
.user-agreement {
line-height: 30px;
i {
margin-right: 3px;
font-size: 21px;
vertical-align: middle;
&.iconfont {
color: $active;
}
&.disagree {
padding: 2px;
padding-top: 4px;
&::before {
content: '';
display: inline-block;
width: 19px;
height: 19px;
border: 1px solid $border_ccc;
border-radius: 50%;
}
}
}
span {
vertical-align: middle;
color: $active;
}
}
.skip {
margin-top: 84px;
font-size: $font_14;
color: $color_999;
text-align: center;
}
}
\ No newline at end of file
src/components/passport/wechatLogin/index.js
...@@ -4,17 +4,24 @@ import Input from "../common/Input"; ...@@ -4,17 +4,24 @@ import Input from "../common/Input";
import LoginButton from '../common/LoginButton'; import LoginButton from '../common/LoginButton';
import LoginWays from '../common/LoginWays' import LoginWays from '../common/LoginWays'
import Header from '../common/Header' import Header from '../common/Header'
import VeriCodeInput from '../common/veriCodeInput'
class WechatLogin extends Component { class WechatLogin extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = {} this.state = {
veriCode: ''
}
} }
selectLoginWays = (i) => { selectLoginWays = (i) => {
console.log(i) console.log(i)
} }
handleChange = (val) => {
this.setState({veriCode: val})
}
render() { render() {
const {loginWays} = this.props const {loginWays} = this.props
return ( return (
...@@ -23,11 +30,10 @@ class WechatLogin extends Component { ...@@ -23,11 +30,10 @@ class WechatLogin extends Component {
<div className="login-info"> <div className="login-info">
<Input inputType={'number'} placeholder={'手机号快捷登录(免注册)'} wrapperClass={'tel-input'}/> <Input inputType={'number'} placeholder={'手机号快捷登录(免注册)'} wrapperClass={'tel-input'}/>
<Input <VeriCodeInput
type={'verification'} className={'verification'}
inputType={'number'} onChange={this.handleChange}
wrapperClass={'tel-input'}/> />
<div className={'place'}/>
<LoginButton/> <LoginButton/>
</div> </div>
......
src/components/passport/wechatLogin/wechatLogin.scss
...@@ -11,6 +11,10 @@ ...@@ -11,6 +11,10 @@
margin-bottom: 24px; margin-bottom: 24px;
} }
.verification{
margin-bottom: 24px;
}
.place { .place {
width: 100%; width: 100%;
height: 39px; height: 39px;
...@@ -21,5 +25,4 @@ ...@@ -21,5 +25,4 @@
} }
} }
\ No newline at end of file
src/font/iconfont.eot
No preview for this file type
src/font/iconfont.ttf
No preview for this file type
src/font/iconfont.woff
No preview for this file type
src/router.js
...@@ -7,7 +7,6 @@ import Classify from './components/classify'; ...@@ -7,7 +7,6 @@ import Classify from './components/classify';
import Study from './components/study'; import Study from './components/study';
import My from './components/my'; import My from './components/my';
import CourseList from './components/classify/courselist'; import CourseList from './components/classify/courselist';
import Search from './components/search/index';
import Order from './components/order/index'; import Order from './components/order/index';
import Preferential from './components/preferential/index'; import Preferential from './components/preferential/index';
import Search from './components/search/index' import Search from './components/search/index'
...@@ -28,20 +27,14 @@ const router = () => ( ...@@ -28,20 +27,14 @@ const router = () => (
<Route path='/study' component={Study}></Route> <Route path='/study' component={Study}></Route>
<Route path='/my' component={My}></Route> <Route path='/my' component={My}></Route>
<Route path='/courselist' component={CourseList}></Route> <Route path='/courselist' component={CourseList}></Route>
<<<<<<< HEAD
<Route path='/preferential' component={Preferential}></Route> <Route path='/preferential' component={Preferential}></Route>
<Route path='/search' component={Search}></Route> <Route path='/search' component={Search}></Route>
<<<<<<< HEAD
<Route path='/order' component={Order}></Route> <Route path='/order' component={Order}></Route>
=======
<Route path='/detail' component={Detail}></Route> <Route path='/detail' component={Detail}></Route>
>>>>>>> 1b8018b78869174664aea7e35cd7b390866a55ea
=======
<Route path='/examination' component={Examination}></Route> <Route path='/examination' component={Examination}></Route>
<Route path='/exchange-coupons' component={ExchangeCoupons}></Route> <Route path='/exchange-coupons' component={ExchangeCoupons}></Route>
<Route path='/use-coupon' component={UseCoupon}></Route> <Route path='/use-coupon' component={UseCoupon}></Route>
<Route path='/passport' component={Passport}></Route> <Route path='/passport' component={Passport}></Route>
>>>>>>> f324c669ca80cefcb68423247058c3703a568f61
</Switch> </Switch>
<Menu/> <Menu/>
</Router> </Router>
......
src/styles/variable.scss
...@@ -64,6 +64,8 @@ $sp_e7eaf1: #e7eaf1; ...@@ -64,6 +64,8 @@ $sp_e7eaf1: #e7eaf1;
$border_ddd: #ddd; $border_ddd: #ddd;
$border_e7eaf1: #E7EAF1; $border_e7eaf1: #E7EAF1;
$border_f31: #f31; $border_f31: #f31;
$border_ccc: #ccc;
......
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