调整

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 = '<div class="drag_bg"></div>'+
+				'<div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>'+
+				'<div class="handler handler_bg"></div>';
+			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 (
+			<div id="reg-drag" className={`drag_slider ${className}`}>
+				<style>{`
+          .drag_slider .handler {
+            height: 100%;
+          }
+          .drag_slider {
+            height: ${height}px;
+            line-height: ${height}px;
+          }
+          .drag_slider .drag_bg {
+            height: ${height}px;
+            background-color: ${successGreenColor};
+          }
+        `}</style>
+
+			</div>
+		);
+	}
+}
+
+export default  ( DragValidator );

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) {
+
+		if(this.state.login === undefined || this.state.login.length===0){
 			this.openNotification("请输入手机号或邮箱");
-				return
-			} else {
-				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 {
 																	`
 							}
 						</style>
+						{/*onBlur={(e) => this.inputOnBlur(e)}*/}
 						<Input style={loginInputsyl} type="text" autoComplete="off" onClick={this.changeTypey}
 									 className={"loginInputzhuche"}
-									 placeholder="输入注册手机号或邮箱" value={this.state.login} onBlur={(e) => this.inputOnBlur(e)}
+									 placeholder="输入注册手机号或邮箱" value={this.state.login}
 									 onChange={this.loginInputonChange} style={{marginTop: '10px', height: "38px"}}></Input>
 						{
 							Phonenumberisnotco && Phonenumberisnotco != "" ?
@@ -401,11 +440,29 @@ class LoginRegisterComponent extends Component {
 								</p>
 								: <div style={{height: "25px"}}></div>
 						}
+
+						{
+							Whethertoverify===false?
 								<DragValidator
 									height={38} successGreenColor="#29bd8b"
 									style={{height: "38px", width: "100%"}}
-							dragOkCallback={this.dragOkCallback}
+									dragOkCallback={()=>this.dragOkCallback()}
 								></DragValidator>
+								:
+								""
+
+						}
+						{
+							Whethertoverify===true?
+								<DragValidatortwo
+									height={38} successGreenColor="#29bd8b"
+									style={{height: "38px", width: "100%"}}
+									dragOkCallback={()=>this.dragOkCallback()}
+								></DragValidatortwo>
+								:
+								""
+						}
+
 						<Input type={classpass}
 									 className={"loginInputzhuche"}
 									 onClick={this.changeType} autoComplete="new-password" onChange={this.loginInputonChanges}

public/react/src/modules/user/LoginRegisterComponent.js

@@ -7,6 +7,7 @@ import {Tabs, Input, Checkbox, Button, notification,Menu} from 'antd';
 import passopen from '../../../src/images/login/passopen.png';
 import passoff from '../../../src/images/login/passoff.png';
 import axios from 'axios';
+import DragValidatortwo from '../../../src/common/components/DragValidatortwo'
 import './common.css'
 const { TabPane } = Tabs;
 const loginInputsyl = {
@@ -26,16 +27,17 @@ class LoginRegisterComponent extends Component {
 
         //
         // console.log("LoginRegisterComponent");
-        // console.log(props);
+        // console.log("29");
         // console.log(props.loginstatus);
         if(props.loginstatus === true){
+            // console.log(props.loginstatus);
             this.state = {
                 tab:["0"],
                 activeKey: 0,
                 classpass: "text",
                 // 登录
                 passopens: passopen,
-                seconds: 60,
+                seconds: 35,
                 discodeBtn: false,
                 clearInterval: false,
                 autoLogin: true,
@@ -53,17 +55,19 @@ class LoginRegisterComponent extends Component {
                 Phonenumberisnotco: undefined,
                 Phonenumberisnotcos: undefined,
                 Phonenumberisnotcobool: false,
+                Whethertoverify:false,
 
             }
         }
-        else if(props.loginstatus === false){
+        if(props.loginstatus === false){
+            // console.log(props.loginstatus);
             this.state = {
                 tab:["1"],
                 activeKey: '1',
                 classpass: "text",
                 // 登录
                 passopens: passopen,
-                seconds: 60,
+                seconds: 35,
                 discodeBtn: false,
                 clearInterval: false,
                 autoLogin: true,
@@ -81,6 +85,7 @@ class LoginRegisterComponent extends Component {
                 Phonenumberisnotco: undefined,
                 Phonenumberisnotcos: undefined,
                 Phonenumberisnotcobool: false,
+                Whethertoverify:false,
 
             }
         }
@@ -163,81 +168,8 @@ class LoginRegisterComponent extends Component {
                 return;
             }
         }
-        // var telephone = $("#telephoneAdd.tianjia_phone").val();
-        var regph = /^[1][3,4,5,6,7,8][0-9]{9}$/;
-        // var email = $("#add_email.tianjia_email").val();
-        var regemail = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
-
-        // [1]手机号开头必须是1    [3,4,5,6,7,8] 第二位是3-8中的一个 [0-9]{9} 后边9位可以是0-9的任意数字。
-        var stringdata = undefined;
-        if (!regph.test(value)) {
-            stringdata = "手机号格式不正确";
-            if (id === 1) {
-                this.setState({
-                    Phonenumberisnotco: stringdata,
-                    Phonenumberisnotcobool: false,
-                })
-            } else if (id === 2) {
-                this.setState({
-                    Phonenumberisnotcos: stringdata,
-                    Phonenumberisnotcobool: false,
-                })
-            }
-
-        } else {
-            if (id === 1) {
-                this.setState({
-                    Phonenumberisnotco: undefined,
-                    Phonenumberisnotcobool: true,
-                })
-            } else if (id === 2) {
-                this.setState({
-                    Phonenumberisnotcos: undefined,
-                    Phonenumberisnotcobool: true,
-                })
         this.Emailphonenumberverification(value, id)
-            }
-            return
-        }
 
-        if (!regemail.test(value)) {
-            if ((value.indexOf("@") != -1) === true) {
-                stringdata = "邮箱格式不正确";
-            } else {
-                stringdata = "手机号格式不正确";
-                // if (!regph.test(value)) {
-                //     // 这里先判断是不是手机号然后在判断是不是邮箱然后又判断是不是手机号，如果不是手机号就是账号
-                //     stringdata=undefined;
-                // }
-                }
-            if (id === 1) {
-                this.setState({
-                    Phonenumberisnotco: stringdata,
-                    Phonenumberisnotcobool: false,
-                })
-            } else if (id === 2) {
-                this.setState({
-                    Phonenumberisnotcos: stringdata,
-                    Phonenumberisnotcobool: false,
-                })
-                this.Emailphonenumberverification(value, id)
-            }
-            return
-        } else {
-            if (id === 1) {
-                this.setState({
-                    Phonenumberisnotco: undefined,
-                    Phonenumberisnotcobool: true,
-                })
-            } else if (id === 2) {
-                this.setState({
-                    Phonenumberisnotcos: undefined,
-                    Phonenumberisnotcobool: true,
-                })
-                this.Emailphonenumberverification(value, id)
-            }
-            return
-        }
     }
     // -------------------- REGISTER START
     onReadAgreementChange = (e) => {
@@ -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;
         }
+
+        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;
           }
+            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"}}></Input>
                             {
                                 Phonenumberisnotcos && Phonenumberisnotcos != "" ?
@@ -695,12 +699,29 @@ class LoginRegisterComponent extends Component {
                                     : <div style={{height:"25px"}}></div>
 
                             }
-
+                            {
+                                Whethertoverify===false?
                                   <DragValidator
                                     height={38} className="loginInput" successGreenColor="#29bd8b"
                                     style={{ height: '38px'}}
                                     dragOkCallback={this.dragOkCallback}
                                   ></DragValidator>
+                                  :
+                               ""
+
+                            }
+                            {
+                                Whethertoverify===true?
+                                <DragValidatortwo
+                                  height={38} className="loginInput" successGreenColor="#29bd8b"
+                                  style={{ height: '38px'}}
+                                  dragOkCallback={this.dragOkCallback}
+                                ></DragValidatortwo>
+                                :
+                                ""
+                            }
+
+
 
                             <div className="mt25">
                                 <Input className="fl mr5 font-14 color-grey-9 loginInputzhuche" name="codes" type="text" autoComplete="off" readonly
@@ -726,10 +747,7 @@ class LoginRegisterComponent extends Component {
 
 
                             </div>
-                            {/*<Input type="text" name="username"*/}
-                            {/*       style={{height: '0', width: '0', border: 'none', display: "none"}}/>*/}
-                            {/*<Input type="password" name="password" id="password" autoComplete="new-password"*/}
-                            {/*       style={{height: '0', width: '0', border: 'none', display: "none"}}/>*/}
+
                             <style>
                                 {
                                     `