<!DOCTYPE html>
<html class="ui-page-login">
<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" />
<script src="js/mui.min.js"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/admin.css" />
<script src="js/mui.enterfocus.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="index">
<header class="top-tit">
<img src="img/timg(1).png" />
<h1>xx公司</h1>
</header>
<form action="">
<div class="userName">
<lable>用户名：</lable>
<input type="text" name="name" id='account' placeholder="请输入用户名" pattern="[0-9A-Za-z]{6,16}" required/>
</div>
<div class="passWord">
<lable>密 码：</lable>
<input type="password" name="password" id='password' placeholder="请输入密码" pattern="[0-9A-Za-z]{6,25}" required/>
</div>
<div class="choose_box">
<div class="login">
<span><a href="">自动登录</a></span>
<div class="switch">
<div id="autoLogin" class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
<button id='login' class="login_btn" type="button">登 录</button>
</form>
<script>
(function($, doc) {
$.init({
statusBarBackground: '#f7f7f7'
});
$.plusReady(function() {
//launchScreen();
var urlstr = app.getMyUrl(); //获取 地址
//alert(urlstr);
plus.screen.lockOrientation("portrait-primary");
var settings = app.getSettings();
var state = app.getState();
var mainPage = $.preload({
"id": 'main',
"url": 'main.html'
});
var main_loaded_flag = false;
mainPage.addEventListener("loaded", function() {
main_loaded_flag = true;
});
var toMain = function() {
//使用定时器的原因：
//可能执行太快，main页面loaded事件尚未触发就执行自定义事件，此时必然会失败
var id = setInterval(function() {
if(main_loaded_flag) {
clearInterval(id);
$.fire(mainPage, 'show', null);
mainPage.show("pop-in");
}
}, 20);
};
setTimeout(function() {
//关闭 splash
plus.navigator.closeSplashscreen();
}, 600);
//检查 "登录状态/锁屏状态" 结束
var loginButton = doc.getElementById('login');
var accountBox = doc.getElementById('account');
var passwordBox = doc.getElementById('password');
var autoLoginButton = doc.getElementById("autoLogin");
loginButton.addEventListener('tap', function(event) {
var loginInfo = {
account: accountBox.value,
password: passwordBox.value
};
mui.ajax(app.getMyUrl()+"ValidateLogin", {
data: {
userName: loginInfo.account,
password: loginInfo.password
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
headers: {
Accept: "application/json; charset=utf-8"
},
success: function(data) {
//console.log(data.Msg_Code);
//console.log(data.Msg_Info);
if(data.Msg_Code == "100") {
// app.setState({});
var state = app.getState();
state.account = loginInfo.account;
state.token = data.Msg_Info;
//console.log(state.token);
app.setState(state);
//console.log(token);
toMain();
} else {
plus.nativeUI.toast('用户名或密码错误');
}
},
error: function(xhr, type, errorThrown) {
//异常处理；
console.log(type);
}
});
});
$.enterfocus('#login-form input', function() {
$.trigger(loginButton, 'tap');
});
autoLoginButton.classList[settings.autoLogin ? 'add' : 'remove']('mui-active')
autoLoginButton.addEventListener('toggle', function(event) {
setTimeout(function() {
var isActive = event.detail.isActive;
settings.autoLogin = isActive;
app.setSettings(settings);
}, 50);
}, false);
var backButtonPress = 0;
$.back = function(event) {
backButtonPress++;
if(backButtonPress > 1) {
plus.runtime.quit();
} else {
plus.nativeUI.toast('再按一次退出应用');
}
setTimeout(function() {
backButtonPress = 0;
}, 1000);
return false;
};
});
}(mui, document));
</script>
</body> </html>
1 个回复
chender - 与人为善
你把入口页直接设置成登录页面吧，然后登录页面里判断，如果需要登录，就关掉splash，如果不需要登录，就跳转到主页面，然后关掉splash