bind-id.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="Cache-Control" content="no-cache,no-store,must-revalidate">
  6. <meta http-equiv="pragma" content="no-cache">
  7. <meta http-equiv="expires" content="0">
  8. <meta name="author" content="">
  9. <meta name="description" content="">
  10. <meta name="keywords" content="扫码支付,线上投币,运营数据,物联网"/>
  11. <meta name="format-detection" content="telephone=no,email=no">
  12. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  13. <title>绑定消息通知微信</title>
  14. <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.min.css">
  15. <link rel="stylesheet" href="../components/custom/css/common.css">
  16. <link rel="stylesheet" href="css/xyf.common.min.css">
  17. <style>
  18. .attention{
  19. overflow: hidden;
  20. border-radius: 50%;
  21. }
  22. .attention img{
  23. display: none;
  24. }
  25. .bind-panel, #submitBtn {
  26. display: block;
  27. }
  28. .bound .bind-panel, .bound #submitBtn {
  29. display: none;
  30. }
  31. .info-panel, #changeWechatBtn {
  32. display: none;
  33. }
  34. .bound .info-panel, .bound #changeWechatBtn {
  35. display: block;
  36. }
  37. </style>
  38. </head>
  39. <body class="bound">
  40. <div class="info-panel">
  41. <div class="attention"><img src="#" /></div>
  42. <h5 class="mui-text-center mui-content-padded font-b-16 "><span class="nickname"></span> <i
  43. class="sex iconfont"></i>
  44. </h5>
  45. </div>
  46. <div class="bind-panel">
  47. <p class="mui-content-padded">请绑定您的微信账号,方便消息推送到您的微信</p>
  48. <div class="mui-input-group custom-top">
  49. <div class="input-row code input-clear">
  50. <input id="code" type="tel" maxlength="4" placeholder="验证码">
  51. <button id="sendBtn" type="button" onclick="sendCode()">获取验证码</button>
  52. </div>
  53. </div>
  54. </div>
  55. <div class="custom-subt">
  56. <input type="button" class="mui-btn-block btn-red" id="changeWechatBtn" value="更换绑定" onclick="changeWechat()">
  57. <input type="button" class="mui-btn-block " id="submitBtn" value="绑定当前登录的微信" onclick="bindWechat()">
  58. <input type="button" class="mui-btn-block custom-top btn-gray" value="返回" onclick="history.back()">
  59. </div>
  60. <script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script>
  61. <script src="https://cdn.washpayer.com/components/lib/mui.min.js"></script>
  62. <script src="js/xyf.common.js"></script>
  63. <script src="/components/custom/js/common.js"></script>
  64. <script>
  65. //检测是否绑定
  66. sendRequest("/dealer/getBoundWeiXinId", "GET", {}, function (res) {
  67. if (res.result == 1) {
  68. var obj = res.para;
  69. if (obj.bound) {
  70. if (obj.avatar) {
  71. $(".attention img").attr("src", obj.avatar).show();
  72. }
  73. if (obj.nickname) {
  74. $(".nickname").text(obj.nickname)
  75. }
  76. var genderDom = $(".sex");
  77. if (obj.sex == 1) {
  78. genderDom.addClass("c-primary icon-male");
  79. } else if (obj.sex == 2) {
  80. genderDom.addClass("c-red icon-female");
  81. }
  82. $("body").addClass("bound");
  83. } else {
  84. $("body").removeClass("bound");
  85. }
  86. }
  87. }
  88. );
  89. var sendBtn = document.getElementById('sendBtn');
  90. function sendCode() {
  91. var url = "/dealer/getDealerBindWechatSMSCode";
  92. var t = 60;
  93. sendBtn.innerHTML = t + " s";
  94. sendBtn.disabled = true;
  95. sendRequest(url, "GET", {}, function (res) {
  96. if (res.result == 1) {
  97. mui.toast("发送成功");
  98. var interval = setInterval(function () {
  99. if (t == 0) {
  100. sendBtn.innerHTML = "重新获取";
  101. sendBtn.disabled = false;
  102. clearInterval(interval);
  103. } else {
  104. t -= 1;
  105. sendBtn.innerHTML = t + " s";
  106. sendBtn.disabled = true;
  107. }
  108. }, 1000);
  109. } else {
  110. mui.toast(res.description);
  111. }
  112. });
  113. }
  114. function changeWechat() {
  115. $("body").removeClass("bound");
  116. }
  117. function bindWechat() {
  118. var code = $("#code").val();
  119. //检查验证码
  120. var codeReg = /^\d{4}$/;
  121. if (!codeReg.test(code)) {
  122. mui.toast("请输入正确的验证码");
  123. return;
  124. }
  125. var url = "/dealer/verifyNewWechatBinding";
  126. myAjax({
  127. type: "POST",
  128. url: url,
  129. mask: "请稍候...",
  130. data: { "code": code },
  131. dataType: "json",
  132. success: function(response) {
  133. if (response.result == 1) {
  134. window.location.replace(response.data.redirect_uri)
  135. } else {
  136. mui.alert(response.description, '温馨提示', '我知道了');
  137. }
  138. }
  139. });
  140. }
  141. var callbackResult = getQueryString('result')
  142. if (callbackResult === 'ok'){
  143. mui.alert('绑定成功', '温馨提示', '我知道了')
  144. } else if(callbackResult === 'error'){
  145. mui.alert('绑定失败,请重新操作','温馨提示', '我知道了')
  146. }
  147. </script>
  148. </body>
  149. </html>