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 @@
"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
"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": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
......@@ -5652,8 +5657,7 @@
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"optional": true
"bundled": true
},
"aproba": {
"version": "1.2.0",
......@@ -5671,13 +5675,11 @@
},
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"optional": true
"bundled": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -5690,18 +5692,15 @@
},
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -5804,8 +5803,7 @@
},
"inherits": {
"version": "2.0.3",
"bundled": true,
"optional": true
"bundled": true
},
"ini": {
"version": "1.3.5",
......@@ -5815,7 +5813,6 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -5828,20 +5825,17 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
},
"minimist": {
"version": "0.0.8",
"bundled": true,
"optional": true
"bundled": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -5858,7 +5852,6 @@
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -5931,8 +5924,7 @@
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"object-assign": {
"version": "4.1.1",
......@@ -5942,7 +5934,6 @@
"once": {
"version": "1.4.0",
"bundled": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -6018,8 +6009,7 @@
},
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"optional": true
"bundled": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -6049,7 +6039,6 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -6067,7 +6056,6 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -6106,13 +6094,11 @@
},
"wrappy": {
"version": "1.0.2",
"bundled": true,
"optional": true
"bundled": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"optional": true
"bundled": true
}
}
},
......@@ -11445,6 +11431,24 @@
"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": {
"version": "1.4.0",
"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 @@
}
.iconfont{
font-size: 24px !important;
font-size: 24px;
margin-bottom: 4px;
}
\ No newline at end of file
src/components/coupons/common/Coupon/index.js
......@@ -4,10 +4,6 @@ import classnames from 'classnames'
class Coupon extends Component {
constructor(props) {
super(props)
}
pick = () => {
let {purpose, select, invalid} = this.props
purpose === 'use' && !invalid && select && select(this.props.index)
......@@ -39,7 +35,7 @@ class Coupon extends Component {
{
purpose === 'use' &&
<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 {
constructor(props) {
super(props)
this.state = {
selected: 0
selected: 0,
exchangeNum: ''
}
}
......@@ -57,6 +58,10 @@ class UseCoupon extends Component {
})
}
handleChange = (val) => {
this.setState({exchangeNum: val})
}
componentDidMount() {
document.getElementsByClassName('tabbar')[0].style.display = 'none'
}
......@@ -64,7 +69,7 @@ class UseCoupon extends Component {
render() {
return (
<div className='use-coupon'>
<ExchangeaBar/>
<ExchangeaBar onChange={this.handleChange}/>
<div className="coupons-area">
<Content
coupons={mockData.valid}
......
src/components/passport/accountLogin/accountLogin.scss
......@@ -12,6 +12,10 @@
margin-bottom: 24px;
}
.verification {
margin-bottom: 24px;
}
.place {
width: 100%;
height: 39px;
......@@ -19,5 +23,13 @@
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 './accountLogin.scss'
import { Link } from "react-router-dom";
import Header from "../common/Header";
import Input from '../common/Input'
import LoginButton from '../common/LoginButton'
import LoginWays from '../common/LoginWays'
import VeriCodeButton from '../common/veriCodeInput'
// import LoginWays from '../common/LoginWays'
class AccountLogin extends Component {
constructor(props) {
super(props)
}
render() {
return (
......@@ -18,14 +18,13 @@ class AccountLogin extends Component {
<Header/>
<div className="login-info">
<Input inputType={'number'} placeholder={'手机/邮箱/昵称'} wrapperClass={'tel-input'}/>
<Input
inputType={'number'}
wrapperClass={'tel-input'}
placeholder={'密码'}
<VeriCodeButton
className={'verification'}
/>
<LoginButton/>
<Link className={'forgot-password-btn'} to='/passport/forgot-password'>忘记密码</Link>
</div>
<LoginWays loginWays={this.props.loginWays}/>
{/*<LoginWays loginWays={this.props.loginWays}/>*/}
</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 {
constructor(props) {
super(props)
this.state = {
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)
value: ''
}
}
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() {
let {inputType, iconClass, placeholder, wrapperClass, type = 'tel'} = this.props
let {type, iconClass, placeholder, wrapperClass, children} = this.props
return (
<div className={classnames('input-wrapper', wrapperClass)}>
<input
type={inputType}
type={type}
className='input'
placeholder={placeholder}
value={this.state.value}
onChange={this.handleChange}
/>
<i className={classnames('icon', iconClass)}/>
{
type === 'verification' &&
<button className={classnames('verify', {active: !this.state.counting})} onClick={this.countDown}>
{
this.state.counting ?
(`重新发送${this.state.count}s`)
: '发送验证码'
}
</button>
}
{children}
</div>
)
}
......
src/components/passport/common/Input/input.scss
......@@ -7,7 +7,7 @@
.input {
width: 100%;
height: 100%;
padding: 15px 34px;
padding: 15px 0 15px 34px;
border: 1px solid $bg_ccc;
border-radius: 3px;
-webkit-appearance: none;
......@@ -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 './loginWays.scss'
import { Link } from "react-router-dom";
class LoginWays extends Component {
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 { Route, Switch } from 'react-router-dom'
import React, {Component} from 'react'
import {Route, Switch} from 'react-router-dom'
import './passport.scss'
import WechatLogin from './wechatLogin'
import AccountLogin from './accountLogin'
import ForgotPassword from './forgotPassword'
import SetPassword from './setPassword'
import BindingTel from './bindingTel'
import account from './account.png'
import qq from './qq.png'
......@@ -48,8 +51,10 @@ class Passport extends Component {
<Switch>
<Route path={match.url + '/wechat-login'}
render={() => <WechatLogin loginWays={this.state.loginWays}/>}/>
<Route path={match.url + '/account-login'}
render={() => <AccountLogin loginWays={this.state.loginWays.slice(1)}/>}/>
<Route path={match.url + '/account-login'} component={AccountLogin}/>
<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>
</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";
import LoginButton from '../common/LoginButton';
import LoginWays from '../common/LoginWays'
import Header from '../common/Header'
import VeriCodeInput from '../common/veriCodeInput'
class WechatLogin extends Component {
constructor(props) {
super(props)
this.state = {}
this.state = {
veriCode: ''
}
}
selectLoginWays = (i) => {
console.log(i)
}
handleChange = (val) => {
this.setState({veriCode: val})
}
render() {
const {loginWays} = this.props
return (
......@@ -23,11 +30,10 @@ class WechatLogin extends Component {
<div className="login-info">
<Input inputType={'number'} placeholder={'手机号快捷登录(免注册)'} wrapperClass={'tel-input'}/>
<Input
type={'verification'}
inputType={'number'}
wrapperClass={'tel-input'}/>
<div className={'place'}/>
<VeriCodeInput
className={'verification'}
onChange={this.handleChange}
/>
<LoginButton/>
</div>
......
src/components/passport/wechatLogin/wechatLogin.scss
......@@ -11,6 +11,10 @@
margin-bottom: 24px;
}
.verification{
margin-bottom: 24px;
}
.place {
width: 100%;
height: 39px;
......@@ -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';
import Study from './components/study';
import My from './components/my';
import CourseList from './components/classify/courselist';
import Search from './components/search/index';
import Order from './components/order/index';
import Preferential from './components/preferential/index';
import Search from './components/search/index'
......@@ -28,20 +27,14 @@ const router = () => (
<Route path='/study' component={Study}></Route>
<Route path='/my' component={My}></Route>
<Route path='/courselist' component={CourseList}></Route>
<<<<<<< HEAD
<Route path='/preferential' component={Preferential}></Route>
<Route path='/search' component={Search}></Route>
<<<<<<< HEAD
<Route path='/order' component={Order}></Route>
=======
<Route path='/detail' component={Detail}></Route>
>>>>>>> 1b8018b78869174664aea7e35cd7b390866a55ea
=======
<Route path='/examination' component={Examination}></Route>
<Route path='/exchange-coupons' component={ExchangeCoupons}></Route>
<Route path='/use-coupon' component={UseCoupon}></Route>
<Route path='/passport' component={Passport}></Route>
>>>>>>> f324c669ca80cefcb68423247058c3703a568f61
</Switch>
<Menu/>
</Router>
......
src/styles/variable.scss
......@@ -64,6 +64,8 @@ $sp_e7eaf1: #e7eaf1;
$border_ddd: #ddd;
$border_e7eaf1: #E7EAF1;
$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