From c7876536574314db0a5802d1461a3cf01413432d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E6=A0=91=E6=9E=97?= <904079904@qq.com> Date: Tue, 16 Jul 2019 17:52:34 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/common/components/DragValidatortwo.js | 114 ++++++++ .../src/modules/user/FindPasswordComponent.js | 123 ++++++--- .../modules/user/LoginRegisterComponent.js | 248 ++++++++++-------- 3 files changed, 337 insertions(+), 148 deletions(-) create mode 100644 public/react/src/common/components/DragValidatortwo.js diff --git a/public/react/src/common/components/DragValidatortwo.js b/public/react/src/common/components/DragValidatortwo.js new file mode 100644 index 000000000..2b789063e --- /dev/null +++ b/public/react/src/common/components/DragValidatortwo.js @@ -0,0 +1,114 @@ +import React, { Component } from 'react'; + +const $ = window.jQuery +const jQuery = $; +if (!$.drag) { + (function($){ + $.fn.dragValidator = function(options){ + var x, drag = this, isMove = false, defaults = { + }; + var options = $.extend(defaults, options); + //添加背景，文字，滑块 + var html = '
'+ + '
拖动滑块验证
'+ + '
'; + this.append(html); + + var handler = drag.find('.handler'); + var drag_bg = drag.find('.drag_bg'); + var text = drag.find('.drag_text'); + var maxWidth = text.width() - handler.width(); //能滑动的最大间距 + //鼠标按下时候的x轴的位置 + handler.mousedown(function(e){ + isMove = true; + x = e.pageX - parseInt(handler.css('left'), 10); + }); + + //鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离 + $(document).mousemove(function(e){ + var _x = e.pageX - x; + var handler_offset = handler.offset(); + var lastX = e.clientX -x; + lastX = Math.max(0,Math.min(maxWidth,lastX)); + if(isMove){ + if(_x > 0 && _x <= maxWidth){ + handler.css({'left': lastX}); + drag_bg.css({'width': lastX}); + } + else if(lastX > maxWidth - 5 && lastX < maxWidth + 5 ){ //鼠标指针移动距离达到最大时清空事件 + dragOk(); + } + } + }); + handler.mouseup(function(e){ + isMove = false; + var _x = e.pageX - x; + if(text.text() != '验证通过' && _x < maxWidth){ //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置 + handler.animate({'left': 0}); + drag_bg.animate({'width': 0}); + } + }); + + //清空事件 + function dragOk(){ + options.dragOkCallback && options.dragOkCallback() + var kuaiwidth=drag.width() - handler.width() - 2; + handler.removeClass('handler_bg').addClass('handler_ok_bg'); + handler.css({'left':kuaiwidth+'px'}) + text.css({'width':kuaiwidth+'px'}); + text.text('验证通过'); + drag.css({'color': '#fff'}); + drag_bg.css({'width':kuaiwidth+'px'}) + handler.unbind('mousedown'); + $(document).unbind('mousemove'); + $(document).unbind('mouseup'); + $("#user_verification_notice").html(""); + $('#user_verification_notice').parent().hide(); + } + }; + })(jQuery); +} + +class DragValidator extends Component { + componentDidMount () { + // if($("#reg-drag").length>0 && IsPC()){ + $("#reg-drag").dragValidator({ + height: this.props.height, + dragOkCallback: () => { + this.props.dragOkCallback && this.props.dragOkCallback() + } + }); + // }else{ + // $("#reg-drag").empty(); + // } + } + empty() { + $("#reg-drag").empty(); + } + render() { + const height = this.props.height || 45; + const className = this.props.className + const successGreenColor = this.props.successGreenColor || '#29bd8b' + // newMain clearfix + return ( +
+ + +
+ ); + } +} + +export default ( DragValidator ); \ No newline at end of file diff --git a/public/react/src/modules/user/FindPasswordComponent.js b/public/react/src/modules/user/FindPasswordComponent.js index 2fed8f3a8..9609801b8 100644 --- a/public/react/src/modules/user/FindPasswordComponent.js +++ b/public/react/src/modules/user/FindPasswordComponent.js @@ -3,6 +3,8 @@ import React, {Component} from 'react'; import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom"; import {getImageUrl, DragValidator} from 'educoder'; +import DragValidatortwo from '../../../src/common/components/DragValidatortwo' + import {Tabs, Input, Checkbox, Button, notification} from 'antd'; import axios from 'axios'; import './common.css' @@ -21,7 +23,7 @@ class LoginRegisterComponent extends Component { login: "", password: "", passwords: "", - seconds: 60, + seconds: 35, codes: "", getverificationcodes: true, Phonenumberisnotco: undefined, @@ -29,6 +31,8 @@ class LoginRegisterComponent extends Component { s: 'text', classpass: "text", readonlyInput: true, + dragOk: false, + Whethertoverify:false, } } @@ -57,15 +61,27 @@ class LoginRegisterComponent extends Component { } //倒计时 getverificationcode = () => { - if (this.state.Phonenumberisnotcobool === false || this.state.Phonenumberisnotcobool === undefined) { - if (this.state.login && this.state.login.length === 0) { - this.openNotification("请输入手机号或邮箱"); - return - } else { - this.openNotification("请输入正确的手机号或邮箱"); - } + + if(this.state.login === undefined || this.state.login.length===0){ + this.openNotification("请输入手机号或邮箱"); + return; + } + + //这是判断是否手机正确 + if(this.state.Phonenumberisnotcobool === true){ + this.openNotification(this.state.Phonenumberisnotcos); + this.setState({ + Whethertoverify:this.state.Whethertoverify===true?false:true, + }) + return; + } + //拖动滑动验证 + if(this.state.dragOk===undefined||this.state.dragOk === false){ + this.openNotification("拖动滑块验证"); return; } + + if (this.state.getverificationcodes === true) { this.setState({ getverificationcodes: undefined, @@ -78,7 +94,7 @@ class LoginRegisterComponent extends Component { clearInterval(timer); this.setState({ getverificationcodes: false, - seconds: 60, + seconds: 35, }) } }); @@ -96,7 +112,7 @@ class LoginRegisterComponent extends Component { clearInterval(timer); this.setState({ getverificationcodes: false, - seconds: 60, + seconds: 35, }) } @@ -115,8 +131,7 @@ class LoginRegisterComponent extends Component { } }).then((result) => { //验证有问题{"status":1,"message":"success"} - console.log(result); - + this.openNotification("验证码已发送，请注意查收!",2); }).catch((error) => { console.log(error); @@ -133,26 +148,28 @@ class LoginRegisterComponent extends Component { Retrievepassword = () => { if (this.state.Phonenumberisnotcobool === false) { if (this.state.login.length === 0) { - this.openNotification("请输入手机号或邮箱"); + this.openNotification("请输入正确的手机号或邮箱"); return } - this.openNotification("请输入正确的手机号或邮箱"); - return; } - if (this.state.login === undefined || this.state.login == "") { + if (this.state.login === undefined || this.state.login === "") { this.openNotification(`请输入登录手机号码或邮箱`); return - } else if (this.state.password === undefined || this.state.password == "") { + } + if (this.state.password === undefined || this.state.password === "") { this.openNotification(`请输入密码`); return - } else if (this.state.passwords === undefined || this.state.passwords == "") { + } + if (this.state.passwords === undefined || this.state.passwords === "") { this.openNotification(`请输入密码`); return - } else if (this.state.password !== this.state.passwords) { + } + if (this.state.password !== this.state.passwords) { this.openNotification(`两次密码不相同`); return - } else if (this.state.codes === undefined || this.state.codes == "") { + } + if (this.state.codes === undefined || this.state.codes === "") { this.openNotification(`请输入验证码`); return } @@ -286,6 +303,12 @@ class LoginRegisterComponent extends Component { return } } + //是否验证通过 + dragOkCallback = () => { + console.log(this.state.login); + this.Emailphonenumberverification(this.state.login) + + } //邮箱手机号验证 Emailphonenumberverification = (value) => { var url = `/accounts/valid_email_and_phone.json`; @@ -295,17 +318,31 @@ class LoginRegisterComponent extends Component { type: 2, } }).then((result) => { - //验证有问题{"status":1,"message":"success"} - // console.log(result); - this.openNotification("验证码已发送，请注意查收!", 2); + console.log(result); + if(result){ + if(result.data.status===-2){ + console.log(value.length); + this.setState({ + Phonenumberisnotco: result.data.message, + Phonenumberisnotcobool: true, + dragOk:false, + Whethertoverify:this.state.Whethertoverify===true?false:true, + }) + return; + }else { + this.setState({ + Phonenumberisnotco: undefined, + Phonenumberisnotcobool: false, + dragOk:true, + }) + return; + } + } }).catch((error) => { console.log(error); - // this.setState({ - // login:"", - // logins:"", - // }) + }) } @@ -325,6 +362,7 @@ class LoginRegisterComponent extends Component { Phonenumberisnotco, readonlyInput, codes, + Whethertoverify, } = this.state // height: 346px; return ( @@ -390,9 +428,10 @@ class LoginRegisterComponent extends Component { ` } + {/*onBlur={(e) => this.inputOnBlur(e)}*/} this.inputOnBlur(e)} + placeholder="输入注册手机号或邮箱" value={this.state.login} onChange={this.loginInputonChange} style={{marginTop: '10px', height: "38px"}}> { Phonenumberisnotco && Phonenumberisnotco != "" ? @@ -401,11 +440,29 @@ class LoginRegisterComponent extends Component {

:
} - + + { + Whethertoverify===false? + this.dragOkCallback()} + > + : + "" + + } + { + Whethertoverify===true? + this.dragOkCallback()} + > + : + "" + } + { @@ -245,7 +177,9 @@ class LoginRegisterComponent extends Component { } //是否验证通过 dragOkCallback = () => { - this.setState({dragOk: true}) + console.log(this.state.logins); + this.Emailphonenumberverification(this.state.logins, 2) + } // -------------------- REGISTER END @@ -294,7 +228,7 @@ class LoginRegisterComponent extends Component { } //注册接口 postregistered = () => { - if (this.state.logins === undefined || this.state.logins == "") { + if (this.state.logins === undefined || this.state.logins === "") { this.openNotification(`请输入登录手机号码或邮箱`,2); return @@ -348,14 +282,58 @@ class LoginRegisterComponent extends Component { }).then((result) => { //验证有问题{"status":1,"message":"success"} // console.log(result); - + // this.setState({dragOk: true}) + + if(result){ + if(result.data.status===-2){ + if (id === 1) { + console.log(value.length); + if(result.data.message==="该手机号码或邮箱已被注册"){ + this.setState({ + Phonenumberisnotco: undefined, + Phonenumberisnotcobool: false, + dragOk:true, + }) + }else { + this.setState({ + Phonenumberisnotco: result.data.message, + Phonenumberisnotcobool: true, + dragOk:false, + Whethertoverify:this.state.Whethertoverify===true?false:true, + }) + } + return; + } else if (id === 2) { + this.setState({ + Phonenumberisnotcos: result.data.message, + Phonenumberisnotcobool: true, + dragOk:false, + Whethertoverify:this.state.Whethertoverify===true?false:true, + }) + return; + } + }else { + if (id === 1) { + console.log(value.length); + this.setState({ + Phonenumberisnotco: undefined, + Phonenumberisnotcobool: false, + dragOk:true, + }) + return; + } else if (id === 2) { + this.setState({ + Phonenumberisnotcos: undefined, + Phonenumberisnotcobool: false, + dragOk:true, + }) + return; + } + } + } }).catch((error) => { - // console.log(error); - // this.setState({ - // login:"", - // logins:"", - // }) + }) } //短信验证 @@ -398,13 +376,22 @@ class LoginRegisterComponent extends Component { //倒计时 getverificationcode = () => { - if (this.state.Phonenumberisnotcobool === false ||this.state.Phonenumberisnotcobool === undefined) { - if (this.state.logins&&this.state.logins.length === 0) { - this.openNotification("请输入手机号或邮箱",2); - return - }else { - this.openNotification("请输入正确的手机号或邮箱",2); - } + console.log(this.state.Phonenumberisnotcobool); + console.log(this.state.dragOk); + if(this.state.logins === undefined || this.state.logins.length===0){ + this.openNotification("请输入手机号或邮箱"); + return; + } + //这是判断是否手机正确 + if(this.state.Phonenumberisnotcobool === true){ + this.openNotification(this.state.Phonenumberisnotcos); + this.setState({ + Whethertoverify:this.state.Whethertoverify===true?false:true, + }) + return; + } + if(this.state.dragOk===undefined||this.state.dragOk === false){ + this.openNotification("拖动滑块验证"); return; } @@ -420,7 +407,7 @@ class LoginRegisterComponent extends Component { clearInterval(timer); this.setState({ getverificationcodes: false, - seconds: 60, + seconds: 35, }) } }); @@ -438,7 +425,7 @@ class LoginRegisterComponent extends Component { clearInterval(timer); this.setState({ getverificationcodes: false, - seconds: 60, + seconds: 35, }) } @@ -459,9 +446,18 @@ class LoginRegisterComponent extends Component { }else{ stirngt= e.target.value; } - this.setState({ - login: stirngt, - }) + + if (e.target.value.length === 0) { + this.setState({ + Phonenumberisnotco: undefined, + Phonenumberisnotcobool: false, + login: stirngt, + }) + }else{ + this.setState({ + login: stirngt, + }) + } } //失去焦点判断 @@ -488,8 +484,7 @@ class LoginRegisterComponent extends Component { } //获取注册登入 loginInputonChanges = (e) => { - // console.log(e.target.value); - + console.log(e.target.value); var stirngt; if(e.target.value.length>0){ var str= e.target.value.replace(/\s*/g,"") @@ -497,9 +492,17 @@ class LoginRegisterComponent extends Component { }else{ stirngt= e.target.value; } - this.setState({ - logins: stirngt, - }) + if (e.target.value.length === 0) { + this.setState({ + Phonenumberisnotcos: undefined, + Phonenumberisnotcobool: false, + logins: stirngt, + }) + }else{ + this.setState({ + logins: stirngt, + }) + } } //获取注册密码 @@ -562,8 +565,10 @@ class LoginRegisterComponent extends Component { Phonenumberisnotcos, codes, tab, + dragOk, + Whethertoverify, // 注册 - readAgreement, dragOk, + readAgreement, } = this.state // height: 346px; if (this.state.seconds === 0) { @@ -685,7 +690,6 @@ class LoginRegisterComponent extends Component { value={this.state.logins} type="text" autoComplete="off" onChange={this.loginInputonChanges} - onBlur={(e) => this.inputOnBlur(e, 2)} style={{marginTop: '30px' , height: '38px',color:'#999999',fontSize:"14px"}}> { Phonenumberisnotcos && Phonenumberisnotcos != "" ? @@ -695,12 +699,29 @@ class LoginRegisterComponent extends Component { :
} + { + Whethertoverify===false? + + : + "" + + } + { + Whethertoverify===true? + + : + "" + } + -
- {/**/} - {/**/} +