Merge branch 'master' of gitlab.julyedu.com:baiguangyao/mr-julyedu

src/common/ClearableInput/index.js

@@ -12,7 +12,7 @@ class ClearableInput extends Component {
             inputClass,
             type = 'text',
             icon,
-            setValues,
+            setFieldValue,
             ...rest
         } = this.props
         let clearIconStyle = {
@@ -31,7 +31,7 @@ class ClearableInput extends Component {
                 <i
                     className={'iconfont icondanseshixintubiao-3 clear'}
                     onClick={() => {
-                        setValues({[name]: ''})
+                        setFieldValue(name,'')
                     }}
                     style={clearIconStyle}
                 />

src/components/passport/accountLogin/index.js

@@ -12,9 +12,15 @@ import Header from "../common/Header";
 import Input from '../common/Input'
 import LoginButton from '../common/LoginButton'
 import PasswordInput from '../common/passwordInput'
+import { Toast } from "antd-mobile";
 
 class AccountLogin extends PureComponent {
 
+    componentDidMount() {
+        console.log(this.props.values);
+    }
+
+
     render() {
         const {
             errors,
@@ -69,9 +75,12 @@ const formikConfig = {
         props.accountLogin({
             username, password
         }).then(res => {
+            console.log(res);
             if (!res.hasError) {
                 let {from} = props.location.state || {from: {pathname: '/'}}
                 history.push(from.pathname)
+            } else {
+                Toast.info(res.msg, 2, null, false)
             }
         })
     }

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

@@ -6,12 +6,16 @@ function Input({
                    icon,
                    wrapperClass,
                    children,
+                   value,
+                   name,
                    ...rest
                }) {
     return (
         <div className={classnames('input-wrapper', wrapperClass)}>
             <input
                 className='input'
+                name={name}
+                value={value}
                 {...rest}
             />
             {icon}

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

@@ -21,7 +21,6 @@ class VeriCodeInput extends Component {
 
     countDown = () => {
         let {count} = this.state
-
         if (!this.state.isFirst) {
             Toast.info('请重新进行滑块验证', 2, null, false)
             this.props.instance.refresh()
@@ -57,7 +56,6 @@ class VeriCodeInput extends Component {
 
     sendCode = () => {
         if (!this.validate()) return
-        console.log(this.getType())
         this.getType() === 'email' ? this.sendEmail() : this.sendSMS();
         return true;
     }
@@ -82,6 +80,10 @@ class VeriCodeInput extends Component {
 
     sendSMS = () => {
         const {action, tel, challenge} = this.props
+        if (!tel) {
+            Toast.info('请输入手机号或邮箱地址')
+            return
+        }
         http.post(`${api['passport-api']}/quick_sms`, {
             phone_num: tel,
             action: action || 'login',
@@ -103,16 +105,29 @@ class VeriCodeInput extends Component {
         const {tel, challenge, account} = this.props
         let hasTel = has(this.props, 'tel')
         let content
+
         if (hasTel) {
+            if (!tel) {
                 content = '手机号码不能为空'
+            }
+            if (validateTel(tel)) {
+                content = '请输入正确格式的手机号码'
+            }
         } else {
+            if (!account) {
                 content = '手机号或电子邮件不能为空'
             }
-        if ((hasTel && !tel) || (!hasTel && !account)) {
+            if (!validateTel(account) && !validateEmail(account)) {
+                content = '请输入正确格式的手机号或电子邮件'
+            }
+        }
+
+        if (content) {
             Toast.info(content, 2, null, false)
             return false
         }
 
+
         if (!challenge) {
             Toast.info('请进行滑块验证', 2, null, false)
             return false
@@ -121,10 +136,10 @@ class VeriCodeInput extends Component {
     }
 
     render() {
-        let {type = 'number', className, ...rest} = this.props
+        let { className, ...rest} = this.props
         return (
             <Input
-                type={type}
+                type={'number'}
                 wrapperClass={className}
                 {...rest}
             >

src/components/passport/forgotPassword/forgot-password.scss

@@ -22,4 +22,5 @@
         margin-bottom: 21px;
     }
 
+
 }
\ No newline at end of file

src/components/passport/forgotPassword/index.js

@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Toast } from "antd-mobile";
 import { HeaderBar, Captcha, ClearableInput } from "@/common";
-import { validateTel, validateEmail } from "@/utils";
+import { validateTel, validateEmail, http, api } from "@/utils";
 import { quickLogin } from '@/store/userAction';
 import { isEmpty } from "lodash";
 
@@ -52,10 +52,10 @@ class ForgotPassword extends Component {
                                 return (
                                     <ClearableInput
                                         {...field}
-                                        setValues={form.setValues}
                                         type={'tel'}
                                         placeholder={'请输入注册时的邮箱账号或手机号'}
                                         wrapperClass={'tel-input'}
+                                        setFieldValue={form.setFieldValue}
                                         icon={<i className={'iconfont iconshouji'}
                                                  style={{fontSize: '22px', left: '11px'}}
                                         />}
@@ -107,17 +107,30 @@ const formikConfig = {
         return errors
     },
     handleSubmit(values, {props}) {
-        console.log(props)
-        props.quickLogin({
-            phone_num: values.account,
-            phone_code: values.veriCode
-        }).then(res => {
-            if (res.hasError) {
-                Toast.info(res.msg);
+
+
+        let account, address
+
+        if (validateEmail(values.account)) {
+            account = 'email'
+            address = 'check_email_code'
+            sessionStorage.setItem('r_type', 'email')
+            sessionStorage.setItem('email', values.account)
         } else {
-                let state = props.location.state || {from: {pathname: '/'}}
+            account = 'phone_num'
+            address = 'check_phone_code'
+            sessionStorage.setItem('r_type', 'phone')
+            sessionStorage.setItem('tel', values.account)
+        }
 
-                props.history.replace(state.from)
+        http.post(`${api['passport-api']}/${address}`, {
+            [account]: values.account,
+            code: values.veriCode
+        }).then(res => {
+            if (res.data.errno == 0) {
+                props.history.push('/passport/set-password')
+            } else {
+                Toast.info(res.data.msg)
             }
         })
     },

src/components/passport/passport.scss

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

src/components/passport/setPassword/index.js

@@ -5,29 +5,19 @@ import PasswordInput from '../common/passwordInput'
 import Button from '../common/Button'
 import classnames from 'classnames'
 import { compose } from 'redux'
-
-class SetPassword extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            password: '',
-            agree: true
-        };
-    }
+import { HeaderBar } from "@/common";
+import { http, api } from "@/utils";
+import { Toast } from "antd-mobile";
+import { encrypt } from "@/components/passport/encryption";
+import { Link } from "react-router-dom";
 
 
-    handleChange = (val) => {
-        this.setState({password: val});
-    }
-
-    toggleAgree = () => {
-        this.setState({agree: !this.state.agree});
-    }
+class SetPassword extends Component {
 
     render() {
-
         return (
+            <>
+                <HeaderBar arrow={true} title={'设置密码'}/>
                 <div className={'set-password'}>
                     <p className='title'>密码需要包含6-16位字母及数字</p>
                     <Form>
@@ -36,6 +26,7 @@ class SetPassword extends Component {
                             render={({field}) => {
                                 return (
                                     <PasswordInput
+                                        autoComplete={'on'}
                                         placeholder={'设置密码'}
                                         onChange={this.handleChange}
                                         {...field}
@@ -44,26 +35,68 @@ class SetPassword extends Component {
                             }}
                         />
                         <Button className={'btn-active'}>完成</Button>
-                </Form>
-                <p className='user-agreement'>
-                    <i className={classnames({
-                        'iconfont iconiconfront-3': this.state.agree,
-                        disagree: !this.state.agree
-                    })} onClick={this.toggleAgree}/>
+                        <label htmlFor="agreement" className='user-agreement'>
+                            <Field type='checkbox'
+                                   name='agreement'
+                                   id='agreement'
+                                   className={classnames([
+                                       this.props.values.agreement ? 'iconfont iconiconfront-3' : 'disagree'
+                                   ])}
+                            />
                             同意<span>《七月在线用户使用协议》</span>
-                </p>
-                <p className='skip'>跳过</p>
+                        </label>
+                    </Form>
+                    <div className="skip">
+                        <Link replace to='/passport/account-login'>跳过</Link>
+                    </div>
                 </div>
+            </>
         );
     }
 }
 
 const formikConfig = {
-    mapValuesToProps: () => ({
-        password: ''
-    }),
-    handleSubmit: (values) => {
+    mapPropsToValues() {
+        return {
+            password: '',
+            agreement: true
+        }
+    },
+    handleSubmit: (values, {props}) => {
 
+        let key = sessionStorage.getItem('r_type') === 'email' ? 'email' : 'tel'
+        let encrypted = encrypt(values.password)
+
+        http.post(`${api['passport-api']}/up_pass${key === 'tel' && '_by_phone' || ''}`, {
+            [key]: sessionStorage.getItem(key),
+            pass: encrypted,
+            re_pass: encrypted
+        })
+            .then(res => {
+                if (res.data.errno == 0) {
+                    Toast.info('密码设置成功')
+                    setTimeout(function () {
+                        props.history.replace('/passport')
+                    }, 1000)
+                } else {
+                    Toast.info(res.data.msg, 2, null, false)
+                }
+            })
+
+    },
+    validateOnChange: false,
+    validate: (values) => {
+        let errors = {}
+        const re = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
+        if (!re.test(values.password)) {
+            errors.password = '密码需要包含6-16位字母及数字'
+            Toast.info(errors.password, 2, null, false)
+        }
+        if (!values.agreement) {
+            errors.agreement = '您须同意《七月在线用户使用协议》'
+            Toast.info(errors.agreement, 2, null, false)
+        }
+        return errors
     }
 }
 

src/components/passport/setPassword/set-password.scss

@@ -17,7 +17,15 @@
     .user-agreement {
         line-height: 30px;
 
-        i {
+        span {
+            vertical-align: middle;
+            color: $active;
+        }
+
+        input{
+            -webkit-appearance: none;
+            border: none;
+            outline: 0;
             margin-right: 3px;
             font-size: 21px;
             vertical-align: middle;
@@ -33,19 +41,14 @@
                 &::before {
                     content: '';
                     display: inline-block;
-                    width: 19px;
-                    height: 19px;
+                    width: 17px;
+                    height: 17px;
                     border: 1px solid $border_ccc;
                     border-radius: 50%;
                 }
 
             }
         }
-
-        span {
-            vertical-align: middle;
-            color: $active;
-        }
     }
 
     .skip {
@@ -54,4 +57,11 @@
         color: $color_999;
         text-align: center;
     }
+
+    .input-wrapper {
+        input {
+            padding-left: 17px;
+        }
+    }
+
 }
\ No newline at end of file