forgetPassword.html 6.9 KB
<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>

<body class="forget-password-view">
    <div class="aui-content aui-margin-b-15">
        <header class="aui-bar aui-bar-nav" id="header">
            <a class="aui-btn aui-pull-left" tapmode onclick="closeWin()">
                <span class="aui-iconfont aui-icon-left"></span>
            </a>
            <div class="aui-title">找回密码</div>
        </header>
        <ul class="aui-list aui-list-in">
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <img style="width:14px;" src="../image/jingbaotishi-s.png" />
                </div>
                <div class="aui-list-item-inner">温馨提示:为了您的账号安全,请先进行账号验证!</div>
            </li>
        </ul>
        <div class="aui-padded-l-15 aui-padded-r-15">
            <div class="forget-password-process">
                <span class="aui-hr"></span>
                <ul>
                    <li><span>1</span>
                        <abbr>进行安全验证</abbr>
                    </li>
                    <li><span>2</span>
                        <abbr>设置新密码</abbr>
                    </li>
                    <li><span>3</span>
                        <abbr>设置成功</abbr>
                    </li>
                </ul>
                <div class="aui-clearfix"></div>
            </div>
            <p class="aui-font-size-14 aui-margin-t-15 aui-margin-b-10">手机验证:请输入您绑定设备的手机号</p>
            <ul class="aui-list aui-form-list">
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label-icon">
                            <img style="height:19px;" src="../image/shouji.png" />
                        </div>
                        <div class="aui-list-item-input">
                            <input id="phone" type="number" class="aui-font-size-14" placeholder="输入手机号">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item forget-password-code">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label-icon">
                            <img style="height:16px;" src="../image/yanzhengma.png" />
                        </div>
                        <div class="aui-list-item-input">
                            <input id="phoneCode" type="number" class="aui-font-size-14" placeholder="输入验证码">
                        </div>
                    </div>
                </li>
                <li onclick="sendSmsCode(this);" class="get-code-btn">
                    获取验证码
                </li>
            </ul>
            <span class="submit-btn" onclick="setNewPassword();">下一步</span>
        </div>
    </div>
</body>

</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/addr.js"></script>
<script type="text/javascript" src="../script/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    var header = $api.byId('header');
    fixStatusBar_API(header);
    apiready = function() {
        api.setStatusBarStyle({
            style: 'dark',
            color: 'rgba(0,0,0,0)'
        });
        api.parseTapmode();
        // api.openWin({ slidBackEnabled:false,
        //     name: 'index',
        //     url: './html/index.html',
        //     pageParam: {}
        // });
    }
    var cid="";
    var sended = false;
    function sendSmsCode(sender){
      if(sended){
        return false;
      }
      var userphone = $api.trim($api.val($api.byId("phone")));
      var phonereg=/^[1][3,4,5,7,8][0-9]{9}$/;
      if(userphone=="" || !phonereg.test(userphone)){
        api.toast({ msg: "请输入正确的手机号"});
        return false;
      }
      api.showProgress({
          style: 'default',
          animationType: 'fade',
          title: '请求验证码...',
          text: '',
          modal: true
      });
      var counter = 60; //60秒为一个周期
      $.ajax({
          url : HOST+'/iot_api/v1/app/send_sms_need_phone_exist',
          type : 'POST',
          dataType : 'json',
          headers:{
            'Content-Type': 'application/json;charset=utf-8',
            'imei': api.deviceId
          },
          data:JSON.stringify({
                  phone: userphone
              }),
          complete: function(){
            api.hideProgress();
          },
          success : function(ret) {
            if (ret) {
              if(ret.code == 0){
                api.toast({
                    msg: '验证码发送成功!',
                    duration: 2000,
                    location: 'bottom'
                });
                cid = ret.data.cid;
                sended = true;
                remainder = setInterval(function(){
                  if(counter==0){
                    sended = false;
                    $api.html(sender, "获取验证码");
                    if(remainder){
                      clearInterval(remainder);
                    }

                  }else{
                    $api.html(sender, counter+"秒");
                    counter--;
                  }

                }, 1000)
              }else{
                  api.toast({ msg: "发送失败,"+ajaxCodeCheck(ret.code, ret.msg, '请稍后再试')});
              }
            }
          },
          error : function() {
                  api.toast({ msg: "发送失败,请稍候再试"});
          }
      });

    }

    function setNewPassword(){
      var userphone = $api.trim($api.val($api.byId("phone")));
      var phonereg=/^[1][3,4,5,7,8][0-9]{9}$/;
      if(userphone=="" || !phonereg.test(userphone)){
        api.toast({ msg: "请输入正确的手机号"});
        return false;
      }

      var phonecode = $api.trim($api.val($api.byId("phoneCode")));
      if(phonecode == ""){
        api.toast({ msg: "请输入收到的验证码"});
        return false;
      }

      if(cid==""){
        api.toast({ msg: "请重新获取验证码"});
        return false;
      }

      api.openWin({ slidBackEnabled:false,
          name: 'setNewPassword',
          url: 'setNewPassword.html',
          pageParam: {
            "phone":userphone,
            "code":phonecode,
            "cid":cid
          }
      });
    }
</script>