master

Branches (1)

Manage

Manage

master

hailiao
/
login.html

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/basic.css" />
		<link rel="stylesheet" href="css/header.css" />
	</head>

	<body>
		 <!--header 开始-->
	    <header class="mui-bar mui-bar-nav title">
	    	<h1 id="title" class="mui-title title-color"><b>登录</b></h1>
		</header>
		<!--header 结束-->

		<div class="mui-content">
		    <div class="page">
			    <div class="main">
			      <form id="frm_login">
			        <div class="item item-username">
			          <input id="username" class="txt-input txt-username" type="text" placeholder="请输入手机号" value="" name="username">
			          <b class="input-close" style="display: none;"></b> </div>
			        <div class="item item-password">
			          <input id="password" class="txt-input txt-password ciphertext" type="password" placeholder="请输入密码" name="password" style="display: inline;">
			          <input id="ptext" class="txt-input txt-password plaintext" type="text" placeholder="请输入密码" style="display: none;" name="ptext">
			          <b class="tp-btn btn-off"></b> </div>
			        <div class="item item-login-option"> <span class="retrieve-password"> <a class="" href="#"> 忘记密码？</a> </span>
			          <div class="clr"></div>
			        </div>
			        <div class="ui-btn-wrap" style="margin-top: 40px;"> <button class="ui-btn-lg ui-btn-primary" type="submit" style="line-height: 30px;">用户登录</button> </div>
			        <div class="ui-btn-wrap" style="margin-top: 10px;"> <a id="register" class="ui-btn-lg ui-btn-danger" href="#">没有账号？立即注册</a> </div>
			        <div class="item item-login-other" align="center" style="margin-top: 40px;">
			          <dl>
			            <dt>其它登录方式</dt>
			            <dt> <a class="qq" href="#" id="QQ_login"> <span><img alt="" src="img/qq.png" width="35" height="35"></span></a></dt>
			            <dt><span style="font-size: 12px;color: gray">QQ 登录</span></dt>
			          </dl>
			        </div>
			      </form>
			    </div>
	    	</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/app.js" ></script>
		<script type="text/javascript">
			mui.init()

			mui.plusReady(function() {
				plus.navigator.setStatusBarStyle("light");
	      		plus.navigator.setStatusBarBackground("#4eabe8");
	      		var re = /^1\d{10}$/;
	      		var loginForm = document.getElementById("frm_login");
	      		var inputUsername = document.getElementById("username");
	      		var inputPassword = document.getElementById("password");

	      		//若已登陆无需再登录
	      		var userInfo = app.getUserInfo();
	      		if(userInfo != null) {
	      			mui.openWindow("index.html", "index.html");
	      		}

	      		loginForm.addEventListener("submit", function(e) {
	      			if(!app.isNotNull(inputUsername.value)) {
	      				//获取焦点
	      				inputUsername.focus();
	      			}else if(!app.isNotNull(inputPassword.value)) {
	      				inputPassword.focus();
	      			}else {
	      				if(!re.test(inputUsername.value)) {
	      					app.showToast("手机号格式错误", "error");
	      					return false;
	      				}else if(inputPassword.value.length < 6) {
	      					app.showToast("密码不能少于6位", "error");
	      					return false;
	      				}
	      				mui.ajax(app.serverUrl + "/simple-chat/api/user/login",{
							data:{
								username:inputUsername.value,
								password:inputPassword.value
							},
							dataType:'json',//服务器返回json格式数据
							type:'post',//HTTP请求类型
							timeout:10000,//超时时间设置为10秒；
							//headers:{'Content-Type':'application/json'},
							success:function(data,textStatus, response){
								//失去焦点
								inputUsername.blur();
								inputPassword.blur();

								//服务器返回响应，根据响应结果，分析是否登录成功;
								if(data.status == 0) {
									var token = response.getResponseHeader("token");
									app.removeToken();
									app.removeUserInfo();
									if(token != null) {
										app.setToken(token);
									}
									app.setUserInfo(data.data);
									mui.openWindow({
										url: "index.html",
										id: "index.html"
									});
								}else {
									app.showToast("用户名或密码错误", "error");
								}
							},
							error:function(xhr,type,errorThrown){
								//异常处理；
								app.showToast("网络异常，请检查您的网络", "error");
							}
						});
	      			}

	      			//阻止默认事件，阻止默认的form表单提交
	      			e.preventDefault();
	      		});

	      		mui("body").on('tap',"#register", function() {
					mui.openWindow('register.html', 'register.html');
				});

//	      		var info = plus.push.getClientInfo();
//				var clientid=info.clientid;
//				console.log(clientid);
//				document.getElementById("username").value = clientid;

				document.getElementById("QQ_login").addEventListener("tap", function(){
					app.showToast("该功能正在开发中...", "success");
				});
			});
		</script>
	</body>

</html>