jifuning
/
yangchangwan


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
							<!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">
    <meta name="format-detection"content="telephone=no">
    <title>index</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" href="../../css/toast.css">
    <link rel="stylesheet" href="../../css/projeck.css">
    <style media="screen">
      body,html{
        margin: 0;
        background: #ecf0f1;
      }
    </style>
</head>
<body>
  <!-- <header class="header-login">
     <img class="backBtn" src="../../image/btn_back.png" alt="" onclick="backIndex()">
     <p class="api_text">绑定手机号</p>
  </header> -->
  <div class="api_forget_phone">
      <div class="api_phone">
        <input type="number" name="" value="" placeholder="请输入手机号" class="api_phone_bind">
      </div>
      <div class="api_phone">
        <input type="number" name="" value="" placeholder="验证码" class="api_vali">
        <button type="button" class="api_btn_vali" id="verify-sms" onclick="changeTitleOnSendSms()">发送验证码</button>
      </div>
      <div class="api_bnt" onclick="bindPhoneFun()">绑定</div>
  </div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<!-- <script src="../../script/aui-toast.js" charset="utf-8"></script> -->
<!-- <script src="../../script/fastclick.min.js"></script> -->
<script src="../../script/config.js" charset="utf-8"></script>
<script type="text/javascript">
    apiready = function () {
        $api.fixStatusBar($api.dom('header') );
        api.setStatusBarStyle({
            style: 'light',
            color: 'rgba(0,159,232,0.5)'
        });
    }

    function backIndex() {
      api.closeWin();
    }
    var interval;
    function changeTitleOnSendSms() {
      var phone = $api.dom('.api_phone_bind').value;
      var reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
      if (!reg.test(phone)) {
        api.toast({
            msg: '电话号码格式不正确',
            duration: 2000,
            location: 'top'
        });
        return false;
      }else if (phone == '') {
        api.toast({
            msg: '电话号码不能为空',
            duration: 2000,
            location: 'top'
        });
        return false;
      }else {
        phoneFun();
      	interval = setInterval("changeTime()", 1000);
      	var verify_btn = $api.byId("verify-sms");
      	verify_btn.style.backgroundColor = "#D9D9D9";
        verify_btn.setAttribute('disabled','true');
      }
    }
    //
    var remaining_time = 30;
    function changeTime() {
    	var verify_btn = $api.byId("verify-sms");
    	$api.html(verify_btn, remaining_time + "s后重发");
    	remaining_time -= 1;
    	if (remaining_time <= 0) {
    		window.clearInterval(interval);
    		remaining_time = 30;
    		verify_btn.style.backgroundColor = "#009fe8";
        verify_btn.removeAttribute('disabled','true');
    		$api.html(verify_btn, "获取验证码");
    		// canSms = true;
    	}
    }
    function phoneFun() {
      var phone = $api.dom('.api_phone_bind');
      var phoneValue = $api.val(phone);
      $http.requestData(UrlRouter.vcodeApi,'post',{mobile: phoneValue})
      .then(ret=>{
        if (ret.code === 0) {
          api.toast({
              msg: '发送成功',
              duration: 2000,
              location: 'top'
          });
        }else if (ret.code === 3001) {
          api.toast({
              msg: '电话号码错误',
              duration: 2000,
              location: 'top'
          });
        }else if (ret.code === 3002) {
          api.toast({
              msg: '发送失败',
              duration: 2000,
              location: 'top'
          })
        }
      })
      .catch(err=>{
        api.toast({
            msg: '请求超时！',
            duration: 2000,
            location: 'top'
        });
      })
    }
    // 手机号验证
    // function checkPhone() {
		// 	var phone = $api.dom('.api_phone_bind').value;
		// 	if (!(/^1[34578]\d{9}$/.test(phone))) {
		// 		return false;
		// 	}
		// 	return true;
		// }
    // 绑定
    function bindPhoneFun() {
      var phone = $api.dom('.api_phone_bind').value,
          vcode = $api.dom('.api_vali').value;
          var reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
          if (!reg.test(phone)) {
            api.toast({
                msg: '电话号码格式不正确',
                duration: 2000,
                location: 'top'
            });
            return false;
          }
          if(phone !='' && vcode !=''){
            $http.requestDataLoging(UrlRouter.setApi,'post',{mobile: phone,vcode})
            .then(ret=>{
              if (ret.code === 0) {
                api.toast({
                    msg: '绑定成功',
                    duration: 2000,
                    location: 'top'
                });
                api.sendEvent({
                  name: 'myEvent',
                  extra: {
                      key1: 'value1',
                      key2: 'value2'
                  }
                });
                api.closeWin();
              }else if (ret.code === 4002) {
                api.toast({
                    msg: '验证码超时或者错误',
                    duration: 2000,
                    location: 'top'
                });
              }else if (ret.code === 4001) {
                api.toast({
                    msg: '缺少必要参数',
                    duration: 2000,
                    location: 'top'
                });
              }
            })
            .catch(err=>{
              api.toast({
                  msg: '网络超时',
                  duration: 2000,
                  location: 'top'
              });
            })
          }else {
            api.toast({
                msg: '手机号或验证码不能为空',
                duration: 2000,
                location: 'top'
            });
          }
    }
</script>