pay_special.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
  7. <title>特殊支付</title>
  8. <style>
  9. .FlexColumn {
  10. display: flex;
  11. flex-direction: column;
  12. align-items: center;
  13. justify-content: center;
  14. }
  15. .FlexRow {
  16. display: flex;
  17. flex-direction: row;
  18. align-items: center;
  19. justify-content: center;
  20. }
  21. .container {
  22. width:100%;
  23. padding: 0;
  24. margin: auto 0;
  25. }
  26. .panelBottom{
  27. width:100%;
  28. height:70px;
  29. background-color: #329468;
  30. position: fixed;
  31. bottom:0;
  32. z-index: 10;
  33. }
  34. .panelBottom1{
  35. margin-left: 15px;
  36. align-items: flex-start;
  37. }
  38. .text1{
  39. font-size:12px;
  40. color:#fff;
  41. }
  42. .text2{
  43. font-size:18px;
  44. color:#fff;
  45. }
  46. .btnPay{
  47. width:190px;
  48. height:50px;
  49. border-radius: 5px;
  50. background-color: #FFDD0C;
  51. color:#1e1e1e;
  52. font-size:24px;
  53. text-align: center;
  54. line-height: 50px;
  55. font-weight: 500;
  56. margin-right: 15px;
  57. }
  58. .panel{
  59. width:100%;
  60. }
  61. .panelChild{
  62. width:100%;
  63. }
  64. .text3{
  65. width: 30%;
  66. text-align: center;
  67. background-color: #eeeeee;
  68. line-height: 50px;
  69. }
  70. .text4{
  71. flex:1;
  72. margin-left: 10px;
  73. }
  74. .text5{
  75. flex:1;
  76. text-align: center;
  77. font-size:24px;
  78. line-height: 50px;
  79. }
  80. </style>
  81. <script src="js/jquery-1.6.4.min.js"></script>
  82. <script>
  83. var serverurl1='[支付链接]';
  84. $(document).ready(function () {
  85. $(".btnPay").click(function(){
  86. var param={};
  87. param.money=$(this).attr("title");
  88. param.code=QueryString("code");
  89. $.post("/apiData/"+serverurl1, param, function (data) {
  90. onBridgeReady(data);
  91. });
  92. });
  93. });
  94. function onBridgeReady(data){
  95. console.log(data);
  96. WeixinJSBridge.invoke(
  97. 'getBrandWCPayRequest', data.result,
  98. function(res){
  99. if(res.err_msg === "get_brand_wcpay_request:ok" ){
  100. window.location.href = "https://www.kylx365.com/webpay?url=webpayok";
  101. }
  102. else {
  103. window.location.href = "https://www.kylx365.com/webpay";
  104. }
  105. });
  106. }
  107. function QueryString(key) {
  108. var paras = location.search;
  109. if (paras) {
  110. var arr = paras.substr(1).split("&"), data;
  111. for (i in arr) {
  112. data = arr[i].split("=");
  113. if (data[0] == key) {
  114. return data[1].replace("__","=").replace("_","?");
  115. }
  116. }
  117. }
  118. }
  119. </script>
  120. </head>
  121. <body class="container FlexColumn">
  122. <div class="panel FlexColumn">
  123. <div class="panelChild FlexRow">
  124. <div class="text5">代缴费</div>
  125. </div>
  126. <div class="panelChild FlexRow">
  127. <div class="text3">支付人</div>
  128. <div class="text4">紫叶</div>
  129. </div>
  130. <div class="panelChild FlexRow">
  131. <div class="text3">受惠人</div>
  132. <div class="text4">小王珂</div>
  133. </div>
  134. <div class="panelChild FlexRow">
  135. <div class="text3">支付</div>
  136. <div class="text4">149元</div>
  137. </div>
  138. <div class="panelChild FlexRow">
  139. <div class="text3">内容</div>
  140. <div class="text4">提前续费1年享4折优惠,额外加送30天有效期</div>
  141. </div>
  142. </div>
  143. <div class="panelBottom FlexRow">
  144. <button class="btnPay" title="1.00">支付</button>
  145. </div>
  146. <div style="height:50px"></div>
  147. </body>
  148. </html>