Home Explore Help
Register Sign In
jiapeng
/
portal-front
Watch 3
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 357 Releases 0 Wiki
Browse Source

邀请好友分享的注册页面

jack 7 years ago
parent
7ce6b509c3
commit
41131d4309
2 changed files with 77 additions and 55 deletions
Split View Show Diff Stats
  1. 65 44
      ekexiu/Invitation.html
  2. 12 11
      js/invite-friends.js

+ 65 - 44
ekexiu/Invitation.html
View File 

@ -7,60 +7,81 @@
7 7 
<link rel="stylesheet" href="../css/bootstrap.min.css">
8 8 
<link rel="stylesheet" href="../css/reset.css">
9 9 
<link rel="stylesheet" href="../css/common.css">
10 
<style>
11 
body{background: url(../images/frmPageBg.jpg) no-repeat;background-size:cover;background-attachment: fixed;}
12 
.form-group{border-radius:4px;overflow: hidden;background:#FFFFFF;padding:2%;}
13 
.form-control{width:98%;border:none;border-radius:0;margin:4px;box-shadow: none;border-bottom:1px solid #efefef;}
14 
.form-control:focus{box-shadow: none;border-bottom:1px solid #efefef;}
15 
.form-control:last-child{border:none;}
16 
.input-group-addon{border:none;cursor: pointer;color:#FFFFFF;}
17 
.input-group-addon:last-child{border:none;}
18 
.btn{font-size: 16px;line-height: 1;color:#FFFFFF;margin: 30px 0;}
19 
.protocollink{ color: #FF9900;}
20 
.checkBg{background: url(../images/checkApp.png) 0 center no-repeat;padding-left:18px;line-height: 24px; background-size:auto 60%}
21 
.canPoint{background:#ff9900;color:#FFFFFF;}/*按钮可点击状态*/
22 
.canPoint2{background:#ccc;color:#FFFFFF;}/*按钮可点击状态*/
23 
.canPoint:hover{color:#FFFFFF;box-shadow: 0px 0px 16px rgba(255,255,255,0.4) inset;}
24 
/*logo盒子的相关*/
25 
.logobox{ padding:6% 6% 3% 6%; margin:20% auto 6% ; }
26 
.logolink{display: block;max-width:28%;min-width:100px;margin: auto;}
27 
.logoimg{ width: 100%; margin: auto; text-align:center;}
28 
.inviteTit{text-align: center; font-size: 18px;line-height: 40px;margin-top:30px;}
29 
.inviteTit span{font-size:20px;line-height: 44px; padding:0 6px; color:#FF9900}
30 
.bomb-box{background-color:rgba(000,000,000,0.5); padding:5px 15px; border-radius:50px; font-size: 12px; color: #fff; text-align:center; position: absolute; display: inline; left:50%; top:25%}
31
10 
<link rel="stylesheet" href="../css/share.css">
11 
<style type="text/css">
12 
	html,body{min-height: auto;background: url(../images/wechat_bg_img_nor@3x.png) no-repeat;background-size:cover;background-attachment: fixed;}
32 13 
</style>
33 14 
</head>
34 
<body>
15 
<body class="invitebody">
35 16 
<div class="contentBody2" style="max-width: 640px;margin:auto;">
36 17 
	<div class="logobox">
37 18 
		<a class="logolink" href="javascript:;">
38 
			<img class="logoimg" src="../images/logo4.png" />
19 
			<img class="logoimg" src="../images/wechat_icon_logo_nor@3x.png" />
39 20 
		</a>
40 
		<div class="inviteTit">
41 
			<span></span> 邀请您加入科袖
42 
		</div>
43 21 
	</div>
44 22
45 23 
	<form class="form-inline" role="form" style="width: 90%;margin:auto">
46 
		<div class="form-group">
47 
		    <input type="phone" class="form-control" placeholder="请输入您的手机号码" id="userphone" autocomplete="off">
48 
		    <div class="input-group" style="margin:6px 0;">
49 
		      <input class="form-control" style="width: 97%;" type="text" placeholder="请输入验证码" id="code" autocomplete="off">
50 
		      <div class="input-group-addon canPoint" id="obtain-code" >获取验证码</div>
51 
		      <div class="input-group-addon canPoint2" id="getcodeoff" style="display: none;"></div>
52 
		    </div>
53 
		    <input type="password" class="form-control" placeholder="请设置您的登录密码" id="password" autocomplete="off">
24 
		<!--填写表单信息-->
25 
		<div class="formblock">
26 
			<div class="inviteTit">
27 
				<span></span> 邀请您加入「科袖」
28 
			</div>
29 
			<div class="form-group">
30 
				<div class="input-group">
31 
			    	<input type="text" class="form-control input_name" placeholder="请输入您的姓名" id="username" autocomplete="off">
32 
			    </div>
33 
				<div class="input-group">
34 
			    	<input type="phone" class="form-control input_phone" placeholder="请输入您的手机号码" id="userphone" autocomplete="off">
35 
			    </div>
36 
			    <div class="input-group">
37 
			      <input class="form-control input_code" type="text" placeholder="请输入验证码" id="code" autocomplete="off">
38 
			      <button type="button" class="btn input-group-addon canPoint" id="obtain-code">获取验证码</button>
39 
			    </div>
40 
			    <div class="input-group">
41 
			    	<input type="password" class="form-control input_pwd" placeholder="请设置您的登录密码" id="password" autocomplete="off">
42 
			    </div>
43 
			</div>
44 
			<div class="checkboxT checkReg">
45 
		        <div class="checkBg">
46 
		        	已同意 <a href="privacyApp.html" class="protocollink" target="_blank">科袖网用户协议</a>
47 
		        </div>
48 
			</div>
49 
		    <button type="button" class="btn btn-lg btn-block canPoint" disabled id="regbtn">注册</button>
50 
	    </div>
51 
	    <!--注册成功时显示-->
52 
	    <div class="inviteSucceed displayNone">
53 
	    	<div class="inviteTit">
54 
				注册成功！<br/>欢迎您加入「科袖」
55 
			</div>
56 
			<a style="margin:60px 0 54px;" href="http://a.app.qq.com/o/simple.jsp?pkgname=com.ekexiu.app" class="btn btn-lg btn-block canPoint">点击下载「科袖」app</a>
57 
	    </div>
58 
	    <!--文档信息-->
59 
		<div class="inforbox">
60 
			<img src="../images/wechat_bg_img_wenben_nor@3x.png" width="100%"/>
61 
			<ul>
62 
				<li>
63 
					<img class="lefticon" src="../images/wechat_icon_pro_nor@3x.png"/>
64 
					<div class="rightcon">
65 
						<h2>认证成为「科袖」专家</h2>
66 
						<p>寻找企业合作，将您的科研价值变现！</p>
67 
					</div>
68 
				</li>
69 
				<li>
70 
					<img class="lefticon" src="../images/wechat_icon_xuqiu_nor@3x.png"/>
71 
					<div class="rightcon">
72 
						<h2>发布研发需求</h2>
73 
						<p>寻找专家帮您解决研发难题！</p>
74 
					</div>
75 
				</li>
76 
				<li>
77 
					<img class="lefticon" src="../images/wechat_icon_yaoqing_nor@3x.png"/>
78 
					<div class="rightcon">
79 
						<h2>邀请好友加入</h2>
80 
						<p>获取丰厚积分奖励，好礼随意换！</p>
81 
					</div>
82 
				</li>
83 
			</ul>
54 84 
		</div>
55 
	  <div class="checkbox" style="padding:0">
56 
	    <label style="font-size:13px;color:#efefef;">
57 
	        <div class="checkBg">
58 
	        	已同意 <a href="privacyApp.html" class="protocollink" target="_blank">科袖网用户协议</a>
59 
	        </div>
60
61 
	    </label>
62 
	  </div>
63 
	  <button type="button" class="btn btn-lg btn-block canPoint" id="regbtn" disabled="disabled">注册</button>
64 85 
	</form>
65 86 
</div>
66 87

+ 12 - 11
js/invite-friends.js
View File 

@ -17,14 +17,14 @@ $(function(){
17 17 
		$(".bomb-box").text(textt);
18 18 
		var bombwidth = $(".bomb-box").width();
19 19 
	    $(".bomb-box").css({"marginLeft": -(bombwidth+25)/2 + "px"});
20 
		setInterval (function(){
20 
		setTimeout(function(){
21 21 
			$(".bomb-box").fadeOut("slow");
22 22 
		},4000);
23 23 
	}
24 24
25 25 
	/*校验提交按钮显示状态*/
26 
	$('.form-group').on('keyup', "#userphone,#code,#password", function() {
27 
		if($("#userphone").val() == "" || $("#code").val() == "" || $("#password").val() == "") {
26 
	$('.form-group').on('keyup', "#userphone,#code,#password,#username", function() {
27 
		if($("#userphone").val() == "" || $("#code").val() == "" || $("#password").val() == "" || $("#username").val() == "") {
28 28 
			$("#regbtn").attr("disabled",true);
29 29 
		} else {
30 30 
			$("#regbtn").attr("disabled",false);

@ -107,23 +107,22 @@ $(function(){
107 107
108 108 
	/*30s后重新获取验证码*/
109 109 
	function doClick() {
110 
		$("#obtain-code").hide();
111 
		$("#getcodeoff").show();
112 
		$("#getcodeoff").text("30s后重新获取");
110 
		$("#obtain-code").attr("disabled",true);
111 
		$("#obtain-code").text("30s后重新获取");
113 112 
		var clickTime = new Date().getTime();
114 113 
		var Timer = setInterval(function() {
115 114 
			var nowTime = new Date().getTime();
116 115 
			var second = Math.ceil(30 - (nowTime - clickTime) / 1000);
117 116 
			if(second > 0) {
118 
				$("#getcodeoff").text(second + "s后重新获取");
117 
				$("#obtain-code").text(second + "s后重新获取");
119 118 
			} else {
120 119 
				clearInterval(Timer);
121 
				$("#obtain-code").show();
122 
				$("#getcodeoff").hide();
120 
				$("#obtain-code").attr("disabled",false);
123 121 
				$("#obtain-code").text("获取验证码");
124 122 
			}
125 123 
		}, 1000);
126 124 
	}
125
127 126
128 127 
	/*校验验证码*/
129 128 
	function codeVal() {

@ -188,7 +187,8 @@ $(function(){
188 187 
				mobilePhone: $("#userphone").val(),
189 188 
				validateCode: $("#code").val(),
190 189 
				password: $("#password").val(),
191 
				inviterId:inviterId
190 
				inviterId:inviterId,
191 
				name:$("#username").val()
192 192 
			},
193 193 
			dataType: 'json', //数据格式类型
194 194 
			type: 'post', //http请求类型

@ -196,7 +196,8 @@ $(function(){
196 196 
			success: function(data) {
197 197 
				if(data.success) {
198 198 
					bombox("注册成功");
199 
					location.href="invitSucceed.html";
199 
					$(".formblock").hide();
200 
					$(".inviteSucceed").show();
200 201 
				}
201 202 
			},
202 203 
			error: function() {