code.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  9. </head>
  10. <body>
  11. <div class="body">
  12. <h2 style="margin-bottom:50px;">客户手机号认证</h2>
  13. <div style="margin-bottom: 20px;">
  14. <input id="test" name="test" type="text" placeholder="输入验证码" />
  15. </div>
  16. <div>
  17. <button id="code" style="background-color:#ffa133;">获取验证码</button>
  18. <button id="tijiao" style="background-color:#95bbff;">提交</button>
  19. </div>
  20. </div>
  21. </body>
  22. <script>
  23. //获取url中的参数
  24. function getQueryString(name) {
  25. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  26. var r = window.location.search.substr(1).match(reg);
  27. if (r != null) return unescape(r[2]); return null;
  28. }
  29. var baseurl = getQueryString("baseurl");
  30. var orderno = getQueryString("orderno");
  31. // var baseurl = 'http://test.baoxianzhanggui.com:8080';
  32. // var orderno = '1554408865628139520';
  33. $("#code").click(function () {
  34. $.ajax({
  35. contentType: "application/json",
  36. type: "post", // 请求方式
  37. data: JSON.stringify({
  38. orderno: orderno,
  39. }),
  40. url: baseurl + "/api/yongan/getMessage", // 请求路径
  41. dataType: "json", // 预期返回一个 json 类型数据
  42. success: function (data) { // data是形参名,代表返回的数据
  43. console.log(data)
  44. }
  45. });
  46. });
  47. $("#tijiao").click(function () {
  48. var code = $("input").val();
  49. $.ajax({
  50. contentType: "application/json",
  51. type: "post", // 请求方式
  52. data: JSON.stringify({
  53. orderno: orderno,
  54. verificationCode: code,
  55. }),
  56. url: baseurl + "/api/yongan/getPayUrl", // 请求路径
  57. dataType: "json", // 预期返回一个 json 类型数据
  58. success: function (data) { // data是形参名,代表返回的数据
  59. console.log(data)
  60. if (data.code == '200') {
  61. window.location.href = data.msg;
  62. }
  63. }
  64. });
  65. });
  66. </script>
  67. </html>
  68. <style>
  69. .body {
  70. padding: 30px;
  71. width: 100%;
  72. height: auto;
  73. box-sizing: border-box;
  74. display: flex;
  75. flex-direction: column;
  76. align-items: center;
  77. position: absolute;
  78. top: 0;
  79. left: 0;
  80. bottom: 0;
  81. right: 0;
  82. margin: auto;
  83. }
  84. input {
  85. outline-style: none;
  86. border: 1px solid #ccc;
  87. border-radius: 3px;
  88. padding: 13px 14px;
  89. width: 250px;
  90. font-size: 14px;
  91. font-weight: 700;
  92. font-family: "Microsoft soft";
  93. }
  94. input:focus {
  95. border-color: #66afe9;
  96. outline: 0;
  97. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  98. box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
  99. }
  100. button {
  101. border: none;
  102. width: 130px;
  103. height: 40px;
  104. border-radius: 10px;
  105. color: #fff;
  106. }
  107. </style>