service_pay_result.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  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="referrer" content="origin">
  7. <meta name="viewport"
  8. content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  9. <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  10. <title>支付完成</title>
  11. <script type="text/javascript" charset="UTF-8" src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js">
  12. </script>
  13. <script type="text/javascript" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  14. <style>
  15. body {
  16. font-family: PingFang SC, "Helvetica Neue", Arial, sans-serif;
  17. }
  18. .order_box {
  19. text-align: center;
  20. }
  21. .order_box .bussiness_avt img {
  22. width: 68px;
  23. height: 68px;
  24. border-radius: 100%;
  25. border: 1px solid #E0E0E0;
  26. }
  27. .b_name {
  28. font-size: 14px;
  29. font-weight: 500;
  30. color: #333333;
  31. margin-top: 6px;
  32. }
  33. .col_box {
  34. margin-top: 35px;
  35. }
  36. .col_box .col {
  37. display: -webkit-box;
  38. display: -ms-flexbox;
  39. display: -webkit-flex;
  40. display: flex;
  41. -webkit-box-align: center;
  42. -ms-flex-align: center;
  43. -webkit-align-items: center;
  44. align-items: center;
  45. -webkit-box-pack: justify;
  46. -ms-flex-pack: justify;
  47. -webkit-justify-content: space-between;
  48. justify-content: space-between;
  49. font-size: 14px;
  50. color: #333;
  51. margin-bottom: 14px;
  52. }
  53. .col .ct.price {
  54. color: #E61515
  55. }
  56. .btns {
  57. display: -webkit-box;
  58. display: -ms-flexbox;
  59. display: -webkit-flex;
  60. display: flex;
  61. -webkit-box-pack: justify;
  62. -ms-flex-pack: justify;
  63. -webkit-justify-content: space-between;
  64. justify-content: space-between;
  65. margin-top: 31px;
  66. }
  67. .btns .btn {
  68. width: 100%;
  69. height: 35px;
  70. line-height: 35px;
  71. font-size: 14px;
  72. border-radius: 39px;
  73. border: 1px solid #CD2314;
  74. box-sizing: border-box;
  75. color: #CD2314;
  76. }
  77. .btns .btn.detail {
  78. background: linear-gradient(270deg, #D51010 0%, #EF4D2D 100%);
  79. color: #fff;
  80. }
  81. </style>
  82. </head>
  83. <body>
  84. <div class="order_box">
  85. <div class="bussiness_avt">
  86. <img id="b_avt" src="" alt="">
  87. </div>
  88. <div class="b_name" id="b_name">
  89. </div>
  90. <div class="col_box">
  91. <div class="col">
  92. <div class="lab">产品名称</div>
  93. <div id="p_name" class="ct">产品名称</div>
  94. </div>
  95. <div class="col">
  96. <div class="lab">实付金额</div>
  97. <div id="price" class="ct price">¥</div>
  98. </div>
  99. </div>
  100. <div class="btns">
  101. <!-- <div id="backHome" class="btn home">返回首页</div> -->
  102. <div id="toOrder" class="btn detail">查看详情</div>
  103. </div>
  104. </div>
  105. <script>
  106. //获取返回页面参数
  107. function getQueryString(name) {
  108. var query = window.location.search.substring(1);
  109. var vars = query.split("&");
  110. for (var i = 0; i < vars.length; i++) {
  111. var pair = vars[i].split("=");
  112. if (pair[0] == name) {
  113. return pair[1];
  114. }
  115. }
  116. return null;
  117. };
  118. //获取参数
  119. var sub_mch_id = getQueryString("sub_mch_id"); //特约商户号
  120. console.log("sub_mch_id is " + sub_mch_id)
  121. var out_trade_no = getQueryString("out_trade_no"); //商户订单号
  122. console.log("out_trade_no is " + out_trade_no)
  123. var check_code = getQueryString("check_code"); //md5 校验码
  124. console.log("check_code is " + check_code)
  125. $.ajax({
  126. type: "GET",
  127. url: "https://qhcs.yhlsm.com/api/service_pay_result",
  128. data: {
  129. sub_mch_id: sub_mch_id,
  130. out_trade_no: out_trade_no
  131. },
  132. dataType: "json",
  133. success: function (data) {
  134. console.log(data)
  135. if (data.msg == "success") {
  136. var info = data.data;
  137. const img = document.getElementById('b_avt');
  138. img.src = info.site_logo
  139. $("#b_name").html(info.site_name)
  140. $("#p_name").html(info.goods_name)
  141. $("#price").html(info.pay_price)
  142. //初始化小票
  143. var initData = {
  144. action: 'onIframeReady',
  145. displayStyle: 'SHOW_CUSTOM_PAGE'
  146. }
  147. var initPostData = JSON.stringify(initData)
  148. parent.postMessage(initPostData, 'https://payapp.weixin.qq.com')
  149. //注册点击事件(去详情)
  150. document.getElementById("toOrder").onclick = () => {
  151. var mchData = {
  152. action: 'jumpOut',
  153. jumpOutUrl: info.jump_url //跳转的页面
  154. }
  155. var postData = JSON.stringify(mchData)
  156. parent.postMessage(postData, 'https://payapp.weixin.qq.com')
  157. }
  158. }
  159. }
  160. });
  161. </script>
  162. </body>
  163. </html>