dengzhiguo 7 years ago
parent
commit
31e535138f
6 changed files with 319 additions and 28 deletions
  1. BIN
      img/zhongdian.png
  2. 41 10
      src/css/public.css
  3. 5 5
      src/css/register.css
  4. 237 3
      src/js/public.js
  5. 0 1
      src/js/register.js
  6. 36 9
      template/index.html

BIN
img/zhongdian.png


+ 41 - 10
src/css/public.css

@@ -123,8 +123,7 @@ display: none;cursor: pointer;padding: 30px 7px 0 7px;background: #5888B5 url(".
 .login_uesr .log_del{width: 16px ;height: 16px;position: absolute; top: 10px;right: 10px;}
 .log_del:hover{cursor: pointer;}
 .login_uesr{margin-bottom: 20px;}
-.login_check u{float: right;line-height: 38px;}
-.login_check u a{color: #f18101;}
+.login_check a{color: #f18101;float: right;line-height: 38px;}
 .login_check label{height: 38px;line-height: 38px ;color: #f18101;font-weight: normal;}
 .lab_check{background: url(../../img/check_lo.png) no-repeat center left;background-size:20% 40%;}
 .lab_checkno{background: url(../../img/check_lono.png) no-repeat center left;background-size:20% 40%;}
@@ -139,20 +138,52 @@ display: none;cursor: pointer;padding: 30px 7px 0 7px;background: #5888B5 url(".
 .head_login:focus{text-decoration: none;}
 .head_login{margin-left: 5px;}
 /*忘记密码页面*/
-#forget{width: 100%;height:100%;background: rgba(6,6,6,.4);position: fixed;top: 0;left: 0;z-index: 999999;display: block;}
+#forget{width: 100%;height:100%;background: rgba(6,6,6,.4);position: fixed;top: 0;left: 0;z-index: 999999;display: none;}
 .forget{width: 600px;background: #ffffff;position: absolute;top: 50%;margin-top: -200px;left: 50%;margin-left: -300px;
-    padding-top: 10px;padding-bottom: 96px;}
+    padding-top: 10px;padding-bottom: 50px;}
 .forget_top{width:100%;height:50px;border-bottom: 1px solid #E5E5E5;padding-left: 20px;
 line-height: 50px;}
 .forget_top>a{color:#383838;font-size: 20px;float: left;}
 .forget_top>div{float: left;}
-.forget_center{padding-top: 20px;width: 100%;text-align: center;}
+.forget_center{padding-top: 30px;width: 100%;text-align: center;padding-right: 40px;}
 .forget_center>div{color:#616161;font-size: 16px;font-weight: normal;height:40px;line-height: 40px;
-    width:380px;margin: 0 auto;margin-bottom: 10px;text-align: right;}
-.forget_center>div input{height:35px;}
-.phone input{width:250px;}
-.yanzheng>label{display: inline-block;}
-.yanzhengma_cont{width:80px;height:39px;display: inline-block;border: 1px solid #eee;}
+    width:410px;margin: 0 auto;margin-bottom: 15px;text-align: right;position: relative;}
+.forget_center>div input{height:40px;margin-left: 5px;}
+.phone>label{font-weight: normal;font-size: 18px;}
+.phone input{width:250px;font-size: 16px;border: 1px solid #E5E5E5;padding-left: 5px;}
+.yanzheng>label{display: inline-block;color:#616161;font-weight: normal;font-size: 18px;}
+.yanzheng input{width:160px;font-size: 16px;border: 1px solid #E5E5E5;padding-left: 5px;}
+.yanzheng{padding-right:90px; }
+.yanzhengma_cont_{width:80px;height:40px;display: inline-block;position: absolute;top:0;right:0;}
+.yanzhengma_cont_>img{width:100%;height:100%;}
+.cellcode_{padding-right:90px;}
+.cellcode_>div{display: inline-block;font-size: 18px;}
+.cellcode_>div>input{width:160px;font-size: 16px;border: 1px solid #E5E5E5;padding-left: 5px;}
+.cellcode_>input{width:80px;height:40px;font-size: 14px;position: absolute;top:0;right: 0;background: #fff;
+border: 1px solid #eee;cursor: pointer;color: #ccc;display: inline-block;  padding-left: 0;background: none;
+    text-align: center;}
+.forget_center .fastener{margin-top: 40px;text-align: center;padding-left: 30px;}
+.fastener>div{display: inline-block;width:150px;height:40px;}
+.fastener .forget_sub{background: #F18101;width:150px;height:40px;border:1px solid #E5E5E5;margin-right: 20px;
+color:#fff;letter-spacing: 8px;font-size: 18px;}
+.fastener_right{color:#F18101;border: 1px solid #E5E5E5;text-align: center;letter-spacing: 8px;
+font-size: 18px;cursor: pointer;}
+/*新密码设置*/
+#new_password{width: 100%;height:100%;background: rgba(6,6,6,.4);position: fixed;top: 0;left: 0;z-index: 999999;display: none;}
+.new_password{width: 600px;background: #ffffff;position: absolute;top: 50%;margin-top: -200px;left: 50%;margin-left: -300px;
+    padding-top: 10px;padding-bottom: 50px;}
+.password_top{width:100%;height:50px;border-bottom: 1px solid #E5E5E5;padding-left: 20px;
+    line-height: 50px;}
+.password_top>h4{display: inline-block;color:#616161;font-size: 20px;}
+.password_top>span{font-size:16px;color:#616161;background: url("../../img/zhongdian.png") no-repeat left center;padding-left: 25px;margin-left: 15px;}
+.password_center{padding-top: 30px;width: 100%;text-align: center;padding-right: 40px;}
+.password_center>div{color:#616161;font-size: 16px;font-weight: normal;height:40px;line-height: 40px;
+    width:410px;margin: 0 auto;margin-bottom: 15px;text-align: right;position: relative;}
+.password_center>div>label{font-weight: normal;font-size: 18px;}
+.password_center>div input{width:250px;height:40px;font-size: 16px;padding-left: 5px;}
+.new_password .fastener{margin-top: 40px;padding-left: 30px;}
+.fastener .new_password_sub{background: #F18101;width:150px;height:40px;border:1px solid #E5E5E5;margin-right: 20px;
+    color:#fff;letter-spacing: 8px;font-size: 18px;}
 /*弹出消息提示*/
 .smg{display: none;width: 200px;height: 30px;color: #0C79FF;background: rgba(255,255,255,.7);border-radius: 10px;position: fixed;top:10%;left: 50%;margin-left: -75px;color: blue;z-index: 999999;}
 .smg input{width: 200px;height: 30px;border: none;background: none;text-align: center;font-size: 16px;}

+ 5 - 5
src/css/register.css

@@ -93,11 +93,11 @@ margin:40px auto;padding: 20px 50px;overflow-y: auto;box-shadow: 0 10px 10px 0 #
 /*登陆页面*/
 .login{width: 100%;background: rgba(6,6,6,.4);position: fixed;top: 0;left: 0;z-index: 999;}
 .login_mian{width: 600px;background: #ffffff;position: absolute;top: 50%;margin-top: -200px;left: 50%;margin-left: -300px;padding-left: 60px;padding-top: 60px;padding-bottom: 96px;}
-.login_left{float: left;padding-bottom: 10px;;}
-.login_left .login_ewm{width: 166px;padding-top: 34px;border-right: 1px solid #cccccc;padding-right: 30px;margin-bottom: 10px;}
-
-.login_left p{line-height: 26px;font-size: 14px;width: 138px;text-align: center;}
-.login_right{float: left;padding-left: 32px;}
+.login_left{float: left;padding-bottom: 10px;width: 220px;}
+.login_left .login_ewm{width: 95px;padding-top: 34px;margin-bottom: 10px;display: inline-block;text-align: center;}
+.login_left .login_ewm img{margin-bottom: 10px;width:90px;}
+.login_left p{line-height: 26px;font-size: 16px;width: 95px;text-align: center;}
+.login_right{float: left;padding-left: 32px;width:288px;border-left:1px solid #E5E5E5;}
 .login_right h5{font-size: 18px;color: #373739;font-weight: normal;}
 .login_right h5 a{font-size: 14px;color: #f81009;margin-left: 62px;}
 .login_right form .login_uesr,.login_pass{width: 256px;height: 40px;position: relative;border: 1px solid #cccccc;}

+ 237 - 3
src/js/public.js

@@ -97,7 +97,7 @@ $(function(){
                       "mobile": Suser,
                       "password": Spass,
                       "type": experts,
-                      "remember": false,
+                      "remember": false
               },
               success: function (rest) {				
 					if (rest.error && rest.error.length) {					
@@ -150,6 +150,240 @@ $(function(){
 		    _MEIQIA('entId', 77931);		   		   
 			_MEIQIA('withoutBtn');
 
-		
-})
+	//忘记密码事件
+	//首先设定确认按钮为不能点击,并且颜色为灰色
+	//$('.forget_sub').attr('disabled', true);
+	//$('.forget_sub').css({background: '#CCCCCC',border: 'none'});
+	//$('.new_password_sub').attr('disabled', true);
+	//$('.new_password_sub').css({background: '#CCCCCC',border: 'none'});
+	var phone_number="";
+	var reset_code="";
+	//企业和个人的选择,图形改变
+	$('#forget_checks').attr('checked',true);
+	$('#forget_checks').click(function(){
+		var Cheack=$(this).prop('checked');
+		if(Cheack){
+			$('#checks').attr('checked',true);
+			$(this).parent().removeClass("lab_checkno").addClass("lab_check");
+			$('#forget_checkst').prop('checked',false);
+			$('#forget_checkst').parent().removeClass("lab_check").addClass("lab_checkno");
+		}
+	});
+	$('#forget_checkst').click(function(){
+		var Cheack_no=$(this).prop('checked');
+		if(Cheack_no){
+			$(this).parent().removeClass("lab_checkno").addClass("lab_check");
+			$('#forget_checks').prop('checked',false);
+			$('#forget_checks').parent().removeClass("lab_check").addClass("lab_checkno");
+		}
+	});
+	//点击登录界面的忘记密码 ,将会弹出忘记密码界面
+	$('.login_check a').click(function(e){
+		e.preventDefault();
+		$('.login').fadeOut(800);
+		$('#form_register').fadeOut(800);
+		$("#forget").fadeIn(800);
+	});
+	//点击忘记密码右上角的×,将会关闭界面并清空里面的内容
+	$('#forget .login_close').click(function(){
+		$('#forget').fadeOut(800);
+		$('#form_register').fadeIn(800);
+		$("#forget_phone").val("");
+		$("#forget_yanzheng").val("");
+		$("#photo_n").val("");
+	});
+	//点击取消,相当于点击×
+	$("#forget .fastener_right").click(function(){
+		$('#forget .login_close').click();
+	});
+   //点击重置密码右上角的×,将会关闭界面并清空里面的内容
+	$('#new_password .login_close').click(function(){
+		$('#new_password').fadeOut(800)
+		$('#form_register').fadeIn(800)
+	});
+	//点击取消,相当于点击×
+	$("#new_password .fastener_right").click(function(){
+		$('#new_password .login_close').click();
+	});
+	//点击忘记密码里面的确认,则发送一个请求,并跳转到重置密码界面
+	$('#forget_form').submit(function(e){
+		e.preventDefault();
+		var phone_forget=$("#forget_phone").val();
+		var yanzheng_forget=$("#forget_yanzheng").val();
+		var phone_n_forget=$("#photo_n").val();
+		var types = $('#forget_checks').prop("checked") ? '0' : '1';//团体/个人
+		if(phone_forget==''||yanzheng_forget==''||phone_n_forget==''){
+			return false;
+		}else {
+			$.ajax({
+				type: "POST",
+				dataType: "json",
+				url: globalConfig.context + "/open/checkMCode",
+				data: {
+					//"mobile": phone_forget,
+					"mobileCode": phone_n_forget
+				},
+				success: function (rest) {
+					if (rest.error && rest.error.length) {
+						$('#msg').val(rest.error[0].message);
+						msg();
+					} else {
+						$('#forget').fadeOut(800);
+						$('#form_register').fadeOut(800);
+						$("#new_password").fadeIn(800);
+						$(".password_top>h4").attr("val",rest.data);
+					}
+				}
+			})
+		}
+	});
+	function pass_new(){
+		$('#new_pass').blur(function () {
+			var pass_pattern=/^\w{6,12}$/;
+			var new_pass=$("#new_pass").val();
+			var new_pass_again=$("#new_pass_again").val();
+			if (new_pass==''||!pass_pattern.test(new_pass)) {
+				$(this).val('');
+				$(this).attr('placeholder', '请输入6-12位数密码');
+			}
+			if (new_pass!==new_pass_again) {
+				$('#new_pass_again').val('')
+				$('#new_pass_again').attr('placeholder', '确认密码')
+			}
+		});
+	}
+	pass_new();
+	function pass_new_again(){
+		//密码相同验证
+		$('#new_pass_again').blur(function () {
+			var new_pass=$("#new_pass").val();
+			var new_pass_again=$("#new_pass_again").val();
+			if (new_pass !== new_pass_again||new_pass_again == '') {
+				$(this).val('');
+				$(this).attr('placeholder', '确认密码')
+			}
+		});
+	}
+	pass_new_again()
+	//点击重置密码里面的确认,则发送一个请求,并关闭重置密码界面
+	$('#new_password_form').submit(function(e){
+		e.preventDefault();
+		var pass_pattern=/^\w{6,12}$/;
+		var phone_forget=$("#forget_phone").val();
+		var new_pass=$("#new_pass").val();
+		var new_pass_again=$("#new_pass_again").val();
+		var types = $('#forget_checks').prop("checked") ? '0' : '1';//团体/个人
+		var reset_code=$(".password_top>h4").attr("val");
+		if(new_pass==''||!pass_pattern.test(new_pass)||new_pass!==new_pass_again){
+			return false;
+		}else {
+			$.ajax({
+				type: "post",
+				dataType: "json",
+				url: globalConfig.context + "/open/resetPwd",
+				data: {
+					"mobile": phone_forget,
+					"type": types,
+					"resetCode":reset_code,
+					"newPwd": new_pass
+				},
+				success: function (rest) {
+					if (rest.error && rest.error.length) {
+						$('#msg').val(rest.error[0].message);
+						msg();
+					} else {
+						$('.login').fadeIn(800);
+						$('#form_register').fadeOut(800);
+						$("#new_password").fadeOut(800);
+					}
+				}
+			})
+		}
+
+	});
+	//手机号码的验证
+	function photoyanzheng(){
+		var pho_pattern=/^1[3|4|5|7|8][0-9]{9}$/;
+		$("#forget_phone").keyup(function(){
+			var phol= $(this).val();
+			if(pho_pattern.test(phol)){
+				$('#photo_m').attr('disabled', false);
+				$("#photo_m").css("color","#F18101");
+			}else if(!pho_pattern.test(phol)){
+				$('#photo_m').attr('disabled', true);
+				$("#photo_m").css("color","#ccc");
+			}
+		});
+		$('#forget_phone').blur(function () {
+			var pho= $(this).val();
+			if (pho==''||!pho_pattern.test(pho)) {
+				$(this).val('');
+				$(this).attr('placeholder', '请输入正确的号码')
+			} else{
+				$('#photo_m').attr('disabled', false);
+				$("#photo_m").css("color","#F18101");
+			}
+		})
+	}
+	photoyanzheng();
+	//手机验证码
+	function photo_n(){
+		$('#photo_n').blur(function () {
+			var phoa = $(this).val();
+			if (phoa=='') {
+				$(this).val('');
+				$(this).attr('placeholder', '请输入验证码');
+			}
+		})
+	}
+	photo_n();
+	//点击刷新图片验证码
+	$('.yanzhengma_cont_').click(function () {
+		$('.yanzhengma_cont_ img').attr('src', (globalConfig.context + "/open/getVCode?t=" + Math.random()))
+	});
+	var tt = 30;
+	$('#photo_m').click(function () {
+		//手机验证功能
+		var ophoto = $('#forget_phone').val();
+		var types = $('#forget_checks').prop("checked") ? '0' : '1';
+		var phott = $('#forget_yanzheng').val();
+		//验证码倒计时
+		$('#photo_m').attr('disabled', true);
+		$(this).attr('disabled', true);
+		var timer = setInterval(function () {
+			tt -= 1;
+			$('#photo_m').attr('disabled', true);
+			$(this).val("发送"+'('+tt+'s'+')');
+			$(this).css({color:'#cccccc'})
+			if (tt == 0) {
+				clearInterval(timer);
+				$('#photo_m').attr('disabled', false);
+				$(this).attr('disabled', false);
+				tt=30;
+				$(this).css({color:'rgb(241, 129, 1)'})
+				$(this).val('重新发送');
+			}
+		}.bind(this), 1000);
+		$.ajax({
+			type: "GET",
+			url: globalConfig.context + "/open/getMCode",
+			data: {
+				"mobile": ophoto,
+				"sign": true,
+				"type": types,
+				"verificationCode": phott
+			},
+			success: function (data) {
+				if (data.error && data.error.length) {
+					$('#msg').val(data.error[0].message);
+					msg();
+				} else {
+					$('#msg').val('发送成功');
+					msg();
+				}
+				return true;
+			}
+		});
+	});
+});
 

+ 0 - 1
src/js/register.js

@@ -317,7 +317,6 @@ $(function(){
                 $(this).val('重新发送');
             }
         }.bind(this), 1000);
-
         $.ajax({
             type: "GET",
             url: globalConfig.context + "/open/getMCode",

+ 36 - 9
template/index.html

@@ -449,7 +449,7 @@
 						<label for="checkst" class="lab_checkno">
 							<input type="checkbox" name="type" id="checkst" />我是企业
 						</label>
-						<u><a href="">忘记密码?</a></u>
+						<a href="">忘记密码?</a>
 					</div>
 					<input type="submit" value="登 陆" class="login_submit"/>
 				</form>
@@ -461,7 +461,7 @@
 	</div>
 	<div id="forget">
 		<div class="forget">
-			<form action="">
+			<form id="forget_form">
 				<div class="forget_top">
 					<a href="">忘记密码?</a>
 					<div class="login_check">
@@ -476,27 +476,54 @@
 				<div class="forget_center">
 					<div class="phone">
 						<label for="forget_phone">
-							手机号码:<input type="text" name="type" id="forget_phone" />
+							手机号码:<input type="text" name="type" id="forget_phone" placeholder="请输入您的手机号码..."/>
 						</label>
 					</div>
 					<div  class="yanzheng">
 						<label for="forget_yanzheng">
 							图形验证码:<input type="text" name="type" id="forget_yanzheng" />
 						</label>
-						<div class="yanzhengma_cont">
+						<div class="yanzhengma_cont_">
 							<img th:src="${basePath+'/open/getVCode'}"/>
 						</div>
 					</div>
-					<div class="cellcode">
+					<div class="cellcode_">
 						<div>
-							验证码:<input type="text" name="cellCode" placeholder="手机验证码" id="photo_num"/>
+							验证码:<input type="text" name="cellCode" placeholder="手机验证码" id="photo_n"/>
 						</div>
-						<input type="button" id="photo" value="获取验证码" disabled/>
+						<input type="button" id="photo_m" value="获取验证码" disabled/>
 					</div>
 					<div class="fastener">
-						<div class="fastener_left">
-							确认
+						<input type="submit" class="forget_sub" value="确认"/>
+						<div class="fastener_right">
+							取消
 						</div>
+					</div>
+				</div>
+			</form>
+			<img src="../img/login_close.png" alt="" class="login_close"/>
+		</div>
+	</div>
+	<div id="new_password">
+		<div class="new_password">
+			<form id="new_password_form">
+				<div class="password_top">
+					<h4>设置新密码</h4>
+					<span>密码长度为6-20个字符,区分大小写</span>
+				</div>
+				<div class="password_center">
+					<div >
+						<label for="new_pass">
+							新密码:<input type="text" name="type" id="new_pass" placeholder="请输入您的新密码..."/>
+						</label>
+					</div>
+					<div >
+						<label for="new_pass_again">
+							确认密码:<input type="text" name="type" id="new_pass_again" placeholder="请确认您的密码..."/>
+						</label>
+					</div>
+					<div class="fastener">
+						<input type="submit" class="new_password_sub" value="确认"/>
 						<div class="fastener_right">
 							取消
 						</div>