• 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>

    <body>
    <header class="mui-bar mui-bar-nav">
    <!--<h1 class="mui-title">欢迎光临</h1>-->
    <a id='done' class="mui-btn mui-btn-link mui-pull-right mui-btn-blue mui-disabled" href="setting_iandtop.html">
    <span class="mui-icon mui-icon-list"></span>
    </a>
    </header>
    <div class="mui-content">

    <center><img src="images/iandtop.png" /></center><br><br>

    <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;">登 &nbsp;录</button>
    <!--<br/>
    <div class="link-area">
    <a id='reg' href="register.html">注册账号</a> <span class="spliter">|</span>
    <a id='forgetPassword'>忘记密码</a>
    </div>-->
    </div>
    <!--<div class="mui-content-padded oauth-area">
    <a href="setting_iandtop.html">设置服务器地址</a>
    </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>

    <script type="text/javascript">
    var first = null;
    var showMenu = false;
    mui.back = function() {
    if(showMenu) {
    closeMenu();
    } else {
    //首次按键,提示‘再按一次退出应用’
    if(!first) {
    first = new Date().getTime();
    mui.toast('再按一次退出应用');
    setTimeout(function() {
    first = null;
    }, 1000);
    } else {
    if(new Date().getTime() - first < 1000) {
    plus.runtime.quit();
    }
    }
    }
    };

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

    </html>

  • 相关阅读:
    day30---内置函数
    day30---绑定方法与非绑定方法
    元类以及属性查找
    python 内置方法/魔法方法
    python 面向对象高级-反射机制
    centos7下jenkins升级
    屏蔽百度右侧热搜
    centos7部署汉化版gitlab
    CentOS 7 安装 Jenkins
    centos7安装与配置ansible
  • 原文地址:https://www.cnblogs.com/qiuchunxia/p/5905710.html
Copyright © 2020-2023  润新知