chenyue
/
sr-iHealthwx
forked from Amoy2/sr-iHealthwx


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
							<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>绑定手机号</title>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <link rel="stylesheet" href="../../../css/cross.css" type="text/css"/>
    <link rel="stylesheet" href="../../../css/cross.ui.css" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="../../../css/ss-style.css">
    <link rel="stylesheet" type="text/css" href="../../../iconfont/iconfont.css" />
    <style>
        .n-list-info{position: relative;}
        .searchbar-clear{position: absolute;width: 28px;height: 28px;right: 0;top:8px;opacity:0;pointer-events:none;background-position:center;background-repeat:no-repeat;background-image:url(../../../images/delete01_pre.png);-webkit-background-size:20px 20px;background-size:20px 20px;-webkit-transition-duration:300ms;transition-duration:300ms;cursor:pointer;}
        .div-zczh{width:auto;height:29px;border:0;color:#4DCD70;font-size:14px;line-height:29px;text-align:center;border-radius:10px;color:#17b3ec;float: left;margin-left: 20px;}
        .div-zhmmdl{width:auto;height:29px;border:0;color:#4DCD70;font-size:14px;line-height:29px;text-align:center;border-radius:10px;color:#17b3ec;float: right; margin-right: 20px;}
        .bgc-fa8888{background-color: #FA8888;}
    </style>
</head>
<body>

<div class="main">
    <ul class="n-list edit-info registered c-border-tb mt15 c-f15 form-register">
        <li>
            <div class="n-list-key" style="width: 2.3em;">
                <i class="iconfont icon-shouji1"></i>
            </div>
            <div class="n-list-info">
                <input id="txtMobile" type="tel" class="width-100 c-f16 c-5b5b5b" maxlength="11" placeholder="请输入手机号码" onkeyup="this.value=this.value.replace(/[^\d]/g,'')"/>
                <a href="#" class="searchbar-clear"></a>
            </div>
        </li>
        <li>
            <div class="n-list-key" style="width: 2.3em;">
                <i class="iconfont icon-yanzhengma01"></i>
            </div>
            <div class="n-list-info">
                <input id="txtCode" type="text" class="width-100 c-f16 c-5b5b5b" placeholder="请输入验证码"/>
                <a href="#" class="searchbar-clear"></a>
            </div>
            <div id="messageCode1" class="n-list-key pl15 c-17b3ec" onclick="sendCode()">
                <span>获取短信验证码</span>
            </div>
            <div id="messageCode2" class="n-list-key pl15 c-999999" style="display: none;">
                <span id="message"></span>
            </div>
        </li>
    </ul>
    <div class="mb15 mlr15 mt20">
        <a href="javascript:;" style="font-size: 18px;" class="c-btn c-btn-4dcd70 c-btn-full c-btn-radius c-f16" onclick="commit()">确认绑定</a>
    </div>
</div>
</body>
<script type="text/javascript" src="../../../js/jquery/2.1.3/jquery.js" ></script>
<script type="text/javascript" src="../../../js/common_http.js" ></script>
<script type="text/javascript" src="../../../js/weixin_common.js?11=11" ></script>
<link rel="stylesheet" type="text/css" href="../../../widget/artDialog/6.0.5/css/ui-dialog.min.css">
<script src="../../../widget/artDialog/6.0.5/js/dialog-plus.js"></script>
<script type="text/javascript" src="../../../js/commit_validate.js" ></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
	var dd = dialog({contentType:'load', skin:'bk-popup', content:'请稍后...'});
	var clock = "";
	var nums = 60;

	$(function (){
		bindEvents();
	})

	function bindEvents(){
		$("input").on("focus",function(){
			$(".searchbar-clear").css("pointer-events","none").css("opacity",0);
			if($(this).val()){
				$(this).next().css("pointer-events","auto").css("opacity",1);
			}
		}).on("input",function(){
			$(this).next().css("pointer-events","auto").css("opacity",1);
		});

		$(".n-list-info").on("click",".searchbar-clear",function(){
			$(this).prev().val("");
			$(this).css("pointer-events","none").css("opacity",0);
			$(this).prev().focus();
			return false;
		});
	}

	function sendCode(){
		var mobile = document.getElementById("txtMobile").value;
		if(!mobile){
			dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'请输入手机号'}).show();
			return;
		}
		if(!isphone(mobile)){
			dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'手机号格式不正确'}).show();
			return;
		}
		$("#messageCode1").hide();
		document.getElementById("message").innerHTML = nums+'秒后可重新获取';
		$("#messageCode2").show();
		clock = setInterval(doLoop, 1000); //一秒执行一次
		var data = {};
		data.mobile = mobile;
		data.type = 4;
		sendPost("common/checkCaptcha", data, "json", "post", sendFailed, sendSuccesss);
	}
	//失败
	function sendFailed(res) {
		clearInterval(clock); //清除js定时器
		$("#messageCode1").show();
		$("#messageCode2").hide();
		nums = 60; //重置时间
		if (res && res.msg) {
			dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:res.msg}).show();
		} else {
			dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'获取失败'}).show();
		}
	}

	function sendSuccesss(res){
		if (res.status == 200) {

		}
		else{
			sendFailed(res);
		}
	}

	function doLoop(){
		nums--;
		if(nums > 0){
			document.getElementById("message").innerHTML = nums+'秒后可重新获取';
		}else{
			clearInterval(clock); //清除js定时器
			$("#messageCode1").show();
			$("#messageCode2").hide();
			nums = 60; //重置时间
		}
	}

	function commit(){
		var mobile = document.getElementById("txtMobile").value;
		var captcha = document.getElementById("txtCode").value;
		if (!mobile || !captcha) {
			dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'手机号和验证码不能为空'}).show();
			return;
		}

		if(!isphone(mobile)){
			dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'手机号格式不正确'}).show();
			return;
		}

		dd.showModal();
		//拼请求内容
		var data = {};
		data.mobile = mobile;
		data.captcha = captcha;
		data.type = 4;
		sendPost("patient/mobileUpdate", data, "json", "post", operateFailed, operateSuccesss);
	}

	//失败
	function operateFailed(res) {
		dd.close();
		if (res && res.msg) {
			dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:res.msg}).show();
		} else {
			dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'登录失败'}).show();
		}
	}
	//成功调用手机绑定接口
	function operateSuccesss(res) {
		if (res.status == 200) {
			dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content: "手机号绑定成功！"}).show();
			setTimeout(function() {
				history.go(-1)
			}, 2000)
		} else {
		    operateFailed(res);
		}
	}
	//注册
	function regist(){
		window.location.href = "regist-info.html?type=" + type + "&openid=" + openid;
	}
	//帐号密码登录
	function zhmmLogin(){
		window.location.href = "zhmm-login.html?type=" + type + "&openid=" + openid;
	}
</script>
</html>