github.com/jincm/wesharechain@v0.0.0-20210122032815-1537409ce26a/app/html/frm_login.html (about)

     1  <!DOCTYPE html>
     2  <html>
     3  <head>
     4      <meta charset="utf-8">
     5      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
     6      <title></title>
     7      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
     8      <link rel="stylesheet" type="text/css" href="../css/common.css"/>
     9      <style>
    10          body {
    11              display: -webkit-box;
    12              -webkit-box-orient: vertical;
    13          }
    14          .content{
    15              -webkit-box-flex:1;
    16          }
    17          i {
    18              display: block;
    19              width: 30px;
    20              height: 30px;
    21              background-size: 30px;
    22              background-repeat: no-repeat no-repeat;
    23              background-position: center;
    24          }
    25          .user {
    26              background-image: url("../image/900.jpg");
    27          }
    28  
    29          .password {
    30              background-image: url("../image/900.jpg");
    31          }
    32  
    33          .input-wrap {
    34              padding: 10px 0;
    35              display: -webkit-box;
    36              border-bottom: 1px solid #d4d4d4;
    37          }
    38  
    39  
    40          .form {
    41              background-color: rgba(255, 255, 255, 0.8);
    42              margin: 20px;
    43              border-radius: 8px;
    44              padding: 0 10px;
    45              line-height: 30px;
    46          }
    47  
    48          .input-wrap input {
    49              display: block;
    50              -webkit-box-flex: 1;
    51              background-color: rgba(255, 255, 255, 0);
    52              outline: none;
    53              height: 32px;
    54          }
    55  
    56          .btn {
    57              display: block;
    58              color: #000000;
    59              margin: 0 40px;
    60              text-align: center;
    61              border-radius: 8px;
    62              height: 40px;
    63              line-height: 40px;
    64              border:1px solid #CECECE;
    65          }
    66          input{
    67              padding-left: 10px;
    68              font-size: 18px;
    69          }
    70          .other-login-wrap,.other-login{
    71              margin-top: 20px;
    72          }
    73          .other-login-lable{
    74              padding:10px 20px;
    75              border-bottom: 1px solid #E7E7E7;
    76          }
    77          .other-login{
    78              text-align: center;
    79          }
    80          .other-login div{
    81              display: inline-block;
    82              position: relative;
    83              width: 49.4%;
    84              height:60px;
    85              background-repeat: no-repeat no-repeat;
    86              background-position: center center;
    87              background-size: 60px;
    88          }
    89          .sina{
    90              background-image: url("../image/900.jpg");
    91          }
    92          .qq{
    93              background-image: url("../image/900.jpg");
    94          }
    95          .other-login div span{
    96              margin-top:70px ;
    97          }
    98          footer{
    99              position:relative;
   100              height: 50px;
   101              text-align: center;
   102              line-height: 50px;
   103          }
   104          .fast-reg{
   105              line-height: 20px;
   106              position: absolute;
   107              border-radius: 10px;
   108              border: 1px solid #E7E7E7;
   109              bottom:14px;
   110              right: 20px;
   111              width: 70px;
   112          }
   113      </style>
   114  </head>
   115  <body>
   116  <div class="content">
   117      <div class="form">
   118          <div class="input-wrap">
   119              <i class="user"></i>
   120              <input type="text" placeholder="邮箱账号或手机号"  id="username" value="">
   121          </div>
   122          <div class="input-wrap">
   123              <i class="password"></i>
   124              <input type="password" placeholder="密码"  id="password" value="">
   125          </div>
   126      </div>
   127      <div class="btn" id="login" tapmode="" onclick="login()">登录</div>
   128      <div class="other-login-wrap">
   129      <div class="other-login-lable">
   130              还可选择以下方式登陆
   131          </div>
   132          <div class="other-login">
   133              <div class="sina">
   134                  <span class="sina-label">新浪微博登陆</span>
   135              </div>
   136              <div class="qq">
   137                  <span class="qq-label">QQ登陆</span>
   138              </div>
   139          </div>
   140      </div>
   141  </div>
   142  <footer>
   143      <div>没有账号？</div>
   144      <div class="fast-reg" tapmode="" onclick="toRegister()">立即注册</div>
   145  </footer>
   146  <script src="../script/zepto.min.js"></script>
   147  <script type="text/javascript" src="../script/api.js"></script>
   148  <script type="text/javascript" src="../script/app.js"></script>
   149  <script>
   150      apiready = function () {
   151  
   152      };
   153      function toRegister(){
   154          api.openWin({
   155              name:'register',
   156              url:'win_register.html'
   157          })
   158      }
   159      function login(){
   160          api.showProgress();
   161  
   162          var username = $("#username").val();
   163          var password = $("#password").val();
   164  		http_path = '/u/login';
   165      	mybody = {"account": username, "passwd": password}
   166      	myajax(http_path,'POST',mybody, function(ret, err) {
   167      		api.hideProgress();
   168              if (ret) {
   169                  console.log(JSON.stringify(ret));
   170                  if(!!ret.body.user_id){ //undefined is false
   171  	                console.log("user_id " + ret.body.user_id);
   172  	                console.log("token is " + ret.body.token);
   173  	                $api.setStorage("user_id", ret.body.user_id);
   174  	                $api.setStorage("token", ret.body.token);
   175  	                
   176  	                api.alert({
   177  	                    title: '登陆成功',
   178  	                    msg: ret.body.user_id,
   179  	                    buttons: ['确定']
   180  	                }, function (ret, err) {
   181  	                    if (ret.buttonIndex == 1) {
   182  	                        api.closeWin();
   183  	                    }
   184  	                });
   185  	             } else {                
   186  	                api.alert({
   187  	                    title: '登陆失败',
   188  	                    msg: username,
   189  	                    buttons: ['确定']
   190  	                }, function (ret, err) {
   191  	                    if (ret.buttonIndex == 1) {
   192  	                        api.closeWin();
   193  	                    }
   194  	                });	             
   195  	             }
   196  	             
   197              }else{
   198                  api.toast({msg: err.message, location: "middle"})
   199              }
   200      		//console.log("ret body = " + JSON.stringify(ret_body));
   201      	});
   202      	
   203      }
   204  </script>
   205  </body>
   206  </html>