wxPayCallback - 副本.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6. <link rel="shortcut icon" type="image/x-icon" href="./../favicon.ico">
  7. <title>城市智慧停车中转页面</title>
  8. <style type="text/css">
  9. html,
  10. body,
  11. div {
  12. margin: 0;
  13. padding: 0;
  14. }
  15. .container {
  16. height: calc(100% - 26vh);
  17. padding: 13vh 0;
  18. text-align: center;
  19. background: linear-gradient(138deg, #7EBAB8 0%, #48999A 100%);
  20. box-shadow: 0px 2px 4px 0px #0B7C7D;
  21. }
  22. .text-img {
  23. height: 21vh;
  24. background-size: contain;
  25. background-repeat: no-repeat;
  26. background-position: center center;
  27. background-image: url('./../img/text-html-bg.png');
  28. }
  29. .car-img {
  30. height: 40vh;
  31. margin-top: 39px;
  32. background-size: contain;
  33. background-repeat: no-repeat;
  34. background-position: 19px center;
  35. background-image: url('./../img/car-html-bg.png');
  36. }
  37. .button {
  38. width: calc(100% - 84px);
  39. height: 6vh;
  40. margin-top: 4vh;
  41. outline: none;
  42. border: none;
  43. background: #FFFFFF;
  44. box-shadow: 0px 7px 13px 0px rgba(0, 105, 106, 0.26);
  45. border-radius: 10px;
  46. font-size: 1.1em;
  47. font-weight: 500;
  48. color: #1D8587;
  49. font-family: 'PingFangSC-Medium, PingFang SC';
  50. }
  51. </style>
  52. </head>
  53. <body>
  54. <div class="container">
  55. <div class="text-img"></div>
  56. <div class="car-img"></div>
  57. <button type="button" class="button" onclick="goToBgzchina()">回到普定智慧停车</button>
  58. </div>
  59. <!-- <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> -->
  60. <script type="text/javascript" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  61. <script type="text/javascript" charset="UTF-8" src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js"></script>
  62. <script>
  63. // 测试环境
  64. // const baseUrl = 'https://wx.hw.hongweisoft.com/parking'
  65. // 正式环境
  66. const baseUrl = 'https://parking.pdzhtc.com'
  67. // 初始化console.log(?)
  68. // const vConsole = new VConsole();
  69. // 尽量在页面加载完成后实现“点金计划”的相关代码
  70. // 函数-获取返回页面参数
  71. function getParameters(key) {
  72. const params = window.location.search.substring(1);
  73. const vars = params.split("&");
  74. for (let i = 0; i < vars.length; i++) {
  75. const kvPair = vars[i].split("=");
  76. if (kvPair[0] == key) return kvPair[1];
  77. }
  78. return null;
  79. };
  80. // end getParameters(key)
  81. //测试微信通知过来的参数【非必需】
  82. var sub_mch_id = getParameters("sub_mch_id"); //特约商户号
  83. console.log("1、特约商户号=" + sub_mch_id);
  84. var out_trade_no = getParameters("out_trade_no"); //商户订单号
  85. console.log("2、商户订单号=" + out_trade_no);
  86. var check_code = getParameters("check_code"); //md5校验码。如果需要计算(参考说明文档)校验则需要后台完成
  87. console.log("3、md5校验码=" + check_code);
  88. // 跳转地址
  89. let jump_url = 'https://h5.pdzhtc.com'
  90. if (out_trade_no) {
  91. getOrderId(out_trade_no)
  92. }
  93. //初始化微信点金计划小票【必需,否则在微信不能展示该页面】
  94. let mchData = {
  95. action: 'onIframeReady',
  96. displayStyle: 'SHOW_CUSTOM_PAGE',
  97. height: 960,
  98. };
  99. //高度可选(参考说明文档)
  100. const postData = JSON.stringify(mchData);
  101. parent.postMessage(postData, 'https://payapp.weixin.qq.com');
  102. //测试跳转到其他页面【非必需】
  103. function goToBgzchina() {
  104. const mchData = {
  105. action: 'jumpOut',
  106. jumpOutUrl: jump_url // 要跳转到的页面。注意:不支持跳转到小程序
  107. };
  108. const postData = JSON.stringify(mchData);
  109. parent.postMessage(postData, 'https://payapp.weixin.qq.com');
  110. }
  111. // end goToBgzchina
  112. // 通过商户订单号获取跳转地址
  113. function getOrderId(id) {
  114. const localToken = JSON.parse(localStorage.getItem('lifeData') ?? '{}')
  115. const token = localToken?.data?.vuex_token
  116. $.ajax({
  117. //请求方式
  118. type : "get",
  119. //请求地址
  120. url : baseUrl + '/client/orderinfo/orderListByPoly/' + id,
  121. // token
  122. beforeSend: function(request) {
  123. request.setRequestHeader("Authorization", 'Bearer ' + token);
  124. },
  125. //请求成功
  126. success: function(result) {
  127. if (result.code === 200) {
  128. jump_url = result?.data?.jumpUrl ?? 'https://h5.pdzhtc.com'
  129. } else {
  130. alert(result.msg)
  131. }
  132. },
  133. //请求失败,包含具体的错误信息
  134. error: function(e){
  135. alert('程序错误!')
  136. }
  137. });
  138. }
  139. </script>
  140. </body>
  141. </html>