mui实现自动登录

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<script src="js/pub.js" type="text/javascript" charset="utf-8"></script>
<style>
body {
height: 100%;
background: #fff;
}

.mui-content {
height: 100%;
padding: 0;
background: #fff;
}

img {
margin-top: 30px;
}
</style>

</head>

<form id='login-form' class="mui-input-group">
<div class="mui-input-row">
<label>账号</label>
<input id='account' type="text" value='' class="mui-input-clear mui-input" placeholder="工号/手机号/邮箱">
</div>
<div class="mui-input-row">
<label>密码</label>
<input id='password' type="password" value="" class="mui-input-clear mui-input" placeholder="请输入密码">
</div>
</form>
<form class="mui-input-group">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
自动登录
<div id="autoLogin" class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
</form>
<div class="mui-content-padded">
<button id='btnLogin' class="mui-btn mui-btn-block mui-btn-primary" style="height:40px;padding:0 10px;">登  录</button>

</div>

</div>
</body>
<script src="js/mui.min.js"></script>
<script src="js/pub.js"></script>
<script type="text/javascript" charset="utf-8">
(function(mui, doc) {
var suserName = document.getElementById('account');
var spassWord = document.getElementById('password');
var subLogin = document.getElementById('btnLogin');
var autoSwitch = document.getElementById("autoLogin");
var url = OCS.getUrl();

mui.init({
swipeBack: true //启用右滑关闭功能
});
// 所有方法都放到这里
mui.plusReady(function() {
subLogin.addEventListener('tap', function(event) {
postData(suserName.value, spassWord.value);
});
autoSwitch.addEventListener("toggle", function(event) {
window.localStorage.setItem(OCS.token.SWITCH_STATE, event.detail.isActive);
});

autoLogin();
});

function autoLogin() {
autoSwitch.value = window.localStorage.getItem(OCS.token.SWITCH_STATE);
suserName.value = window.localStorage.getItem(OCS.token.TOKEN_USER);
spassWord.value = window.localStorage.getItem(OCS.token.TOKEN_PW);
if(autoSwitch.value == 'true' || autoSwitch.value == true) {
mui("#autoLogin").switch().toggle();
postData(suserName.value, spassWord.value);
}
}

function postData(name, password) {
mui.post(url + 'Login', {
psncode: name,
password: password
}, function(data) {
window.localStorage.setItem(OCS.token.TOKEN_USER, suserName.value);
window.localStorage.setItem(OCS.token.TOKEN_PW, spassWord.value);
window.localStorage.setItem(OCS.token.TOKEN_TOKEN, data.resultData);

if(data.success + "" != "true") { //如果登陆失败，提示
mui.alert(data.msg);
} else {
mui.post(url + 'IPI', {
token: data.resultData
}, function(dataIPI) {
window.localStorage.setItem(OCS.person.id, dataIPI.resultData.id);
window.localStorage.setItem(OCS.person.addr, dataIPI.resultData.addr);
window.localStorage.setItem(OCS.person.birthdate, dataIPI.resultData.birthdate);
window.localStorage.setItem(OCS.person.email, dataIPI.resultData.email);
window.localStorage.setItem(OCS.person.sex, dataIPI.resultData.sex);
window.localStorage.setItem(OCS.person.usedname, dataIPI.resultData.usedname);
window.localStorage.setItem(OCS.person.mobile, dataIPI.resultData.mobile);
window.localStorage.setItem(OCS.person.psnname, dataIPI.resultData.psnname);
}, 'json');
mui.openWindow({
url: "index.html"
});
}
}, 'json');
}
})(mui, document);
</script>

var slider = mui("#slider");
slider.slider({
interval: 3000
});
</script>

</html>

巴特西

mui实现自动登录

最新文章

热门文章