passport

src/components/passport/accountLogin/accountLogin.scss

+.account-login {
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+
+
+    .login-info {
+        padding: 0 38px;
+        flex: 1;
+
+        .tel-input {
+            margin-bottom: 24px;
+        }
+
+        .place {
+            width: 100%;
+            height: 39px;
+            margin-bottom: 33px;
+            background: #56abff;
+        }
+
+    }
+}
\ No newline at end of file

src/components/passport/accountLogin/index.js

+import React, { Component } from "react"
+import './accountLogin.scss'
+
+import Header from "../common/Header";
+import Input from '../common/Input'
+import LoginButton from '../common/LoginButton'
+import LoginWays from '../common/LoginWays'
+
+
+class AccountLogin extends Component {
+    constructor(props) {
+        super(props)
+    }
+
+    render() {
+        return (
+            <div className={'account-login'}>
+                <Header/>
+                <div className="login-info">
+                    <Input inputType={'number'} placeholder={'手机/邮箱/昵称'} wrapperClass={'tel-input'}/>
+                    <Input
+                        inputType={'number'}
+                        wrapperClass={'tel-input'}
+                        placeholder={'密码'}
+                    />
+                    <LoginButton/>
+                </div>
+                <LoginWays loginWays={this.props.loginWays}/>
+            </div>
+        );
+    }
+}
+
+export default AccountLogin

src/components/passport/common/Header/header.scss

+.header {
+    padding: 38px 130px 52px;
+    flex: 0 0 auto;
+
+    img {
+        width: 117px;
+        height: 50px;
+    }
+}
\ No newline at end of file

src/components/passport/common/Header/index.js

+import React from 'react';
+import './header.scss'
+import logo from './logo.png'
+
+
+const Header = () => {
+    return (
+        <div className="header">
+            <img src={logo} alt=""/>
+        </div>
+    );
+};
+
+export default Header;
\ No newline at end of file

src/components/passport/common/Input/index.js

+import React, { Component } from 'react';
+import './input.scss'
+import classnames from "classnames";
+
+
+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)
+        }
+    }
+
+    handleChange = (e) => {
+        this.setState({value: e.target.value})
+    }
+
+    render() {
+        let {inputType, iconClass, placeholder, wrapperClass, type = 'tel'} = this.props
+        return (
+            <div className={classnames('input-wrapper', wrapperClass)}>
+                <input
+                    type={inputType}
+                    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>
+                }
+            </div>
+        )
+    }
+}
+
+export default Index;
\ No newline at end of file

src/components/passport/common/Input/input.scss

+.input-wrapper {
+    position: relative;
+    width: 300px;
+    height: 46px;
+    margin: 0 auto;
+
+    .input {
+        width: 100%;
+        height: 100%;
+        padding: 15px 34px;
+        border: 1px solid $bg_ccc;
+        border-radius: 3px;
+        -webkit-appearance: none;
+
+        &::-webkit-input-placeholder {
+            font-size: $font_16;
+            color: $color_999;
+        }
+
+        .icon {
+
+        }
+    }
+
+    .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/LoginButton/index.js

+import React from 'react'
+import './loginButton.scss'
+
+
+const LoginButton = ({onClick}) => {
+    return (
+        <button onClick={onClick} className={'login-button'}>
+            登录
+        </button>
+    );
+};
+
+export default LoginButton;
\ No newline at end of file

src/components/passport/common/LoginButton/loginButton.scss

+.login-button {
+    display: block;
+    width: 100%;
+    height: 44px;
+    line-height: 44px;
+    font-size: $font_18;
+    -webkit-appearance: none;
+    color: $white;
+    background: $bg_ccc;
+    border: none;
+}
\ 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) => {
+        this.props.onClick(index)
+    }
+
+    render() {
+        return (
+            <div className="login-ways">
+                <div className="bottom-title">其他登录方式</div>
+                <ul className='login-ways-container'>
+                    {
+                        this.props.loginWays.map((item, index) => {
+                            return (
+                                <li key={index} onClick={this.handleClick.bind(this, index)}>
+                                    <img src={item.logo} alt=""/>
+                                    <p>{item.text}</p>
+                                </li>
+                            )
+                        })
+                    }
+                </ul>
+            </div>
+        );
+    }
+}
+
+
+export default LoginWays;
\ No newline at end of file

src/components/passport/common/LoginWays/loginWays.scss

+.login-ways {
+    flex: 0 0 auto;
+    @mixin line($pos) {
+        position: absolute;
+        #{$pos}: 38px;
+        top: 50%;
+        transform: translateY(-50%);
+        content: '';
+        display: inline-block;
+        width: 80px;
+        height: 1px;
+        background: $bg_ccc;
+    }
+
+    .bottom-title {
+        position: relative;
+        font-size: $font_14;
+        text-align: center;
+        margin-bottom: 26px;
+
+        &::before {
+            @include line(left);
+        }
+
+        &::after {
+            @include line(right);
+        }
+    }
+}
+
+.login-ways-container {
+    display: flex;
+    justify-content: space-around;
+    padding: 0 30px 16px;
+
+    li {
+        text-align: center;
+
+        img {
+            width: 34px;
+        }
+
+        p {
+            font-size: $font_14;
+            line-height: $font_14 + 22px;
+            text-align: center;
+        }
+    }
+
+
+}
\ No newline at end of file

src/components/passport/index.js

+import React, { Component } from 'react'
+import { Route, Switch } from 'react-router-dom'
+
+import './passport.scss'
+
+import WechatLogin from './wechatLogin'
+import AccountLogin from './accountLogin'
+
+import account from './account.png'
+import qq from './qq.png'
+import sina from './sina.png'
+import wechat from './wechat.png'
+
+
+class Passport extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            loginWays: [
+                {
+                    logo: account,
+                    text: '账号登录'
+                },
+                {
+                    logo: wechat,
+                    text: '微信'
+                },
+                {
+                    logo: qq,
+                    text: 'QQ'
+                },
+                {
+                    logo: sina,
+                    text: '新浪'
+                },
+            ]
+        }
+    }
+
+    componentDidMount() {
+        document.getElementsByClassName('tabbar')[0].style.display = 'none'
+    }
+
+    render() {
+        let {match} = this.props
+        return (
+            <div className="passport">
+                <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)}/>}/>
+                </Switch>
+            </div>
+        )
+    }
+}
+
+
+export default Passport
\ No newline at end of file

src/components/passport/passport.scss

+.passport {
+    height: 100%;
+}
\ No newline at end of file

src/components/passport/wechatLogin/index.js

+import React, { Component } from 'react'
+import './wechatLogin.scss'
+import Input from "../common/Input";
+import LoginButton from '../common/LoginButton';
+import LoginWays from '../common/LoginWays'
+import Header from '../common/Header'
+
+class WechatLogin extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    selectLoginWays = (i) => {
+        console.log(i)
+    }
+
+    render() {
+        const {loginWays} = this.props
+        return (
+            <div className='login'>
+                <Header/>
+
+                <div className="login-info">
+                    <Input inputType={'number'} placeholder={'手机号快捷登录(免注册)'} wrapperClass={'tel-input'}/>
+                    <Input
+                        type={'verification'}
+                        inputType={'number'}
+                        wrapperClass={'tel-input'}/>
+                    <div className={'place'}/>
+                    <LoginButton/>
+                </div>
+
+                <LoginWays onClick={this.selectLoginWays} loginWays={loginWays}/>
+            </div>
+        )
+    }
+}
+
+
+export default WechatLogin
\ No newline at end of file

src/components/passport/wechatLogin/wechatLogin.scss

+.login {
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+
+    .login-info {
+        padding: 0 38px;
+        flex: 1;
+
+        .tel-input {
+            margin-bottom: 24px;
+        }
+
+        .place {
+            width: 100%;
+            height: 39px;
+            margin-bottom: 33px;
+            background: #56abff;
+        }
+
+    }
+
+
+
+}
\ No newline at end of file

src/router.js

@@ -10,6 +10,7 @@ import CourseList from './components/classify/courselist';
 import Examination from './components/examination'
 import ExchangeCoupons from './components/coupons/exchange-coupons'
 import UseCoupon from './components/coupons/use-coupons'
+import Passport from './components/passport'
 
 
 const router = () => (
@@ -24,6 +25,7 @@ const router = () => (
             <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>
         </Switch>
         <Menu/>
     </Router>

src/styles/variable.scss

@@ -10,6 +10,7 @@ $color_555: #555;
 $color_666: #666;
 $color_999: #999;
 $color_606: #606060;
+$color_bbb: #BBB;
 
 
 /*