edit-profile-sms-edit.html 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <!DOCTYPE html>
  2. <html lang=zh-cn>
  3. <head>
  4. <meta charset=utf-8>
  5. <title>纵横计量支付系统</title>
  6. <meta name=description content=计量支付>
  7. <meta name=copyright content=smartcost.com.cn>
  8. <link rel=stylesheet href="{{rootUrl}}global/css/bootstrap.css">
  9. <link rel=stylesheet href={{rootUrl}}global/css/style.css>
  10. <script src={{rootUrl}}global/js/jquery-1.9.1.min.js></script>
  11. <script src={{rootUrl}}global/js/bootstrap.js></script>
  12. <script src={{rootUrl}}global/js/jl.js></script>
  13. <script src={{rootUrl}}global/js/jquery.cookie.min.js></script>
  14. </head>
  15. <body>
  16. <!-- include "top" -->
  17. <div class="wrapContent">
  18. <!-- include "left" -->
  19. <div class="mainContainer">
  20. <!--内容-->
  21. <div class="mainContent">
  22. <div class="title clearfix">
  23. <div class="fR">
  24. <a class="btn btn-link" href="http://smartcost.com.cn/product/19" target="_blank"><i class="icon-question-sign"></i>&nbsp;帮助</a>
  25. </div>
  26. </div>
  27. <div class="form">
  28. <form class="form-horizontal">
  29. <legend>短信通知-修改手机</legend>
  30. <div class="control-group">
  31. <label class="control-label" for="inputEmail">当前手机</label>
  32. <div class="controls">
  33. <input type="text" placeholder="{{uprofile.mobile}}" disabled="">
  34. </div>
  35. </div>
  36. <div id="input_error" class="control-group">
  37. <label class="control-label" for="inputEmail">新手机</label>
  38. <div class="controls">
  39. <input id="mobile" name="mobile" type="text" placeholder="输入您的新手机号码"><span id="help-inline"
  40. class="help-inline hide"></span>
  41. </div>
  42. </div>
  43. <div class="control-group">
  44. <label class="control-label" for="inputEmail">短信校验码</label>
  45. <div class="controls">
  46. <input type="text" id="verifycode" name="verifycode" placeholder="输入验证码" maxlength="11"
  47. class="span2">
  48. <!--<button class="btn">获取验证码</button>-->
  49. <!--<button class="btn" disabled>重新获取 60s</button>-->
  50. <input type="button" class="btn" id="getting" value="获取验证码">
  51. </div>
  52. </div>
  53. <div class="control-group">
  54. <label class="control-label"></label>
  55. <div class="controls">
  56. <i class="icon-ok icon-white"></i><input type="button" id="addMobile"
  57. class="btn btn-primary" value="确定修改"/>
  58. </div>
  59. </div>
  60. </fieldset>
  61. </form>
  62. </div>
  63. </div>
  64. <!--内容-->
  65. </div>
  66. </div>
  67. <script type="text/javascript">autoFlashHeight();</script>
  68. <script type="text/javascript">
  69. $(document).ready(function () {
  70. $("#mobile").blur(function () {
  71. $.ajax({
  72. type: "POST",
  73. dataType: "json",
  74. cache: false,
  75. data: {"mobile": $(this).val()},
  76. url: "{{rootUrl}}user/profile/check/mobile",
  77. }).done(function (data) {
  78. if (data['mobile'] > 0) {
  79. $("#input_error").addClass('error');
  80. $("#help-inline").html('手机号码已被使用');
  81. $("#help-inline").show();
  82. } else {
  83. $("#input_error").removeClass('error');
  84. $("#help-inline").hide();
  85. }
  86. });
  87. });
  88. /*仿刷新:检测是否存在cookie*/
  89. if ($.cookie("sms")) {
  90. var count = $.cookie("sms");
  91. var btn = $('#getting');
  92. btn.val('重新获取 ' + count + 's').attr('disabled', true).css('cursor', 'not-allowed');
  93. var resend = setInterval(function () {
  94. count--;
  95. if (count > 0) {
  96. btn.val('重新获取 ' + count + 's').attr('disabled', true).css('cursor', 'not-allowed');
  97. $.cookie("sms", count, {path: '/', expires: (1 / 86400) * count});
  98. } else {
  99. clearInterval(resend);
  100. btn.val("获取验证码").removeClass('disabled').removeAttr('disabled style');
  101. }
  102. }, 1000);
  103. }
  104. /*点击改变按钮状态,已经简略掉ajax发送短信验证的代码*/
  105. $('#getting').click(function () {
  106. var btn = $(this);
  107. if ($("#mobile").val() == '') {
  108. $("#input_error").addClass('error');
  109. $("#help-inline").html('手机号码不能为空');
  110. $("#help-inline").show();
  111. return false;
  112. }
  113. $.ajax({
  114. type: "POST",
  115. dataType: "json",
  116. cache: false,
  117. data: {"mobile": $("#mobile").val()},
  118. url: "{{rootUrl}}user/profile/check/mobile",
  119. }).done(function (data) {
  120. if (data['mobile'] > 0) {
  121. $("#input_error").addClass('error');
  122. $("#help-inline").html('手机号码已被使用');
  123. $("#help-inline").show();
  124. return false;
  125. } else {
  126. $("#input_error").removeClass('error');
  127. $("#help-inline").hide();
  128. $.ajax({
  129. type: "POST",
  130. dataType: "json",
  131. cache: false,
  132. data: {"mobile": $("#mobile").val()},
  133. url: "{{rootUrl}}user/profile/sms/send/verify",
  134. }).done(function (data) {
  135. });
  136. var count = 60;
  137. var resend = setInterval(function () {
  138. count--;
  139. if (count > 0) {
  140. btn.val('重新获取 ' + count + 's');
  141. $.cookie("sms", count, {path: '/', expires: (1 / 86400) * count});
  142. } else {
  143. clearInterval(resend);
  144. btn.val("获取验证码").removeAttr('disabled style');
  145. }
  146. }, 1000);
  147. btn.attr('disabled', true).css('cursor', 'not-allowed');
  148. }
  149. });
  150. });
  151. /*点击改变按钮状态,已经简略掉ajax发送短信验证的代码*/
  152. $('#addMobile').click(function () {
  153. $.ajax({
  154. type: "POST",
  155. dataType: "json",
  156. cache: false,
  157. data: {"mobile": $("#mobile").val(), "verifycode": $("#verifycode").val()},
  158. url: "{{rootUrl}}user/profile/sms/edit",
  159. }).done(function (data) {
  160. window.location.reload(true);
  161. });
  162. });
  163. });
  164. </script>
  165. </body>