h5pay.hbs 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <!DOCTYPE html>
  2. <html lang="zh-cmn-Hans" class="h-full">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7. <link
  8. rel="stylesheet"
  9. type="text/css"
  10. href="https://res.wx.qq.com/t/wx_fed/weui-source/res/2.5.16/weui.min.css"
  11. />
  12. <script type="text/javascript" src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
  13. <script src="https://unpkg.com/eruda@3.0.0/eruda.js"></script>
  14. <script src="https://cdn.tailwindcss.com"></script>
  15. <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  16. <title>支付</title>
  17. <style>
  18. body {
  19. margin: 0;
  20. background-color: var(--weui-BG-0);
  21. }
  22. html {
  23. }
  24. </style>
  25. </head>
  26. <body class="h-full">
  27. <div id="pay" class="weui-msg" style="display: none">
  28. <div class="weui-msg__text-area">
  29. <p class="weui-msg__desc text-5xl">¥{{price}}</p>
  30. <p class="weui-msg__desc-primary text-lg">ChillGPT会员</p>
  31. </div>
  32. <div class="weui-msg__opr-area">
  33. <p class="weui-btn-area">
  34. <a href="javascript:pay();" role="button" class="weui-btn weui-btn_primary">立即支付</a>
  35. </p>
  36. </div>
  37. </div>
  38. <div id="success" class="weui-msg h-full" style="display: none">
  39. <div class="weui-msg__icon-area">
  40. <i class="weui-icon-success weui-icon_msg"></i>
  41. </div>
  42. <div class="weui-msg__text-area">
  43. <h2 class="weui-msg__title">支付成功</h2>
  44. {{!--
  45. <p class="weui-msg__desc">内容详情,可根据实际需要安排,如果换行则不超过规定长度,居中展现</p>
  46. --}}
  47. </div>
  48. <div class="weui-msg__opr-area">
  49. <p class="weui-btn-area">
  50. <a href="javascript:history.back();" role="button" class="weui-btn weui-btn_primary">关闭</a>
  51. </p>
  52. </div>
  53. </div>
  54. <div id="error" class="weui-msg" style="display: none">
  55. <div class="weui-msg__icon-area">
  56. <i class="weui-icon-warn weui-icon_msg"></i>
  57. </div>
  58. <div class="weui-msg__text-area">
  59. <h2 id="errtitle" class="weui-msg__title">操作失败</h2>
  60. <p id="errmsg" class="weui-msg__desc"></p>
  61. </div>
  62. <div class="weui-msg__opr-area">
  63. <p class="weui-btn-area">
  64. <a href="javascript:history.back();" role="button" class="weui-btn weui-btn_default">关闭</a>
  65. </p>
  66. </div>
  67. </div>
  68. <script>
  69. eruda.init();
  70. </script>
  71. <script>
  72. var viewData = {
  73. success: {{ success }},
  74. message: '{{ message }}',
  75. errorCode: {{ errorCode }},
  76. data: {{{ jsapiData}}},
  77. };
  78. $.post('/api/weixin/jsapiSign', { url: window.location.href }, function (res) {
  79. res.jsApiList = [
  80. 'chooseWXPay',
  81. 'updateAppMessageShareData',
  82. 'updateTimelineShareData',
  83. 'hideAllNonBaseMenuItem',
  84. 'scanQRCode',
  85. ];
  86. wx.config(res);
  87. wx.error(function (res) {
  88. console.log('jssdk error', res);
  89. });
  90. });
  91. if (!viewData.success) {
  92. $('#errtitle').html('发生错误');
  93. $('#errmsg').html(viewData.message);
  94. $('#error').show();
  95. } else {
  96. $('#pay').show();
  97. wx.ready(function (res) {
  98. console.log('jssdk ready', res);
  99. pay();
  100. });
  101. }
  102. function pay() {
  103. var config = viewData.data;
  104. config.success = function () {
  105. showSuccess('支付成功');
  106. };
  107. wx.chooseWXPay(config);
  108. }
  109. </script>
  110. </body>
  111. </html>