<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>更改手机号</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" type="text/css" href="css/mui.min.css" /> <link rel="stylesheet" type="text/css" href="css/iconfont.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <style> h4 { font-size: 16px; } .mui-input-row label { width: 30%; } .mui-input-row label { padding: 5px 15px 7px 15px; position: relative; } .sex-group .mui-radio.mui-left label { padding: 13px 15px 11px 35px; } .mui-radio { display: inline-block; } .mui-input-group .mui-input-row { height: 46px; padding: 3px 0; } .mui-input-row label~input { width: 65%; font-size: 14px; } .mui-input-row label~input::-webkit-input-placeholder { color: #bbb; } .mui-radio.mui-left input[type=radio] { left: 0; top: 10px; } .sex-group { position: absolute; left: 35%; top: 0; width: 65%; } .mui-input-group:before, .mui-input-group:after { display: none; } .my-lable { position: absolute; left: 45px; top: 12px; white-space: nowrap; font-size: 14px; } .my-lable i { color: #ee5c5c; font-size: 15px; } .mui-input-row .iconfont { color: #74c7dd; font-size: 25px; } .sex-group .mui-radio input[type=radio]::before { font-family: "iconfont" !important; font-size: 25px !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: 0 !important; color: #eee; } .sex-group .mui-radio input[type=radio].boy::before { content: '\e721'; } .sex-group .mui-radio input[type=radio].girl::before { content: '\e72e'; } .mui-radio input[type=radio].boy:checked:before, .mui-radio input[type=radio].girl:checked:before { color: #727171; } .pull-code { background: #74c7dd; border-radius: 25px; border: 1px solid #74c7dd; color: #fff; margin-top: 6px; padding: 4px 2px 4px 2px; font-size: 12px; float: right; width: 80px; white-space: nowrap; } .pull-code:disabled { background: #fff; color: #000; border: 1px solid rgba(0, 0, 0, .5); } .my-join-vip { display: block; width: 160px; margin: 30px auto 50px auto; padding: 8px 10px; border-radius: 25px; background: #fff; color: #74c7dd; border: 1px solid rgba(116, 199, 221, .5); font-size: 16px; } .my-join-vip:active { background: #fff !important; color: #74c7dd !important; border: 1px solid rgba(116, 199, 221, .5) !important; } .my-join-vip:disabled { background: #fff; color: #000; border: 1px solid rgba(0, 0, 0, .5); } .mui-icon-arrowdown { position: absolute; right: 10px; top: 10px; color: #999; pointer-events: none; } .mui-input-group .mui-input-row:after { background-color: #e5e5e5; } </style> <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script> <script> //屏蔽分享 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu'); }); </script> </head> <body style="background: #fff;"> <div class="loading-bg"> <div class="mui-loading"> <div class="mui-spinner"> </div> 加载中... </div> </div> <div class="mui-content" style="background: #fff;"> <div style="margin:35px 30px 25px 18px;"> <div style="margin:12px 16px 25px 16px;"> <h4>请填写需要更改的手机号</h4> </div> <form class="mui-input-group"> <div class="mui-input-row"> <label><span class="iconfont icon-w-shoujihao"></span><span class="my-lable"><i>*</i>手机号</span></label> <input type="tel" placeholder="请输入您的手机号" id="ipt-phone" maxlength="11"> </div> <div class="mui-input-row"> <label><span class="iconfont icon-w-yanzhengma"></span><span class="my-lable"><i>*</i>验证码</span></label> <input style="width: 28% !important;float: none;padding-right: 0;margin-left: 5%;" type="tel" placeholder="短信验证码" maxlength="4" id="code"><button type="button" class="pull-code" disabled="disabled">获取验证码</button> </div> </form> <button type="button" class="mui-btn my-join-vip" disabled="disabled">确认修改</button> </div> </div> <script type="text/javascript" src="js/mui.min.js"></script> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript"> var countdown = 60; mui.ready(function() { console.log("页面加载完毕") document.querySelector('.loading-bg').style.display = 'none'; }); //实时监听文本框字数 document.getElementById("ipt-phone").addEventListener("input", function() { var phone = this.value; var mobile = /^(13|14|15|16|17|18|19)[0-9]{9}$/; //手机号码 if(phone.length == 11) { if(mobile.test(phone) && countdown == 60) { $(".pull-code").removeAttr("disabled"); } else { $(".pull-code").attr("disabled", "disabled"); } } else { $(".pull-code").attr("disabled", "disabled"); } }); // 成为会员 $(document).on('tap', '.my-join-vip', function() { validate(); if(validate_flag) { var num = /^[0-9]{4,4}$/; //数字(4位) var code = $('#code').val(); if(num.test(code)) { console.log('验证通过') var phone = $('#ipt-phone').val(); var code = $('#code').val(); $.ajax(base_path + '/user/updateMemberPhone?dates=' + new Date().getTime(), { data: { userTel : phone, code : code }, dataType: 'json', xhrFields: { withCredentials: true }, crossDomain: true, type: 'get', timeout: 15000, success: function(dt) { if(dt.isRedirect) { location.href = dt.redirectURL; } else { if(dt.status){ mui.alert(' ', '更改成功!', function() { location.href='vip_center.html'; }); }else{ mui.toast(dt.message); } } }, error: function(xhr, type, errorThrown) { console.log(xhr); } }); // $ajax } else { if(code != '') { show_msg = '验证码格式不正确'; } else { show_msg = '请输入短信验证码'; } mui.alert(show_msg); } } else { mui.alert(show_msg); } }); //发送验证码 var validate_flag = false, show_msg = ''; $(document).on('tap', '.pull-code', function() { validate(); if(validate_flag) { settime($(this)); $(".my-join-vip").removeAttr("disabled"); var phone = $('#ipt-phone').val(); $.ajax(base_path + '/user/send_phone?dates=' + new Date().getTime(), { data: { phone: phone }, dataType: 'json', xhrFields: { withCredentials: true }, crossDomain: true, type: 'get', timeout: 15000, success: function(dt) { if(dt.isRedirect) { location.href = dt.redirectURL; } else { if(dt.status) { console.log("获取短信成功!"); $(".my-join-vip").removeAttr("disabled"); } } }, error: function(xhr, type, errorThrown) { console.log(xhr); } }); } else { mui.alert(show_msg); } }); function settime(obj) { if(countdown == 0) { obj.removeAttr("disabled"); obj.text("获取验证码"); countdown = 60; return; } else { obj.attr("disabled", true); obj.text("重新发送" + countdown + ""); countdown--; } setTimeout(function() { settime(obj) }, 1000) } function validate() { var mobile = /^(13|14|15|17|18)[0-9]{9}$/; //手机号码 var phone = $("#ipt-phone").val(); if(mobile.test(phone)) { validate_flag = true; } else { validate_flag = false; if(phone != '') { show_msg = '手机号码格式不正确'; } else { show_msg = '请输入您的手机号'; } return false; } } </script> </body> </html>