receipt.html 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <!DOCTYPE html>
  2. <html class="remModel">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8">
  6. <meta http-equiv="Cache-Control" content="no-cache,must-revalidate">
  7. <meta http-equiv="pragma" content="no-cache">
  8. <meta http-equiv="expires" content="0">
  9. <meta name="format-detection" content="telephone=no,email=no">
  10. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  11. <title>支付完成</title>
  12. <link rel="stylesheet" href="/components/lib/mui.min.css">
  13. <link rel="stylesheet" href="/components/custom/css/common.css">
  14. <style>
  15. html, body {
  16. background: #fff;
  17. }
  18. /*不能占太多的空间,否则小票在微信点击页面显示不下*/
  19. body {
  20. padding: 5px;
  21. height: 100%;
  22. width: 100%;
  23. position: absolute;
  24. }
  25. </style>
  26. </head>
  27. <body class="">
  28. <div class="order-box">
  29. <div class="order-info">
  30. <div class="order-ins">
  31. <div class="icon-ins"></div>
  32. </div>
  33. <div class="order-row main-row">
  34. <div class="order-lab">支付单号</div>
  35. <div class="order-value" id="orderNo"></div>
  36. </div>
  37. <div class="order-row">
  38. <div class="order-lab" id="p_name_label"></div>
  39. <div class="order-value" id="p_name"></div>
  40. </div>
  41. <div class="order-row">
  42. <div class="order-lab">支付金额</div>
  43. <div class="order-value" id="price">¥</div>
  44. </div>
  45. </div>
  46. <div class="order-split">
  47. </div>
  48. <div class="order-p-b">
  49. <div class="order-status">
  50. <div class="order-icon loading"></div>
  51. <div class="order-tips">正在启动设备</div>
  52. <div class="order-sub-tips"></div>
  53. </div>
  54. <div class="order-btn-row">
  55. <div class="order-btn hide" id="backHome"><i class="iconfont icon-home"></i> 首页</div>
  56. <div class="order-btn hide" id="serviceBtn"><i class="iconfont icon-service"></i> 客服</div>
  57. <div class="order-btn hide" id="toOrder"><i class="iconfont icon-form"></i> 详情</div>
  58. </div>
  59. </div>
  60. </div>
  61. <script charset="UTF-8"
  62. src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js"></script>
  63. <script src="https://cdn.washpayer.com/npm/jquery@3.3.1/dist/jquery.min.js"></script>
  64. <script>!window.jQuery && document.write(unescape('%3Cscript src="/static/js/jquery.min.js"%3E%3C/script%3E'))</script>
  65. <script src="/components/lib/mui.min.js"></script>
  66. <script src="/components/custom/js/common.js"></script>
  67. <script src="/components/custom/js/receipt.js"></script>
  68. <script>
  69. /**
  70. * 本页面配置在微信后台的支付回调链接,是微信官方支持小票页面;
  71. */
  72. function plusString(str, frontLen, endLen) {
  73. var len = str.length - frontLen - endLen;
  74. if (len <= 0) {
  75. return str
  76. }
  77. var startStr = '';
  78. for (var i = 0; i < len; i++) {
  79. startStr += '*';
  80. }
  81. return str.substring(0, frontLen) + startStr + str.substring(str.length - endLen);
  82. }
  83. //获取参数
  84. var sub_mch_id = getQueryString("sub_mch_id"); //特约商户号
  85. console.log("sub_mch_id is " + sub_mch_id)
  86. var out_trade_no = getQueryString("out_trade_no"); //商户订单号
  87. console.log("out_trade_no is " + out_trade_no)
  88. var check_code = getQueryString("check_code"); //md5 校验码
  89. console.log("check_code is " + check_code)
  90. var startKey = null;
  91. var devNo = null;
  92. var homeLink = null;
  93. var detailLink = null;
  94. var serviceLink = null;
  95. sendRequest("/common/getReceipt", "GET", {
  96. sub_mch_id: sub_mch_id,
  97. out_trade_no: out_trade_no,
  98. check_code: check_code
  99. }, function (data) {
  100. if (data.result == 1) {
  101. var info = data.payload;
  102. startKey = info.startKey
  103. devNo = info.devNo
  104. homeLink = info.homeLink
  105. serviceLink = info.serviceLink
  106. $("#orderNo").html(plusString(info.orderNo, 8, 8))
  107. $("#p_name").html(info.itemName)
  108. $("#price").html('¥' + info.payment)
  109. if (!startKey) {
  110. detailLink = info.detailLink
  111. $("#p_name_label").text("购买商品")
  112. orderEvent.noDeviceOrder()
  113. } else {
  114. $("#p_name_label").text("启动设备")
  115. localStorage.setItem("RECEIPT_START_TIME", new Date().getTime())
  116. orderEvent.getUserStatusInterval()
  117. }
  118. //注册点击事件(去详情)
  119. document.getElementById("toOrder").onclick = function () {
  120. var mchData = {
  121. action: 'jumpOut',
  122. jumpOutUrl: detailLink //跳转的页面
  123. }
  124. var postData = JSON.stringify(mchData)
  125. parent && parent.postMessage(postData, 'https://payapp.weixin.qq.com')
  126. }
  127. //注册点击事件(去首页)
  128. document.getElementById("backHome").onclick = function () {
  129. var mchData = {
  130. action: 'jumpOut',
  131. jumpOutUrl: homeLink //跳转的页面
  132. }
  133. var postData = JSON.stringify(mchData)
  134. parent && parent.postMessage(postData, 'https://payapp.weixin.qq.com')
  135. }
  136. $('#backHome').removeClass('hide')
  137. //注册点击事件(客服页面)
  138. document.getElementById("serviceBtn").onclick = function () {
  139. var mchData = {
  140. action: 'jumpOut',
  141. jumpOutUrl: serviceLink
  142. }
  143. var postData = JSON.stringify(mchData)
  144. parent && parent.postMessage(postData, 'https://payapp.weixin.qq.com')
  145. }
  146. //初始化小票
  147. var initData = {
  148. action: 'onIframeReady',
  149. displayStyle: 'SHOW_CUSTOM_PAGE'
  150. }
  151. var initPostData = JSON.stringify(initData)
  152. parent && parent.postMessage(initPostData, 'https://payapp.weixin.qq.com')
  153. $('.order-ins').click(function (){
  154. location.href = '/user/index.html#/insurance/compensate'
  155. })
  156. }
  157. });
  158. </script>
  159. </body>
  160. </html>