合并passport

.history/src/router_20190427100109.js

+import React from 'react';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+
+import Menu from './menu';
+import Index from './components/Index';
+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'
+import Detail from './components/detail/index'
+import Examination from './components/examination'
+import ExchangeCoupons from './components/coupons/exchange-coupons'
+import UseCoupon from './components/coupons/use-coupons'
+import OrderInfo from './components/order/orderinfo';
+
+
+
+
+const router = (props) => (
+    <Router>
+        <Switch>
+            <Route exact path="/" component={Index}></Route>
+            <Route path="/index" component={Index}></Route>
+            <Route path='/classify' component={Classify}></Route>
+            <Route path='/study' component={Study}></Route>
+            <Route path='/my' component={My}></Route>
+            <Route path='/courselist' component={CourseList}></Route>
+            <Route path='/preferential' component={Preferential}></Route>
+            <Route path='/search' component={Search}></Route>
+            <Route path='/order' component={Order}></Route>
+            <Route path='/detail' component={Detail}></Route>
+            <Route path='/examination' component={Examination}></Route>
+            <Route path='/exchange-coupons' component={ExchangeCoupons}></Route>
+            <Route path='/use-coupon' component={UseCoupon}></Route>
+            <Route path='/orderinfo' component={OrderInfo}></Route>
+        </Switch>
+        <Menu/>
+    </Router>
+)
+
+
+export default router;
\ No newline at end of file

package-lock.json

@@ -4053,6 +4053,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",
@@ -11463,6 +11468,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

+.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

+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

+.account-login {
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+
+
+    .login-info {
+        padding: 0 38px;
+        flex: 1;
+
+        .tel-input {
+            margin-bottom: 24px;
+        }
+
+        .verification {
+            margin-bottom: 24px;
+        }
+
+        .place {
+            width: 100%;
+            height: 39px;
+            margin-bottom: 33px;
+            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 VeriCodeButton from '../common/veriCodeInput'
+// import LoginWays from '../common/LoginWays'
+
+
+class AccountLogin extends Component {
+
+    render() {
+        return (
+            <div className={'account-login'}>
+                <Header/>
+                <div className="login-info">
+                    <Input inputType={'number'} placeholder={'手机/邮箱/昵称'} wrapperClass={'tel-input'}/>
+                    <VeriCodeButton
+                        className={'verification'}
+                    />
+                    <LoginButton/>
+                    <Link className={'forgot-password-btn'} to='/passport/forgot-password'>忘记密码</Link>
+                </div>
+                {/*<LoginWays loginWays={this.props.loginWays}/>*/}
+            </div>
+        );
+    }
+}
+
+export default AccountLogin

src/components/passport/bindingTel/binding-tel.scss

+.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

+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

+.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

+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/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: ''
+        }
+    }
+
+    handleChange = (e) => {
+        let val = e.target.value
+        let {onChange} = this.props
+        this.setState({value: val})
+        onChange && onChange(val)
+    }
+
+    render() {
+        let {type, iconClass, placeholder, wrapperClass, children} = this.props
+        return (
+            <div className={classnames('input-wrapper', wrapperClass)}>
+                <input
+                    type={type}
+                    className='input'
+                    placeholder={placeholder}
+                    value={this.state.value}
+                    onChange={this.handleChange}
+                />
+                <i className={classnames('icon', iconClass)}/>
+                {children}
+            </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 0 15px 34px;
+        border: 1px solid $bg_ccc;
+        border-radius: 3px;
+        -webkit-appearance: none;
+
+        &::-webkit-input-placeholder {
+            font-size: $font_16;
+            color: $color_999;
+        }
+
+        .icon {
+
+        }
+    }
+}
\ 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'
+
+
+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/common/passwordInput/index.js

+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

+.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

+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

+.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

+.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

+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 './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'
+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'} 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>
+        )
+    }
+}
+
+
+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/setPassword/index.js

+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

+.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

+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'
+import VeriCodeInput from '../common/veriCodeInput'
+
+class WechatLogin extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            veriCode: ''
+        }
+    }
+
+    selectLoginWays = (i) => {
+        console.log(i)
+    }
+
+    handleChange = (val) => {
+        this.setState({veriCode: val})
+    }
+
+    render() {
+        const {loginWays} = this.props
+        return (
+            <div className='login'>
+                <Header/>
+
+                <div className="login-info">
+                    <Input inputType={'number'} placeholder={'手机号快捷登录(免注册)'} wrapperClass={'tel-input'}/>
+                    <VeriCodeInput
+                        className={'verification'}
+                        onChange={this.handleChange}
+                    />
+                    <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;
+        }
+
+        .verification{
+            margin-bottom: 24px;
+        }
+
+        .place {
+            width: 100%;
+            height: 39px;
+            margin-bottom: 33px;
+            background: #56abff;
+        }
+
+    }
+
+
+}
\ No newline at end of file

src/components/study/index.js

@@ -3,8 +3,8 @@ import './study.scss'
 
 import { Flex } from 'antd-mobile'
 import { NavLink, Route, Switch } from "react-router-dom"
-import MyCourses from "./my-courses"
-import FreeCourses from './free-courses'
+import MyCourses from "./myCourses"
+import FreeCourses from './freeCourses'
 
 
 

src/router.js

@@ -9,16 +9,14 @@ import My from './components/my';
 import CourseList from './components/classify/courselist';
 import Search from './components/search/index';
 import Order from './components/order/index';
-<<<<<<< HEAD
 import Preferential from './components/preferential/index';
 import Search from './components/search/index'
 import Detail from './components/detail/index'
 import Examination from './components/examination'
 import ExchangeCoupons from './components/coupons/exchange-coupons'
 import UseCoupon from './components/coupons/use-coupons'
-=======
 import OrderInfo from './components/order/orderinfo';
->>>>>>> 6087fee2665c41a9dab93e4bfd2cfb091644d681
+
 
 
 
@@ -31,23 +29,14 @@ const router = (props) => (
             <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>
-<<<<<<< HEAD
-=======
             <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>
->>>>>>> f324c669ca80cefcb68423247058c3703a568f61
-=======
             <Route path='/orderinfo' component={OrderInfo}></Route>
->>>>>>> 6087fee2665c41a9dab93e4bfd2cfb091644d681
         </Switch>
         <Menu/>
     </Router>

src/styles/variable.scss

@@ -11,6 +11,7 @@ $color_555: #555;
 $color_666: #666;
 $color_999: #999;
 $color_606: #606060;
+$color_bbb: #BBB;
 $color_202426: #202426;
 $color_4B4B4B: #4B4B4B;
 $color_FE2F2F: #FE2F2F;
@@ -62,6 +63,8 @@ $sp_e7eaf1: #e7eaf1;
 $border_ddd: #ddd;
 $border_e7eaf1: #E7EAF1;
 $border_f31: #f31;
+$border_ccc: #ccc;
+