AlipayHtml.ftlh 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>支付</title>
  8. <script src="/static/js/jquery.min.js"></script>
  9. <style>
  10. html {
  11. width: 100%;
  12. height: 100%;
  13. padding: 0;
  14. margin: 0;
  15. font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
  16. font-size: 14px;
  17. font-weight: 400;
  18. line-height: 1.6;
  19. }
  20. body {
  21. width: 100%;
  22. height: 100%;
  23. padding: 0;
  24. margin: 0;
  25. background: #1677ff url(/static/img/zfb.png) no-repeat top;
  26. background-size: 100%;
  27. }
  28. .overlay .overlay-img {
  29. width: 186px;
  30. height: 210px;
  31. margin-right: 15px;
  32. }
  33. .overlay .overlay-text1 {
  34. width: 272px;
  35. font-size: 16px;
  36. font-weight: bold;
  37. color: rgba(255, 255, 255, 1);
  38. line-height: 22px;
  39. margin: 15px auto 0;
  40. }
  41. .overlay .overlay-text2 {
  42. width: 272px;
  43. font-size: 13px;
  44. color: rgba(255, 255, 255, 1);
  45. line-height: 18px;
  46. margin: 15px auto 0;
  47. }
  48. .overlay {
  49. position: fixed;
  50. top: 0;
  51. right: 0;
  52. bottom: 0;
  53. left: 0;
  54. background: rgba(0, 0, 0, 0.7);
  55. display: none;
  56. }
  57. #btn-zfb {
  58. width: 100%;
  59. margin: auto;
  60. background: #ffffff;
  61. line-height: 52px;
  62. height: 52px;
  63. outline: none;
  64. color: #1677ff;
  65. font-size: 18px;
  66. letter-spacing: 3px;
  67. font-weight: 400;
  68. border-radius: 8px;
  69. border: none;
  70. }
  71. #btn-zfb:active {
  72. background: rgba(240, 240, 240, 1);
  73. }
  74. #btn-finish:active {
  75. background: rgba(0, 0, 0, 0.03);
  76. }
  77. #btn-finish {
  78. width: 100%;
  79. line-height: 50px;
  80. height: 52px;
  81. outline: none;
  82. font-size: 18px;
  83. letter-spacing: 3px;
  84. font-weight: 400;
  85. border-radius: 8px;
  86. margin: 20px auto 0 auto;
  87. border: 2px solid #ffffff;
  88. color: #ffffff;
  89. background: none;
  90. }
  91. .btns {
  92. width: 80%;
  93. display: flex;
  94. align-items: center;
  95. justify-content: center;
  96. position: absolute;
  97. left: 0;
  98. right: 0;
  99. top: 0;
  100. bottom: 0;
  101. margin: auto;
  102. flex-direction: column;
  103. }
  104. .btns a {
  105. width: 100%;
  106. }
  107. </style>
  108. </head>
  109. <body>
  110. <div class="overlay" id="overlay">
  111. <div style="text-align: right"><img class="overlay-img" src="/static/img/zhifu_img_liulanqi_ios.png" alt=""/>
  112. </div>
  113. <div class="overlay-text1">请点击右上角,选择在默认浏览器中打开然后继续完成支付</div>
  114. <div class="overlay-text2">注:由于微信限制,需要在浏览器中打开才可以完成支付宝支付</div>
  115. </div>
  116. <div class="btn-wrapper" style="display: none">
  117. <div class="btns">
  118. <a id="link" href="alipays://platformapi/startapp?saId=10000007&qrcode=${payUrl?no_esc}">
  119. <button id="btn-zfb">打开支付宝</button>
  120. </a>
  121. <a id="" href="/9th/orders">
  122. <button id="btn-finish">我已完成支付</button>
  123. </a>
  124. </div>
  125. </div>
  126. <script>
  127. function GetQueryString(name) {
  128. var after = window.location.href.split("?")[1];
  129. if (after) {
  130. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  131. var r = after.match(reg);
  132. if (r != null) {
  133. return decodeURIComponent(r[2]);
  134. } else {
  135. return null;
  136. }
  137. }
  138. }
  139. setInterval(function () {
  140. $.get('/order/${orderId}/status', function (data) {
  141. console.log(data);
  142. if (data.status !== 'NOT_PAID') {
  143. switch (data.projectId) {
  144. case 0:
  145. window.location = '/9th/orderDetail?id=${orderId}';
  146. break;
  147. case 1:
  148. window.location = '/cosmos/orderDetail?id=${orderId}';
  149. break;
  150. }
  151. }
  152. });
  153. }, 1000);
  154. window.onload = function () {
  155. console.log('onload');
  156. if (/micromessenger/i.test(navigator.userAgent)) {
  157. $('.overlay').fadeIn();
  158. } else {
  159. $('.btn-wrapper').fadeIn();
  160. setTimeout(function () {
  161. $('#link')[0].click();
  162. }, 100);
  163. }
  164. }
  165. </script>
  166. </body>
  167. </html>