jifuning
/
ximeichang


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
							<!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">
    var token;
    var toast = new auiToast();
    apiready = function () {
        $api.fixStatusBar($api.dom('header') );
        api.setStatusBarStyle({
            style: 'light',
            color: 'rgba(0,159,232,0.5)'
        });
        var info = $api.getStorage('data');
        token = JSON.parse(info).data.access_token;
    }

    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(token);
      	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(token) {
      var phone = $api.dom('.api_phone_bind');
      var phoneValue = $api.val(phone);
      api.ajax({
          url: UrlRouter.vcodeApi,
          method: 'post',
          headers : {
            "Authorization":"Bearer "+ token
          },
          data: {
              values: {
                mobile: phoneValue
              }
          }
      },function(ret, err){
          if (ret) {
            if (ret.code === 3001) {
              api.toast({
                  msg: '电话号码错误',
                  duration: 2000,
                  location: 'top'
              });
            }else if (ret.code === 0) {
              api.toast({
                  msg: '发送成功',
                  duration: 2000,
                  location: 'top'
              });
            }
          } else if (ret.code === 3002) {
            api.toast({
                msg: '发送失败',
                duration: 2000,
                location: 'top'
            })
         }else {
            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 !=''){
            toast.loading({
                title: "加载中",
                duration: 2000
            });
            api.ajax({
                url: UrlRouter.setApi,
                method: 'post',
                headers : {
                  "Authorization":"Bearer "+ token
                },
                data: {
                    values: {
                      mobile: phone,
                      vcode: vcode
                    }
                }
            },
            function(ret, err){
                if (ret) {
                  if (ret.code === 0) {
                    api.toast({
                        msg: '绑定成功',
                        duration: 2000,
                        location: 'top'
                    });
                    api.sendEvent({
                      name: 'myEvent',
                      extra: {
                          key1: 'value1',
                          key2: 'value2'
                      }
                    });
                    toast.hide();
                    api.closeWin();
                  }else if (ret.code === 4002) {
                    api.toast({
                        msg: '验证码超时或者错误',
                        duration: 2000,
                        location: 'top'
                    });
                    toast.hide();
                  }else if (ret.code === 4001) {
                    api.toast({
                        msg: '缺少必要参数',
                        duration: 2000,
                        location: 'top'
                    });
                  }
                  toast.hide();
                } else {
                  api.toast({
                      msg: '网络超时',
                      duration: 2000,
                      location: 'top'
                  });
                }
                toast.hide();push
            });
          }else {
            api.toast({
                msg: '手机号或验证码不能为空',
                duration: 2000,
                location: 'top'
            });
          }
    }
</script>